/* Zakladka: strona wydarzenia (wydarzenie.html): bilet w glowie, pule, paragon, odwrot.
   Plik laduje sie tylko na tej stronie, po baza.css i strona.css, wiec reguly
   wspolne (pasek, glowa podstrony, formularze, stopka) sa w strona.css. */

/* ---------- strona wydarzenia: bilet w glowie ----------
   Bylo: tytul przez cala miare, listwa pieciu faktow pod kreska, a nizej, w szczegolach,
   plansza kategorii 8:5 przycieta do pasa 21:9 szerokiego na 1082 px: slowo z planszy
   wypadalo w rog, reszta pasa byla ciemnym polem. Jest: po lewej tytul, zdanie i przycisk
   do pul, po prawej bilet: plansza u gory prawie w swoich proporcjach, fakty, za
   perforacja odcinek z cena od i wolnymi miejscami. Bilet ma te same kolory co bilety
   w katalogu (--tlo-2 na --tlo, perforacja --linia-mocna, cena w akcencie). Byl z jasnego
   papieru, ale to byla jedyna jasna strona serwisu i odstawala od reszty. */
.glowa--wydarzenie { padding-bottom: var(--s8); border-bottom: 0; }
.glowa--wydarzenie .glowa__wiersz { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-items: center; }
@media (min-width: 900px) {
  .glowa--wydarzenie .glowa__wiersz { grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); column-gap: var(--s8); }
}
.glowa--wydarzenie .glowa__slowo { gap: var(--s4); min-width: 0; }
.glowa--wydarzenie .etykieta { margin: 0; }
/* Przy 200% pisma slowo "WIDOWISKOWEJ" ma 572 px, a break-word nie zmniejsza minimalnej
   szerokosci toru: kolumna rosla do 572 px i strona na 390 px ukladala sie na 588 px.
   Tor ma sztywne minimum 0, a tytul przenosi sie z dzieleniem wyrazow. */
.glowa--wydarzenie .glowa__slowo { grid-template-columns: minmax(0, 1fr); }
.glowa--wydarzenie h1 { text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; }
.glowa--wydarzenie .glowa__lead { margin-top: 0; text-wrap: pretty; }
.glowa__akcja { justify-self: start; margin-top: var(--s2); }
.bilet-wydarzenia {
  container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0;
  border-radius: var(--r); background: var(--tlo-2); color: var(--tekst); overflow: hidden;
}
/* Plansza: przyciemniony kolor kategorii zamiast obrazka SVG. Kategoria stoi duzym
   krojem afiszu u dolu, nad nia WSTEP i miasto jak nadruk. Kolor bierze --kat z #tresc. */
.bilet-wydarzenia__plansza {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto;
  gap: var(--s2) var(--s4); min-height: clamp(8.5rem, 22vw, 11rem); padding: var(--s5);
  background: var(--kat);
  color: var(--kat-tusz);
}
.bilet-wydarzenia__znak { font-family: var(--afisz); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.bilet-wydarzenia__znak:last-child { grid-column: 2; grid-row: 1; text-align: right; }
.bilet-wydarzenia__slowo {
  grid-column: 1 / -1; grid-row: 3; font-family: var(--afisz); font-weight: 800;
  /* Stopien idzie w dol, gdy slowo nie miesci sie w bilecie: --litery ustawia JS, litera
     Oxanium 800 ma okolo 0,65 em. Bez tego przy 200% pisma wychodzilo "KONCE / RT". */
  font-size: min(clamp(2.5rem, 5vw, 3.5rem), calc((100cqi - 2 * var(--s5)) / var(--litery, 7) / 0.7)); line-height: 0.9; letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--tekst); overflow-wrap: anywhere;
}
/* Fakty na bilecie: dwa tory, data i adres przez cala szerokosc biletu, godzina tez,
   gdy nie ma obok czasu trwania. Kreski torow z listwy w glowie tu wypadaja. */
.bilet-wydarzenia .pasek-faktow {
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none;
  gap: var(--s4) var(--s5); margin: 0; padding: var(--s5); border-top: 0; overflow: visible;
}
.bilet-wydarzenia .pasek-faktow li {
  display: grid; grid-row: auto; grid-template-rows: none; gap: 2px; align-content: start;
  margin: 0; padding: 0; border: 0;
}
.bilet-wydarzenia .pasek-faktow li.fakt--data,
.bilet-wydarzenia .pasek-faktow li.fakt--szeroki,
.bilet-wydarzenia .pasek-faktow li:has(+ li[hidden]) { grid-column: 1 / -1; }
.bilet-wydarzenia .pasek-faktow span { font-size: 0.75rem; letter-spacing: 0.14em; color: var(--tekst-3); }
.bilet-wydarzenia .pasek-faktow b { font-size: 1.25rem; font-weight: 600; color: var(--tekst); }
/* Odcinek: za perforacja jak w katalogu, wyciecia w kolorze tla strony na jej osi. */
.bilet-wydarzenia__odcinek {
  position: relative; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s3) var(--s5);
  padding: var(--s4) var(--s5) var(--s5);
  border-top: 2px dashed var(--linia-mocna);
}
.bilet-wydarzenia__odcinek::before, .bilet-wydarzenia__odcinek::after {
  content: ""; position: absolute; top: -9px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--tlo); pointer-events: none;
}
.bilet-wydarzenia__odcinek::before { left: -8px; }
.bilet-wydarzenia__odcinek::after { right: -8px; }
.bilet-wydarzenia__pole { display: grid; gap: 2px; min-width: 0; }
.bilet-wydarzenia__pole:last-child:not(:first-child) { justify-items: end; text-align: right; }
.bilet-wydarzenia__pole > span {
  font-family: var(--afisz); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tekst-3);
}
.bilet-wydarzenia__pole b {
  font-family: var(--afisz); font-size: 1.75rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; color: var(--tekst);
}
.bilet-wydarzenia__pole:first-child b { color: var(--akcent); }
/* ---------- strona wydarzenia: pule jako karty, podsumowanie jako paragon ----------
   Bylo: trzy wiersze na kresce 1 px, licznik z dwoch osobnych kwadratow, a obok pudelko
   z ramka, w ktorym przy pustym koszyku stal tylko szary przycisk. Jest: kazda pula to
   karta z nazwa w kroju afiszu i cena w akcencie, wybrana pula dostaje tlo i krawedz
   akcentu (klasa z licznika), licznik to jedna kapsula. Podsumowanie to paragon w tym
   samym kolorze co bilet w glowie, z zabkowana dolna krawedzia. Regula celuje w #bilety,
   bo .pula stoi tez w podsumowaniu kasy. */
#w-pule { display: grid; gap: var(--s3); }
#bilety .pula {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s3) var(--s5);
  min-height: 0; padding: var(--s4) var(--s4) var(--s4) var(--s5);
  border: 1px solid transparent; border-radius: var(--r); background: var(--tlo-2);
  transition: border-color var(--fast) var(--ease-out), background-color var(--fast) var(--ease-out);
}
#bilety .pula--wybrana { border-color: var(--akcent-krawedz); background: var(--akcent-tlo); }
#bilety .pula__opis { display: grid; gap: 2px; }
#bilety .pula__nazwa { font-family: var(--afisz); font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
#bilety .pula__stan { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
#bilety .pula__cena { font-family: var(--afisz); font-size: 1.25rem; font-weight: 700; color: var(--akcent); }
#bilety .pula--brak .pula__nazwa, #bilety .pula--brak .pula__cena { color: var(--tekst-3); }
#bilety .licznik { gap: 0; border: 1px solid var(--linia-mocna); border-radius: var(--r); background: var(--tlo); }
#bilety .pula--wybrana .licznik { border-color: var(--akcent-krawedz); }
#bilety .licznik button { border: 0; border-radius: var(--r-mid); background: none; }
/* Cyfra w kroju afiszu ma srodek 2-3 px nad srodkiem linii; padding od gory stawia ja na
   wysokosci kresek − i + (zmierzone na zrzucie). */
#bilety .licznik output { min-width: 28px; padding-top: 5px; font-family: var(--afisz); font-size: 1.125rem; font-weight: 600; }
@media (hover: hover) {
  #bilety .licznik button:not([disabled]):hover { background: var(--tlo-3); color: var(--akcent); }
}
/* Waska kolumna albo duze pismo: nazwa na cala szerokosc, cena i licznik pod nia. */
@media (max-width: 519px) {
  #bilety .pula { grid-template-columns: minmax(0, 1fr) auto; }
  #bilety .pula__opis { grid-column: 1 / -1; }
}
/* Paragon stoi tez na .panel--lepki: position: relative zabieralo mu sticky, a top: 88px
   z tej samej klasy spychalo go 88 px ponizej pierwszej puli. */
.paragon {
  position: relative; gap: var(--s4); padding: var(--s5) var(--s5) var(--s6);
  border: 0; border-radius: var(--r) var(--r) 0 0; background: var(--tlo-2); color: var(--tekst);
}
/* Zabkowana krawedz: polkola w kolorze tla strony wzdluz dolu, jak oderwany paragon. */
.paragon::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 8px; pointer-events: none;
  background: radial-gradient(circle at 6px 8px, var(--tlo) 0 5.5px, transparent 6px) 0 0 / 12px 8px repeat-x;
}
.paragon.panel--lepki { position: sticky; }
/* Naglowek paragonu jak nadruk kasy: ciemniejszy pasek odciety przerywana linia. */
.paragon { padding-top: 0; }
.paragon > .etykieta {
  margin: 0 calc(var(--s5) * -1); padding: var(--s3) var(--s5);
  border-radius: var(--r) var(--r) 0 0; background: var(--tlo-3); border-bottom: 1px dashed var(--linia-mocna); color: var(--tekst-3);
}
.paragon .kwoty { border-top: 0; }
.paragon .kwoty li { color: var(--tekst-2); border-bottom: 1px dashed var(--linia-mocna); }
.paragon .kwoty li span:last-child { color: var(--tekst); }
.paragon .kwoty li.razem { color: var(--tekst); border-bottom: 0; }
.paragon .kwoty li.razem span:last-child { color: var(--akcent); }
/* VAT zawarty w kwocie: dopisek pod Razem, bez kreski i w kolorze zwyklych wierszy. */
.paragon .kwoty li.vat { padding-top: 0; border-bottom: 0; font-size: 0.875rem; }
.paragon .kwoty li.vat span:last-child { color: var(--tekst-2); font-weight: 400; }
.paragon .podpowiedz { margin: 0; color: var(--tekst-3); }
.paragon .przycisk[disabled] { background: var(--tlo-3); border-color: var(--linia-mocna); color: var(--tekst-3); }

/* ---------- strona wydarzenia: zasady jako odwrot biletu ----------
   Bylo: lista kwot w polowie miary, bo druga kolumna (program) bywa ukryta i obok
   zostawalo 540 px pustki. Jest: karta z czterema polami w kolorze biletu, ktore same
   ukladaja sie w 4, 2 albo 1 tor, a bez programu zasady biora cala miare. */
.dwa-pola:has(> section[hidden]) { grid-template-columns: minmax(0, 1fr); }
.dwa-pola__zasady { display: grid; gap: var(--s4); min-width: 0; }
.odwrot {
  list-style: none; margin: 0; padding: 0; overflow: hidden;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1px;
  border-radius: var(--r); background: var(--tlo-2);
}
.odwrot li { display: grid; gap: var(--s2); align-content: start; padding: var(--s5); box-shadow: -1px -1px 0 0 var(--linia-mocna); }
.odwrot span { font-family: var(--afisz); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tekst-3); }
.odwrot b { font-family: var(--afisz); font-size: 1.25rem; font-weight: 600; line-height: 1.25; color: var(--tekst); text-wrap: balance; }
/* Cztery pola ida w 1, 2 albo 4 tory wedlug szerokosci kolumny zasad, nigdy w 3: przy
   auto-fit na 768 px wychodzilo 3 + 1 i czwarte pole wisialo samo pod spodem. */
.dwa-pola__zasady { container-type: inline-size; }
.odwrot { grid-template-columns: minmax(0, 1fr); gap: 0; }
@container (min-width: 28rem) { .odwrot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 56rem) { .odwrot { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- strona wydarzenia: kolor kategorii i pule jako bilety ----------
   Pule i szczegoly leza na tym samym grafitowym tle co reszta serwisu. Przedtem .dzien
   podmienial tu zmienne na kremowy papier z pastelami i to byla jedyna jasna strona.
   Kolor kategorii zostaje tylko na planszy biletu w glowie, przyciemniony: wszystkie
   odcienie maja te sama jasnosc 30% i chrome 0.045 (dla kazdego odcienia w granicach
   sRGB), rozni je sam odcien. Nadruk na planszy 82% / 0.06, slowo kategorii --tekst. */
#tresc { --hk: 60; }
#tresc[data-kategoria="sport"] { --hk: 150; }
#tresc[data-kategoria="teatr"] { --hk: 12; }
#tresc[data-kategoria="konferencja"] { --hk: 245; }
#tresc[data-kategoria="targi"] { --hk: 100; }
#tresc[data-kategoria="kino"] { --hk: 290; }
#tresc[data-kategoria="warsztat"] { --hk: 190; }
#tresc {
  --kat: oklch(30% 0.045 var(--hk));
  --kat-tusz: oklch(82% 0.06 var(--hk));
}
.dzien > .pas + .pas { padding-top: var(--s7); }

/* Pula jako bilet, tak jak termin w katalogu: nazwa po lewej, cena i licznik na odcinku
   za przerywana perforacja. Wyciecia to kola w kolorze tla przy krawedziach pudla,
   ktore obcina overflow. */
#bilety .pula {
  position: relative; overflow: hidden;
  grid-template-columns: minmax(0, 1fr) auto; gap: 0; padding: 0;
}
#bilety .pula__opis { align-content: center; padding: var(--s4) var(--s5); }
#bilety .pula__odcinek {
  position: relative; align-self: stretch;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s4);
  padding: var(--s3) var(--s4) var(--s3) var(--s5);
  border-left: 2px dashed var(--linia-mocna);
}
#bilety .pula__odcinek::before, #bilety .pula__odcinek::after {
  content: ""; position: absolute; left: -9px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--tlo); pointer-events: none;
}
#bilety .pula__odcinek::before { top: -9px; }
#bilety .pula__odcinek::after { bottom: -9px; }
#bilety .pula--wybrana .pula__odcinek { border-color: var(--akcent-krawedz); }
@media (max-width: 519px) {
  #bilety .pula { grid-template-columns: minmax(0, 1fr); }
  #bilety .pula__odcinek { justify-content: space-between; border-left: 0; border-top: 2px dashed var(--linia-mocna); }
  #bilety .pula--wybrana .pula__odcinek { border-color: var(--akcent-krawedz); }
  #bilety .pula__odcinek::before { top: -9px; left: -9px; }
  #bilety .pula__odcinek::after { top: -9px; bottom: auto; left: auto; right: -9px; }
}