/*
 * Podstawowa taryfa i kafelki „dlaczego Klucz” — 2026.
 *
 * Kremowy pas na całą szerokość okna, a w nim dwa bloki: taryfa jako lista
 * wierszy z kropkowanym łącznikiem i sześć białych kart „dlaczego Klucz”.
 *
 * Cena i nazwa są osobnymi elementami dzięki zmianie w `Klucz_Uslugi`: pole
 * trzyma je w jednym zdaniu („Połączenia w Polsce – 0,49 zł/min”), a moduł
 * rozdziela je przy renderowaniu.
 *
 * DUŻO TU ZEROWANIA STARYCH REGUŁ. Oba bloki mają w `pages.css` gotowe układy
 * pod zupełnie inny wygląd — lista taryfowa jako dwie kolumny o stałej
 * szerokości, galeria jako pasek przewijany w poziomie. Te reguły nie zniknęły,
 * więc każdą, która przeszkadza nowemu układowi, trzeba wyłączyć jawnie.
 */

/*
 * Barwy pasa. Ciemny — zamienił się miejscami z blokiem „Dodatkowe informacje”,
 * który jest teraz jasny. Trzymanie ich w zmiennych sprawia, że kolejna zamiana
 * to poprawka w dwóch linijkach, a nie polowanie po całym pliku.
 *
 * Kontrasty na #3e4245: biel 10,14:1, drugi plan #c9cfd2 6,44:1, kropkowany
 * łącznik 3,20:1 (to grafika, próg 3:1). Białe kartki „dlaczego Klucz” mają
 * względem tła 10,14:1, więc odcinają się bez obrysu.
 */
:root {
	/* Wartość mieszka w `style.css`, żeby dała się zmienić z panelu. Wpisana tutaj
	   liczbą wygrywałaby z blokiem barw — ten arkusz wczytuje się później. */
	--taryfa-tlo: var(--kolor-pas-ciemny);
	--taryfa-tekst: #ffffff;
	--taryfa-drugi-plan: #c9cfd2;
	--taryfa-linia: rgba(255, 255, 255, .35);
	--taryfa-linia-slaba: rgba(255, 255, 255, .13);
}

/* ------------------------------------------------------------ pas sekcji */

/*
 * Tło na kontenerze sekcji, nie na blokach w środku.
 *
 * Kafelki „dlaczego Klucz” są w treści strony RODZEŃSTWEM taryfy, nie jej
 * dzieckiem, więc tło położone na taryfie kończyłoby się nad nimi. Na kontenerze
 * obejmuje oba bloki i idzie na całą szerokość okna bez żadnych sztuczek —
 * treść wraca do kolumny przez `max-width` elementów w środku.
 */
.container-second {
	/* Dopełnienie, a nie margines na dziecku: margines górny dziecka wyciekłby
	   poza kontener (zlewanie marginesów) i odsunął cały pas od bloku nad nim,
	   zostawiając białą szparę.

	   W `rem`, bo przy powiększeniu tekstu treść pasa rośnie i sztywne piksele
	   robiłyby z niej ciasny blok wciśnięty między krawędzie. */
	padding-top: var(--klucz-pas-y);
	padding-bottom: var(--klucz-pas-y);
	background-color: var(--taryfa-tlo);
}

/*
 * Cennik: skrócone dopełnienie pod listą odsyłaczy.
 *
 * Treść tej strony ma własne `.main_container { padding-bottom: 20% }`. Dwadzieścia
 * procent liczy się od SZEROKOŚCI kontenera, więc na szerokim ekranie robi z tego
 * ponad dwieście pikseli pustki — niewidocznej, dopóki pod spodem nic nie stało,
 * i rzucającej się w oczy od chwili, gdy doszedł pas taryfy.
 *
 * Reguła musi być mocniejsza niż tamta: styl w treści strony stoi w dokumencie
 * PÓŹNIEJ niż arkusze, więc przy równej szczegółowości by wygrał. Stąd `body`
 * z przodu. Poza Cennikiem ta reguła nie ma czego dotyczyć — `.main_container`
 * występuje wyłącznie na podstronach, a ten arkusz wczytuje się tylko na stronach
 * ofertowych i właśnie na Cenniku.
 */
body .main_container {
	padding-bottom: 2rem;
}

/*
 * Taryfa jako lista wierszy, bez własnej kartki.
 *
 * Wcześniej był to pas z kafelkami — po jednym na pozycję. Przy ośmiu pozycjach
 * ostatni rząd zostawał niepełny, a każdy kafelek powtarzał obrys i zaokrąglenie,
 * przez co blok czytał się jak osiem osobnych rzeczy zamiast jednego cennika.
 *
 *
 * Barwa siedzi na pasie, na całą szerokość okna — nie na kartce. Sama taryfa jest
 * tylko słupem treści na tym pasie: bez własnego tła, obrysu i zaokrągleń.
 * Wydzielenie robi barwa pasa, a wiersze i tak są od siebie odkreślone.
 */
.tarrif-standart {
	display: block;
	box-sizing: border-box;
	max-width: min(var(--klucz-kolumna), calc(100% - 40px));
	margin: 0 auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.tarrif-standart-title {
	margin-top: 0;
	margin-bottom: 1.25rem;
	font-family: var(--klucz-font-ui);
	font-size: clamp(1.5rem, 2.6vw, 2.25rem);
	font-weight: 400;
	letter-spacing: -.03em;
	line-height: 1.1;
	color: var(--taryfa-tekst);
	text-align: left;
}

/* --------------------------------------------------------- wiersze taryfy */

.tarrif-list {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Wiersz: nazwa z lewej, cena z prawej, kropki między nimi.
 *
 * `width: auto` kasuje `calc(100%/2 - 10px)` z `pages.css` — tamta reguła dawała
 * każdej pozycji połowę szerokości i łamała napisy w środku wyrazu.
 *
 * Wyrównanie do linii pisma (`baseline`), nie do środka: nazwa i cena mają różne
 * stopnie, a przy wyrównaniu do środka ich linie podstawowe by się rozjechały.
 */
.tarrif-list-item,
.tarrif-list-item:not(:last-child),
.tarrif-list-item:nth-child(2n+1) {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	width: auto;
	margin: 0;
	padding: 0.7rem 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--taryfa-tekst);
	text-align: left;
	font-size: 1rem;
	font-weight: 400;
}

/*
 * Kropkowany łącznik.
 *
 * Rysowany kropkowanym obrysem pustego elementu, który rozpycha się na całe wolne
 * miejsce — dzięki temu długość dobiera się sama, bez znajomości długości napisów.
 *
 * To ozdoba, więc pseudoelement: nie trafia do drzewa dostępności i czytnik ekranu
 * czyta sam wiersz — „Połączenia w Polsce, 0,49 zł/min”.
 *
 * `order` przesuwa go między napisy; kolejność w kodzie zostaje nietknięta.
 */
.tarrif-list-item::before {
	content: "";
	order: 2;
	flex: 1 1 1.5rem;
	min-width: 1.5rem;
	/* Bez przesunięcia w pionie. Pusty element wyrównany do linii pisma stawia
	   swoją DOLNĄ krawędź dokładnie na tej linii, więc kropki biegną tam, gdzie
	   kończą się litery — a nie w połowie ich wysokości, jak przy podniesieniu.
	   Barwa mocniejsza niż obrys kartek: `--pakiet-line` na kremie ledwo było
	   widać, a łącznik ma prowadzić wzrok od nazwy do ceny. */
	border-bottom: 1px dotted var(--taryfa-linia);
}

.tarrif-nazwa {
	order: 1;
	display: block;
	margin-top: 0;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--taryfa-drugi-plan);
}

/* Cena wytłuszczona i nierozdzielana: „0,49 zł/min” ma zostać w jednym kawałku. */
.tarrif-cena {
	order: 3;
	display: block;
	flex: 0 0 auto;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	white-space: nowrap;
	color: var(--taryfa-tekst);
}

/* Pozycja bez ceny (brak myślnika w zapisie) nie ma czego łączyć kropkami. */
.tarrif-list-item:not(:has(.tarrif-cena))::before {
	content: none;
}

/* ------------------------------------------- kafelki „dlaczego Klucz” */

/*
 * W `pages.css` ten blok jest paskiem przewijanym w poziomie (`display: flex`,
 * `overflow: scroll`, karty o stałej szerokości 260 px i wysokości 240 px).
 * Zamieniamy go na siatkę, więc trzeba zdjąć jedno i drugie — inaczej karty
 * zostają sztywne i wystają poza sekcję.
 *
 * `width: auto` jest tu kluczowe. W `pages.css`, w zapytaniu medialnym, galeria
 * ma SZTYWNE `width: 1000px` — a `max-width` takiej szerokości nie przykryje,
 * bo tylko ją ogranicza. Siatka liczyła więc kolumny z 912 px zamiast z 1112 px
 * i mieściła cztery zamiast pięciu, przez co sześć kafelków szło 4 + 2.
 */
/*
 * Liczba kolumn podana wprost, a nie przez `auto-fit`.
 *
 * `auto-fit` dobiera kolumny do szerokosci i przy 1112 px wpuscilby ich piec,
 * co przy szesciu kartach daje 5 + 1 — ostatnia zostaje sama w rzedzie.
 * Progi ustawione tak, zeby kazdy uklad dzielil szesc bez reszty: 3 x 2 na
 * ekranie szerokim, 2 x 3 na tablecie, 1 x 6 na telefonie.
 *
 * DLACZEGO NIE SZESC W RZEDZIE. Przy szesciu kolumnach i odstepie 16 px karta
 * ma 172 px, czyli 136 px na tekst. Najdluzszy podpis („Numer wazny 365 dni po
 * doladowaniu od 5 zl", 41 znakow) potrzebuje przy 14 px okolo 270 px, wiec
 * lamalby sie na trzy–cztery wiersze. Przy trzech kolumnach karta ma 360 px
 * i ten sam podpis miesci sie w jednym–dwoch wierszach.
 */
/* ------------------------------------------- nagłówek sekcji */

/*
 * Układ z makiety: po lewej nadtytuł, duży nagłówek i lid, po prawej kafelki.
 * Poniżej 1024 px jedna kolumna — dwie byłyby po 300 px i nagłówek łamałby się
 * na sześć wierszy.
 */
.dlaczego {
	max-width: var(--klucz-kolumna);
	margin: 0 auto;
	padding: 0 var(--klucz-margines-boczny);
}

@media screen and (min-width: 1024px) {
	.dlaczego {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 56px;
		align-items: start;
	}
}

/* Kreska PRZED napisem, w jednym wierszu — ten sam gest co przy nadtytule
   slajdu i przy „Dodatkowych informacjach”. */
.dlaczego-nadtytul {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--taryfa-drugi-plan);
}

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

.dlaczego-tytul {
	margin: 0 0 18px;
	font-family: var(--klucz-font-ui);
	font-size: clamp(1.75rem, 3.4vw, 3rem);
	font-weight: 400;
	letter-spacing: -.03em;
	line-height: 1.08;
	color: var(--taryfa-tekst);
	text-wrap: balance;
}

.dlaczego-lid {
	margin: 0;
	max-width: 34rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--taryfa-drugi-plan);
}

/*
 * Trzy liczby w prawej kolumnie — wiersze rozdzielone włosowymi liniami, ta sama
 * konstrukcja co wiersze taryfy: wartość z lewej, opis z prawej.
 *
 * „od 2013 roku” zamiast „13 lat” celowo: wiek trzeba by poprawiać co roku.
 */
.dlaczego-liczby {
	margin: var(--klucz-blok-y) 0 0;
	padding: 0;
	list-style: none;
}

.dlaczego-liczba {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--taryfa-linia-slaba);
}

.dlaczego-liczba:first-child {
	border-top: 1px solid var(--taryfa-linia-slaba);
}

.dlaczego-liczba-wartosc {
	flex: 0 0 auto;
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.1;
	color: var(--taryfa-tekst);
	white-space: nowrap;
}

/* Opis dosunięty do prawej i węższy od wartości — ma być podpisem, nie drugim
   zdaniem tej samej wagi. */
.dlaczego-liczba-opis {
	max-width: 16rem;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--taryfa-drugi-plan);
	text-align: right;
}

@media screen and (min-width: 1024px) {
	.dlaczego-liczby {
		margin-top: 0;
	}
}

/* ------------------------------------------- kafelki */

.gallery-why-klucz {
	display: grid;
	grid-template-columns: 1fr;
	/* W `rem`, więc odstęp rośnie razem z kartkami przy powiększeniu tekstu —
	   inaczej przy 150% kafelki puchłyby, a szpary między nimi zostawały. */
	gap: 1.5rem;
	width: auto;
	/* Marginesy boczne wyzerowane jawnie: `pages.css` daje galerii po 20 px
	   z każdej strony, przez co rząd kafelków był węższy od nagłówka nad nim. */
	margin: var(--klucz-blok-y) 0 0;
	padding: 0;
	overflow: visible;
	list-style: none;
}

/*
 * Dwie kolumny na każdym progu od 600 px w górę.
 *
 * Trzy odpadły razem z wejściem lewej kolumny: kafelki mają teraz do dyspozycji
 * siedem dwunastych szerokości, a nie całą, więc przy trzech kolumnach
 * schodziłyby poniżej 200 px i podpisy znów łamałyby się na cztery wiersze.
 * Sześć dzieli się przez dwa bez reszty, więc ostatni rząd zawsze jest pełny.
 */
@media screen and (min-width: 600px) {
	.gallery-why-klucz {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (min-width: 1024px) {
	.gallery-why-klucz {
		/* Pod obiema kolumnami, na całą szerokość — stąd trzy kolumny, a nie dwie:
		   sześć dzieli się przez trzy bez reszty, więc oba rzędy są pełne. */
		grid-column: 1 / -1;
		grid-template-columns: repeat(3, 1fr);
		margin-top: var(--klucz-blok-y);
	}
}

/*
 * Jednakowa wysokosc bierze sie z siatki: element siatki domyslnie rozciaga sie
 * na wysokosc rzedu, a `height: auto` zdejmuje sztywne 240 px z `pages.css`.
 * `justify-content: flex-start` trzyma tresc przy gorze, zeby przy nierownych
 * podpisach ikony stały w jednej linii.
 */
.gallery-why-klucz-card,
.gallery-why-klucz-card:not(:last-child) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 1.125rem;
	min-width: 0;
	height: auto;
	margin: 0;
	/* Dopełnienie hojniejsze niż w kartkach pakietów, bo tu tekst dochodzi do obu
	   krawędzi: nie ma ani ceny, ani plakietki, które trzymałyby wzrok z dala od
	   obrysu. Przy 24 px opis dotykał rogu i kartka czytała się jak ciasna. */
	padding: 1.875rem 1.75rem;
	border: 1px solid var(--taryfa-linia-slaba);
	border-radius: 20px;
	background: rgba(255, 255, 255, .07);
	box-shadow: none;
}

/*
 * Ikona w delikatnym czerwonym kolku.
 *
 * Tlo z przezroczystoscia, a nie osobna barwa: kolko lezy raz na bieli kartki,
 * a w trybie wysokiego kontrastu zniknie razem z nia, zamiast zostac jasna plama.
 * Wymiary w `em`, wiec kolko rosnie razem z ikona przy powiekszeniu tekstu.
 */
.gallery-why-klucz-card .card-2-title {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0;
	padding: 0;
	border-radius: 999px;
	background: rgba(var(--pakiet-red-rgb), .22);
	line-height: 0;
}

/*
 * Ikony są w treści strony jako SVG z atrybutami `width="120" height="120"`
 * i `fill="#567bc4"`. Atrybuty przegrywają z regułami arkusza, więc rozmiar
 * i barwę ustawiamy tutaj, bez ruszania treści.
 */
/*
 * Ikony rysowane kreską, nie wypełnieniem.
 *
 * Barwę ustawiamy przez `color`, bo znaczniki używają `currentColor` — dzięki
 * temu w trybie wysokiego kontrastu ikona bieleje razem z tekstem i nie trzeba
 * dla niej pisać osobnej reguły. `fill: none` na wszelki wypadek, gdyby ktoś
 * wkleił kiedyś ikonę wypełnianą.
 *
 * Rozmiar w `rem`, więc rośnie razem z pismem przy powiększeniu z paska
 * dostępności — tak samo jak kółko pod nią.
 */
.gallery-why-klucz-card .card-2-title-svg {
	width: 1.625rem;
	height: 1.625rem;
	fill: none;
	/* Rozjaśniona czerwień: marki (#c94d4d) daje na tym tle 2,4:1, poniżej progu
	   3:1 nawet dla samej grafiki. #f0a5a5 daje 5,14:1. */
	color: #f0a5a5;
}

/* `width: auto` zdejmuje `.title-2 { width: 150px }` z `pages.css` — napis
   łamał się na 150 px w kafelku szerokim na ponad 200. */
/* Tytuł i opis rozdzielone wagą i barwą, nie odstępem: karta ma dwa poziomy,
   więc drugi musi ustąpić pierwszemu, żeby dało się ją przeczytać w przelocie. */
.gallery-why-klucz-card > .title-2 {
	width: auto;
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--taryfa-tekst);
	text-align: left;
}

.gallery-why-klucz-card > .karta-opis {
	width: auto;
	margin: -0.5rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--taryfa-drugi-plan);
	text-align: left;
}

/* ------------------------------------------------------------ szerokości */

@media screen and (min-width: 768px) {
	.tarrif-standart {
		padding: 56px 32px;
	}

	.gallery-why-klucz {
		padding: 0 32px;
	}

	.tarrif-standart-title {
		margin-bottom: 30px;
	}
}

@media screen and (min-width: 1024px) {
	.tarrif-standart {
		padding: 64px 44px;
	}

	.gallery-why-klucz {
		padding: 0 44px;
	}
}