/**
 * Pas otwierający podstronę — nagłówek ze skrótu `[klucz_naglowek_strony]`.
 *
 * DLACZEGO OSOBNY PLIK, A NIE `subpages.css`
 * Ten nagłówek stoi na siedmiu grupach stron, a `subpages.css` wczytują tylko
 * niektóre z nich — FAQ i Kody USSD nie wczytują go wcale (patrz
 * `klucz_motyw_zasoby_podstron()` w `functions.php`). Zostawiony tam, dawałby na
 * tych dwóch stronach goły znacznik bez stylu: nadtytuł zwykłym tekstem, tytuł
 * w rozmiarze przeglądarkowego `h1`, koło jako pusty prostokąt. Bez błędu i bez
 * śladu w logu — po prostu inny wygląd na dwóch stronach z siedmiu.
 *
 * Dopisanie tamtych dwóch grup do `subpages.css` też by to naprawiło, ale przy
 * okazji wciągnęłoby na nie CAŁY tamten arkusz: reset marginesów, `img { display:
 * block }`, `a { text-decoration: none }`. Te strony mają własny wygląd i nie
 * były pod tamten reset pisane. Osobny plik nie rusza niczego poza nagłówkiem.
 *
 * UKŁAD JEST INNY NIŻ W NAGŁÓWKU OFERTY, choć oba pochodzą z tej samej makiety.
 * Tam trzy części stoją obok siebie w trzech kolumnach; tutaj stoją JEDNA POD
 * DRUGĄ przy lewej krawędzi, a druga kolumna należy do koła. To nie
 * niekonsekwencja — tak jest w makiecie, bo pas otwierający ma prowadzić wzrok
 * w dół, do treści strony, a nagłówek sekcji tylko oddziela ją od poprzedniej.
 */

/*
 * Przycięcie nadmiaru z pasa.
 *
 * Tło pasa ma `width: 100vw`, a `100vw` liczy się RAZEM z paskiem przewijania —
 * na oknie 1600 px daje 1600, podczas gdy na treść zostaje 1585. Te 15 px wystają
 * poza dokument i strona dostaje poziomy pasek przewijania, którego nie ma po co
 * przewijać. Zmierzone: strona z nagłówkiem miała 8 px nadmiaru, bliźniacza bez
 * nagłówka zero.
 *
 * `clip`, a NIE `hidden`: `hidden` zakłada kontener przewijania i psuje
 * `position: sticky` w środku. `clip` tylko przycina. Oś pionowa zostaje przy tym
 * `visible` — sprawdzone w przeglądarce, bo przy `hidden` obie osie zmieniają się
 * razem i to jest częsty sposób na przypadkowe rozstrojenie strony.
 *
 * Selektor bez `:has()`, bo ten arkusz i tak wczytuje się wyłącznie na stronach
 * z nagłówkiem — patrz `klucz_motyw_zasoby_naglowka_strony()` w `functions.php`.
 */
.tresc {
	overflow-x: clip;
}

/*
 * DWIE KOLUMNY, A NIE KOŁO NA WIERZCHU.
 *
 * Makieta stawia koło warstwą na całym pasie i CELOWO ścina je górną i dolną
 * krawędzią — na tym polega tamten efekt. Właściciel chce koło w całości
 * (17.08.2026), a to znaczy, że sztuczki z przycinaniem nie da się tylko
 * przesunąć: trzeba ją zdjąć. Koło wraca więc do drugiej kolumny siatki.
 *
 * Siatka załatwia trzy rzeczy naraz, których warstwa nie załatwiała: koło nigdy
 * nie wychodzi poza pas (nie ma czego ścinać), nigdy nie wchodzi pod tekst
 * (kolumny się nie nakładają) i jedno i drugie samo się zwęża przy węższym oknie.
 * Wysokość pasa bierze się z koła, więc nie ma tu żadnej wpisanej liczby.
 */
.strona-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 3rem;
	align-items: center;
	max-width: var(--hero-max);
	margin: 0 auto 3rem;
	padding: 1.75rem var(--hero-pad) 1.5rem;
	/*
	 * JEDNAKOWA WYSOKOŚĆ NA WSZYSTKICH SIEDMIU STRONACH.
	 *
	 * Bez tego wysokość brała się z treści i wychodziła inna na każdej stronie:
	 * zmierzone 318 px na cenniku, 325 na regulaminach, 331 na MNP, 351 na trwałym
	 * nośniku. Przy przechodzeniu między podstronami pas skakał.
	 *
	 * 352 px to najwyższy z nich zaokrąglony w górę — pas nie może być NIŻSZY od
	 * najdłuższej treści, bo wtedy i tak by się rozciągnął i cała równość
	 * przestałaby obowiązywać akurat tam, gdzie jest najbardziej widoczna.
	 *
	 * `min-height`, a nie `height`: gdyby ktoś dopisał dłuższe zdanie, pas urośnie,
	 * zamiast wypuścić tekst poza kremowe tło.
	 */
	min-height: 352px;
}

/* ===========================================================================
   KOLUMNA NAGŁÓWKA MUSI RÓWNAĆ SIĘ Z KOLUMNĄ TREŚCI POD NIM

   Nagłówek trzymał `--klucz-kolumna` (1425 px) z 20 px marginesu, a treść pod nim
   siedzi w kontenerze o zupełnie innej szerokości. Na szerokim ekranie różnica
   ginie, bo oba i tak dochodzą do swoich ograniczeń; na węższym tytuł stoi przy
   samej krawędzi okna, a lista zaczyna się 65 px dalej — i widać to od razu.

   TE SIEDEM STRON MA CZTERY RÓŻNE KOLUMNY. To nie jest bałagan do posprzątania
   przy okazji: każda z tych szerokości była dobrana pod zawartość swojej strony
   (FAQ to jedna kolumna czytelnego tekstu, kody USSD to tabele) i ujednolicenie
   ich zmieniłoby wygląd czterech stron naraz. Nagłówek ma się dopasować do nich,
   a nie odwrotnie.

   Wartości przepisane z arkuszy grup — gdy któraś się tam zmieni, trzeba poprawić
   też tutaj:

     regulaminy, cennik, trwały nośnik   90vw / 80vw od 1200 px, dopełnienie 35 px
     MNP, dorejestracja                  100% / 1000 px od 1100 px, dopełnienie 30 px
     FAQ                                 820 px, dopełnienie 16 px
     kody USSD                           1160 px, dopełnienie clamp(24px, 5vw, 56px)

   NADPISANIA PRZEZ `:has()`, A NIE PRZEZ KOLEJNOŚĆ ARKUSZY. Gdyby te trzy wyjątki
   stały w arkuszach swoich grup, o wyniku decydowałaby kolejność wczytywania —
   a reguły w zapytaniach medialnych niżej i tak by je przebiły przy równej
   szczegółowości. `:has()` daje im szczegółowość 0-3-0 wobec 0-1-0 reguł bazowych,
   więc wygrywają zawsze, a wszystkie cztery kolumny stoją w jednym miejscu, gdzie
   widać je obok siebie.
   =========================================================================== */

/* Podstawa: regulaminy, cennik, trwały nośnik. */
.strona-hero {
	--hero-max: 100%;
	--hero-pad: 35px;
}

@media screen and (min-width: 600px) {
	.strona-hero {
		--hero-max: 90vw;
	}
}

@media screen and (min-width: 1200px) {
	.strona-hero {
		--hero-max: 80vw;
	}
}

/* MNP i dorejestracja — rozpoznawane po `.mnp_container`, który mają obie i tylko
   one. Numery stron nie nadają się na rozpoznanie: zmieniają się przy każdym
   wgraniu świeżej bazy. */
.tresc:has(> .main_container > .mnp_container) .strona-hero {
	--hero-max: 100%;
	--hero-pad: 30px;
}

@media screen and (min-width: 1100px) {
	.tresc:has(> .main_container > .mnp_container) .strona-hero {
		--hero-max: 1000px;
	}
}

.tresc:has(> .klucz-faq) .strona-hero {
	--hero-max: 820px;
	--hero-pad: 16px;
}

.tresc:has(> .kody) .strona-hero {
	--hero-max: 1160px;
	--hero-pad: clamp(24px, 5vw, 56px);
}

/* Pas ma własne tło na całą szerokość okna, a nie tylko pod kolumną treści.
   `100vw` z przesunięciem o połowę: element siedzi w kolumnie, ale maluje się
   od krawędzi do krawędzi. Bez tego kremowy prostokąt urywałby się w miejscu,
   w którym nic się nie kończy. */
.strona-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--pakiet-cream);
}

.strona-hero__nadtytul {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	font-family: var(--klucz-font-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pakiet-muted);
}

.strona-hero__nadtytul::before {
	content: "";
	flex: 0 0 auto;
	width: 28px;
	height: 2px;
	background: var(--pakiet-red);
}

/*
 * Dolny margines tytułu należy do PARY tytuł + zdanie, więc znika, gdy zdania
 * nie ma. Inaczej strona bez zdania wprowadzającego miałaby pod tytułem 24 px
 * pustki, której nic nie tłumaczy. `:last-child` zamiast osobnej klasy, bo to
 * jest dokładnie ten warunek: tytuł jest ostatni, kiedy zdania nie wypisano.
 */
.strona-hero__tytul {
	margin: 0 0 1.5rem;
	font-family: var(--klucz-font-ui);
	/* Ten sam stopień co nagłówek slajdu (`slider.css`, `.slajd-tytul`): pas
	   otwierający podstronę jest jej pierwszym elementem, tak jak baner jest
	   pierwszym elementem strony głównej. Zmiana tam ma iść i tutaj — inaczej
	   dwa nagłówki tej samej rangi zaczną się różnić bez powodu. */
	font-size: clamp(2.25rem, 5.9vw, 5.5rem);
	font-weight: 400;
	letter-spacing: -.04em;
	line-height: .98;
	color: var(--pakiet-ink);
	text-wrap: balance;
}

.strona-hero__tytul:last-child {
	margin-bottom: 0;
}

.strona-hero__lid {
	margin: 0;
	max-width: 34rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--pakiet-muted);
	text-wrap: pretty;
}

/*
 * Koło — proporcje i krycie z makiety (`pomoc.html`, reguła `.innerHero:after`),
 * ale rysowane trzema okręgami jeden w drugim, nie cieniem.
 *
 * DLACZEGO NIE `box-shadow`, SKORO TAK JEST W MAKIECIE
 * `spread` cienia podaje się w pikselach i nie skaluje się razem z elementem.
 * Przy kole, które ma się zwężać razem z kolumną, pierścienie zostałyby tej samej
 * grubości i przy 40% szerokości zjadłyby całą czerwień. Zagnieżdżone `inset`
 * w procentach dają dokładnie ten sam rysunek i skalują się same.
 *
 * PROPORCJE PRZELICZONE Z MAKIETY, nie dobrane na oko:
 *   koło 390 px, pierścienie 530 i 670 px (czyli `spread` 70 i 140)
 *   670 = 100%  →  530 to 79,1%, czyli `inset` 10,45%
 *                  390 to 58,2%, czyli `inset` 20,9%
 *
 * KRYCIE TEŻ SIĘ ZGADZA, mimo innej techniki. W makiecie oba cienie leżą jeden
 * na drugim (#dc202d12 = 7% na #dc202d09 = 3,5%), więc w środkowym pierścieniu
 * nakładają się na ok. 10%. Zagnieżdżone okręgi robią to samo w tej samej
 * kolejności. W pierwszej wersji z 17.08.2026 miałem te wartości odwrotnie —
 * ciemniejszy pierścień na zewnątrz — i dlatego koło wyglądało inaczej.
 *
 * `aspect-ratio` zamiast wysokości: koło ma zostać kołem przy każdej szerokości
 * kolumny, a nie spłaszczyć się do elipsy.
 *
 * Ozdoba niczego nie znaczy, więc znacznik ma `aria-hidden`.
 */
.strona-hero__kolo {
	position: relative;
	/* Zmniejszone o połowę 18.08.2026 — pas był za wysoki. To koło wyznacza
	   wysokość całego pasa, więc jego szerokość jest tu jednocześnie regulacją
	   wysokości banera. `19vw` przejmuje pałeczkę na węższych oknach, żeby koło
	   zwężało się razem z pasem, zamiast spychać tytuł do jednej litery w wierszu. */
	width: min(280px, 19vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba(var(--pakiet-red-rgb), .035);
}

.strona-hero__kolo::before,
.strona-hero__kolo::after {
	content: "";
	position: absolute;
	inset: 10.45%;
	border-radius: 50%;
	background: rgba(var(--pakiet-red-rgb), .07);
}

.strona-hero__kolo::after {
	inset: 20.9%;
	background: var(--pakiet-red);
}
/*
 * Poniżej 900 px koło NIE ZNIKA — chowa się w połowie za prawą krawędzią.
 *
 * Do 17.08.2026 było tu `display: none`, z uzasadnieniem, że na telefonie koło
 * zajęłoby cały ekran i zepchnęło treść poniżej pierwszego przewinięcia. To było
 * prawdziwe dla koła stojącego w kolumnie siatki — ale nie jest jedynym
 * rozwiązaniem. Makieta robi to inaczej i właściciel chce tak samo: koło wychodzi
 * z układu, zmniejsza się do 220 px, blednie i wysuwa się połową poza krawędź.
 * Zajmuje wtedy zero miejsca w pionie, więc pierwotny zarzut odpada.
 *
 * TEKST WOLNO NA NIE NACHODZIĆ — tak zdecydował właściciel. Stąd `position:
 * absolute` zamiast kolumny i `z-index` pod treścią; przy kryciu 35% napis
 * pozostaje czytelny.
 *
 * `right: -110px` przy szerokości 220 px to dokładnie połowa. Element wystaje
 * wtedy poza okno, ale `overflow-x: clip` na `.tresc` ucina nadmiar, więc nie
 * pojawia się poziomy pasek przewijania.
 *
 * `pointer-events: none`, żeby przezroczysta ozdoba nie przechwytywała dotknięć
 * w miejscu, w którym nic nie widać.
 */
@media screen and (max-width: 899px) {
	.strona-hero {
		grid-template-columns: 1fr;
		padding-top: 1.25rem;
		padding-bottom: 1rem;
		/* Niżej niż na szerokim ekranie, bo koło jest tu ozdobą wysuniętą poza
		   krawędź i nie zajmuje miejsca w pionie — wysokość ma wynikać z tekstu.
		   272 px to najwyższa z siedmiu stron przy 430 px, zaokrąglona w górę. */
		min-height: 272px;
	}

	.strona-hero__tresc {
		position: relative;
		z-index: 1;
	}

	.strona-hero__kolo {
		position: absolute;
		z-index: 0;
		top: 35px;
		right: -110px;
		width: 220px;
		opacity: .35;
		pointer-events: none;
	}
}