/*
 * Teatr Komedia, styl wlasnej tresci wtyczki.
 *
 * Kolory i kroje nie stoja tu na sztywno tam, gdzie da sie ich uniknac: motyw
 * BeTheme wystawia zmienne, wiec karty i terminy dziedzicza palete z presetu
 * komedia-jasny i nie rozjada sie, gdy teatr kiedys zmieni barwy w Theme Options.
 * Tam, gdzie zmiennej nie ma, stoi czerwien z logo (#D81E2C) jako wartosc zapasowa.
 */

/* --- uklad podstrony spektaklu ------------------------------------------ */

/*
 * Dwie kolumny: opis po lewej, pasek zakupu po prawej. Pasek jest sticky, wiec
 * jedzie z widzem przy przewijaniu i przycisk "Kup bilet" jest zawsze pod reka.
 * Wzorzec podsunal klient, teatrateneum.pl robi to samo.
 *
 * 340 px to szerokosc, przy ktorej data z dniem tygodnia ("sobota, 24 pazdziernika,
 * 20:00") miesci sie w jednej linii. Wezej zaczyna sie lamac i pasek wyglada
 * na rozsypany.
 */

.komedia-uklad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
  align-items: start;
}

.komedia-kolumna-boczna { position: sticky; top: 110px; }

/* Plakat w pasku bocznym, w pelnym rozmiarze i bez przycinania. Pionowy format
   plakatow teatru pasuje tu lepiej niz nad trescia, a przy okazji stoi tuz nad
   przyciskiem zakupu. */
.komedia-plakat { margin-bottom: 20px; }
.komedia-plakat img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.komedia-opis { margin-bottom: 36px; line-height: 1.6; }

/* Opisy z biletomatu przychodza jako jedno zdanie = jeden akapit, czesto
   z pustymi <p></p> pomiedzy. Przy domyslnym odstepie motywu (15 px) i interlinii
   30 px tekst wygladal na rozstrzelony, jak lista hasel (uwaga klienta 2026-10-17).
   Mniejszy odstep miedzy akapitami skleja zdania w czytelny blok, a puste
   akapity nie dokladaja niczego. */
.komedia-opis p { margin: 0 0 .45em; }
.komedia-opis p:empty { display: none; }

/* --- metryka spektaklu --------------------------------------------------- */

.komedia-metryka {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr;
  gap: 10px 24px;
  margin: 0 0 40px;
  padding: 24px 28px;
  background: var(--mfn-color-alt-bg, #F2ECE8);
  border-radius: 6px;
}
.komedia-metryka dt {
  margin: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .82em;
  opacity: .72;
}
.komedia-metryka dd { margin: 0; }

/*
 * Nazwisko osoby z zespolu jako link do jej miejsca na podstronie Zespol.
 * Podkreslenie, a nie kolor: metryka jest zwarta, a kilka czerwonych nazwisk
 * obok siebie czytaloby sie jak lista bledow. Kolor wchodzi dopiero pod kursorem.
 */
.komedia-osoba {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--mfn-color-border, #C8BDB8);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}

.komedia-osoba:hover,
.komedia-osoba:focus-visible {
  color: var(--mfn-color-primary, #D81E2C);
  text-decoration-color: var(--mfn-color-primary, #D81E2C);
}

/*
 * Cel skoku na podstronie Zespol. Naglowek strony jest przyklejony i wysoki,
 * wiec bez tego kotwica ladowalaby pod paskiem i widz widzialby opis zamiast
 * zdjecia i nazwiska osoby, ktorej szukal.
 */
[id^="zespol-"] { scroll-margin-top: 170px; }

/* --- pasek zakupu -------------------------------------------------------- */

.komedia-zakup {
  padding: 26px 24px;
  background: var(--mfn-color-alt-bg, #F2ECE8);
  border-top: 4px solid var(--mfn-color-primary, #D81E2C);
  border-radius: 4px;
}

.komedia-zakup-naglowek {
  margin: 0 0 18px;
  font-size: 1.15em;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.komedia-terminy { margin: 0; padding: 0; list-style: none; }
/* Motyw wcina listy w tresci (.column_post_content ul:not(.mfn-list) i podobne,
   margin-left: 30px), a pasek ma byc rowno z naglowkiem. Selektor z rodzicem
   wygrywa specyficznoscia z regula motywu. */
.komedia-zakup ul.komedia-terminy { margin-left: 0; }

/*
 * Termin w dwoch liniach (0.7.2, uwaga klienta 2026-10-17: pasek byl za luzny,
 * jeden termin zajmowal ~210 px). Gora: data na cala szerokosc. Dol: ceny po
 * lewej, zwarty przycisk po prawej. Kontener opisu znika z siatki przez
 * display: contents, wiec data i cena sa bezposrednimi polami gridu.
 */
.komedia-zakup { line-height: 1.4; }

.komedia-termin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--mfn-color-border, #E6DED9);
}
.komedia-termin:first-child { padding-top: 0; }
.komedia-termin:last-child { border-bottom: 0; }

/* Terminy ponad limit czekaja schowane, az widz kliknie "Pokaz wszystkie". */
.komedia-termin-ukryty { display: none; }
.komedia-zakup-rozwiniety .komedia-termin-ukryty { display: grid; }

.komedia-termin-opis { display: contents; }

.komedia-termin-data { grid-column: 1 / -1; font-weight: 600; font-size: .95em; }
.komedia-termin-cena { grid-column: 1; grid-row: 2; font-size: .88em; opacity: .8; }
/* Cena ulgowa w tej samej linii co normalna, po kropce srodkowej. */
.komedia-termin-ulgowy { font-size: 1em; }
.komedia-termin-ulgowy::before { content: "·"; margin: 0 6px 0 2px; }

/* Przycisk albo "wyprzedane" zawsze w drugiej linii po prawej. */
.komedia-termin > .button,
.komedia-termin > .komedia-znacznik-brak { grid-column: 2; grid-row: 2; justify-self: end; }
/* "ostatnie miejsca" pod cenami, na cala szerokosc. */
.komedia-termin .komedia-termin-opis .komedia-znacznik { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: 4px; }

.komedia-termin .button { margin: 0; }
/* Specyficznosc na trzy klasy, bo motyw ustawia padding i rozmiar
   przyciskow z Theme Options na .button. */
.komedia-zakup .button.komedia-kup {
  width: auto;
  padding: 9px 18px;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
}

.komedia-znacznik {
  padding: 3px 9px;
  border-radius: 3px;
  font-size: .74em;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--mfn-color-primary, #D81E2C);
  color: #FFFFFF;
}
.komedia-znacznik-brak { background: #6E6063; align-self: flex-start; }

.komedia-wiecej {
  /* Kolor tekstu wprost, bo motyw maluje wszystkie <button> na bialo i na jasnym
     tle paska przycisk stawal sie niewidzialny. */
  color: var(--mfn-color-heading, #1A1113);
  width: 100%;
  margin-top: 16px;
  padding: 10px;
  background: none;
  border: 1px solid var(--mfn-color-border, #C8BDB8);
  border-radius: 3px;
  font: inherit;
  font-size: .9em;
  cursor: pointer;
}
.komedia-wiecej:hover { border-color: var(--mfn-color-primary, #D81E2C); }

.komedia-archiwum { font-size: .95em; }
.komedia-zakup-stopka { margin: 14px 0 0; font-size: .86em; opacity: .75; }

/* --- karty repertuaru ---------------------------------------------------- */

.komedia-repertuar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 40px 32px;
}

/* Karta jako kolumna, zeby przycisk zakupu siedzial przy dolnej krawedzi
   niezaleznie od tego, jak dlugi jest opis. Bez tego przyciski w rzedzie
   ustawialy sie schodkami. */
.komedia-karta { display: flex; flex-direction: column; }
.komedia-karta-tresc { display: flex; flex-direction: column; flex: 1 1 auto; }
.komedia-karta-tresc > .button { margin-top: auto; align-self: flex-start; }

.komedia-karta-obraz { display: block; margin-bottom: 18px; }

/* Stala wysokosc plakatu jest tu konieczna, bo teatr wrzuca do biletomatu
   grafiki o zupelnie roznych proporcjach: od kwadratu po format 1:2. Bez tego
   karty w siatce zaczynaly sie na roznych wysokosciach.
   'contain', a nie 'cover': przyciecie zjada tytul spektaklu i nazwiska aktorow,
   ktore na plakatach sa wydrukowane przy samych krawedziach.
   !important, bo BeTheme narzuca obrazkom wysokosc auto i bez tego reguly
   nie bylo widac wcale. */
.komedia-repertuar .komedia-karta-obraz img {
  width: 100% !important;
  height: 340px !important;
  max-height: 340px !important;
  object-fit: contain;
  object-position: center;
}

.komedia-karta-termin {
  margin: 0 0 6px;
  font-size: .9em;
  opacity: .78;
}
.komedia-karta-archiwum { font-style: italic; }
.komedia-karta-ile { opacity: .7; }

.komedia-karta-tytul { margin: 0 0 10px; }
.komedia-karta-tytul a { text-decoration: none; }

.komedia-karta-opis { margin: 0 0 18px; }

.komedia-pusto { padding: 24px; text-align: center; opacity: .7; }

/* --- archiwum teatru: zwarta siatka kafelkow ----------------------------- */

/*
 * /spektakle/ wyrzucalo 66 jednakowych, pelnych kart, z czego 60 bez terminu
 * w sprzedazy. Grupa archiwalna dostaje wiec wlasna, mniejsza siatke: plakat
 * i tytul, caly kafelek klikalny. Dorobek teatru zostaje w calosci na stronie
 * (wazne dla wyszukiwarki po wlamaniu), ale nie konkuruje z tym, co teatr
 * faktycznie sprzedaje.
 */
.komedia-grupa-tytul { margin: 0 0 24px; }
.komedia-grupa-archiwum { margin-top: 72px; }

.komedia-archiwum-info { margin: -12px 0 28px; opacity: .72; font-size: .95em; }

/* !important i reset na :before, bo motyw stroi listy w tresci strony
   wlasnymi marginesami i wypunktowaniem, a to nie jest lista do czytania,
   tylko siatka. */
.komedia-archiwum {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 30px 20px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.komedia-archiwum li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.komedia-archiwum li::before { content: none !important; }

.komedia-archiwum a {
  display: block;
  text-decoration: none;
  transition: transform .18s ease, opacity .18s ease;
}

.komedia-archiwum a:hover { transform: translateY(-3px); }

/* Ten sam powod co przy duzych kartach: plakaty teatru maja rozne proporcje,
   wiec bez stalej wysokosci kafelki w rzedzie zaczynaja sie na roznych
   poziomach. 'contain', zeby nie obcinac tytulu wydrukowanego przy krawedzi. */
.komedia-archiwum .komedia-kafelek-obraz img {
  width: 100% !important;
  height: 200px !important;
  max-height: 200px !important;
  object-fit: contain;
  object-position: center;
}

.komedia-kafelek-tytul {
  display: block;
  margin-top: 10px;
  font-size: .95em;
  line-height: 1.35;
}

.komedia-archiwum a:hover .komedia-kafelek-tytul { text-decoration: underline; }

@media only screen and (max-width: 1239px) {
  /* Pasek zakupu przestaje byc kolumna i wchodzi nad opis, zeby na tablecie
     i telefonie zakup nadal byl pierwsza rzecza, ktora widz widzi. */
  .komedia-uklad { grid-template-columns: 1fr; gap: 32px; }
  .komedia-kolumna-boczna { position: static; order: -1; }
}

@media only screen and (max-width: 767px) {
  .komedia-metryka { grid-template-columns: 1fr; gap: 4px; padding: 20px; }
  [id^="zespol-"] { scroll-margin-top: 110px; }
  .komedia-metryka dt { margin-top: 12px; }
  .komedia-metryka dt:first-child { margin-top: 0; }
  .komedia-repertuar .komedia-karta-obraz img { height: 280px !important; max-height: 280px !important; }

  /* Na telefonie archiwum schodzi na dwie kolumny. Ponizej 130 px kafelka
     tytuly zaczynaja sie lamac po jednym slowie. */
  .komedia-grupa-archiwum { margin-top: 52px; }
  .komedia-archiwum { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 24px 14px; }
  .komedia-archiwum .komedia-kafelek-obraz img { height: 170px !important; max-height: 170px !important; }
}

/* --- podstrona spektaklu: zdjecie blogowych ozdobnikow ------------------- */

/*
 * BeTheme traktuje kazdy wlasny typ tresci jak wpis bloga i dokleja mu komplet
 * ozdobnikow: "Published by ... on ...", listy tagow i kategorii, nawigacje do
 * poprzedniego i nastepnego wpisu z miniaturami przy krawedziach ekranu, pasek
 * udostepniania i licznik polubien. Na karcie spektaklu to szum: widz przyszedl
 * sprawdzic termin i cene, a nie kto opublikowal wpis.
 *
 * Chowamy to CSS-em, a nie przestawieniem Theme Options, bo tamte klucze sa
 * globalne i wygasilyby te same elementy takze w Aktualnosciach, gdzie teatr
 * ich chce. Zakres: wylacznie body.single-spektakl.
 *
 * UWAGA: .single-photo-wrapper zostaje. Wbrew nazwie to NIE jest nawigacja,
 * tylko kontener plakatu, czyli najwazniejszego elementu tej podstrony.
 */

body.single-spektakl .post-meta,
body.single-spektakl .post-nav,
body.single-spektakl .share-simple-wrapper,
body.single-spektakl .button-love,
/* Przyklejone miniatury poprzedniego i nastepnego wpisu przy krawedziach ekranu.
   Nie siedza w .post-nav, tylko w osobnym .fixed-nav, stad druga pozycja. */
body.single-spektakl .fixed-nav,
/* Sekcja "o autorze" z awatarem. Spektakl nie ma autora, ma teatr. */
body.single-spektakl .section-post-about,
/* Plakat wstawiany przez motyw: przyciety do formatu poziomego. Pelny plakat
   renderuje wtyczka w pasku bocznym. */
body.single-spektakl .single-photo-wrapper,
/* Pole komentarzy. Typ tresci nie deklaruje ich wsparcia, ale motyw i tak
   renderuje pusty kontener z awatarem. */
body.single-spektakl .comments {
  display: none !important;
}

/* Po schowaniu metryki zostaje pusty naglowek z marginesem. */
body.single-spektakl .post-header { margin-bottom: 0; padding-bottom: 0; }


/* --- kalendarz repertuaru (0.4.0) --------------------------------------- */

/*
 * Wzorzec zamowiony przez klienta: teatrateneum.pl/?post_type=events.
 * Uklad jest ich, paleta i kroje nasze, czyli z presetu komedia-jasny.
 *
 * Kolumny na desktopie: data | tytul z godzina | stan sprzedazy.
 * Szerokosci sa stale, nie ulamkowe, bo lewa kolumna musi trzymac pion przez
 * caly miesiac. Przy 1fr dzien z dluga nazwa ("wrzesnia", "poniedzialek")
 * rozpychalby swoj wiersz i numery dni chodzilyby w lewo i w prawo.
 */

/*
 * Wezszy niz szerokosc tresci i wysrodkowany. Przy pelnych 1200 px miedzy
 * tytulem a przyciskiem zostawala pusta przestrzen na pol ekranu i wzrok
 * musial przeskakiwac przez nic. Prosba Dawida 2026-10-16: data blizej srodka,
 * przycisk blizej tytulu.
 */
.komedia-kalendarz { max-width: 880px; margin: 0 auto 20px; }

/* --- zakladki miesiecy --- */

.komedia-kal-miesiace {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 36px;
}

.komedia-kal-zakladka {
  /* Motyw maluje wszystkie <button> na bialo i bez tla, wiec kazda wlasciwosc,
     ktora ma tu cokolwiek znaczyc, musi stac wprost. Ta sama pulapka co przy
     przycisku "Pokaz wszystkie terminy" w pasku zakupu. */
  margin: 0;
  padding: 11px 26px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: lowercase;
  color: inherit;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 2px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.komedia-kal-zakladka:hover,
.komedia-kal-zakladka:focus-visible {
  border-color: var(--mfn-color-primary, #D81E2C);
  color: var(--mfn-color-primary, #D81E2C);
}

.komedia-kal-zakladka-aktywna,
.komedia-kal-zakladka-aktywna:hover {
  color: #FFFFFF;
  background: var(--mfn-color-primary, #D81E2C);
  border-color: var(--mfn-color-primary, #D81E2C);
}

/*
 * Chowanie nieaktywnych miesiecy wchodzi dopiero z klasa dokladana przez
 * skrypt. Bez JavaScriptu widz widzi wszystkie miesiace jeden pod drugim:
 * brzydziej, ale kompletnie. Gdyby regula stala bezwarunkowo, awaria skryptu
 * zostawilaby na stronie teatru pusty repertuar.
 */
.komedia-kalendarz-js .komedia-kal-grupa { display: none; }
.komedia-kalendarz-js .komedia-kal-grupa-aktywna { display: block; }

/* --- naglowek miesiaca --- */

.komedia-kal-miesiac {
  margin: 0 0 4px;
  padding: 14px 24px;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #FFFFFF;
  background: #2A2024;
  text-align: center;
}

.komedia-kal-rok { opacity: .55; font-weight: 400; margin-left: 6px; }

/* --- dzien --- */

.komedia-kal-dzien {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 0 22px;
  padding: 22px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.komedia-kal-dzien:last-child { border-bottom: 0; }

/* Dzisiejszy dzien dostaje pionowa belke w kolorze marki. Widz wchodzacy po
   poludniu musi od razu widziec, gdzie na liscie jest "dzis". */
.komedia-kal-dzien-dzis {
  background: var(--mfn-color-alt-bg, #FAF7F4);
  box-shadow: inset 3px 0 0 var(--mfn-color-primary, #D81E2C);
}

.komedia-kal-data { text-align: center; line-height: 1.1; }

.komedia-kal-numer {
  display: block;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.komedia-kal-podpis { display: block; margin-top: 2px; }
.komedia-kal-miesiac-dnia { display: block; font-size: 15px; font-weight: 600; }
.komedia-kal-tydzien { display: block; font-size: 13px; opacity: .6; }

/* Weekend na czerwono. Kolorujemy cala date, a nie sam numer, bo widz czyta
   ten blok jako calosc i polowicznie pokolorowany wyglada na blad. */
.komedia-kal-dzien-weekend .komedia-kal-numer,
.komedia-kal-dzien-weekend .komedia-kal-miesiac-dnia,
.komedia-kal-dzien-weekend .komedia-kal-tydzien {
  color: var(--mfn-color-primary, #D81E2C);
}
.komedia-kal-dzien-weekend .komedia-kal-tydzien { opacity: .85; }

/* --- jeden termin --- */

.komedia-kal-pozycja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 10px 20px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid rgba(0, 0, 0, .07);
}

/* Pierwszy spektakl dnia rownia sie gora z numerem dnia, wiec nie ma nad soba
   kreski ani odstepu. Kolejne tego samego dnia juz tak, bo inaczej zlewaja sie
   w jeden blok tekstu. */
.komedia-kal-pozycja:first-child { padding-top: 0; border-top: 0; }
.komedia-kal-pozycja:last-child { padding-bottom: 0; }

.komedia-kal-godzina { margin: 0 0 2px; font-size: 15px; font-weight: 600; opacity: .7; }

.komedia-kal-tytul {
  margin: 0;
  font-size: 23px;
  line-height: 1.25;
  font-weight: 700;
}

/*
 * UWAGA, odstepstwo od wzorca: Ateneum pisze tytuly WERSALIKAMI i pierwsza
 * wersja robila tak samo. Na podgladzie wyszlo, dlaczego u nas nie wolno:
 * teatr ma w repertuarze "oCZARowani", a text-transform: uppercase zamienia
 * to w "OCZAROWANI" i kasuje gre slow z nazwy spektaklu. Tytuly z biletomatu
 * sa juz zapisane tak, jak teatr chce je widziec (czesc konczy sie "PREMIERA"
 * i "HIT!" wielkimi literami), wiec nie przerabiamy ich wcale.
 */

.komedia-kal-tytul a {
  position: relative;
  color: inherit;
  text-decoration: none;
}

.komedia-kal-tytul a:hover .komedia-kal-nazwa,
.komedia-kal-tytul a:focus-visible .komedia-kal-nazwa {
  color: var(--mfn-color-primary, #D81E2C);
}

/* Dopisek teatru do terminu, prosto z additionalInfo w API. Teatr wpisuje tam
   rzeczy w rodzaju "Dzien Seniora i Studenta", czyli informacje o cenie albo
   okazji, wiec ma byc widoczny, ale nie konkurowac z tytulem. */
.komedia-kal-info {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--mfn-color-primary, #D81E2C);
}

.komedia-kal-scena { margin: 6px 0 0; font-size: 14px; opacity: .65; }

/* Odwolany termin zostaje na liscie, ale przygaszony: widz, ktory ma na niego
   bilet, musi go znalezc, a widz szukajacy wieczoru nie ma sie o niego zahaczyc. */
.komedia-kal-pozycja-odwolana .komedia-kal-tresc { opacity: .55; }
.komedia-kal-pozycja-odwolana .komedia-kal-tytul { text-decoration: line-through; }

/* --- kolumna sprzedazy --- */

.komedia-kal-bilet { text-align: center; }

.komedia-kal-kup {
  display: block;
  width: 100%;
  margin: 0 !important;
  text-align: center;
}

.komedia-kal-brak {
  margin: 0;
  padding: 11px 10px;
  font-size: 15px;
  font-weight: 600;
  color: #6E6063;
  background: rgba(0, 0, 0, .06);
  border-radius: 2px;
}

/* "Ostatnie miejsca" ma kolor marki, bo to jedyny komunikat na tej liscie,
   ktory ma przyspieszyc decyzje. Reszta drobnego druku jest szara. */
.komedia-kal-uwaga {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mfn-color-primary, #D81E2C);
}

.komedia-kal-cena {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.4;
  opacity: .65;
}
.komedia-cena-normalna { font-weight: 600; }
/* Cena ulgowa w nowej linii, nie obok. Dwie kwoty w jednym wierszu pod
   przyciskiem czytaly sie jak widelki "od do", a to sa dwa osobne bilety. */
.komedia-cena-ulgowa { display: block; }

.komedia-kal-inne {
  display: inline-block;
  margin: 6px 0 0;
  /* color: inherit, a nie domyslny kolor odnosnika. To drobny druk pod
     komunikatem "Wyprzedane", wiec ma byc czytelny, ale nie ma konkurowac
     z czerwonym przyciskiem zakupu w sasiednim wierszu. */
  color: inherit;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: underline;
  opacity: .7;
}

.komedia-kal-inne:hover { color: var(--mfn-color-primary, #D81E2C); opacity: 1; }

/* --- podglad pod kursorem --- */

/*
 * Ateneum pokazuje przy najechaniu na tytul plakat i poczatek opisu. Sensowne:
 * lista jest sucha, a widz czesto nie zna tytulu i nie chce dla samego
 * sprawdzenia opuszczac kalendarza.
 *
 * Wylacznie dla myszy. Na dotyku hover zostaje przyklejony po tapnieciu
 * i zaslania pol listy, a tam i tak wystarczy wejsc na podstrone spektaklu.
 */
.komedia-kal-podglad { display: none; }

/* Warunek jest podwojny: mysz ORAZ ekran szerszy niz 900 px. Samo (hover: hover)
   spelnia tez laptop ze zwezonym oknem, a dymek ma stala szerokosc 300 px, wiec
   przy waskim oknie potrafilby wyjsc poza krawedz strony. Zapobiegawczo, nie po
   zlapanym bledzie: w podgladzie przy 500 px (minimum okna Chrome na macOS)
   scrollWidth rowna sie clientWidth, czyli nic jeszcze nie wystawalo. */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .komedia-kal-podglad {
    position: absolute;
    z-index: 30;
    top: 100%;
    left: 0;
    display: block;
    width: 300px;
    padding: 14px;
    text-align: left;
    text-transform: none;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    pointer-events: none;
  }

  .komedia-kal-tytul a:hover .komedia-kal-podglad,
  .komedia-kal-tytul a:focus-visible .komedia-kal-podglad {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .komedia-kal-podglad img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    object-position: top center;
    margin-bottom: 10px;
  }

  .komedia-kal-podglad-tytul {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
  }

  .komedia-kal-podglad-opis {
    display: block;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    opacity: .75;
  }
}

@media only screen and (max-width: 959px) {
  /* Stan sprzedazy schodzi pod tytul. Przy 170 px kolumny i waskim ekranie
     "Kup bilet" lamal sie na dwie linie i wiersz robil sie wyzszy od daty. */
  .komedia-kal-pozycja { grid-template-columns: minmax(0, 1fr); }
  .komedia-kal-bilet { text-align: left; }
  .komedia-kal-kup { display: inline-block; width: auto; }
  .komedia-kal-brak { display: inline-block; }
  .komedia-kal-tytul { font-size: 20px; }
}

@media only screen and (max-width: 767px) {
  /* Data przestaje byc kolumna i wchodzi nad spektakle jako jedna linia.
     Przy 116 px kolumny na telefonie na tytul zostawalo ponizej 180 px. */
  .komedia-kal-dzien { grid-template-columns: 1fr; gap: 14px; padding: 20px 16px; }

  .komedia-kal-data {
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-align: left;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
  }

  .komedia-kal-numer { font-size: 30px; }
  .komedia-kal-podpis { display: flex; gap: 6px; margin: 0; }
  .komedia-kal-miesiac-dnia,
  .komedia-kal-tydzien { display: inline; font-size: 14px; }

  .komedia-kal-miesiac { font-size: 17px; padding: 12px 16px; }
  .komedia-kal-zakladka { padding: 9px 18px; font-size: 15px; }
  .komedia-kal-tytul { font-size: 18px; }
}

/* Wyroznienie terminu z pola specialEventType ("Nie przegap", "Ostatni raz").
   Stoi przy godzinie, a nie pod tytulem, zeby nie mieszac sie z dopiskiem
   teatru (additionalInfo), ktory jest innego rodzaju informacja. */
.komedia-kal-wyroznienie {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mfn-color-primary, #D81E2C);
  border: 1px solid currentColor;
  border-radius: 2px;
  vertical-align: 2px;
}

/* --- podstrona osoby i siatka zespolu (0.5.0) ---------------------------- */

/*
 * Uklad podstrony osoby to ten sam grid co przy spektaklu (.komedia-uklad),
 * tylko wypelniony czym innym: po lewej biogram, po prawej portret i rola.
 * Dziedziczy wiec zwijanie do jednej kolumny ponizej 1240 px i nie trzeba
 * tego opisywac drugi raz.
 */

.komedia-uklad-osoba .komedia-kolumna-boczna { position: static; }

.komedia-portret { margin-bottom: 18px; }
.komedia-portret img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.komedia-rola {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.45;
  opacity: .75;
}

.komedia-powrot {
  display: inline-block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: underline;
  color: inherit;
}
.komedia-powrot:hover { color: var(--mfn-color-primary, #D81E2C); }

/* Zdanie zastepcze tam, gdzie teatr nie przyslal jeszcze biogramu. Ma wygladac
   jak informacja, a nie jak dziura w stronie. */
.komedia-biogram-brak {
  margin: 0 0 32px;
  padding: 16px 20px;
  font-style: italic;
  opacity: .7;
  background: var(--mfn-color-alt-bg, #FAF7F4);
  border-left: 3px solid rgba(0, 0, 0, .12);
}

/* --- dorobek --- */

.komedia-dorobek { margin-top: 44px; }

.komedia-dorobek-naglowek {
  margin: 0 0 18px;
  font-size: 22px;
}

/*
 * Reset listy z !important, bo BeTheme stroi kazdy <ul> w tresci wlasnymi
 * marginesami, wcieciem i kropka w li::before. Ta sama pulapka co przy
 * siatce archiwum na /spektakle/.
 */
.komedia-dorobek-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2px 32px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.komedia-dorobek-lista li { margin: 0 !important; padding: 0 !important; }
.komedia-dorobek-lista li::before { content: none !important; }

/* Flex, a nie zwykly blok: przy dluzszym tytule znacznik "w repertuarze"
   spadal pod spod i wiersz wygladal na rozsypany. Teraz tytul bierze tyle
   miejsca, ile ma, a znacznik trzyma sie prawej krawedzi. */
.komedia-dorobek-pozycja {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.komedia-dorobek-znacznik { flex: 0 0 auto; }
.komedia-dorobek-pozycja a { color: inherit; text-decoration: none; }
.komedia-dorobek-pozycja a:hover { color: var(--mfn-color-primary, #D81E2C); }

/* Tytul, ktory teatr dzis gra, ma sie wyroznic, bo na niego mozna kupic bilet. */
.komedia-dorobek-gramy a { font-weight: 600; }
.komedia-dorobek-znacznik {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mfn-color-primary, #D81E2C);
  border: 1px solid currentColor;
  border-radius: 2px;
  vertical-align: 1px;
}

/* --- siatka zespolu na /zespol/ --- */

/*
 * Trzy kolumny na sztywno, nie auto-fill. Przy auto-fill i minmax(210px)
 * szerokie okno rozkladalo szescioosobowy zespol na piec kolumn i jedna osobe
 * zostawialo sama w drugim rzedzie. Teatr ma dzis szesc osob, wiec 3x2 wychodzi
 * rowno, a portrety sa wieksze i nazwiska przestaja sie lamac.
 * Przy zmianie skladu warto tu zajrzec: 3 kolumny znosza 6 i 9 osob bez sieroty.
 */
.komedia-zespol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.komedia-zespol li { margin: 0 !important; padding: 0 !important; }
.komedia-zespol li::before { content: none !important; }

.komedia-zespol a {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease;
}
.komedia-zespol a:hover { transform: translateY(-3px); }

.komedia-zespol-foto { display: block; margin-bottom: 14px; }
.komedia-zespol-foto img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: top center;
  border-radius: 3px;
}

/* Miejsce na portret, ktorego jeszcze nie dostalismy. Pusty kafelek w rytmie
   siatki jest uczciwszy niz zastepcza twarz ze stocka albo dziura w ukladzie. */
.komedia-zespol-bezfoto {
  height: 340px;
  background: var(--mfn-color-alt-bg, #F2ECE8);
  border: 1px dashed rgba(0, 0, 0, .14);
  border-radius: 3px;
}

.komedia-zespol-imie {
  display: block;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}
.komedia-zespol a:hover .komedia-zespol-imie { color: var(--mfn-color-primary, #D81E2C); }

.komedia-zespol-rola {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  opacity: .65;
}

@media only screen and (max-width: 959px) {
  .komedia-zespol { grid-template-columns: repeat(2, 1fr); }
  .komedia-zespol-foto img,
  .komedia-zespol-bezfoto { height: 300px; }
}

@media only screen and (max-width: 767px) {
  .komedia-zespol { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }
  .komedia-zespol-foto img,
  .komedia-zespol-bezfoto { height: 210px; }
  .komedia-zespol-imie { font-size: 16px; }
  .komedia-dorobek-lista { grid-template-columns: 1fr; }
}

/* Na podstronie osoby motyw dokleja te same ozdobniki bloga co przy spektaklu. */
body.single-osoba .post-meta,
body.single-osoba .post-nav,
body.single-osoba .share-simple-wrapper,
body.single-osoba .button-love,
body.single-osoba .fixed-nav,
body.single-osoba .section-post-about,
body.single-osoba .single-photo-wrapper,
body.single-osoba .comments {
  display: none !important;
}
body.single-osoba .post-header { margin-bottom: 0; padding-bottom: 0; }