/*
 * Slider banera — układ hero, 2026.
 *
 * Ten sam sposób co przy kartkach pakietów: slajd dostał nowe nazwy klas
 * (`slajd-*`), więc stare reguły w `pages.css` nie mają czego dotyczyć i zostają
 * uśpione. Poprzedni wygląd, z działającymi strzałkami i okienkiem „Szczegóły”,
 * jest zapisany w `dokumentacja/stary-wyglad-slidera.html`.
 *
 * Klasa `item` na slajdzie ZOSTAJE: skrypt slidera po niej wybiera slajdy
 * i sam ustawia im `display: flex` w atrybucie `style`. Dlatego układ dwóch
 * kolumn robi flex — grid zostałby nadpisany.
 *
 * Barwy bierzemy ze zmiennych `--pakiet-*` z `pakiety.css` (arkusz jest jego
 * zależnością). Nazwa jest już za wąska na dwa bloki — do uogólnienia, gdy
 * dojdzie trzeci.
 *
 * Strzałki i kropki są w treści strony i układają się pod slajdem jako
 * „❮ • • • ❯”. Pozycji nie ruszamy, zmieniamy tylko wygląd.
 */

/*
 * Hero w makiecie: kremowy pas idzie na całą szerokość, treść nie — siedzi
 * w kolumnie ~1180 px z marginesem po bokach.
 *
 * Szerokości NIE ogranicza tu `.slider`, tylko sam slajd. To jedyny sposób,
 * żeby tło było pełne bez sztuczek: `100vw` liczy pasek przewijania i potrafi
 * dorzucić poziomy suwak, a cień bez rozszerzenia jest tylko odsuniętą kopią
 * pudełka — przy wąskim elemencie kończy się, zanim dojdzie do krawędzi okna.
 *
 * Kropki dostają ten sam pas, bo należą do banera — inaczej pod slajdem
 * powstawałby biały pasek z kropkami w środku kremowej sekcji.
 */
.slider,
.slider-dots {
	background-color: var(--pakiet-cream);
}

.slider {
	max-width: none;
	/* Warstwa welonu liczy się od pudełka z dopełnieniem, a ma zaczynać się tam,
	   gdzie slajd — dlatego dopełnienie i `top` welonu biorą tę samą liczbę. */
	--slajd-pas-gora: 28px;
	/* Własne `position`, żeby welon nie wisiał na `.slider` z `pages.css` — tamten
	   arkusz jest do wygaszenia i jego `position: relative` kiedyś zniknie. */
	position: relative;
	/* Odstęp od nagłówka przeniesiony z marginesu do dopełnienia, żeby mieścił się
	   w kremowym pasie, a nie zostawiał nad nim białej szpary. */
	margin-top: 0;
	margin-bottom: 0;
	/*
	 * Było 48 px. Zmierzone przy oknie 1440: od góry kremowego pasa do nadtytułu
	 * mijało 136 px, z czego tylko 48 dawało to dopełnienie — resztę robiło
	 * wyśrodkowanie treści w wierszu wysokim na 560 px (patrz `.slajd-obraz`).
	 * Obie liczby zbite naraz, bo osobno żadna nie zamyka pustki nad nagłówkiem.
	 */
	padding-top: var(--slajd-pas-gora);
	/*
	 * Przycięcie do szerokości okna — na KAŻDYM ekranie, nie tylko wąskim.
	 *
	 * Większy z dwóch kręgów tła celowo wychodzi poza kolumnę i za krawędź kadru,
	 * tak jak na makiecie. Bez przycięcia rozpychał stronę: zmierzone przy oknie
	 * 1440 px prawa krawędź kręgu sięgała 1500 px i pojawiał się poziomy suwak,
	 * a serwis dawał się przesunąć w bok. Dla wąskich ekranów ta sama reguła
	 * stała już niżej, w zapytaniu do 900 px — z tego samego powodu, tyle że
	 * wtedy wystawał rysunek. Zostaje tam, bo tam jest opisana historia zgłoszenia.
	 *
	 * `clip`, a NIE `hidden`: `hidden` na jednej osi wymusza `auto` na drugiej,
	 * czyli robi z pasa kontener przewijania — a strzałki wiszą 32 px PONIŻEJ
	 * jego dolnej krawędzi i zostałyby ucięte. `clip` pozwala drugiej osi zostać
	 * przy `visible`.
	 */
	overflow-x: clip;
	overflow-y: visible;
}

/* Kolumna treści. Ograniczenie szerokości siedzi tutaj, a nie na `.slider`,
   żeby kremowe tło mogło iść na całą szerokość okna. */
.slider .item.slajd {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	gap: 56px;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding: 4px 40px 16px;
	overflow: visible;
	background: none;
	text-align: left;
}

/*
 * Lekki welon pod treścią i rysunkiem — wyłącznie dekoracja.
 *
 * Siedzi na PASIE, nie na slajdzie. Przy zmianie slajdu dwa slajdy nachodzą na
 * siebie przez 250 ms przenikania, więc welon na slajdzie znaczył dwie warstwy
 * naraz: krycie się sumowało i pas pulsował przy każdej zmianie. Jeden welon na
 * pasie nie ma z czym się dodawać i stoi nieruchomo.
 *
 * Stąd też prostsze boki: pas ma już szerokość okna, więc nie trzeba go
 * rozpychać z kolumny slajdu przez `calc((100vw - 100%) / -2)`.
 */
.slider::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: var(--slajd-pas-gora);
	bottom: 0;
	z-index: 0;
	background-color: var(--slajd-welon-barwa);
	background-image: var(--slajd-welon-obraz, url("../img/slider/welon-slajdu.png?v=2"));
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	background-blend-mode: luminosity;
	-webkit-mask-image: var(--slajd-welon-obraz, url("../img/slider/welon-slajdu.png?v=2")), var(--slajd-welon-obraz, url("../img/slider/welon-slajdu.png?v=2"));
	mask-image: var(--slajd-welon-obraz, url("../img/slider/welon-slajdu.png?v=2")), var(--slajd-welon-obraz, url("../img/slider/welon-slajdu.png?v=2"));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	opacity: var(--slajd-welon-krycie);
	pointer-events: none;
	filter: saturate(var(--slajd-welon-nasycenie)) brightness(.82) contrast(1.12);
}

.slajd-tresc,
.slajd-obraz {
	position: relative;
	z-index: 1;
}

.klucz-kontrast .slider::before {
	display: none;
}

/*
 * Jednakowa wysokość slajdów.
 *
 * Slajdy różnią się ilością treści — pierwszy ma trzy kroki promocji i odsyłacz
 * do regulaminu, pozostałe po jednym zdaniu. Przy pokazywaniu jednego naraz
 * kontener kurczył się do bieżącego i treść pod banerem podskakiwała przy każdej
 * zmianie slajdu.
 *
 * Teraz wszystkie leżą w tej samej komórce siatki, więc wysokość bierze się
 * z najwyższego z nich i jest stała. Nieaktywne są schowane `visibility`,
 * a nie `display` — inaczej wypadłyby z układu i wysokość znów by skakała.
 *
 * Klasę `slider--js` dokłada skrypt. Bez niego slajdy zostają widoczne jeden
 * pod drugim: treść da się przeczytać, zamiast zniknąć.
 */
.slider.slider--js {
	display: grid;
}

/*
 * `align-self: start` jest tu konieczne, nie kosmetyczne.
 *
 * Wysokość wspólnego pola bierze się z NAJWYŻSZEGO slajdu. Bez tej reguły slajd
 * niższy jest rozciągany na całe pole, a jego treść rozkłada się w nadwyżce.
 * Rozwinięcie szczegółów powiększa treść, nadwyżki ubywa i cały blok podjeżdża
 * do góry — czyli kliknięcie „Szczegóły” przesuwa nagłówek, którego nikt nie ruszał.
 *
 * Przy wyrównaniu do góry slajd ma własną wysokość i stoi przy górnej krawędzi
 * pola, więc rozwijanie dokłada treść wyłącznie w dół.
 */
/*
 * Zanim ruszy skrypt, widać wyłącznie pierwszy slajd.
 *
 * Ukrywaniem steruje klasa `slider--js`, którą skrypt dokłada dopiero po
 * wczytaniu dokumentu. Do tego czasu wszystkie trzy slajdy stały jeden pod
 * drugim w normalnym toku treści i przy wejściu na stronę mignęły naraz,
 * po czym dwa znikały.
 *
 * Przy okazji to jedyny sensowny stan bez JavaScriptu: jeden baner zamiast
 * trzech sklejonych w kolumnę.
 */
.slider:not(.slider--js) .item.slajd:not(:first-of-type) {
	display: none;
}

.slider.slider--js .item.slajd {
	grid-area: 1 / 1;
	align-self: start;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 250ms ease;
}

.slider.slider--js .item.slajd.item--aktywny {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

/*
 * Wejście slajdu przypięte do klasy stanu.
 *
 * `pages.css` wiesza animację wejścia na samym `.slider .item` i liczy na to, że
 * skrypt przełącza slajdy przez `display` — zmiana `display` uruchamia animację
 * od nowa. Nowy skrypt przełącza klasę, a nie `display`, więc animacja
 * odpalała się raz, przy wczytaniu strony, dla wszystkich slajdów naraz.
 * Przy zmianie slajdu zostawało samo przejście krycia i wejście wyglądało na
 * spóźnione względem tego, co robi reszta banera.
 *
 * Dołożenie i zdjęcie klasy uruchamia animację tak samo jak zmiana `display`,
 * więc wystarczy przenieść ją na `.item--aktywny`. Przy okazji znika zwłoka
 * 0,12 s ilustracji — rysunek rusza razem z napisem, a nie po nim.
 */
@media (prefers-reduced-motion: no-preference) {
	.slider.slider--js .item.slajd {
		animation: none;
	}

	.slider.slider--js .item.slajd.item--aktywny {
		animation: klucz-slajd-wejscie 0.45s ease-out both;
	}

	.slider.slider--js .item.slajd.item--aktywny .slider_inside_img {
		animation: klucz-ilustracja-wejscie 0.55s ease-out both;
	}
}

.slajd-tresc {
	flex: 1 1 52%;
	min-width: 0;
}

/* ------------------------------------------------------------------ treść */

.slajd-nadtytul {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pakiet-muted);
}

.slajd-kreska {
	flex: 0 0 auto;
	width: 28px;
	height: 2px;
	background: var(--pakiet-red);
}

/* Krój jak w makiecie: 800, światło -6,5%, interlinia 0,94. To ta ciasnota
   robi charakter nagłówka — przy zwykłym rozstrzeleniu wychodzi zwykły tekst
   powiększony do dużego stopnia.
 *
 * Rodzina przez zmienną, nie wprost. Wcześniej stało tu `Arial, Helvetica`,
 * a Android Ariala nie ma i podstawia Roboto — o 33 do 57 px węższy przy 33,6 px.
 * Cała kalibracja tej sekcji (stopień pisma, `min-height`, szerokość kolumny)
 * była liczona na metrykę Ariala, więc na telefonach łamanie wychodziło inne
 * niż w makiecie. Zmienna daje Geista, który jest na naszym serwerze — czyli
 * ten sam krój i to samo łamanie na każdym urządzeniu. Arial został w zmiennej
 * jako zapas, gdyby plik kroju się nie wczytał. */
.slajd-tytul {
	/* 22 → 16 px. Przycisk ma stać BLIŻEJ nagłówka; między nimi siedzi jeszcze
	   przełącznik szczegółów, więc odstęp trzeba było zdjąć w dwóch miejscach —
	   tu i w `.slajd-szczegoly` niżej. Razem daje to 16 px mniej. */
	margin: 0 0 16px;
	font-family: var(--klucz-font-ui);
	/* Górna granica ruszana czterokrotnie: 3,9 → 4,5 → 5rem (80 px, tyle miał
	   nagłówek hero w makiecie), 17.08.2026 w górę do 6rem (96 px) na życzenie
	   właściciela — świadomie POWYŻEJ makiety — i tego samego dnia z powrotem
	   w dół do 5,5rem (88 px), bo 96 px okazało się za dużo.

	   Człon środkowy chodzi z nią parą: 5,4 → 6,4 → 5,9vw. Bez tego pełny stopień
	   byłby osiągany dopiero przy oknie ok. 1600 px, czyli prawie nigdy;
	   przy 5,9vw wraca to do ok. 1490 px.

	   Dolna granica bez zmian: poniżej nagłówek maleje razem z kolumną, więc
	   najdłuższy wiersz („Kup nasz starter”) nie zaczyna się łamać w nowym
	   miejscu.

	   ZAKRES: ta reguła kończy się na 900 px. Niżej obowiązuje własna, na końcu
	   pliku, i jest kalibrowana osobno — na łamanie najdłuższego słowa w wąskiej
	   kolumnie, nie na wygląd nagłówka na szerokim ekranie. Obie zmiany stopnia
	   z 17.08.2026 dotyczą wyłącznie szerokich ekranów; tamta reguła stoi
	   nietknięta od kalibracji i nie ma powodu ruszać jej „dla symetrii”. */
	font-size: clamp(2.25rem, 5.9vw, 5.5rem);
	font-weight: 800;
	letter-spacing: -.065em;
	line-height: .94;
	color: var(--pakiet-ink);
}

.slajd-akcent {
	display: block;
	color: var(--pakiet-red);
}

/* ------------------------------------------------------ szczegóły oferty */

/*
 * Dawniej w okienku otwieranym przyciskiem „Szczegóły”. Klasy w środku
 * (`promo-title`, `promo-steps`, `promo-link`) pochodzą z treści zapisanej
 * w panelu, więc stylujemy je pod tymi nazwami, zamiast zmieniać dane.
 *
 * KAŻDY selektor niżej ma w łańcuchu `.more-content`. To nie ozdoba: stare
 * reguły w `pages.css` są pisane jako `.more-content.promo .promo-title`, czyli
 * z trzech klas, i wygrywały z krótszymi. Stąd brała się ikona nad tytułem,
 * wyśrodkowany napis i odsyłacz dosunięty do prawej krawędzi.
 *
 * Treść stoi w białym panelu: na kremowym tle odcina się sama, a zaokrąglenie
 * i obrys są te same co na kartkach pakietów, więc baner i oferta mówią jednym
 * językiem. Panel oddziela też szczegóły promocji od nagłówka — wcześniej jedno
 * wchodziło w drugie.
 */
/*
 * Szerokość panelu dobrana do nagłówka nad nim. Dokładnie zrównać się nie da:
 * nagłówek jest tak szeroki, jak jego tekst, a ten zmienia się ze slajdem
 * i z językiem. Udział kolumny trafia bliżej niż sztywna liczba znaków —
 * przy `52ch` panel był wyraźnie węższy, przy pełnej szerokości wychodził
 * poza napis.
 *
 * Przy okazji trzyma to długość wiersza w ryzach: ~88% z ~625 px kolumny daje
 * około 60 znaków, czyli poniżej zalecanych 80.
 */
/* Bez pudełka. W makiecie hero nie ma żadnego kontenera — pod nagłówkiem stoi
   sam tekst, a strukturę robią odstępy i typografia. Biały panel na kremowym tle
   wprowadzał drugi prostokąt tuż pod nagłówkiem i przeciążał tę część slajdu. */
.slajd-szczegoly {
	max-width: 88%;
	/* 30 → 20 px, druga połowa dosunięcia przycisku do nagłówka. */
	margin: 0 0 20px;
	text-align: left;
}

/* Przełącznik rozwijania. Domyślny trójkącik przeglądarki zdjęty, w zamian
   własna „ptaszka” obracana o pół obrotu — ten sam gest co w innych miejscach
   serwisu, a przy tym niezależny od tego, jak marker rysuje dana przeglądarka. */
/* Wysokość celu dotykowego: zmierzone 18 px, próg z WCAG 2.5.8 to 24. Napis ma
   0.75rem, więc sam wiersz nigdy tam nie dojdzie — brakujące 6 px dokłada
   `min-height`. W rem, żeby rosło razem z powiększeniem tekstu z paska
   dostępności. `align-items: center` niżej trzyma napis na środku tej wysokości. */
.slajd-szczegoly > summary {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 1.5rem;
	width: fit-content;
	margin-bottom: 16px;
	cursor: pointer;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pakiet-muted);
	list-style: none;
}

.slajd-szczegoly > summary::-webkit-details-marker {
	display: none;
}

.slajd-szczegoly > summary::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 150ms ease;
}

.slajd-szczegoly[open] > summary::after {
	transform: translateY(1px) rotate(-135deg);
}

.slajd-szczegoly > summary:hover,
.slajd-szczegoly > summary:focus-visible {
	color: var(--pakiet-red);
}

.slajd-szczegoly:not([open]) > summary {
	margin-bottom: 0;
}

/*
 * Rozwinięta treść oznaczona pionową kreską w barwie marki — wariant B
 * z podglądu wariantów.
 *
 * Kreska siedzi na TREŚCI, nie na całym bloku: przełącznik „Szczegóły” zostaje
 * wtedy przy lewej krawędzi, w jednej linii z nagłówkiem i przyciskiem, a kreska
 * pojawia się dopiero razem z tym, co oznacza. Przy zwiniętym bloku wisiałaby
 * obok samego napisu i wyglądała na ozdobnik bez powodu.
 */
.slajd-szczegoly[open] > .slajd-szczegoly-tresc {
	padding-left: 22px;
	border-left: 3px solid var(--pakiet-red);
}

.slajd-szczegoly .more-content,
.slajd-szczegoly .promo_transfer {
	max-width: none;
	margin: 0;
	padding: 0;
	text-align: left;
	color: inherit;
}

/* Tytuł szczegółów. Ikonka, która stała nad nim, została usunięta przy
   renderowaniu — powtarzała to, co mówi ilustracja slajdu obok. */
.slajd-szczegoly .more-content .promo-title,
.slajd-szczegoly .more-content h3 {
	display: block;
	margin: 0 0 14px;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: -.015em;
	line-height: 1.35;
	text-align: left;
	color: var(--pakiet-ink);
}

.slajd-szczegoly .more-content p {
	margin: 0 0 10px;
	font-size: 0.9375rem;
	line-height: 1.5;
	text-align: left;
	color: var(--pakiet-muted);
}

.slajd-szczegoly .more-content p:last-child {
	margin-bottom: 0;
}

.slajd-szczegoly .more-content .promo-steps {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.slajd-szczegoly .more-content .promo-steps li {
	position: relative;
	margin: 0;
	padding-left: 2em;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--pakiet-muted);
}

/* Numer kroku jako czerwony znacznik przy krawędzi, a nie liczba wewnątrz
   zdania — kroki czyta się wtedy jak listę, a nie jak akapit. */
.slajd-szczegoly .more-content .promo-steps li > span:first-child {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 0.9375rem;
	font-weight: 800;
	color: var(--pakiet-red);
}

.slajd-szczegoly .more-content .promo-steps strong {
	font-weight: 700;
	color: var(--pakiet-ink);
}

/* Odsyłacz do regulaminu: pod treścią, przy lewej krawędzi, oddzielony kreską.
   Wcześniej wisiał przy prawej, oderwany od tego, czego dotyczy. */
.slajd-szczegoly .more-content .promo-link,
.slajd-szczegoly .promo-link {
	display: inline-block;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--pakiet-line);
	width: 100%;
	font-size: 0.8125rem;
	font-weight: 700;
	text-align: left;
	text-decoration: underline;
	color: var(--pakiet-muted);
}

.slajd-szczegoly .more-content .promo-link:hover,
.slajd-szczegoly .promo-link:hover {
	color: var(--pakiet-red);
}

/* ---------------------------------------------------------------- akcje */

.slajd-akcje {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

.slajd-przycisk {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	/* Było 15/28 px przy piśmie 0.875rem — przy nagłówku 85 px czytało się to
	   jak odsyłacz, nie jak wezwanie. Teraz 18/34 przy 0.9375rem: przycisk rośnie
	   z 51 do 58 px wysokości, czyli mniej więcej o tyle, o ile skrócił się
	   odstęp nad nim. */
	padding: 18px 34px;
	border-radius: 999px;
	background: var(--pakiet-red);
	color: #fff;
	font-family: var(--klucz-font-ui);
	font-size: 0.9375rem;
	font-weight: 800;
	text-decoration: none;
	transition: background-color 150ms ease;
}

.slajd-przycisk:hover,
.slajd-przycisk:focus {
	background: var(--pakiet-red-ciemny);
	color: #fff;
}

/* Kod USSD wygląda jak plakietka z kartek pakietów — to ta sama rzecz. */
.slajd-kod {
	display: inline-block;
	padding: 14px 26px;
	border: 1px solid var(--pakiet-line);
	border-radius: 999px;
	background: #fff;
	color: var(--pakiet-red);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 1.0625rem;
	font-weight: 700;
}

.slajd-etykieta {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--pakiet-ink);
}

/* ------------------------------------------------------- koło z rysunkiem */

.slajd-obraz {
	position: relative;
	display: grid;
	flex: 1 1 44%;
	place-items: center;
	min-width: 0;
	/*
	 * `min-height: 560px` ZDJĘTE.
	 *
	 * Stało tu, bo kolumna musiała pomieścić czerwony dysk szerszy od rysunku.
	 * Dysku nie ma od dawna, a liczba została i sama trzymała wiersz o 36 px
	 * wyższy, niż cokolwiek w nim potrzebowało. Skutek był podwójny: hero było
	 * za wysokie, a treść — wyśrodkowana w tym wierszu — odpychana od góry
	 * pustką, której nikt nie zamawiał.
	 *
	 * Teraz wysokość wiersza bierze się z tego, co w nim naprawdę stoi:
	 * z pudełka rysunku (bok równy szerokości kolumny) albo z napisu, gdy
	 * jest wyższy. Nie wracać do sztywnej liczby — trzeba by ją przeliczać
	 * przy każdej zmianie stopnia pisma.
	 */
}

/*
 * Rysunek na całą szerokość swojej kolumny — nie ma już dysku, z którym
 * musiałby dzielić miejsce.
 *
 * Cień zdjęty razem z kołem: rzucał go rysunek na czerwień, a na kremowym tle
 * robił brudną obwódkę wokół niczego.
 */
.slajd-obraz .slider_inside_img {
	position: relative;
	z-index: 2;
	width: min(560px, 100%);
	height: auto;
	/*
	 * Rysunek o 28% większy — bez ruszania układu.
	 *
	 * Zmierzone przy oknie 1440: pudełko rysunku ma 524×524 px, ale sam rysunek
	 * zajmuje w nim 355×376 (przeniesienie), 409×402 (mapa) i 328×338 (starter).
	 * Czyli od 60 do 78% boku — reszta to margines po kremowym kole `r="92"`,
	 * wokół którego te rysunki komponowano jako medaliony. To ten margines robił
	 * wrażenie, że telefon „ginie” przy nagłówku, a nie wielkość pudełka.
	 *
	 * Dlatego powiększamy TREŚĆ, a nie pudełko. Szerokość pudełka wyznacza
	 * wysokość wiersza (rysunek jest kwadratowy), więc wzrost przez `width`
	 * podniósłby całe hero — a ono ma być niższe, nie wyższe. `scale` działa
	 * po układzie: pudełko zostaje 524, rysunek rośnie do ~670.
	 *
	 * GÓRNA GRANICA to 1.28. Największy z trzech rysunków (mapa) sięga 83 jednostek
	 * od środka kadru przy 100 jednostkach do krawędzi; 83 × 1.28 = 106, czyli
	 * wychodzi 6 jednostek (~16 px) poza pudełko. Mieści się to w 56-pikselowym
	 * odstępie między kolumnami. Przy 1.35 byłoby już 29 px i rysunek zacząłby
	 * wchodzić w nagłówek.
	 *
	 * `scale`, NIE `transform: scale()`. Animacja wejścia rysunku kończy się na
	 * `transform: none` zapisanym z `both`, więc skala w `transform` byłaby
	 * kasowana dokładnie w chwili, gdy animacja dobiega końca — ten sam błąd
	 * opisany niżej przy wyśrodkowaniu na wąskim ekranie. `scale` jest osobną
	 * własnością i animacja `transform` jej nie dotyka.
	 */
	scale: 1.28;
	/* Rysunek mapy przy 1.28 wychodzi kilkanaście pikseli poza własny kadr,
	   a `<svg>` domyślnie przycina. Wypuszczamy go — pas jest i tak przycinany
	   na krawędzi okna regułą `.slider { overflow-x: clip }`. */
	overflow: visible;
	/*
	 * ⚠ TO NIE JEST DROBIAZG — bez tego prawa strzałka slidera przestaje działać.
	 *
	 * `<svg>` łapie kliknięcia CAŁYM swoim pudełkiem, nie samym rysunkiem. Pudełko
	 * jest kwadratem o boku kolumny, a rysunek wypełnia w nim 2/3 — reszta to
	 * przezroczysta ramka, która i tak przechwytuje wskaźnik. Przy skali 1.28
	 * pudełko urosło z 524 do 671 px i jego dolny brzeg (do 727 px) nasunął się
	 * na strzałkę „dalej” (661–701 px). Widać było strzałkę, a klikało się
	 * w niewidoczny narożnik rysunku.
	 *
	 * Rysunek nie ma w środku niczego klikalnego — jest ozdobą slajdu — więc
	 * najprościej wypisać go z obsługi wskaźnika w całości. Kręgi tła mają to samo
	 * z tego samego powodu.
	 */
	pointer-events: none;
}

/*
 * Kremowe koło wewnątrz rysunku — schowane.
 *
 * Każdy z trzech rysunków ma je zapisane jako `<circle r="92" fill="#FBF3E7">`.
 * Zamiast dostrajać je do barwy pasa, gasimy je zupełnie: rysunek leży wtedy
 * wprost na tle sekcji i nie ma czego dopasowywać przy każdej zmianie tła.
 *
 * Da się to zrobić stąd wyłącznie dlatego, że rysunki są wstawiane WPROST jako
 * SVG, a nie znacznikiem `<img>` — do wnętrza pliku wstawionego przez `<img>`
 * arkusz nie sięga. Wybieramy po promieniu, a nie po barwie: w rysunku z mapą
 * ta sama barwa występuje jeszcze pięć razy, na ekranach telefonów.
 *
 * W plikach koło zostaje. Gdyby rysunki trafiły kiedyś na ciemne tło, może się
 * przydać z powrotem — a wtedy wystarczy zdjąć tę regułę.
 */
.slajd-obraz .slider_inside_img circle[r="92"] {
	fill: none;
}

/*
 * ⚠ TYMCZASOWE — cień na ziemi pod telefonem zgaszony.
 *
 * Zgłoszone przez właściciela 18.08.2026 ze słowem „chwilowo”, więc gasimy go
 * stylem, a NIE wycinamy z rysunków. Elipsa siedzi w każdym z trzech plików
 * (`przenies-numer.svg`, `starter.svg`, `polaczenia-ukraina.svg`) jako jedyny
 * `<ellipse>` na najwyższym poziomie, razem z ustawionym przed chwilą
 * położeniem — 15 px niżej i 10 px w lewo. Skasowanie jej z plików kazałoby
 * odtwarzać te liczby przy powrocie.
 *
 * ŻEBY WRÓCIŁ: skasować tę jedną regułę. Nic więcej nie trzeba.
 *
 * To NIE jest ten sam cień co niżej. Tamten rzuca każdy przedmiot rysunku
 * (`> g`) i zostaje włączony; ten był płaską plamą na ziemi.
 */
.slajd-obraz .slider_inside_img > ellipse {
	display: none;
}

/*
 * Cień na poszczególnych elementach rysunku, nie na całym kadrze.
 *
 * Cień rzucany przez cały SVG obrysowywał kremowe koło i po jego zgaszeniu
 * zostawał jako brudna obwódka wokół niczego. Tutaj każda grupa najwyższego
 * poziomu — telefon, karta, mapa — rzuca własny, więc przedmioty odrywają się
 * od tła, a puste miejsca zostają puste.
 *
 * Do sprawdzenia na wszystkich trzech slajdach: rysunek z mapą ma dwie grupy
 * blisko siebie i cienie mogą się na siebie nakładać.
 */
.slajd-obraz .slider_inside_img > g {
	/*
	 * ⚠ LICZBY SĄ PODZIELONE PRZEZ SKALĘ RYSUNKU, i to nie jest fanaberia.
	 *
	 * `scale: 1.28` wyżej powiększa rysunek RAZEM z jego cieniem: przesunięcie 6 px
	 * robiło się 7,7, a rozmycie 10 px — 12,8. Cień przestawał być cieniem przedmiotu,
	 * a stawał się rozmytą plamą pod nim; zgłoszone przez właściciela jako „co to za
	 * cienie i rozmycie”.
	 *
	 *   6 / 1.28 = 4.7      10 / 1.28 = 7.8
	 *
	 * Po podzieleniu na ekranie wychodzi dokładnie to, co było przed powiększeniem.
	 * Przy zmianie `scale` te dwie liczby trzeba przeliczyć na nowo.
	 */
	filter: drop-shadow(0 4.7px 7.8px rgba(47, 0, 4, .16));
}

/* --------------------------------------------------------------- plakietka */

/*
 * Krótki konkret przy rysunku: „+10 зл”, „0,29 зл/хв”, „Доставка 0 зл”.
 *
 * Rysuje się TYLKO wtedy, gdy pole „Plakietka przy rysunku” jest w panelu
 * wypełnione — pusty slajd nie dostaje pustej pigułki (patrz `Klucz_Slajdy::plakietka`).
 *
 * Biała pigułka z czerwonym napisem, a nie odwrotnie. Czerwień marki na bieli
 * daje 5,04:1, czyli powyżej progu 4,5:1; odwrotnie wyszłoby tyle samo, ale
 * czerwone pole obok czerwonego przycisku pod nagłówkiem robiło z banera dwa
 * konkurujące akcenty. Biel dodatkowo odcina plakietkę od kręgów tła, które są
 * właśnie czerwonawe.
 *
 * POŁOŻENIE liczone od pudełka rysunku, nie od samego rysunku: pudełko ma stałe
 * proporcje (kwadrat o boku kolumny), a rysunek jest w nim wyśrodkowany i każdy
 * z trzech ma inny obrys. Przy 12% od góry i −2% od prawej pigułka trafia
 * w górno-prawy narożnik każdego z nich, nie zasłaniając telefonu ani mapy.
 */
.slajd-plakietka {
	position: absolute;
	top: 12%;
	right: -2%;
	z-index: 3;
	max-width: 60%;
	padding: 0.75rem 1.125rem;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 10px 26px rgba(47, 0, 4, .14);
	color: var(--pakiet-red);
	font-family: var(--klucz-font-ui);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.1;
	white-space: nowrap;
}

/* ------------------------------------------------------ strzałki i kropki */

/*
 * Strzałki i kropki stoją w jednym rzędzie: „❮ • • • ❯”, wyśrodkowane.
 *
 * Znaczniki są w treści strony i rozdzielone — strzałki siedzą w `.slider`,
 * kropki w osobnym `.slider-dots` pod nim. Żeby wyszły w jednej linii bez
 * ruszania treści strony, kropki dostają stałą wysokość rzędu, a strzałki
 * są do niej przysunięte odsunięciem od dołu slidera:
 *
 * ROZMIAR. Strzałki mają 36 px. Dolną granicą jest 24 px — tyle wymaga WCAG 2.2
 * dla celu dotykowego (kryterium 2.5.8). 36 px zostawia nad tym połowę zapasu,
 * a jednocześnie jest wyraźnie mniejsze od poprzednich 46 px, które przy kropkach
 * i przycisku slajdu wyglądały ciężko.
 *
 * POŁOŻENIE. Rachunek zapisany wyżej opierał się na dwóch liczbach, których nie
 * sprawdzono na stronie, i obie były złe:
 *
 *   — „środek rzędu kropek = dół slidera + 23 px”. Nieprawda. `.slider-dots` ma
 *     `min-height: 46px`, ale też `padding-bottom`, a przy `box-sizing: border-box`
 *     to dopełnienie wypycha pas ponad 46 px i kropki zostają przy GÓRNEJ krawędzi.
 *     Zmierzone: kropki 737–761, środek 749, czyli dół slidera + 12, nie + 23.
 *   — „rząd kropek ma ok. 62 px”. Zmierzone 74: trzy pola po 24 px, z czego
 *     aktywne rozszerza się do 26.
 *
 * Skutek pierwszej pomyłki: strzałki stały 11 px NIŻEJ od kropek, więc „❮ • • • ❯”
 * nigdy nie było jednym rzędem — a to właśnie ten uskok czytał się jako
 * „kontrolki wiszą gdzieś pod spodem”.
 *
 * Rachunek na nowo, przy strzałce 40 px:
 *
 *   środek rzędu kropek     = dół slidera + 12 px          (zmierzone)
 *   dolna krawędź strzałki  = 12 + 20 (połowa strzałki) = 32 px poniżej slidera
 *   rząd kropek: 74 px, czyli 37 px na stronę od osi       (zmierzone)
 *   odstęp strzałki od kropek: 22 px
 *   prawa krawędź lewej strzałki = 37 + 22 = 59 px od osi
 *   lewa krawędź lewej strzałki  = 59 + 40 = 99 px od osi
 *
 * Zmiana rozmiaru strzałki albo dopełnienia pasa kropek wymaga przeliczenia
 * wszystkich trzech wartości — i sprawdzenia w przeglądarce, a nie na kartce.
 */
/*
 * Znak strzałki RYSOWANY, nie literowy.
 *
 * W treści strony przyciski mają znaki `‹` i `›`. W przeciętnym foncie
 * systemowym są cienkie, mają nierówne odsadki (lewy i prawy nie wypadają
 * symetrycznie w swoich pudełkach) i nie da się im nadać zaokrąglonych końców.
 *
 * Rysunek nakładamy jako MASKĘ, tak samo jak ikony w menu: maska przepuszcza
 * kolor spod spodu, więc strzałka bierze barwę z `color` i sama zmienia się
 * przy najechaniu oraz w trybie wysokiego kontrastu — bez drugiego kompletu
 * plików i bez osobnych reguł.
 *
 * Napis zostaje w drzewie dostępności (chowamy go wcięciem, nie `display: none`),
 * więc dla czytnika ekranu nic się nie zmienia.
 */
/* Strzałki są przyciskami, a nie odsyłaczami: `<a>` bez `href` nie przyjmuje
   focusu, więc do zmiany slajdu nie dało się dojść z klawiatury. `appearance`
   i `font` zdejmują to, co przeglądarka sama rysuje na przycisku. */
.slider .prev,
.slider .next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-top: 0;
	padding: 0;
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid var(--pakiet-line);
	border-radius: 999px;
	background-color: #fff;
	color: var(--pakiet-red);
	font: inherit;
	text-indent: -999em;
	cursor: pointer;
	/*
	 * Cień, bo sam krążek NIE ODCINA SIĘ od tła: biel na kremie to 1,11:1,
	 * a jego obwódka na kremie 1,27:1 — czyli praktycznie nic. Kryterium WCAG
	 * 1.4.11 jest tu spełnione, ale tylko dlatego, że rozpoznawalnym elementem
	 * jest sam znak strzałki (czerwień na bieli, 5,04:1), a nie krążek pod nim.
	 * Stąd wrażenie „bardzo blade”: widać było znaczek wiszący w powietrzu.
	 *
	 * Cień zamiast ciemniejszej obwódki: obwódka w `--pakiet-muted` dałaby 4,77:1,
	 * ale dwa szare kółka po bokach kropek przeciągają uwagę na nawigację, a ta
	 * ma być drugorzędna wobec treści slajdu.
	 */
	box-shadow: 0 4px 12px rgba(47, 0, 4, .12);
	bottom: -32px;
	/* Ponad rysunkiem, który ma `z-index: 2` i pudełko sięgające niżej niż jego
	   własna kreska. Samo `pointer-events: none` na rysunku wystarcza do klikania,
	   ale bez tej warstwy strzałka byłaby przez niego przykryta na malowaniu. */
	z-index: 4;
}

.slider .prev:focus-visible,
.slider .next:focus-visible {
	outline: 2px solid var(--pakiet-red);
	outline-offset: 2px;
}

.slider .prev::after,
.slider .next::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.8125rem;
	height: 0.8125rem;
	transform: translate(-50%, -50%);
	background-color: currentColor;
	-webkit-mask: no-repeat center / contain;
	mask: no-repeat center / contain;
}

.slider .prev::after,
#all-in-one .pkg-nav.prev::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 4 7.5 12l8 8' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 4 7.5 12l8 8' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.slider .next::after,
#all-in-one .pkg-nav.next::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 4l8 8-8 8' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 4l8 8-8 8' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.slider .prev {
	left: calc(50% - 99px);
	right: auto;
}

.slider .next {
	left: calc(50% + 59px);
	right: auto;
}

.slider .prev:hover,
.slider .next:hover {
	border-color: var(--pakiet-red);
	background-color: var(--pakiet-red);
	color: #fff;
}

/* Wysokość rzędu jako `min-height`, a dolny odstęp jako dopełnienie: przy
   `height` i globalnym `box-sizing: border-box` dopełnienie zjadałoby rząd,
   a margines wypadłby poza kremowy pas. */
.slider-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Odstęp zdjęty do zera, bo trzyma go teraz sam przycisk: kropka ma 9 px,
	   ale pole kliknięcia wokół niej 24 px, tyle ile wymaga WCAG 2.2 dla celu
	   dotykowego (kryterium 2.5.8). Przy dawnych 9 px odstępu pola sąsiednich
	   kropek zachodziłyby na siebie, a tego kryterium nie dopuszcza. */
	gap: 0;
	min-height: 46px;
	margin-top: 0;
	margin-bottom: 0;
	/*
	 * 48 → 26 px. To dopełnienie było dolną częścią pustki pod banerem: przycisk
	 * slajdu kończył się 176 px nad dolną krawędzią kremowego pasa.
	 *
	 * Poniżej 26 px nie schodzić: strzałka sięga 32 px pod dół slidera, więc przy
	 * mniejszym dopełnieniu wystawałaby poza kremowy pas na białe tło strony.
	 */
	padding-bottom: 26px;
	/*
	 * ZANIKANIE KREMU W BIEL ZDJĘTE, 19.08.2026.
	 *
	 * Stała tu druga warstwa tła, przez którą dolne ~18 px pasa przechodziło w biel
	 * strony — miało łagodzić styk z sekcją oferty. Zgłoszone przez właściciela
	 * wprost: „co to za cienie i rozmycie, po co?”. I słusznie: kremowy pas ma równą,
	 * czystą krawędź na całej długości serwisu, a to jedno miejsce się z niej wyłamywało
	 * i czytało jak zabrudzenie, a nie jak przejście.
	 *
	 * Nie przywracać bez zapytania. Jeśli styk sekcji kiedyś naprawdę zacznie przeszkadzać,
	 * lepiej zmniejszyć 80-pikselowy odstęp nad ofertą niż rozmywać krawędź.
	 */
}

/* Kropki to przyciski, nie puste `<span>`. Sam element jest przezroczystym polem
   kliknięcia; widoczną kropkę rysuje `::before`. Dzięki temu cel ma 24 px, a kropka
   dalej 9 px — wygląd zostaje, a da się do niej dojść tabulatorem. */
.slider-dots_item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	background: none;
	cursor: pointer;
}

/* Stary arkusz `pages.css` maluje tło kropki na `.slider-dots_item:hover`
   i na `.active-slider`. Na przycisku o boku 24 px dałoby to czerwony kwadrat
   zamiast kropki, więc tło zdejmujemy tu i przenosimy na `::before`. */
.slider-dots_item:hover,
.slider-dots_item:focus,
.slider-dots_item.active-slider {
	background: none;
}

.slider-dots_item:focus-visible {
	outline: 2px solid var(--pakiet-red);
	outline-offset: 0;
	border-radius: 999px;
}

.slider-dots_item::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background-color: var(--pakiet-line);
	transition: width 150ms ease, background-color 150ms ease;
}

.slider-dots_item:hover::before {
	background-color: var(--pakiet-red);
}

.slider-dots_item.active-slider::before {
	width: 26px;
	background-color: var(--pakiet-red);
}

/* ------------------------------------------------------------ wąskie ekrany */

/*
 * Wąskie ekrany: rysunek obok nagłówka, nie nad nim.
 *
 * Rysunek na całą szerokość zabierał pierwszy ekran telefonu w całości — trzeba
 * było przewinąć, żeby dowiedzieć się, czego slajd dotyczy. Teraz stoi mały,
 * w drugiej kolumnie, obok nadtytułu i nagłówka; szczegóły i przycisk idą pod
 * spodem na pełną szerokość.
 *
 * Robi to siatka na slajdzie plus `display: contents` na kolumnie tekstu:
 * dzięki temu nadtytuł, nagłówek, szczegóły i przycisk stają się osobnymi polami
 * siatki i każde da się ustawić z osobna, bez zmiany znaczników. `.slajd-tresc`
 * jest zwykłym `div`-em bez tła i dopełnienia, więc zniknięcie jego pudełka
 * niczego nie zabiera.
 */
@media screen and (max-width: 900px) {
	.slider .item.slajd {
		display: grid;
		/*
		 * 52% na napis, 48% na rysunek.
		 *
		 * Granicę wyznacza najdłuższe słowo z trzech nagłówków — „Połączenia”.
		 * Przy 33,6 px zajmuje około 176 px, więc kolumna napisu nie może zejść
		 * poniżej tej szerokości, bo słowo złamie się w środku wyrazu. Na telefonie
		 * 390 px daje to 182 px, czyli sześć pikseli zapasu — i to jest realny
		 * limit, o ile rysunek może jeszcze urosnąć kolumną.
		 *
		 * Dawna uwaga o pustce nad rysunkiem i pod nim straciła przedmiot: pole
		 * rysunku ma teraz zerową wysokość i nie rozpycha wiersza.
		 */
		grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
		align-items: center;
		/* Zapis „wiersze kolumny”. Sam `column-gap` nie wystarczy: reguła dla
		   szerokiego ekranu ustawia `gap: 56px`, czyli OBA odstępy, i ten między
		   wierszami zostawał, rozpychając slajd czterema pustymi pasami.
		   Odstępy pionowe robią tu marginesy samych elementów.
		   Odstępu poziomego nie ma: koło jest wyśrodkowane w swojej kolumnie,
		   więc powietrze przy napisie i tak zostaje, a obwódka odcina je od
		   tekstu bez pomocy pustego pasa. */
		gap: 0;
		/* Z lewej 25 px zamiast 20. Napis zaczyna się dokładnie na krawędzi
		   kolumny, a że nagłówek jest ciężki i ciasno złamany, przy 20 px
		   czytało się to jak przyklejone do brzegu. Z prawej zostaje 20 px:
		   tam stoi rysunek, który i tak jest szerszy od swojej kolumny. */
		padding: 8px 20px 24px 25px;
	}

	.slider::before {
		left: -18%;
		right: -18%;
		background-size: 100% 100%;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
		opacity: calc(var(--slajd-welon-krycie) * .64);
	}

	.slajd-tresc {
		display: contents;
	}

	/* `display: contents` usuwa pudełko `.slajd-tresc`, a razem z nim jego
	   `z-index: 1`. Poziom przywracamy dzieciom, żeby welon pozostał pod tekstem
	   i przyciskami także na telefonie. */
	.slajd-tresc > * {
		position: relative;
		z-index: 1;
	}

	/*
	 * Nadtytuł stoi osobno NAD zasięgiem koła.
	 *
	 * Koło jest wyśrodkowane na wierszu nagłówka i przy ~157 px wobec ~126 px
	 * wysokości nagłówka wystaje po ~15 px w górę i w dół. Margines 26 px
	 * wyprowadza nadtytuł ponad ten nadmiar, więc czyta się jak osobna etykieta,
	 * a nie jak część bloku z rysunkiem.
	 *
	 * Ten odstęp nie jest tym samym co pustka, którą przed chwilą usuwaliśmy:
	 * tamta brała się z rozpychania wiersza i nie niosła znaczenia, ta oddziela
	 * dwa elementy i jest zamierzona.
	 *
	 * Stopień 11 px z lżejszym światłem. Było 10 px — dolna granica dla
	 * wersalików, ale na prawdziwym telefonie napis nadal czytało się z trudem.
	 * Niżej niż 10 px nie schodzimy w ogóle; pakiet dostępności z 4 sierpnia
	 * naprawiał właśnie teksty tej wielkości.
	 */
	.slajd-nadtytul {
		grid-column: 1 / -1;
		grid-row: 1;
		margin-bottom: 26px;
		font-size: 0.6875rem;
		letter-spacing: .11em;
	}

	/* Nagłówek: po zmniejszeniu o 10% i podniesieniu o 20% wychodzi 8% powyżej
	   wartości z szerokiego ekranu. Każda z trzech liczb `clamp` przeliczona
	   osobno, żeby zachowanie przy skalowaniu zostało to samo. Że wartość jest
	   większa niż na szerokim ekranie, nie szkodzi — te reguły się nie nakładają,
	   ta obowiązuje wyłącznie do 900 px.
	   `overflow-wrap` zabezpiecza długie słowa („Połączenia”) przed wyjściem poza
	   kolumnę, która ma tu tylko 70% szerokości. */
	.slajd-tytul {
		grid-column: 1;
		grid-row: 2;
		margin-bottom: 0;
		/* Dolna wartość obniżona z 2,43rem: przy kolumnie zwężonej do połowy
		   ekranu „Połączenia” w 39 px nie mieściło się w wierszu i łamało się
		   w środku wyrazu. 2,1rem (33,6 px) to największy stopień, przy którym
		   najdłuższe słowo z trzech nagłówków jeszcze wchodzi w całości. */
		/*
		 * Stała wysokość wiersza nagłówka, liczona jako cztery wiersze pisma
		 * (interlinia 0,94). Bez tego koło skakało między slajdami: jest
		 * wyśrodkowane na tym wierszu, a wiersz miał inną wysokość zależnie od
		 * tego, na ile linii łamał się tytuł — „Przenieś numer do Klucz Mobile”
		 * na cztery, „Kup nasz starter na Allegro” na trzy.
		 *
		 * Cztery, bo tyle ma najdłuższy z trzech nagłówków. Gdyby doszedł dłuższy,
		 * tę wartość trzeba podnieść, inaczej wiersz znów zacznie się różnić.
		 */
		min-height: 3.76em;
		font-size: clamp(2.1rem, 5.4vw, 4.86rem);
		overflow-wrap: break-word;
		/* Wyrównuje długości wierszy zamiast zostawiać jeden długi i trzy krótkie.
		   Przeglądarki bez tej własności po prostu łamią po staremu. */
		text-wrap: balance;
	}

	/*
	 * Rysunek na wysokości NAGŁÓWKA, nie nadtytułu — stąd tylko drugi wiersz siatki.
	 *
	 * Rysunek jest CELOWO wyjęty z układu: pole ma zerową wysokość, a koło i rysunek
	 * są w nim pozycjonowane bezwzględnie, wyśrodkowane na jego osi.
	 *
	 * Dzięki temu wysokość wiersza bierze się wyłącznie z nagłówka. Wcześniej pole
	 * rysunku było kwadratem o boku równym szerokości kolumny, więc przy kole
	 * wyższym od nagłówka zostawało pod nim i nad nim puste miejsce — i nie dało się
	 * go usunąć, tylko przesuwać. Teraz nie ma go skąd wziąć.
	 *
	 * Cena: koło może wystawać ponad nagłówek i pod niego. To świadomy wybór —
	 * lepiej, żeby wystawał rysunek niż żeby rozpychał układ pustką.
	 */
	.slajd-obraz {
		position: relative;
		grid-column: 2;
		grid-row: 2;
		align-self: center;
		width: 100%;
		height: 0;
		min-height: 0;
	}

	/* Zwinięty blok to jeden wiersz napisu — odstępy jak przy rozwiniętym
	   zostawiały nad nim i pod nim puste pasy. */
	.slajd-szczegoly {
		grid-column: 1 / -1;
		grid-row: 3;
		max-width: none;
		margin: 10px 0 18px;
	}

	.slajd-akcje {
		grid-column: 1 / -1;
		grid-row: 4;
	}

	/*
	 * Rysunek wyśrodkowany jawnie: pole ma zerową wysokość, więc nie ma czego
	 * wyśrodkowywać automatycznie — punktem odniesienia jest jego oś.
	 *
	 * 118% szerokości kolumny. Rysunek jest wyjęty z układu, więc może wyjść poza
	 * kolumnę bez rozpychania czegokolwiek: po ~15 px na stronę przy telefonie
	 * 390 px. W lewo trafia w luz przy poszarpanym prawym brzegu nagłówka,
	 * w prawo — w 20-pikselowe dopełnienie slajdu.
	 */
	/*
	 * Wyśrodkowanie przez `translate`, NIE przez `transform`.
	 *
	 * Rysunek ma animację wejścia, która kończy się na `transform: none` i jest
	 * zapisana z `both`, więc ta wartość zostaje po jej zakończeniu. Wyśrodkowanie
	 * zrobione w `transform` było przez to **kasowane w chwili, gdy animacja
	 * dobiegała końca** — rysunek zeskakiwał o pół swojej szerokości w prawo
	 * i pół wysokości w dół, czyli wyjeżdżał poza ekran i siadał za nisko.
	 *
	 * Nie było tego widać w inspekcji na komputerze, bo tamta przeglądarka zgłasza
	 * `prefers-reduced-motion: reduce` — animacja nie startuje, więc `transform`
	 * zostaje nietknięty i wszystko wygląda dobrze. Zmierzone na telefonie:
	 * rysunek 297 → 502 przy oknie 424, czyli 78 px poza ekranem.
	 *
	 * `translate` jest osobną własnością i animacja `transform` jej nie dotyka —
	 * obie składają się na końcowe położenie.
	 */
	.slajd-obraz .slider_inside_img {
		position: absolute;
		top: 50%;
		left: 50%;
		/* Dziesięć pikseli poniżej środka wiersza — na życzenie właściciela.
		   Punkt zaczepienia zostaje ten sam, przesunięcie siedzi w drugiej
		   składowej `translate`, więc wyśrodkowanie w poziomie jest nietknięte. */
		translate: -50% calc(-50% + 10px);
		z-index: 2;
		width: 118%;
		/*
		 * Powiększenie o 28% z szerokiego ekranu tutaj NIE obowiązuje.
		 *
		 * Tam rysunek rósł w pustym pudełku i miał dokąd. Tu jest już rozdmuchany
		 * do 118% swojej kolumny i wychodzi poza nią po ~16 px na stronę — nadmiar
		 * ucina dopiero `overflow-x: clip` na pasie. Po przemnożeniu przez 1.28
		 * wyszłoby 151%, czyli rysunek zacząłby wchodzić w nagłówek z lewej
		 * i znikać za krawędzią okna z prawej.
		 */
		scale: 1;
	}

	/*
	 * Plakietka nad rysunkiem, nie na nim.
	 *
	 * Przy zerowej wysokości pola `top: 12%` z szerokiego ekranu wypada na jego
	 * osi, czyli na środku telefonu. Odsunięcie w `rem` liczy się od górnej
	 * krawędzi rysunku (ten sięga ~100 px ponad oś) i idzie za paskiem rozmiaru
	 * pisma razem z samą pigułką.
	 */
	.slajd-plakietka {
		top: -5rem;
		right: -0.5rem;
		max-width: 100%;
		padding: 0.5rem 0.8125rem;
		font-size: 0.8125rem;
	}

	/*
	 * Przycięcie pasa suwaka na szerokość ekranu.
	 *
	 * Rysunek ma 118% szerokości kolumny, czyli wystaje po ~16 px na stronę. Komentarz
	 * wyżej zakłada, że w prawo trafia w dopełnienie slajdu — i tak jest przy 390 px,
	 * gdzie zostają 4 px zapasu. Ale zapas zależy od proporcji: na szerszym telefonie
	 * albo przy powiększonej czcionce systemowej kolumna rośnie szybciej niż dopełnienie
	 * i nadmiar przechodzi POZA KRAWĘDŹ OKNA. Strona daje się wtedy przewijać w bok,
	 * a po wejściu wygląda na przesuniętą — zgłoszone z trzech przeglądarek na telefonie,
	 * w inspekcji przy 375 i 412 px niewidoczne, bo tam zapas akurat starcza.
	 *
	 * Przycinamy na `.slider`, a nie na kolumnie: pas ma szerokość okna, więc rysunek
	 * nadal wychodzi poza swoją kolumnę — o to w tym układzie chodziło — a ucinany jest
	 * dopiero na krawędzi ekranu.
	 *
	 * `clip`, nie `hidden`: `hidden` tworzy kontener przewijania, co potrafi zepsuć
	 * przyklejanie się nagłówka. `hidden` zostaje niżej dla przeglądarek, które
	 * `clip` jeszcze nie znają — nowsze i tak wezmą ostatnią regułę.
	 */
	.slider {
		overflow-x: hidden;
		overflow-x: clip;
	}
}

@media (prefers-reduced-motion: reduce) {
	.slajd-przycisk,
	/* Przejście siedzi na `::before`, odkąd kropka jest rysunkiem wewnątrz
	   przycisku — sam `.slider-dots_item` nie ma już czego wyciszać. */
	.slider-dots_item::before,
	.slajd-szczegoly > summary::after,
	.slider.slider--js .item.slajd {
		transition: none;
	}
}