/* ==========================================================================
   Motyw WPR - arkusz warstwy publicznej.

   Nazewnictwo: każda klasa modułu i elementu niesie przedrostek `wpr-`, tak
   samo jak reszta kodu serwisu. Bez przedrostka zostają klasy stanu
   (`jest-otwarta`, `jest-widoczny`, `jest-biezaca`) - nigdy nie występują
   samodzielnie - oraz klasy rdzenia WordPressa (`current-menu-item`,
   `wp-block-*`), których nie wolno przemianować.

   Układ pisany od telefonu w górę. Progi:
     do 699 px   - telefon
     od 700 px   - tablet
     od 1100 px  - desktop, siatka treści 1740 px, 12 kolumn, odstęp 20 px

   W układzie nie ma `display: grid`. Pasma to `flex` z `gap: 20px`
   i `flex: 1 1 0` na dzieciach: sześć kafli po dwie kolumny
   (6 x 273,33 + 5 x 20 = 1740) i trzy karty po cztery (3 x 566,67 + 2 x 20
   = 1740) wypełniają szerokość co do piksela, bez deklarowania torów.
   ========================================================================== */

:root {
	--wpr-granat:        #0d3a8f;
	--wpr-granat-ciemny: #0d3a8f;
	--wpr-stal:          #17738f;
	--wpr-stal-jasna:    #1a7ba6;
	--wpr-lazur:         #1ea1db;
	--wpr-lod:           #eaf7fd;
	--wpr-lod-pasek:     #eef5f9;
	--wpr-alarm:         #c62828;
	--wpr-tekst:         #4f4f59;
	--wpr-tekst-slaby:   #5c6169;
	--wpr-linia:         #dbe3e8;
	--wpr-linia-jasna:   #e6ecf0;
	--wpr-obrys:         #7fa9bd;

	/* Mnożnik rozmiaru pisma - zmieniają go przyciski A- i A+. */
	--wpr-skala: 1;
}

/* Rozmiary pisma w rem, żeby przyciski A- i A+ naprawdę je zmieniały.
   Odstępy zostają w pikselach - układ ma się nie rozjeżdżać. */
html { font-size: calc(100% * var(--wpr-skala)); }

* { box-sizing: border-box; }

body {
	margin: 0;
	background: #fff;
	font-family: Lato, 'Segoe UI', system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wpr-tekst);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; color: var(--wpr-granat); text-wrap: pretty; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--wpr-granat); text-decoration: none; }

/*
 * Przyciski bloku wyłączone z ogólnej reguły najechania.
 *
 * Rdzeń daje im własne tło i własną barwę napisu, ale robi to selektorem
 * `:root :where(.wp-element-button)`, który liczy się jako 0,1,0 - a `a:hover`
 * ma 0,1,1 i wygrywał. Po najechaniu napis robił się granatowy i znikał na
 * ciemnym tle przycisku.
 *
 * `:where()` nie dokłada swoistości, więc reguła zostaje **dokładnie tak samo
 * mocna** jak była i nie zaczyna nagle wygrywać z regułami, z którymi
 * wcześniej przegrywała - przestaje tylko dotyczyć przycisków.
 */
a:not(:where(.wp-element-button)):hover { color: var(--wpr-granat-ciemny); text-decoration: underline; }

/*
 * Sygnałem najechania na przycisk jest przyciemnienie całości, nie zmiana
 * barwy napisu. Działa tak samo przy przycisku wypełnionym i przy samym
 * obrysie, więc nie trzeba znać barwy, którą redakcja mu nadała.
 */
.wp-element-button:hover { filter: brightness(.88); text-decoration: none; }

/* Obrys ogniska widoczny na każdym tle - bez tego nawigacja klawiaturą
   jest ślepa (WCAG 2.4.7). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: 3px solid #ffbf47;
	outline-offset: 3px;
	border-radius: 4px;
}

button { font: inherit; cursor: pointer; }

/* Tekst wyłącznie dla czytnika ekranu: tytuł strony, etykieta pola. */
.wpr-tytul-strony,
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; margin: -1px;
	padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.wpr-przeskocz {
	position: absolute; left: -9999px; top: 0; z-index: 50;
	padding: 14px 24px; background: var(--wpr-granat); color: #fff; border-radius: 0 0 16px 0;
}
.wpr-przeskocz:focus { left: 0; }

.wpr-lbl {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 700;
}

/* Marginesy boczne 20 px na telefonie; na desktopie siatka 1740 px.

   Wyłącznie własności boczne, nigdy skrót `padding`. Skrót ustawia też
   `padding-top` i `padding-bottom` na zero, więc kasowałby marginesy pionowe
   każdemu elementowi z klasą `wpr-marg`, który nadał je wcześniej w arkuszu -
   tak właśnie spłaszczyło się wnętrze stopki. */
.wpr-marg { width: 100%; margin: 0 auto; padding-left: 20px; padding-right: 20px; }

.wpr-kolko {
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto;
	width: 44px; height: 44px; border-radius: 999px;
	background: none; border: 1.5px solid var(--wpr-obrys); color: var(--wpr-stal);
	font-weight: 700; font-size: .95rem; text-decoration: none;
}
.wpr-kolko:hover { text-decoration: none; }
.wpr-kolko--pelne { background: var(--wpr-granat); border-color: var(--wpr-granat); color: #fff; }
.wpr-kolko--ciemne { background: var(--wpr-granat-ciemny); border: none; color: #fff; }
.wpr-kolko--mniejsze { width: 40px; height: 40px; }
.wpr-kolko--podkreslenie { text-decoration: underline; }

.wpr-btn {
	display: inline-flex; align-items: center; gap: 12px;
	min-height: 54px; padding: 0 28px; border: none; border-radius: 999px;
	text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
	font-size: .95rem; text-decoration: none;
	background: var(--wpr-granat); color: #fff;
}
.wpr-btn:hover { color: #fff; text-decoration: none; }
.wpr-btn--jasny { background: #fff; color: var(--wpr-granat); }
.wpr-btn--jasny:hover { color: var(--wpr-granat); }
.wpr-btn--obrys { background: none; border: 1.5px solid rgba(255,255,255,.6); color: #fff; }

/* ------------------------------------------------------- pasek narzędzi --- */

.wpr-pasek { background: var(--wpr-lod-pasek); border-bottom: 1px solid #dbe8ef; }
.wpr-pasek__srodek {
	display: flex; align-items: center; justify-content: center; gap: 16px;
	min-height: 56px; padding-top: 6px; padding-bottom: 6px;
}
.wpr-pasek__linki { display: none; }

/* Sześć kółek po 44 px z odstępem 4 px to 284 px - mieści się w 320 px treści
   przy ekranie 360. Podpis „Dostępność" wraca dopiero od tabletu. */
.wpr-pasek__narzedzia { display: flex; align-items: center; justify-content: center; gap: 4px; }
.wpr-pasek__podpis { display: none; }
.wpr-szukajka { display: none; }
.wpr-spolecznosci { display: none; }

/* ------------------------------------------------------------- nagłówek --- */

.wpr-naglowek {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px;
}

/* Znak zwęża się tak, żeby oba przyciski nawigacji zmieściły się obok
   w jednym wierszu także przy 360 px. */
.wpr-marka { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; }
.wpr-marka:hover { text-decoration: none; }
.wpr-marka > span { max-width: 150px; }
.wpr-marka__godlo { flex: 0 0 48px; width: 48px; height: 48px; }
.wpr-marka__nazwa { display: block; font-size: .85rem; font-weight: 700; color: var(--wpr-granat); line-height: 1.2; }
.wpr-marka__zoz { display: block; margin-top: 1px; font-size: .72rem; font-weight: 700; color: var(--wpr-stal); }
.wpr-marka__prm { display: none; }

.wpr-naglowek__przyciski { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.wpr-odznaki { display: none; }

/* Szuflada menu zajmuje własny wiersz nagłówka i wypada NAD numerem
   alarmowym - oba są dziećmi tego samego pojemnika flex, więc o kolejności
   decyduje kod, nie pozycjonowanie. */
.wpr-szuflada { flex: 1 0 100%; display: none; padding-top: 6px; padding-bottom: 10px; }
.wpr-szuflada.jest-otwarta { display: block; }

.wpr-alarm {
	flex: 1 0 100%;
	display: flex; align-items: center; gap: 16px;
	padding: 14px 22px; background: var(--wpr-alarm); border-radius: 24px; color: #fff;
}
.wpr-alarm:hover { color: #fff; text-decoration: none; }
.wpr-alarm__ikona { flex: 0 0 32px; }
.wpr-alarm__podpis { display: block; font-size: .72rem; opacity: .92; }
.wpr-alarm__numer { display: block; font-size: 2rem; font-weight: 700; line-height: 1.1; }
.wpr-alarm__lub { font-size: 1.1rem; font-weight: 400; opacity: .92; }

/* ----------------------------------------------------------------- menu --- */

.wpr-menu { display: none; }

.wpr-menu__lista { display: flex; flex-direction: column; gap: 4px; }
.wpr-menu__lista a {
	display: flex; align-items: center; justify-content: space-between;
	min-height: 52px; padding: 0 22px; border-radius: 26px;
	background: var(--wpr-granat); color: #fff; font-size: .95rem;
	text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.wpr-menu__lista a:hover { color: #fff; text-decoration: none; }
.wpr-menu__lista .current-menu-item > a,
.wpr-menu__lista .current_page_item > a {
	background: #fff; color: var(--wpr-granat); border: 2px solid var(--wpr-granat);
}
.wpr-menu__strefa {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; margin-top: 4px; border-radius: 26px;
	border: 2px solid var(--wpr-granat); color: var(--wpr-granat); font-size: .85rem;
}
.wpr-menu__strefa:hover { text-decoration: none; }
.wpr-menu__urzedowe { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.wpr-menu__urzedowe a { min-height: 44px; display: flex; align-items: center; font-size: .9rem; color: var(--wpr-stal); }

/* ------------------------------------------------------ rozwinięcia menu --- */

/*
 * Podmenu bez skryptu jest WIDOCZNE.
 *
 * Klasę `jest-skladana` dokłada dopiero skrypt, razem z przyciskami
 * rozwijania. Bez skryptu szuflada pokazuje pełne drzewo wciętą listą -
 * długie, ale dostępne. Ukrycie podmenu w arkuszu i otwieranie go wyłącznie
 * skryptem zamyka całą Strefę pacjenta przed każdym, komu skrypt nie wejdzie.
 */
.wpr-menu__lista .sub-menu {
	display: flex; flex-direction: column; gap: 2px;
	margin: 4px 0 10px 14px;
}
.wpr-menu__lista .sub-menu a {
	min-height: 44px; padding: 0 18px; border-radius: 22px;
	background: none; color: var(--wpr-stal);
	font-size: .82rem; letter-spacing: .05em;
}
.wpr-menu__lista .sub-menu .current-menu-item > a { background: var(--wpr-lod); border: none; color: var(--wpr-granat); }

/* Pozycja z dziećmi w szufladzie: odnośnik i przycisk rozwijania w wierszu,
   podmenu pod nimi na pełnej szerokości. */
.wpr-szuflada .menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wpr-szuflada .menu-item-has-children > a { flex: 1 1 auto; }
.wpr-szuflada .menu-item-has-children > .sub-menu { flex: 1 0 100%; }

.wpr-menu__rozwin {
	flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
	width: 52px; min-height: 52px; padding: 0;
	background: var(--wpr-granat); border: none; border-radius: 26px; color: #fff;
}
.wpr-menu__rozwin svg { transition: transform .2s ease; }
.jest-rozwiniety > .wpr-menu__rozwin svg { transform: rotate(180deg); }

.wpr-szuflada.jest-skladana .sub-menu { display: none; }
.wpr-szuflada.jest-skladana .jest-rozwiniety > .sub-menu { display: flex; }

/* ---------------------------------------------------------------- baner --- */

/* Kolejność na telefonie: rotator, sterowanie, szkolenia, warsztat, paliwa.
   Sterowanie siedzi w tym samym pojemniku co rotator, więc na desktopie
   zostaje pod nim, przy prawej krawędzi, a na telefonie zaraz za nim. */
.wpr-baner { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.wpr-baner__glowny { display: flex; flex-direction: column; }

.wpr-rotator {
	position: relative; overflow: hidden;
	min-height: 430px; background: var(--wpr-granat-ciemny); border-radius: 28px;
}
.wpr-rotator__tlo { position: absolute; inset: 0; width: 100%; height: 100%; }
.wpr-rotator__slajdy { position: relative; z-index: 1; min-height: 430px; }

/* Slajd to zdjęcie na całe pole rotatora - bez nagłówka i bez akapitu.
   Napis wpisany w obraz nie da się powiększyć ani odczytać czytnikiem
   ekranu, więc treścią slajdu jest sam obraz, a pod nim opcjonalny
   odsyłacz. Tytuł slajdu z panelu trafia do opisu alternatywnego. */
.wpr-slajd {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden; transition: opacity .5s ease;
}
.wpr-slajd.jest-widoczny { opacity: 1; visibility: visible; }
.wpr-slajd__foto { width: 100%; height: 100%; object-fit: cover; }
.wpr-slajd__znacznik {
	display: flex; align-items: center; gap: 10px;
	padding: 11px 20px; border-radius: 999px;
	background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.55);
	font-size: .68rem; color: #fff; letter-spacing: .1em;
}

/* Przycisk leży na zdjęciu, więc dostaje pod spód przyciemnienie -
   biały przycisk na jasnej fotografii ginie. */
.wpr-slajd__akcje {
	position: absolute; left: 0; right: 0; bottom: 0;
	display: flex; flex-wrap: wrap; gap: 12px;
	padding: 60px 24px 26px;
	background: linear-gradient(to top, rgba(12,74,97,.85), rgba(12,74,97,0));
}

.wpr-sterowanie {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; min-height: 56px;
}

/*
 * Sama kropka to element wewnętrzny o stałej średnicy - przycisk wokół niej
 * jest przezroczysty i daje palcowi 28 x 40 px. Slajd bieżący różni się
 * WYPEŁNIENIEM, nie kształtem: obwódka kontra pełne koło. Różnica przeżywa
 * skalę szarości i negatyw, czego nie da sama barwa (WCAG 1.4.1).
 */
.wpr-kropki { display: flex; align-items: center; }
.wpr-kropka {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 40px; padding: 0;
	border: none; background: none;
}
.wpr-kropka > span {
	width: 12px; height: 12px; border-radius: 999px;
	border: 2px solid var(--wpr-granat-ciemny);
}
.wpr-kropka.jest-biezaca > span { background: var(--wpr-granat-ciemny); }

/* Kropka pauzy - ten sam kształt i to samo pole dotykowe co reszta, ale
   z ikoną zamiast wypełnienia. WCAG 2.2.2 żąda widocznego sposobu
   zatrzymania treści, która rusza sama. */
.wpr-kropka--pauza { margin-left: 6px; color: var(--wpr-granat-ciemny); }
.wpr-kropka--pauza .wpr-ikona-start { display: none; }
.wpr-kropka--pauza.jest-zatrzymany .wpr-ikona-pauza { display: none; }
.wpr-kropka--pauza.jest-zatrzymany .wpr-ikona-start { display: block; }

/* ----------------------------------------------------------- pola oferty --- */

/* Na telefonie pola usług są poziome - ikona z lewej, tekst z prawej.
   Na desktopie stają się kolumnami: ikona u góry, tekst przy dolnej
   krawędzi. Pole z cennikiem jest kolumną zawsze, bo niesie tabelę. */
.wpr-oferta {
	position: relative; overflow: hidden;
	display: flex; gap: 18px;
	padding: 24px 22px; border-radius: 28px;
	background: var(--wpr-pole, var(--wpr-granat));
	color: var(--wpr-pole-tekst, #fff);
}
.wpr-oferta:hover { color: var(--wpr-pole-tekst, #fff); text-decoration: none; }

/*
 * Zdjęcie w tle idzie bez mieszania z barwą pola - decyzja Zamawiającego.
 * Barwa zostaje pod spodem i widać ją tylko tam, gdzie zdjęcia nie ma:
 * zanim się wczyta, przy przezroczystym pliku i przy innych proporcjach kadru.
 *
 * **Kontrast napisu zależy teraz od samego zdjęcia.** Wcześniej `mix-blend-mode`
 * gwarantował, że złożenie nie pogorszy odstępu między tłem a napisem,
 * cokolwiek redakcja wgra. Bez niego jasne zdjęcie pod białym napisem trzeba
 * wychwycić okiem - przelicznik w panelu liczy samą parę barw, nie zdjęcie.
 */
.wpr-oferta__tlo { position: absolute; inset: 0; background: var(--wpr-pole); }
.wpr-oferta__tlo img { width: 100%; height: 100%; object-fit: cover; }
.wpr-oferta--ze-zdjeciem > :not(.wpr-oferta__tlo) { position: relative; }

.wpr-oferta--cennik { flex-direction: column; gap: 16px; order: -1; }
.wpr-oferta__tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wpr-oferta__glowa { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.wpr-oferta__tytul { display: block; font-size: 1.35rem; font-weight: 700; line-height: 1.18; }
/* Barwa dziedziczona z pola. Stały jasny odcień byłby tu błędem: redakcja
   może wybrać ciemny napis na jasnym tle i wtedy drobny tekst zniknąłby. */
.wpr-oferta__opis { margin-top: 8px; font-size: .95rem; line-height: 1.5; color: inherit; }

/* Dodatkowy tekst pisze redakcja prostym edytorem, więc mogą w nim być
   akapity i listy. Odstępy bierze pierwsze dziecko, nie sam blok - inaczej
   margines akapitu dokładałby się do `margin-top` bloku. */
.wpr-oferta__opis > * { margin: 0; }
.wpr-oferta__opis > * + * { margin-top: .6em; }
.wpr-oferta__opis ul { list-style: disc; padding-left: 1.15em; }
.wpr-oferta__opis ol { list-style: decimal; padding-left: 1.35em; }
.wpr-oferta__opis li + li { margin-top: .3em; }
.wpr-oferta__link { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: .8rem; letter-spacing: .1em; }
.wpr-oferta--cennik .wpr-oferta__link { margin-top: 0; }

.wpr-ceny__podpis { display: block; font-size: .72rem; letter-spacing: .14em; }
.wpr-ceny { display: flex; margin-top: 12px; }
.wpr-ceny__poz { flex: 1 1 0; }
/* Kreska bierze barwę napisu, przygaszoną. Stała biel byłaby niewidoczna,
   gdy redakcja wybierze ciemny napis na jasnym tle. Pierwsza deklaracja
   jest zapasem dla przeglądarek bez `color-mix`. */
.wpr-ceny__poz + .wpr-ceny__poz {
	padding-left: 16px; margin-left: 16px;
	border-left: 1px solid currentColor;
	border-left-color: color-mix(in srgb, currentColor 34%, transparent);
}
.wpr-ceny__nazwa { display: block; font-size: .875rem; font-weight: 700; }
.wpr-ceny__kwota { display: block; margin-top: 2px; font-size: 1.35rem; font-weight: 700; line-height: 1.15; }
.wpr-ceny__jednostka { display: block; font-size: .75rem; color: inherit; }
.wpr-ceny__stopka { display: block; margin-top: 12px; font-size: .78rem; line-height: 1.45; color: inherit; }

/* ---------------------------------------------------------------- kafle --- */

.wpr-kafle { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/*
 * Kafel jest biały z obrysem, nie wypełniony barwą. Ikona rysowana jest
 * przez `currentColor`, więc bierze barwę tekstu bez osobnej reguły.
 *
 * Obrys 2 px, nie 1 px: przy jednym pikselu biały kafel na białej stronie
 * mało się odcina, a to jedyna krawędź, która go w ogóle wyznacza.
 */
.wpr-kafel {
	flex: 0 0 calc(50% - 6px);
	display: flex; flex-direction: column; gap: 12px;
	padding: 20px 18px 18px; border-radius: 24px;
	background: #fff; border: 2px solid var(--wpr-granat); color: var(--wpr-granat);
}
.wpr-kafel:hover { color: var(--wpr-granat); text-decoration: none; background: var(--wpr-lod); }
.wpr-kafel__tytul { font-size: 1.03rem; font-weight: 700; line-height: 1.3; }
.wpr-kafel__opis { display: none; }

/* --------------------------------------------------------- aktualności --- */

.wpr-aktualnosci { margin-top: 40px; margin-bottom: 48px; }
.wpr-sekcja__glowa {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 24px; flex-wrap: wrap;
	padding-bottom: 18px; border-bottom: 3px solid var(--wpr-lazur);
}
.wpr-sekcja__nadtytul { font-size: .72rem; letter-spacing: .14em; color: var(--wpr-stal); margin-bottom: 8px; }
.wpr-sekcja__tytul { font-size: 1.75rem; line-height: 1.15; font-weight: 700; }
.wpr-sekcja__glowa .wpr-btn { display: none; }

.wpr-karty { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }

/*
 * `flex: 0 0 auto`, nie `1 1 0`. W pojemniku ustawionym w kolumnę osią
 * główną jest wysokość, więc `flex-basis: 0` znaczyłoby „zero wysokości",
 * a `.wpr-karty` nie ma wysokości, z której karty mogłyby urosnąć - zwijały
 * się do zera. Równe kolumny są potrzebne dopiero na desktopie.
 */
.wpr-karta {
	flex: 0 0 auto;
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--wpr-linia); border-radius: 24px; overflow: hidden;
}
.wpr-karta:hover { text-decoration: none; }
.wpr-karta__foto {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 190px; background: var(--wpr-lod);
	font-size: .72rem; color: #3f7590; letter-spacing: .1em;
}
.wpr-karta__foto--zdjecie { min-height: 0; padding: 0; }
.wpr-karta__foto img { width: 100%; height: 190px; object-fit: cover; }
/* Na telefonie zdjęcie zostaje tylko przy pierwszym wpisie. Trzy karty
   z obrazami pod rząd dają ekran, przez który przewija się w ciemno. */
.wpr-karta:not(:first-child) .wpr-karta__foto { display: none; }
.wpr-karta__tresc { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 24px; }
.wpr-data {
	align-self: flex-start; padding: 6px 15px; border-radius: 999px;
	background: var(--wpr-lod); font-size: .75rem; color: var(--wpr-stal); letter-spacing: .1em;
}
.wpr-karta__tytul { font-size: 1.2rem; font-weight: 700; color: var(--wpr-granat); line-height: 1.3; }
.wpr-karta__lead { font-size: .95rem; line-height: 1.55; color: var(--wpr-tekst); }
.wpr-karta__wiecej { display: flex; align-items: center; gap: 9px; font-size: .8rem; color: var(--wpr-granat); letter-spacing: .09em; }

.wpr-wpisy { display: flex; flex-wrap: wrap; margin-top: 10px; }
.wpr-wpis {
	flex: 1 1 100%;
	display: flex; flex-direction: column; gap: 8px;
	padding: 16px 0; border-bottom: 1px solid var(--wpr-linia-jasna);
}
.wpr-wpis a { font-size: 1.05rem; font-weight: 700; line-height: 1.35; }

.wpr-wszystkie { display: flex; margin-top: 20px; }
.wpr-wszystkie .wpr-btn { width: 100%; justify-content: space-between; padding-right: 8px; }

/* --------------------------------------------- podstrony i pojedynczy wpis --- */

/* Kolumna treści podstron i wpisów. Nagłówek i stopka leżą poza tym
   elementem, więc trzymają pełną szerokość siatki.

   Szerokości tu nie ma - ustawia ją próg desktopowy selektorem
   `.wpr-marg.wpr-strona`. Powód: ten sam element niesie obie klasy, a `.wpr-marg`
   nadaje `max-width` później w arkuszu przy tej samej specyficzności, więc
   wygrywało i kolumna treści szła na pełną szerokość. */
.wpr-strona { margin: 0 auto; padding-top: 28px; padding-bottom: 56px; }
.wpr-strona__glowa { margin-bottom: 26px; }
.wpr-strona__tytul { margin-top: 10px; font-size: 2rem; line-height: 1.15; font-weight: 700; }
.wpr-strona__foto { margin: 0 0 26px; border-radius: 24px; overflow: hidden; }

.wpr-okruszki { font-size: .82rem; color: var(--wpr-tekst-slaby); line-height: 1.8; }
.wpr-okruszki a { color: var(--wpr-stal); }
.wpr-okruszki span[aria-hidden] { color: var(--wpr-obrys); padding: 0 4px; }

/* Treść z edytora bloków. Szerokości i odstępy przychodzą z `theme.json`;
   tutaj zostaje to, czego `theme.json` nie obejmuje. */
.wpr-tresc-bloku > * + * { margin-top: 1.4rem; }
.wpr-tresc-bloku h2 { margin-top: 2.4rem; }
.wpr-tresc-bloku h3 { margin-top: 2rem; }
.wpr-tresc-bloku ul,
.wpr-tresc-bloku ol { padding-left: 1.4rem; }
.wpr-tresc-bloku ul { list-style: disc; }
.wpr-tresc-bloku ol { list-style: decimal; }
.wpr-tresc-bloku li + li { margin-top: .4rem; }
.wpr-tresc-bloku img { border-radius: 16px; }
.wpr-tresc-bloku table { width: 100%; border-collapse: collapse; }
.wpr-tresc-bloku th,
.wpr-tresc-bloku td { padding: 10px 14px; border: 1px solid var(--wpr-linia); text-align: left; }
.wpr-tresc-bloku th { background: var(--wpr-lod); color: var(--wpr-granat); }
.wpr-tresc-bloku figcaption { margin-top: 8px; font-size: .85rem; color: var(--wpr-tekst-slaby); }

/*
 * Wyrównania z edytora nie wychodzą poza kolumnę treści.
 *
 * Wzorce rdzenia przychodzą ustawione na `alignfull`. Bez tej reguły ich
 * zachowanie zależy od arkusza rdzenia, a ten się zmienia między wydaniami -
 * a `wpr.css` nie miał tu **żadnej** reguły, więc szerokość takiego bloku
 * była kwestią przypadku. Teraz jest wypisana wprost i zgodna z tym, co
 * pokazuje edytor.
 */
.wpr-tresc-bloku .alignwide,
.wpr-tresc-bloku .alignfull {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.wpr-szukanie { margin: 22px 0; }
.wpr-szukanie label { display: block; margin-bottom: 8px; font-size: .85rem; color: var(--wpr-tekst-slaby); }
.wpr-szukanie__pole { display: flex; gap: 10px; flex-wrap: wrap; }
.wpr-szukanie input {
	flex: 1 1 240px; min-height: 54px; padding: 0 22px;
	border: 1.5px solid var(--wpr-obrys); border-radius: 999px;
	font: inherit; color: var(--wpr-tekst);
}

.wpr-strony-wpisu,
.wpr-aktualnosci .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px; padding: 0 14px; margin: 24px 4px 0;
	border: 1.5px solid var(--wpr-linia); border-radius: 999px;
}
.wpr-aktualnosci .page-numbers.current { background: var(--wpr-granat); border-color: var(--wpr-granat); color: #fff; }

/* ------------------------------------------------------ zanim zadzwonisz --- */

.wpr-zanim {
	margin-top: 8px;
	padding: 34px 0 38px;
	background: var(--wpr-lod);
	border-top: 1px solid #cfe8f5;
	border-bottom: 1px solid #cfe8f5;
}
.wpr-zanim__srodek { display: flex; flex-direction: column; gap: 30px; }
.wpr-zanim__instrukcja { flex: 0 0 auto; }

.wpr-numer {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
	margin-top: 22px; padding: 18px 24px;
	background: var(--wpr-alarm); border-radius: 24px; color: #fff;
}
.wpr-numer__podpis { flex: 0 0 auto; font-size: .72rem; line-height: 1.3; opacity: .92; }
.wpr-numer__cyfry { font-size: 2.2rem; font-weight: 700; line-height: 1; color: #fff; }
.wpr-numer__cyfry:hover { color: #fff; }
.wpr-numer__lub { font-size: 1.05rem; opacity: .92; }
.wpr-numer__uwaga { flex: 1 0 100%; font-size: .9rem; line-height: 1.4; opacity: .95; }

/* Numer kroku jest kolkiem o stalej szerokosci, wiec tresc zaczyna sie
   w jednej linii pionowej niezaleznie od dlugosci akapitu. */
/* Zerowanie listy dotyczy w arkuszu tylko `ul` - numerowane listy w tresci
   podstron maja zachowac cyfry. Tutaj kolejnosc niesie `<ol>`, a cyfre
   rysuje wlasne kolko, wiec znacznik listy trzeba zdjac miejscowo. */
.wpr-kroki {
	display: flex; flex-direction: column; gap: 16px;
	margin-top: 24px; padding: 0; list-style: none;
}
.wpr-krok { display: flex; gap: 14px; }
.wpr-krok__cyfra {
	flex: 0 0 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	background: var(--wpr-granat); color: #fff; border-radius: 999px;
	font-size: 1.05rem; font-weight: 700;
}
.wpr-krok__tresc { font-size: 1rem; line-height: 1.55; }
.wpr-krok__tytul { color: var(--wpr-granat); }

.wpr-filmy { display: flex; flex-direction: column; gap: 14px; }
.wpr-filmy__naglowek { font-size: .72rem; letter-spacing: .14em; color: var(--wpr-stal); }

/* `flex: 0 0 auto` z tego samego powodu co przy kartach wpisow: pojemnik
   stoi w kolumnie, wiec `flex-basis: 0` znaczylby zerowa wysokosc. */
.wpr-film {
	flex: 0 0 auto;
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid #cfe8f5; border-radius: 24px; overflow: hidden;
}
.wpr-film:hover { text-decoration: none; }
.wpr-film__kadr { display: flex; align-items: center; justify-content: center; height: 170px; }
.wpr-film__kadr--granat { background: var(--wpr-granat); }
.wpr-film__kadr--ciemny { background: var(--wpr-granat-ciemny); }
.wpr-film__play {
	display: flex; align-items: center; justify-content: center;
	width: 62px; height: 62px; border-radius: 999px;
	background: var(--wpr-alarm); color: #fff;
}
.wpr-film__opis { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px 18px; }
.wpr-film__tytul { font-size: 1.05rem; font-weight: 700; color: var(--wpr-granat); line-height: 1.3; }
.wpr-film__uwaga { font-size: .85rem; line-height: 1.45; color: var(--wpr-tekst-slaby); }

/* -------------------------------------------------------- pola wyroznione --- */

.wpr-wyroznione { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.wpr-wyr {
	flex: 1 1 300px;
	display: flex; flex-direction: column; gap: 20px;
	padding: 26px 24px; border-radius: 24px; color: #fff;
}
.wpr-wyr__glowa { display: flex; align-items: center; gap: 20px; }
.wpr-wyr--ciemny { background: var(--wpr-granat-ciemny); }
.wpr-wyr--alarm { background: var(--wpr-alarm); }
.wpr-wyr__znak { flex: 0 0 52px; display: flex; align-items: center; justify-content: center; color: #96e0ff; }
/* Błękit znaku jest czytelny na granacie, na czerwieni gryzie się z tłem. */
.wpr-wyr--alarm .wpr-wyr__znak { color: #fff; }
.wpr-wyr__znak svg { width: 52px; height: 52px; }
.wpr-wyr__znak--liczba { font-size: 2.3rem; font-weight: 700; line-height: 1; color: #fff; }
.wpr-wyr__tresc { display: flex; flex-direction: column; }
.wpr-wyr__nad { font-size: .7rem; letter-spacing: .14em; margin-bottom: 7px; }
.wpr-wyr--ciemny .wpr-wyr__nad { color: #b9ecff; }
.wpr-wyr--alarm .wpr-wyr__nad { color: rgba(255,255,255,.88); }
/* Nagłówki serwisu są granatowe z reguły ogólnej, a te stoją na barwnym
   polu - bez nadpisania byłyby granatem na granacie. */
.wpr-wyr__tytul { font-size: 1.2rem; font-weight: 700; line-height: 1.25; color: #fff; }
.wpr-wyr__opis { margin-top: 6px; font-size: .95rem; line-height: 1.45; }

/* Dodatkowe informacje pisze redakcja prostym edytorem - mogą być akapity
   i listy, tak samo jak w polach oferty. */
.wpr-wyr__opis > * { margin: 0; }
.wpr-wyr__opis > * + * { margin-top: .5em; }
.wpr-wyr__opis ul { list-style: disc; padding-left: 1.15em; }
.wpr-wyr__opis ol { list-style: decimal; padding-left: 1.35em; }
.wpr-wyr--ciemny .wpr-wyr__opis { color: #d9edf7; }
.wpr-wyr--alarm .wpr-wyr__opis { color: rgba(255,255,255,.92); }

.wpr-wyr__film { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.wpr-wyr__podpis { margin: 0; font-size: .93rem; line-height: 1.45; }

/* Ramka trzyma proporcje 16:9 przy każdej szerokości pola. */
.wpr-nagranie { position: relative; padding-top: 56.25%; border-radius: 18px; overflow: hidden; background: rgba(0,0,0,.28); }
.wpr-nagranie iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/*
 * Zastępnik zgody składa wtyczka i ma własny, jasny wygląd na treść podstrony.
 * Wewnątrz barwnego pola przejęłby na siebie całą uwagę, więc tutaj wtapia się
 * w pole: barwa napisu z pola, tło przyciemnione, obrys z tego samego koloru.
 */
.wpr-wyr .wpr-zgody-zastepnik {
	max-width: none; margin: 0; padding: 18px 20px;
	background: rgba(0,0,0,.24); border-color: currentColor; border-radius: 18px;
	font: inherit; color: inherit;
}
.wpr-wyr .wpr-zgody-zastepnik a { color: inherit; text-decoration: underline; }

/*
 * Odsyłacz do ustawień zgód jest przyciskiem wtyczki (`.wpr-zgody__wybor--lekki`)
 * i przynosi ze sobą białe tło. Reguła wyżej daje mu barwę napisu z pola, czyli
 * biel - i wychodziła biel na bieli, bo tła nikt nie zdejmował. Wewnątrz
 * barwnego pola przycisk ma zachowywać się tak samo jak reszta zastępnika:
 * tło przejmuje z pola, obrys bierze z barwy napisu.
 */
.wpr-wyr .wpr-zgody-zastepnik .wpr-zgody__wybor {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

.wpr-wyr .wpr-zgody-zastepnik .wpr-zgody__wybor:hover {
	background: rgba(255, 255, 255, .16);
	border-color: currentColor;
	color: inherit;
}

/* --------------------------------------------------------------- stopka --- */

.wpr-stopka { margin-top: 40px; }
.wpr-stopka__znaki { border-top: 1px solid var(--wpr-linia-jasna); border-bottom: 1px solid var(--wpr-linia-jasna); }
.wpr-stopka__znaki-srodek {
	display: flex; align-items: center; justify-content: center;
	flex-wrap: wrap; gap: 26px; padding-top: 30px; padding-bottom: 30px;
}
.wpr-stopka__odznaka {
	display: flex; align-items: center; min-height: 34px; padding: 0 16px;
	border: 2px solid var(--wpr-granat); border-radius: 999px;
	font-size: .85rem; color: var(--wpr-granat);
}
.wpr-stopka__odznaka:hover { text-decoration: none; }

.wpr-stopka__glowna { background: var(--wpr-granat-ciemny); color: #d9edf7; }
.wpr-stopka__kolumny { display: flex; flex-direction: column; gap: 30px; padding-top: 54px; padding-bottom: 48px; }
.wpr-stopka__nazwa { font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.35; }
.wpr-stopka__adres { margin-top: 12px; font-size: .95rem; line-height: 1.6; }
.wpr-stopka__rejestr { margin-top: 12px; font-size: .82rem; line-height: 1.6; color: #a9cede; }
.wpr-stopka__naglowek { font-size: .78rem; letter-spacing: .12em; color: #fff; margin-bottom: 14px; }
.wpr-stopka__lista { display: flex; flex-direction: column; gap: 2px; }
.wpr-stopka__lista a { min-height: 44px; display: flex; align-items: center; font-size: .95rem; color: #d9edf7; }
.wpr-stopka__profile { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.wpr-stopka__profil {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 999px;
	border: 1px solid rgba(255,255,255,.4); color: #fff;
}
.wpr-stopka__profil:hover { color: #fff; text-decoration: none; border-color: #fff; }
.wpr-stopka__dol { border-top: 1px solid rgba(255,255,255,.16); }
.wpr-stopka__dol-srodek {
	display: flex; flex-direction: column; gap: 6px;
	padding-top: 30px; padding-bottom: 32px;
	font-size: .82rem; color: #a9cede;
}

/* ======================================================= tablet od 700 px === */

@media (min-width: 700px) {
	.wpr-marg { max-width: 960px; }
	.wpr-pasek__srodek { justify-content: space-between; }
	.wpr-pasek__podpis { display: block; font-size: .7rem; color: var(--wpr-tekst-slaby); letter-spacing: .1em; }
	.wpr-marka { gap: 16px; }
	.wpr-marka > span { max-width: none; }
	.wpr-marka__godlo { flex: 0 0 78px; width: 78px; height: 78px; }
	.wpr-marka__nazwa { font-size: 1.2rem; }
	.wpr-marka__zoz { font-size: .95rem; }
	.wpr-alarm { flex: 0 0 auto; border-radius: 999px; }
	.wpr-alarm__numer { font-size: 1.6rem; }
	.wpr-kafel { flex: 0 0 calc(33.333% - 8px); }
	.wpr-karta:not(:first-child) .wpr-karta__foto { display: flex; }
	.wpr-karty { flex-direction: row; flex-wrap: wrap; }
	.wpr-karta { flex: 1 1 300px; }
	.wpr-wpis { flex: 0 0 calc(50% - 10px); }
	.wpr-wpis:nth-child(odd) { margin-right: 20px; }
	.wpr-strona__tytul { font-size: 2.4rem; }
	.wpr-zanim__srodek { flex-direction: row; gap: 40px; }
	.wpr-zanim__instrukcja { flex: 1 1 0; }
	.wpr-filmy { flex: 0 0 300px; }
	.wpr-numer__uwaga { flex: 1 0 auto; margin-left: auto; text-align: right; }
	.wpr-stopka__kolumny { flex-direction: row; gap: 50px; padding-top: 68px; padding-bottom: 60px; }
	.wpr-stopka__jednostka { flex: 1.4 1 0; }
	.wpr-stopka__kolumny > div { flex: 1 1 0; }
	.wpr-stopka__dol-srodek {
		flex-direction: row; align-items: center; justify-content: space-between;
		padding-top: 36px; padding-bottom: 38px;
	}
	.wpr-stopka__znaki-srodek { padding-top: 38px; padding-bottom: 38px; }
}

/* ====================================================== desktop od 1100 px === */

@media (min-width: 1100px) {

	/* Siatka treści: 1740 px, 12 kolumn, odstęp 20 px. Kolumna 126,67 px. */
	.wpr-marg { max-width: 1780px; padding-left: 20px; padding-right: 20px; }

	.wpr-pasek__srodek { min-height: 50px; }
	.wpr-pasek__linki { display: flex; align-items: center; gap: 24px; font-size: .78rem; letter-spacing: .07em; }
	.wpr-pasek__linki a { color: var(--wpr-stal); }
	.wpr-kolko { width: 34px; height: 34px; }
	.wpr-szukajka {
		display: flex; align-items: center; gap: 9px;
		height: 34px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--wpr-obrys);
		color: var(--wpr-stal);
	}
	.wpr-szukajka input {
		width: 150px; border: none; background: none; font: inherit;
		font-size: .84rem; color: var(--wpr-tekst);
	}
	.wpr-szukajka input:focus-visible { outline-offset: 6px; }
	.wpr-spolecznosci { display: flex; align-items: center; gap: 8px; }

	.wpr-naglowek { min-height: 168px; padding: 0; flex-wrap: nowrap; }
	.wpr-marka { flex: 0 1 auto; gap: 24px; }
	.wpr-marka__godlo { flex: 0 0 112px; width: 112px; height: 112px; }
	.wpr-marka__nazwa { font-size: 1.56rem; letter-spacing: -.01em; }
	.wpr-marka__zoz { font-size: 1.19rem; margin-top: 2px; }
	.wpr-marka__prm { display: block; margin-top: 8px; font-size: .72rem; letter-spacing: .14em; color: var(--wpr-tekst-slaby); }
	.wpr-odznaki { display: flex; align-items: center; gap: 22px; }
	.wpr-odznaka { display: flex; align-items: center; gap: 12px; }
	.wpr-odznaka span { font-size: .75rem; color: var(--wpr-tekst); line-height: 1.25; }
	.wpr-naglowek__przyciski { display: none; }
	.wpr-szuflada { display: none !important; }
	.wpr-alarm { padding: 0 32px 0 26px; min-height: 66px; }
	.wpr-alarm__numer { font-size: 1.7rem; }

	.wpr-menu { display: block; margin-bottom: 26px; }
	.wpr-menu__pasek {
		display: flex; align-items: center; justify-content: space-between; gap: 24px;
		min-height: 72px; padding: 0 14px 0 18px; background: var(--wpr-granat); border-radius: 36px;
	}
	.wpr-menu__pasek .wpr-menu__lista { flex-direction: row; align-items: center; gap: 6px; }
	.wpr-menu__pasek .wpr-menu__lista a {
		min-height: 46px; padding: 0 22px; background: none; border-radius: 999px;
		font-size: .9rem; justify-content: flex-start; gap: 8px;
	}
	.wpr-menu__pasek .wpr-menu__lista .current-menu-item > a,
	.wpr-menu__pasek .wpr-menu__lista .current_page_item > a {
		background: #fff; color: var(--wpr-granat); border: none; padding: 0 26px;
	}
	.wpr-menu__pasek .wpr-menu__strefa {
		margin: 0; min-height: 46px; padding: 0 26px;
		border: 1.5px solid rgba(255,255,255,.55); color: #fff; font-size: .84rem;
	}

	/*
	 * Rozwinięcia na pasku: otwierane najechaniem ORAZ `:focus-within`.
	 * To drugie robi z tego nawigację klawiaturową bez linijki skryptu -
	 * ognisko wchodzi w pierwszą pozycję podmenu i panel zostaje otwarty.
	 *
	 * Pozycja rozciąga się na PEŁNĄ wysokość paska (`align-items: stretch`),
	 * a pigułka jest wyśrodkowana w środku. Bez tego pozycja kończyła się
	 * 13 px nad dolną krawędzią paska, panel trzeba było odsuwać w dół
	 * ręcznie i robiło się martwe pole: kursor schodzący ku panelowi opuszczał
	 * pozycję, `:hover` gasł, a panel znikał w połowie ruchu.
	 */
	.wpr-menu__pasek .wpr-menu__lista { align-items: stretch; }
	.wpr-menu__pasek .wpr-menu__lista > li { position: relative; display: flex; align-items: center; }
	.wpr-menu__pasek .wpr-menu__lista .sub-menu {
		position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
		display: none; gap: 2px;
		min-width: 330px; max-width: 420px; margin: 0; padding: 14px;
		background: #fff; border-radius: 24px;
		box-shadow: 0 22px 46px rgba(17,101,132,.20);
	}

	/*
	 * Mostek nad panelem: przezroczysty pas domykający sześciopikselową
	 * przerwę do paska. Jest potomkiem pozycji, więc kursor na nim wciąż
	 * trzyma `:hover` na rodzicu - panel nie gaśnie w drodze do niego.
	 */
	.wpr-menu__pasek .wpr-menu__lista .sub-menu::before {
		content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
	}
	.wpr-menu__pasek .wpr-menu__lista > li:hover > .sub-menu,
	.wpr-menu__pasek .wpr-menu__lista > li:focus-within > .sub-menu { display: flex; }
	.wpr-menu__pasek .wpr-menu__lista .sub-menu a {
		min-height: 42px; padding: 0 16px; font-size: .88rem;
		text-transform: none; letter-spacing: 0; font-weight: 400;
		color: var(--wpr-tekst); justify-content: flex-start;
	}
	.wpr-menu__pasek .wpr-menu__lista .sub-menu a:hover { background: var(--wpr-lod); color: var(--wpr-granat); text-decoration: none; }

	/* Przycisk rozwijania jest narzędziem szuflady - na pasku otwiera
	   najechanie i ognisko, więc drugi element sterujący byłby zbędny. */
	.wpr-menu__pasek .wpr-menu__rozwin { display: none; }

	/* Pasmo banera jest szersze od siatki o 70 px z każdej strony. */
	.wpr-baner { flex-direction: row; align-items: flex-start; gap: 20px; margin: 0 -70px; }
	.wpr-baner__glowny { flex: 1 1 auto; min-width: 0; }
	.wpr-rotator { min-height: 620px; border-radius: 32px; }
	.wpr-rotator__slajdy { min-height: 620px; }
	.wpr-slajd__znacznik { font-size: .75rem; padding: 13px 24px; }
	.wpr-slajd__akcje { padding: 90px 56px 52px; }

	/* Sterowanie zostaje w kolumnie rotatora, więc samo trafia pod jego
	   prawą krawędź - bez wypełniacza o zgadywanej szerokości. */
	.wpr-sterowanie { min-height: 82px; justify-content: flex-end; gap: 22px; padding-right: 56px; }
	.wpr-kropka > span { width: 13px; height: 13px; }

	/* Pola oferty równają się do górnej krawędzi rotatora, nie do dolnej
	   krawędzi sterowania - stąd `align-self` zamiast rozciągania. */
	.wpr-oferta {
		flex: 0 0 316px; align-self: flex-start; min-height: 620px;
		flex-direction: column; justify-content: space-between;
		gap: 0; padding: 34px; border-radius: 32px;
	}
	/*
	 * Blok tekstu siada przy dolnej krawędzi pola, tak jak nazwa w polu
	 * z cennikiem.
	 *
	 * `margin-top: auto`, nie `justify-content: flex-end` na polu: pole ma
	 * `space-between`, które przy jednym dziecku w ogóle nie działa, a przy
	 * polu z cennikiem rozkłada trzy elementy i tego rozkładu ruszyć nie
	 * można. Automatyczny margines zjada wolną wysokość nad blokiem
	 * i nie dotyka reszty.
	 *
	 * `flex: 0 0 auto` zostaje: bez tego blok rozciągałby się na całą
	 * wysokość pola i treść wracałaby pod górną krawędź.
	 */
	.wpr-oferta__tekst { flex: 0 0 auto; margin-top: auto; }

	.wpr-oferta--cennik { order: 0; justify-content: flex-start; }
	.wpr-oferta--cennik .wpr-oferta__ceny { order: 1; }
	.wpr-oferta--cennik .wpr-oferta__glowa { order: 2; margin-top: auto; padding-top: 26px; }
	.wpr-oferta--cennik .wpr-oferta__link { order: 3; margin-top: 16px; }
	.wpr-oferta__tytul { font-size: 1.7rem; line-height: 1.2; }
	.wpr-oferta__opis { font-size: 1rem; margin-top: 12px; }
	.wpr-oferta__link { margin-top: 20px; }
	.wpr-ceny { flex-direction: column; margin-top: 14px; }
	.wpr-ceny__poz {
		display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
		padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.32);
	}
	.wpr-ceny__poz + .wpr-ceny__poz { padding-left: 0; margin-left: 0; border-left: none; }
	.wpr-ceny__poz:last-child { border-bottom: none; }
	.wpr-ceny__nazwa { font-size: 1.06rem; }
	.wpr-ceny__kwota { margin-top: 0; font-size: 1.45rem; }
	.wpr-ceny__jednostka { display: inline; font-size: .875rem; }
	.wpr-ceny__stopka { font-size: .81rem; }

	/* Sześć kafli po dwie kolumny siatki. */
	.wpr-kafle { gap: 20px; margin-top: 12px; }
	.wpr-kafel { flex: 1 1 0; gap: 16px; padding: 30px 28px 28px; }
	.wpr-kafel__tytul { font-size: 1.19rem; }
	/* Barwa dziedziczona z kafla - jasny odcień z ciemnego tła byłby na bieli niewidoczny. */
	.wpr-kafel__opis { display: block; font-size: .94rem; line-height: 1.45; color: inherit; }

	.wpr-aktualnosci { margin-top: 92px; margin-bottom: 80px; }
	.wpr-sekcja__glowa { padding-bottom: 26px; }
	.wpr-sekcja__nadtytul { font-size: .81rem; margin-bottom: 10px; }
	.wpr-sekcja__tytul { font-size: 2.4rem; }
	.wpr-sekcja__glowa .wpr-btn { display: inline-flex; }

	/* Trzy karty po cztery kolumny siatki. */
	.wpr-karty { gap: 20px; margin-top: 36px; flex-wrap: nowrap; }
	.wpr-karty--archiwum { flex-wrap: wrap; }
	.wpr-karta { flex: 1 1 0; }
	.wpr-karty--archiwum .wpr-karta { flex: 0 0 calc(33.333% - 14px); }
	.wpr-karta__foto { min-height: 260px; }
	.wpr-karta__foto img { height: 260px; }
	.wpr-karta__tresc { gap: 12px; padding: 28px 30px 32px; }
	.wpr-karta__tytul { font-size: 1.44rem; }
	.wpr-karta__lead { font-size: 1.03rem; }

	/* Odstęp między kolumnami daje sam margines nieparzystych pozycji.
	   Dołożenie do tego `gap` liczyłoby przerwę dwa razy. */
	.wpr-wpisy { margin-top: 34px; }
	.wpr-wpis {
		flex: 0 0 calc(50% - 10px); flex-direction: row; align-items: center; gap: 22px;
		padding: 20px 0;
	}
	.wpr-wpis a { font-size: 1.09rem; }
	.wpr-wszystkie { display: none; }

	.wpr-zanim { margin-top: 0; padding: 68px 0 72px; }
	.wpr-zanim__srodek { gap: 60px; }
	.wpr-filmy { flex: 0 0 480px; gap: 18px; }
	.wpr-numer { gap: 20px; margin-top: 28px; padding: 20px 26px; }
	.wpr-numer__podpis { font-size: .8rem; }
	.wpr-numer__cyfry { font-size: 2.9rem; }
	.wpr-numer__lub { font-size: 1.25rem; }
	.wpr-numer__uwaga { font-size: .95rem; }
	.wpr-kroki { gap: 18px; margin-top: 30px; }
	.wpr-krok { gap: 18px; }
	.wpr-krok__tresc { font-size: 1.06rem; }
	.wpr-filmy__naglowek { font-size: .81rem; }
	.wpr-film__kadr { height: 190px; }
	.wpr-film__opis { padding: 16px 22px 20px; }
	.wpr-film__tytul { font-size: 1.06rem; }

	/* Dwa pola po szesc kolumn siatki. */
	.wpr-wyroznione { gap: 20px; margin-top: 72px; }
	.wpr-wyr { flex: 1 1 0; gap: 26px; padding: 34px 36px; }
	.wpr-wyr__glowa { gap: 26px; }
	.wpr-wyr__podpis { font-size: 1rem; }
	.wpr-wyr__znak { flex: 0 0 58px; }
	.wpr-wyr__znak svg { width: 58px; height: 58px; }
	.wpr-wyr__znak--liczba { font-size: 2.5rem; }
	.wpr-wyr__tytul { font-size: 1.44rem; }
	.wpr-wyr__opis { font-size: 1rem; }

	/*
	 * Dwie klasy w selektorze, nie jedna. `.wpr-strona` samo w sobie przegrywa
	 * z `.wpr-marg` wyżej w tym samym progu: ta sama specyficzność, a `.wpr-marg`
	 * stoi później. To ta sama pułapka, która spłaszczyła wcześniej wnętrze stopki.
	 */
	.wpr-marg.wpr-strona { max-width: 1200px; }
	.wpr-strona { padding-top: 44px; padding-bottom: 88px; }
	.wpr-strona__tytul { font-size: 2.8rem; }
}

/* ================================================== narzędzia dostępności === */

body.wpr-szarosc  { filter: grayscale(1); }
body.wpr-negatyw  { filter: invert(1) hue-rotate(180deg); background: #000; }
body.wpr-szarosc.wpr-negatyw { filter: grayscale(1) invert(1) hue-rotate(180deg); }
body.wpr-podkreslenia a { text-decoration: underline; }

/* Kto prosi system o mniej ruchu, nie dostaje samoczynnego przewijania. */
@media (prefers-reduced-motion: reduce) {
	.wpr-slajd { transition: none; }
}

/* ==================================================================== druk === */

/* Wydruk podstrony ma nieść treść, nie nawigację. */
@media print {
	.wpr-pasek, .wpr-menu, .wpr-szuflada, .wpr-naglowek__przyciski,
	.wpr-baner, .wpr-sterowanie, .wpr-kafle, .wpr-szukanie, .wpr-przeskocz,
	.wpr-filmy, .wpr-wyroznione, .wpr-stopka__profile { display: none !important; }

	body { color: #000; font-size: 11pt; }
	.wpr-marg.wpr-strona { max-width: none; }
	a { color: #000; text-decoration: underline; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}