/* Zakladka: strona glowna (index.html): czolo, rozklad terminow, stan serwisu, kafle kategorii, kroki zakupu.
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. */
/* ---------- czolo strony glownej ----------
Masztowy naglowek: tytul po lewej, zdanie i akcje po prawej, pod spodem listwa
czterech liczb ciagnaca sie przez oba strumienie. Rozklad terminow NIE siedzi juz
w waskiej kolumnie obok tytulu: dostal wlasne pasmo na pelnej szerokosci, bo
tablica odjazdow jest belka przez caly peron, a nie kafelkiem z boku. */
/* REMAKE: czolo to jedno pasmo na plaskim tle --tlo-2, ciagnace sie od krawedzi do krawedzi
i zamkniete od dolu belka 2 px. Tlo jest to samo co w pasku, wiec gora strony czyta sie
jako jedna tablica na peronie, a tresc pod nia zaczyna sie na papierze (--tlo).
Jeden kolor, zero gradientu, zero cienia. Naglowek 40 px na telefonie i 64 px na 1280 px. */
/* align-items: start, nie end: tytul stoi teraz w osobnym wierszu nad oboma strumieniami,
wiec dosuwanie ich do dolu zostawialo pod tytulem po lewej 130 px pustego papieru,
a panel z terminami po prawej i tak jest wyzszy. Teraz oba strumienie zaczynaja sie
na tej samej linii pod tytulem, a zapas schodzi pod krotszy z nich. */
.czolo { position: relative; padding-block: var(--s7) var(--s6); background: var(--tlo-2); row-gap: var(--s5); align-items: start; }
/* Perforacja biletu zamiast belki: polkola w kolorze tla strony wygryzaja dolna krawedz
czola. Dolna polowa kola lezy juz na tle strony, wiec jej nie widac. */
.czolo::after {
content: ""; grid-column: pelne-start / pelne-end; position: absolute; inset: auto 0 -7px;
height: 14px; pointer-events: none;
background: radial-gradient(circle at 7px 7px, var(--tlo) 6px, transparent 6.5px) 0 0 / 22px 14px repeat-x;
}
/* Tytul wyszedl z lewej kolumny na cala miare: napis "Bilety na wydarzenia" ma na 1280 px
870 z 1084 px miary, wiec belka naglowka ciagnie sie przez caly peron, tak jak tablica
odjazdow. Pod nim dopiero dziela sie strumienie: zdanie z akcjami po lewej, najblizsze
terminy po prawej. Etykieta stoi nad tytulem, w tym samym bloku, zeby nie zlapala
wiersza siatki dla siebie. */
.czolo__tytul { display: grid; gap: var(--s3); min-width: 0; }
/* Od 900 px czolo dostaje 96 px oddechu u gory i 64 px u dolu (plus 24 px listwy liczb,
razem 88 px), czyli rytm .pas przeniesiony na pierwsze pasmo strony. */
/* Od 900 px czolo dostaje 96 px oddechu u gory i 64 px u dolu. Odstep MIEDZY blokami
zostaje 24 px takze na szerokim ekranie: przy jednej kolumnie 48 px rozrywalo tytul,
zdanie i akcje na trzy osobne rzeczy, zamiast jednego wywodu. */
@media (min-width: 900px) { .czolo { padding-block: var(--s9) var(--s8); } }
/* Lewa kolumna niesie caly wywod: naglowek, zdanie i dwie akcje. Wczesniej zdanie
i przyciski staly w PRAWEJ kolumnie, wiec lewa dol kadru byla pusta na 1280 px,
a wzrok skakal z naglowka w bok i z powrotem w dol. */
/* PRZEBUDOWA: czolo nie jest juz para kolumn. Panel "Najblizej" z prawej kolumny
zniknal: pokazywal trzy najblizsze terminy, a tablica pod nim zaczynala sie dopiero
od czwartego, wiec jedna kolejka byla rozbita na dwa bloki o roznym wygladzie i
pierwszy ekran mial dwa punkty startu obok siebie (naglowek 64 px i panel z lista).
Teraz czolo idzie jedna kolumna: etykieta i tytul, pod nimi zdanie, akcje i listwa
liczb, a cala kolejka terminow stoi w jednym miejscu, w pasmie #liczby.
Rytm pionowy czola: 24 px miedzy blokami, listwa liczb ma wlasne 24 px nad kreska. */
/* Naglowek afiszu: wersaliki Oxanium 800, dwa wiersze "BILETY NA / WYDARZENIA".
Stopnie 48 / 64 / 88 / 160 px. Na 1200 px slowo WYDARZENIA ma okolo 950 z 1084 px miary.
anywhere, nie break-word: przy 200% pisma dlugie slowo lamie sie zamiast rozpychac strone. */
.czolo h1 { font-size: 3rem; font-weight: 800; letter-spacing: -0.01em; line-height: 0.92; padding-bottom: 0.04em; max-width: 12ch; overflow-wrap: anywhere; }
@media (min-width: 600px) { .czolo h1 { font-size: 4rem; } }
@media (min-width: 900px) { .czolo h1 { font-size: 5.5rem; } }
@media (min-width: 1200px) { .czolo h1 { font-size: 10rem; } }
.czolo__lead { font-size: 1.25rem; max-width: 42ch; color: var(--tekst-2); }
.czolo__akcje { display: flex; flex-wrap: wrap; gap: var(--s3); }
/* ---------- rozklad terminow: pelna szerokosc peronu ----------
Trzy kolumny: termin, wydarzenie z miastem, cena. Ponizej 620 px termin i cena schodza
pod tytul, bo trzy kolumny na 390 px daja slupki po 5 znakow.
PRZEBUDOWA: kolumna numeru wiersza wypadla. Numer nie byl niczym (nie peronem, nie
identyfikatorem biletu), a przy skrocie w czole lista zaczynala sie od 04, wiec
wygladala jak ucieta w srodku. Bez niej TERMIN startuje na tej samej linii co tytul
sekcji i znika 60 px pustki miedzy numerem a data. */
.tablica { display: grid; gap: var(--s4); align-content: start; container-type: inline-size; container-name: tablica; }
/* Pasmo sprzedazy zaczynalo sie 96 px pod kreska czola, wiec na 1280 px pierwszy wiersz
rozkladu stal juz poza ekranem. 64 px nad etykieta wystarcza na oddech, a wiersz
"pon 28 wrz" wchodzi na pierwszy ekran. */
@media (min-width: 900px) { #liczby { padding-block: var(--s8) var(--s7); } }
/* Legenda kolumn, tak jak na prawdziwej tablicy odjazdow: ODJAZD, WYDARZENIE, CENA OD.
Tory te same co w wierszu, wiec podpis stoi dokladnie nad swoja kolumna. Ponizej 620 px
wiersz ma dwa tory i podpisy nie mialyby nad czym stac, wiec legenda wypada. */
.tablica__legenda { display: none; }
@container tablica (min-width: 620px) {
.tablica__legenda {
display: grid; grid-template-columns: 14rem minmax(0, 1fr) minmax(0, 11rem); gap: var(--s5);
font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--tekst-3);
}
.tablica__legenda span:nth-child(1) { grid-column: 1; }
.tablica__legenda span:nth-child(2) { grid-column: 2; }
.tablica__legenda span:nth-child(3) { grid-column: 3; text-align: right; }
}
.tablica__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--linia-mocna); }
/* WASKI EKRAN, TRZY RZEDY ZAMIAST DWOCH KOLUMN Z ZAWIJANIEM.
Wiersz mial na 390 px 127 px wysokosci, bo nazwa lamala sie na dwie linie w kolumnie
szerokiej na 262 px, termin stal w dwoch liniach, a liczba wolnych miejsc dokladala
trzecia linie pod kwota. Teraz kazda rzecz ma wlasny rzad na PELNEJ szerokosci:
1. termin i kwota, 2. nazwa (jedna linia, 358 px miesci 41 znakow), 3. miejsce i pula.
Zmierzone: 127 px na wiersz przed, 87 px po, przy tej samej tresci. */
.tablica__poz {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s4);
min-height: 72px; align-items: center; padding: var(--s3) 0;
border-bottom: 1px solid var(--linia); text-decoration: none; color: var(--tekst);
transition: background-color var(--fast) var(--ease-out);
}
@container tablica (min-width: 620px) {
.tablica__poz { grid-template-columns: 14rem minmax(0, 1fr) minmax(0, 11rem); gap: var(--s5); min-height: 84px; padding: var(--s4) 0; }
}
.tablica__kiedy { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst); }
@container tablica (min-width: 620px) { .tablica__kiedy { display: grid; gap: 2px; align-content: start; grid-row: 1 / 3; } }
/* Data i godzina to jedna wartosc: przy 11rem lamala sie na "pon 28 wrz," i "19:30",
mimo ze obok bylo wolne miejsce. 14rem miesci najdluzszy wariant w jednej linii. */
.tablica__data { white-space: nowrap; }
@container tablica (min-width: 620px) { .tablica__kiedy { font-size: 1.25rem; letter-spacing: -0.02em; text-transform: none; font-variant-numeric: tabular-nums; } }
/* Odliczanie jest podpisem daty, wiec zostaje male na kazdej szerokosci i nie rosnie
razem z kolumna terminu. Kolor ciemniejszy od akcentu, bo to napis 12 px na tle pasa. */
.tablica__za { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tekst-3); }
@container tablica (min-width: 620px) { .tablica__za { font-size: 0.75rem; letter-spacing: 0.08em; } }
/* Przy 200% pisma kolumna srodkowa wiersza schodzi do 93 px, a slowo "Widowiskowej"
ma tam 122 px i wychodzilo poza wiersz. Lamanie w srodku slowa jest brzydsze niz
przyciety napis tylko z pozoru: przyciety napis gubi litery bez sladu. */
/* display: contents wypuszcza nazwe i miejsce wprost do siatki wiersza, wiec nazwa
dostaje cala szerokosc bez dokladania owijki w HTML. Powyzej 620 px owijka wraca. */
.tablica__tresc { display: contents; min-width: 0; overflow-wrap: anywhere; }
@container tablica (min-width: 620px) { .tablica__tresc { display: grid; gap: 2px; grid-column: 2; grid-row: 1 / 3; align-self: center; } }
.tablica__cena { grid-column: 2; grid-row: 1; align-self: baseline; font-family: var(--mono); font-size: 0.875rem; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Kolumna kwoty jest jedyna, ktora dzieli wiersz na dwa rzedy: kwota konczy rzad pierwszy,
pula zaczyna drugi, a termin i tresc obejmuja oba rzedy. Dzieki temu obie liczby stoja
razem na srodku wiersza, zamiast rozjezdzac sie na jego gore i dol. */
@container tablica (min-width: 620px) { .tablica__cena { grid-column: 3; font-size: 1rem; align-self: end; } }
.tablica__nazwa { grid-column: 1 / -1; grid-row: 2; }
.tablica__gdzie { grid-column: 1; grid-row: 3; }
@container tablica (min-width: 620px) {
.tablica__nazwa, .tablica__gdzie { grid-column: auto; grid-row: auto; }
}
/* "Wyprzedane" stoi w slupku cen: ten sam stopien pisma, rozni je kolor i waga, zeby
nie przeskakiwalo optycznie nad kwotami. */
.tablica__cena--brak { color: var(--tekst-3); font-weight: 500; }
/* Jedna linia na waskim ekranie: nazwa ma tu cala szerokosc wiersza, wiec najdluzszy
tytul z katalogu ("Postoje: koncert w Hali Widowiskowej", 36 znakow) miesci sie bez
przyciecia. Dwie linie wracaja dopiero w ukladzie trzykolumnowym, gdzie nazwa dzieli
szerokosc z terminem i kwota. */
.tablica__nazwa { font-size: 1rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
@container tablica (min-width: 620px) { .tablica__nazwa { font-size: 1.25rem; -webkit-line-clamp: 2; } }
.tablica__gdzie { font-size: 0.875rem; color: var(--tekst-3); }
.tablica__podpis { margin: 0; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--tekst-3); font-variant-numeric: tabular-nums; }
/* Podpis siedzi tuz nad lista, wiec zjadamy polowe odstepu siatki .tablica. */
.tablica__podpis + .tablica__legenda, .tablica__podpis + .tablica__lista { margin-top: calc(var(--s4) * -0.5); }
/* Stopka tablicy: podpis kolumny cen po lewej, wyjscie do katalogu po prawej, obie
czesci w JEDNEJ linii. Wczesniej stalo tu zdanie na 96 znakow, ktore na 390 px
lamalo sie na trzy wiersze i robilo z podpisu akapit. */
.tablica__stopka {
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
gap: var(--s1) var(--s4); font-size: 0.875rem; color: var(--tekst-3);
}
@media (hover: hover) { .tablica__poz:hover { background: var(--tlo-2); } .tablica__poz:hover .tablica__nazwa { color: var(--akcent); } }
.tablica__poz:focus-visible .tablica__nazwa { color: var(--akcent); }
/* ---------- stan serwisu (#liczby): zero podkreslen, zielona kreska przy godzinie ----------
Reguly sa zawezone do #liczby, zeby nie ruszyc tablicy na wydarzeniach ani na karcie
wydarzenia. Podkreslenie znika z calej sekcji, wiec odnosnik musi miec drugi nosnik
poza kolorem: strzalka po tekscie mowi "to prowadzi dalej" takze bez koloru.
Godzina odjazdu dostaje kreske 2 px w akcencie, czyli ten sam znak co na peronie. */
#liczby a { text-decoration: none; }
#liczby .tablica__stopka a { color: var(--akcent); font-weight: 500; }
#liczby .tablica__stopka a::after { content: " \2192"; font-family: var(--mono); }
/* Kreska 12 na 2 px stala przed kazda godzina i czytala sie na ekranie jako pauza
wstawiona przed data. Godzina stoi teraz sama, date rozdziela od niej przecinek. */
#liczby .tablica__legenda { font-size: 0.875rem; letter-spacing: 0.12em; }
/* Stan pasma: "3 z 8" w jednej linii nie mowilo, ktora liczba jest ktora. Teraz liczba
biezaca stoi duza, a calosc siedzi w podpisie pod nia. Obie ida z window.WYDARZENIA. */
.stan-pasma { display: grid; justify-items: end; gap: 2px; margin: 0; text-align: right; }
.stan-pasma__ile { font-family: var(--mono); font-size: 2rem; line-height: 1; font-weight: 500; color: var(--tekst); font-variant-numeric: tabular-nums; }
.stan-pasma__podpis { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-3); }
/* Na waskim ekranie licznik stoi po lewej pod naglowkiem, a liczba schodzi z 32 na
24 px: przy 32 px sam licznik dokladal 55 px wysokosci pasma na 390 px. */
/* Na 390 px licznik schodzi pod tytul sekcji i przy row-gap 4 px stal 4 px pod nim,
czyli sklejal sie z naglowkiem w jeden blok. Rzad glowy dostaje tu 12 px przerwy,
a licznik idzie do lewej krawedzi, w te sama pionowa linie co tytul. */
/* Na 390 px liczba stala pod tytulem w tym samym stopniu pisma co on (24 px na 24 px),
wiec "Co jest teraz w sprzedazy" i "8" czytaly sie jako jeden naglowek zlamany na dwie
linie. Teraz liczba i jej podpis stoja w jednym wierszu na wspolnej linii bazowej,
a liczba wraca na 32 px: 1,33x wobec tytulu, czyli widac, ze to osobna wartosc,
a nie dalszy ciag zdania. Wiersz mierzy 32 px zamiast 40 px z ukladu pietrowego,
wiec pasmo jest nizsze, nie wyzsze. Zawijanie zostaje na wypadek 200% stopnia pisma. */
@media (max-width: 599px) {
.stan-pasma {
display: flex; align-items: baseline; flex-wrap: wrap;
column-gap: var(--s3); row-gap: 0; text-align: left;
}
.stan-pasma__ile { font-size: 2rem; }
#liczby .pas__glowa { row-gap: var(--s3); }
}
#liczby .tablica__cena { font-variant-numeric: tabular-nums; }
/* ---------- kafle kategorii (#kategorie) ----------
Zielony pas sklejonych pol czytal sie jak jeden blok tabeli i gubil to, ze kazde pole
jest osobnym wejsciem do katalogu. Kategorie ida siatka kafli na papierze.
ZBICIE WYSOKOSCI (zgloszenie: 1452x488 px, sekcja zajmowala 36,6% ekranu):
siedem kategorii stalo w dwoch rzedach po cztery kafle 104 px, wiec sam rzad kafli
mial 224 px przy dwoch liniach tekstu na kafel. Teraz prog toru to 8.5rem, wiec na
1280 px siedem kafli miesci sie w JEDNYM rzedzie (1084 px na siedem torow po 144 px
z rynna 12 px), a kafel schodzi ze 104 px na 72 px: nazwa 16 px w jednej linii,
pod nia jedna linia opisu (liczba terminow z jednostka), oba przyciete wielokropkiem,
zeby zadna kategoria nie rozpychala rzedu na druga linie. Na 390 px prog 8.5rem daje
dwa tory (343 px tresci), przy 200% pisma siatka schodzi do jednej kolumny.
Kafel jest linkiem w calosci i ma rowna wysokosc z rodzenstwem (grid stretch).
Odstepy z jednej skali: 12 px rynna, 12/16 px wnetrze kafla, 8 px miedzy liniami. */
.kierunki {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
gap: var(--s3);
}
.kierunek {
display: grid; align-content: space-between; gap: var(--s2);
min-height: 72px; padding: var(--s3) var(--s4);
border: 1px solid var(--linia-mocna); border-radius: var(--r);
background: var(--tlo); color: var(--tekst); text-decoration: none;
transition: background-color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out);
}
/* Jedna linia na napis: nazwa kategorii i opis pod nia. Nazwa dluzsza niz tor dostaje
wielokropek, zamiast lamac sie na druga linie i podnosic caly rzad. */
.kierunek__nazwa { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kierunek__ile { font-family: var(--mono); font-size: 0.875rem; color: var(--tekst-3); font-variant-numeric: tabular-nums; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Liczba w kaflu w szarosci: siedem zielonych cyfr w jednym rzedzie dawalo siedem
zielonych plam na ekranie, a limit to trzy. Zielen zostaje na kaflu WSKAZANYM. */
.kierunek__ile .liczba { font-weight: 500; color: var(--tekst-2); }
/* Hover i focus: krawedz i tlo w akcencie, odcien jeden. Zielen wchodzi tylko pod
kursorem albo na klawiaturze, wiec w spoczynku rzad kafli zostaje w skali szarosci. */
@media (hover: hover) { .kierunek:hover { background: var(--akcent-tlo); border-color: var(--akcent); } }
.kierunek:focus-visible { background: var(--akcent-tlo); border-color: var(--akcent); }
/* Kategorie w szynie obok tablicy: zawijany rzad kafli, nie siatka torow. Byly dwie
kolumny po 162 px (regula .kierunki wygrywala z szyna po podziale arkuszy) i nazwa
dostawala 50 do 58 px: "Koncert" potrzebuje 61, "Warsztat" 68, "Konferencja" 91,
wiec trzy z siedmiu konczyly sie wielokropkiem. Teraz kafel ma szerokosc swojej tresci
i rosnie do konca rzedu (flex 1 1 auto), a rzad zawija sie, kiedy nastepny kafel
sie nie miesci. Zadnej szerokosci wpisanej na sztywno, zadnego wielokropka: przy
duzym pismie liczba terminow schodzi pod nazwe, a kafel na nowy wiersz. */
.kierunki--szyna { display: flex; flex-wrap: wrap; gap: var(--s2); }
.kierunki--szyna > li { display: flex; flex: 1 1 auto; min-width: 0; }
.kierunki--szyna .kierunek {
flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
gap: 0 var(--s3); min-height: 44px; padding: var(--s2) var(--s3); border-radius: var(--r-mid);
align-content: center;
}
.kierunki--szyna .kierunek__nazwa,
.kierunki--szyna .kierunek__ile { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* ---------- jedna kreska u gory pasma ----------
Kreska siedzi na glowie pasma, nie na : sekcja .pas ciagnie sie przez cala
szerokosc okna, a linia ma miec szerokosc TORU TRESCI (maks. 1084 px), tak samo jak
kreska nad listwa metryk. Jeden kolor dla wszystkich kresek w projekcie: var(--linia).
24 px oddechu pod linia, zeby etykieta pasma na niej nie siadala. */
.pas--linia > .pas__glowa {
border-top: 1px solid var(--linia); padding-top: var(--s5);
border-bottom: 0; padding-bottom: 0; margin-bottom: var(--s6);
}
/* ---------- kroki zakupu: przebudowa komponentu (#zakup) ----------
Bylo: z trzema dziecmi (slot numeru, ikona maskowana z pliku SVG i owijka na
tekst) ulozonymi w dwukolumnowa siatke wewnatrz kazdego etapu, plus kreska 1 px
nad kazdym etapem. W pasmie wychodzilo z tego piec linii poziomych (glowa i cztery
krawedzie) i trzy plamy ikon konkurujace z numerami.
Jest: etap to czysty blok typograficzny, numer z licznika CSS, pod nim nazwa i zdanie.
Zadnej ikony, zadnej ramki, zadnej wlasnej kreski: cale pasmo #zakup niesie
DOKLADNIE JEDNA linie 1 px, na gorze, na .pas__glowa (regula .pas--linia wyzej).
Rownosc wysokosci w rzedzie bierze sie z domyslnego align-self: stretch elementow
siatki, wiec trzy etapy koncza sie na tej samej linii co do piksela. */
.perony {
list-style: none; margin: 0; padding: 0; counter-reset: peron;
display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6);
}
@media (min-width: 760px) { .perony { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7); } }
.peron { display: grid; gap: var(--s2); align-content: start; min-width: 0; }
.peron::before {
counter-increment: peron; content: counter(peron, decimal-leading-zero);
font-family: var(--mono); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.08em;
color: var(--akcent); font-variant-numeric: tabular-nums;
}
.peron__tytul { font-size: 1.25rem; }
.peron__opis { max-width: 42ch; color: var(--tekst-2); }
/* Pytania na stronie glownej ida w dzialach: kazdy dzial ma wlasny podpis w mono
i belke 2 px pod nim, pytania w dziale rozdziela linia 1 px. Blok nie ma juz
wlasnej kreski u gory (byly dwie rownolegle linie pod naglowkiem sekcji).
Od 900 px dzialy stoja po dwa w rzedzie: 14 pytan w jednej kolumnie ciagnelo
pasmo na 1200 px i zostawialo prawa polowe kadru pusta. */
.pytania--dzialy { border-top: 0; display: grid; gap: var(--s6); align-content: start; }
@media (min-width: 900px) { .pytania--dzialy { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s7); align-items: start; } }
.pytania__kategoria { display: grid; align-content: start; min-width: 0; border-top: 1px solid var(--linia); }
/* Podpis dzialu w mono, jak etykieta pasma: dzial ma sie czytac jako podpis toru,
a nie jako drugi naglowek konkurujacy z naglowkiem sekcji. Licznik przy podpisie
mowi wprost, ile pytan jest w dziale. */
.pytania__tytul {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
margin: 0; padding: var(--s3) 0;
font-family: var(--mono); font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--tekst-3);
}
/* ---------- @3 rozklad: kazdy termin to bilet z odcinkiem ----------
Wzor: papierowy bilet wstepu. Odcinek po lewej niesie date (numer dnia duzo,
dzien tygodnia, miesiac i godzina drobno, pod nimi odliczanie), perforacja 2 px
w kreskach i dwa wyciecia w kolorze tla oddzielaja go od tresci, cena stoi po prawej
w akcencie. Zadnej ramki: karta to plaska plama --tlo-2 na --tlo, jak czolo strony.
Legenda kolumn wypada, bo cena ma przy sobie "od", a odcinek czyta sie jako termin. */
#rozklad .tablica__legenda { display: none; }
#rozklad .tablica__lista { border-top: 0; gap: var(--s3); }
#rozklad .tablica__poz {
--pien: 5.5rem; --szczelina: var(--s4);
position: relative;
grid-template-columns: var(--pien) minmax(0, 1fr) auto;
grid-template-rows: 1fr auto 1fr;
grid-template-areas: "kiedy nazwa nazwa" "kiedy gdzie gdzie" "kiedy cena cena";
gap: 2px var(--szczelina); align-items: center;
min-height: 0; padding: var(--s4);
border: 0; border-radius: var(--r); background: var(--tlo-2);
}
@container tablica (min-width: 620px) {
#rozklad .tablica__poz {
--pien: 7rem; --szczelina: var(--s6);
grid-template-columns: var(--pien) minmax(0, 1fr) minmax(0, 11rem);
grid-template-rows: 1fr 1fr;
grid-template-areas: "kiedy nazwa cena" "kiedy gdzie cena";
padding: var(--s4) var(--s5) var(--s4) var(--s4);
}
}
/* Perforacja: kreskowana linia w srodku szczeliny miedzy odcinkiem a trescia. */
#rozklad a .tablica__kiedy::before {
content: ""; position: absolute; top: var(--s3); bottom: var(--s3);
left: calc(var(--s4) + var(--pien) + var(--szczelina) / 2 - 1px);
width: 0; border-left: 2px dashed var(--linia-mocna); pointer-events: none;
}
/* Wyciecia: dwa polkola w kolorze tla strony na gornej i dolnej krawedzi, na osi perforacji.
Gorna polowa kola lezy poza karta, na tym samym tle, wiec jej nie widac.
Promien 8 px miesci sie w 12 px przerwy miedzy biletami, wiec kola sasiadow sie nie dotykaja. */
#rozklad a .tablica__kiedy::after {
content: ""; position: absolute; top: -8px; bottom: -8px; width: 16px;
left: calc(var(--s4) + var(--pien) + var(--szczelina) / 2 - 8px);
background:
radial-gradient(circle at 50% 8px, var(--tlo) 0 7.5px, transparent 8px) top / 16px 16px no-repeat,
radial-gradient(circle at 50% 8px, var(--tlo) 0 7.5px, transparent 8px) bottom / 16px 16px no-repeat;
pointer-events: none;
}
/* Odcinek */
#rozklad .tablica__kiedy {
grid-area: kiedy; align-self: center;
display: grid; justify-items: start; gap: var(--s2);
font-family: var(--mono); color: var(--tekst-3); text-transform: none; letter-spacing: 0; font-size: 0.75rem;
}
#rozklad .tablica__data {
display: grid; grid-template-columns: auto auto; justify-content: start;
grid-template-areas: "dzien dzien" "nr nr" "mies godz"; gap: 2px 6px;
font-variant-numeric: tabular-nums;
}
#rozklad .tablica__dzien { grid-area: dzien; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
#rozklad .tablica__nr { grid-area: nr; font-size: 2.25rem; font-weight: 700; line-height: 0.95; letter-spacing: -0.02em; color: var(--tekst); }
#rozklad .tablica__mies { grid-area: mies; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
#rozklad .tablica__godz { grid-area: godz; font-size: 0.75rem; letter-spacing: 0.04em; }
@container tablica (min-width: 620px) {
#rozklad .tablica__nr { font-size: 3rem; }
}
/* Odliczanie jako plakietka pod data: dalej 11 px, dalej szare, ale z obrysem,
wiec odcinek konczy sie znakiem, a nie luzna linijka. */
#rozklad .tablica__za {
padding: 1px 6px; border: 1px solid var(--linia-mocna); border-radius: var(--r-mid);
line-height: 1.5; letter-spacing: 0.1em; color: var(--tekst-2); white-space: nowrap;
}
/* Tresc: nazwa nad miejscem, oba wypuszczone wprost do siatki biletu. */
#rozklad .tablica__tresc { display: contents; }
#rozklad .tablica__nazwa { grid-area: nazwa; align-self: end; font-size: 1rem; font-weight: 600; -webkit-line-clamp: 2; }
#rozklad .tablica__gdzie { grid-area: gdzie; align-self: start; }
@container tablica (min-width: 620px) {
#rozklad .tablica__nazwa { font-size: 1.25rem; }
}
/* Cena: jedyny akcent biletu. "od" i "netto" stoja przy kwocie drobno i szaro
(lista pokazuje netto, karta wydarzenia i kasa kwote z VAT). */
#rozklad .tablica__cena {
grid-area: cena; align-self: start; justify-self: start; margin-top: var(--s2);
font-size: 1.25rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--akcent);
}
#rozklad .tablica__cena:not(.tablica__cena--brak)::before {
content: "od "; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-3);
}
#rozklad .tablica__cena:not(.tablica__cena--brak)::after {
content: " netto"; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-3);
}
#rozklad .tablica__cena--brak { color: var(--tekst-3); }
/* Bez liczby wolnych miejsc (prosba usera: nie na glownej) kwota zajmuje oba rzedy
i stoi na srodku wysokosci biletu, naprzeciw nazwy i miasta. */
@container tablica (min-width: 620px) {
#rozklad .tablica__cena { align-self: center; justify-self: end; margin-top: 0; font-size: 1.5rem; }
}
@media (hover: hover) {
#rozklad a.tablica__poz:hover { background: var(--tlo-3); }
}
#rozklad a.tablica__poz:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
/* Pusty stan to ten sam wiersz bez odcinka: jedna kolumna, bez perforacji. */
#rozklad li.tablica__poz { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nazwa" "gdzie"; grid-template-rows: auto auto; }
/* ---------- @4 zakup: trzy plansze z duzymi numerami ----------
Wzor: plansze przystankow na afiszu. Kazdy krok to plaska plama --tlo-2 bez ramki,
numer 01 02 03 w kroju afiszu (80 px na szerokim ekranie) stoi na gorze, a nazwa i zdanie
48 px nizej. Zadnej kreski ani linii laczacej: w #zakup zostaje jedna linia na gorze glowy
(decyzja z wczesniejszego zlecenia), kroki rozdziela odstep siatki. Plansze w rzedzie maja
rowna wysokosc z domyslnego stretch. Ponizej 760 px numer stoi obok nazwy, zeby trzy
plansze nie zjadly trzech ekranow telefonu. */
#zakup .perony { gap: var(--s3); }
#zakup .peron {
grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s4); row-gap: var(--s2);
padding: var(--s5); border-radius: var(--r); background: var(--tlo-2);
}
#zakup .peron::before {
grid-column: 1; grid-row: 1; align-self: center;
font-family: var(--afisz); font-size: 2.75rem; font-weight: 800; line-height: 0.9;
letter-spacing: -0.03em; color: var(--tekst);
}
#zakup .peron__tytul { grid-column: 2; grid-row: 1; align-self: center; font-size: 1.5rem; }
#zakup .peron__opis { grid-column: 1 / -1; grid-row: 2; }
@media (min-width: 760px) {
#zakup .perony { gap: var(--s4); }
#zakup .peron { grid-template-columns: minmax(0, 1fr); row-gap: var(--s3); padding: var(--s6); }
#zakup .peron::before { align-self: start; margin-bottom: var(--s7); font-size: 5rem; }
#zakup .peron__tytul { grid-column: 1; grid-row: 2; }
#zakup .peron__opis { grid-column: 1; grid-row: 3; }
}
/* ---------- 200% pisma na telefonie ----------
Zmierzone przy html 32px na 390 px: bilet trzymal odcinek 176 px obok ceny 212 px
bez zawijania, wiec wiersz mial 396 px przy kolumnie 354 px, a nazwy lamaly sie
w srodku slowa ("Widowisko|wej"). Warunek w em dziala tylko przy duzym pismie:
przy 16 px ta sama kolumna ma 22em, przy 32 px ma 11em. Wtedy bilet staje w pionie,
a perforacja pionowa wypada, bo nie ma juz czego oddzielac w bok. */
@container tablica (max-width: 17em) {
#rozklad .tablica__poz {
grid-template-columns: minmax(0, 1fr); grid-template-rows: auto;
grid-template-areas: "kiedy" "nazwa" "gdzie" "cena";
}
#rozklad a .tablica__kiedy::before, #rozklad a .tablica__kiedy::after { display: none; }
#rozklad .tablica__kiedy { padding-bottom: var(--s3); border-bottom: 2px dashed var(--linia-mocna); }
}
/* Czolo przy 200% pisma: gorna granica w vw trzyma tytul w kolumnie, przy zwyklym
pismie wygrywa rozmiar ze skali, wiec nic sie nie zmienia. */
.czolo h1 { font-size: min(3rem, 13.5vw); }
@media (min-width: 600px) { .czolo h1 { font-size: min(4rem, 11vw); } }