/* ═══════════════════════════════════════════════════════════════════════════
   MOTYW CLEAN — ARKUSZ GŁÓWNY
   ═══════════════════════════════════════════════════════════════════════════

   Przeniesiony z makiety `newlookcms/assets/pagepreview.css`, część „STRONA"
   (klasy `.pp-*`). Belka podglądu (`.pv-*`) została tam, gdzie jej miejsce —
   to narzędzie panelu, nie element serwisu.

   ── BEZ FRAMEWORKA ───────────────────────────────────────────────────
   Żadnego Bootstrapa. To nie jest oszczędność, tylko warunek trybu:
   `wygeneruj_menu()` w SMART składa dropdowny Bootstrapa, a tutaj menu
   wypisuje szablon z danych (`menu_drzewo()`) i rozwija je `<details>`.

   ── BEZ WIZARDA ──────────────────────────────────────────────────────
   Ani jednej zmiennej z `settings`. Motyw SMART wstrzykuje `--color_*`
   i `--font_*` blokiem `<style>` w `<head>`; tutaj cała paleta to sześć
   wartości poniżej i nic więcej jej nie nadpisuje.

   ── SIATKA Z ewitryna.pl ─────────────────────────────────────────────
   Kontener i jego progi przepisane 1:1. Skoki zamiast `clamp()` są celowe:
   przy płynnej szerokości długość wiersza zmienia się przy każdym ruchu
   okna i nie da się ustalić, ile znaków ma wiersz.
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --pp-tekst: #16181d;
  --pp-tekst-2: #5a6068;
  --pp-linia: #e6e8ec;
  --pp-linia-2: #d4d8de;
  --pp-marka: #0e2a48;
  --pp-akcent: #1583ff;
}

html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; background: #fff; }
body {
  font: 400 16px/1.65 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--pp-tekst);
  -webkit-font-smoothing: antialiased;
}


/* ── KONTENER — progi 1:1 z ewitryna.pl ────────────────────────────────
   Poniżej 1024 px kontener jest płynny z marginesem 10 px, wyżej rośnie
   skokowo. Skoki zamiast płynnego `clamp()` są w oryginale celowe: przy
   płynnej szerokości długość wiersza zmienia się przy każdym ruchu okna
   i nie da się ustalić, ile znaków ma wiersz w tekście.               */
.container { width: 100%; max-width: none; margin: 0 auto; padding: 0 10px; }
@media (min-width: 1024px) { .container { max-width: 980px; } }
@media (min-width: 1280px) { .container { max-width: 1130px; } }
@media (min-width: 1400px) { .container { max-width: 1200px; } }
@media (min-width: 1680px) { .container { max-width: 1300px; } }
@media (min-width: 2200px) { .container { max-width: 1480px; } }
@media (min-width: 2880px) { .container { max-width: 1920px; } }

/* ═══════════════════════════════════════════════════════════════════════
   2. STRONA
   ═══════════════════════════════════════════════════════════════════════ */

/* ── UKŁAD: DWIE KOLUMNY I NIC WIĘCEJ ─────────────────────────────────
   Bez pasa nad treścią, bez stopki, bez ramek z kontaktem. To podgląd
   danych wypluwanych przez CMS, nie projekt serwisu: wszystko, co nie
   jest znakiem, drzewem albo treścią, tylko udawałoby stronę.

   Jedna kreska między kolumnami zamiast tła — kolumna nawigacji nie jest
   panelem, tylko częścią tej samej kartki. Kreska ciągnie się przez całą
   wysokość, bo taka była decyzja: nawigacja od góry do dołu.           */
/* ── DWA TRYBY MENU, JEDEN ZESTAW REGUŁ ───────────────────────────────
   Różnica między menu pełnym a hamburgerem to dziewięć wartości, nie dwa
   różne układy. Dlatego wartości siedzą w zmiennych, a reguły są napisane
   RAZ. Zmienne ustawiają się w dwóch miejscach:

     • @media (max-width: 900px) — normalne zachowanie strony
     • html[data-menu="mobilne"] — wymuszenie z belki podglądu

   Powtórzony jest tylko blok przypisań, nie reguły. Gdyby zdublować całe
   reguły, każda przyszła zmiana wcięcia w menu wymagałaby pamiętania
   o drugim, niewidocznym miejscu — a o takich miejscach się nie pamięta. */
.pp-uklad {
  display: grid; gap: 0; align-items: stretch;
  /* minmax(0, …) zamiast samego 1fr: bez tego drzewo z długimi nazwami
     wypycha kolumnę do swojej najmniejszej możliwej szerokości i proporcja
     1:2 przestaje obowiązywać. Widać to dopiero przy wymuszonym pełnym
     menu na 360 px — czyli dokładnie tam, gdzie się patrzy po to, żeby
     sprawdzić, co się psuje.                                           */
  /* 30/70. Makieta miała 1:2 (33/67) — zmiana na życzenie właściciela
     08.09.2026, węższa kolumna nawigacji zostawia więcej miejsca treści. */
  grid-template-columns: var(--pp-kolumny, minmax(0, 3fr) minmax(0, 7fr));
}
.pp-nawig {
  position: relative; min-width: 0;
  border-right: var(--pp-nawig-kreska-p, 1px) solid var(--pp-linia);
  border-bottom: var(--pp-nawig-kreska-d, 0) solid var(--pp-linia);
  padding: var(--pp-nawig-pad, 34px 34px 60px 0);
}
.pp-tresc { padding: var(--pp-tresc-pad, 34px 0 80px 40px); min-width: 0; }

/* Znak. Sam, u góry kolumny, bez sąsiedztwa — to jedyne miejsce na
   stronie, które ma prawo być duże i puste wokół. */
.pp-znak {
  display: inline-block;
  font: 700 var(--pp-znak-stopien, 30px)/1 'Poppins', system-ui, sans-serif;
  letter-spacing: -.03em; color: var(--pp-marka); text-decoration: none;
}
.pp-znak span { color: var(--pp-akcent); }
.pp-nawig-gora {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: var(--pp-gora-odstep, 26px);
}

/* ── HAMBURGER ────────────────────────────────────────────────────────
   Pole wyboru zamiast skryptu: podgląd musi pokazywać menu mobilne także
   wtedy, gdy skrypty są wyłączone, a przy okazji dostajemy obsługę
   klawiatury (Tab + spacja) bez ani jednej linijki JS-a. Pole jest
   niewidoczne, ale nie `display:none` — inaczej wypada z fokusu.       */
.pp-burger-check { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.pp-burger-check:focus-visible ~ .pp-nawig-gora .pp-burger { outline: 2px solid var(--pp-akcent); outline-offset: 2px; }

.pp-burger {
  display: var(--pp-burger, none);
  align-items: center; gap: 9px;
  height: 40px; padding: 0 14px;
  border: 1px solid var(--pp-linia-2);
  font: 600 13px/1 'Inter', system-ui, sans-serif; color: var(--pp-tekst);
  cursor: pointer; user-select: none;
}
/* Trzy kreski jednym elementem: środkowa to tło, dwie skrajne cienie.
   Mniej znaczników w szablonie, a rysunek ten sam.                     */
.pp-burger i {
  width: 17px; height: 2px; background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}
.pp-burger-check:checked ~ .pp-nawig-gora .pp-burger { color: var(--pp-akcent); border-color: var(--pp-akcent); }

/* ── MENU / DRZEWO ARTYKUŁÓW ──────────────────────────────────────────
   Zbudowane na <details>/<summary>, bez ani jednej linijki JavaScriptu.
   To nie jest oszczędność, a decyzja: rozwijanie działa wtedy także przy
   wyłączonych skryptach, obsługuje klawiaturę i czytniki ekranu z pudełka,
   a przeglądarka sama pilnuje stanu otwarte/zamknięte. Własna
   implementacja na klikach musiałaby to wszystko odtworzyć.

   Gałąź otwiera się po kliknięciu POZYCJI, nie strzałki: cel wielkości
   dwunastu pikseli jest nie do trafienia na telefonie, a i myszą wymaga
   celowania.                                                            */
.pp-menu {
  font-size: 14.5px;
  display: var(--pp-menu, block);
  padding-top: var(--pp-menu-pad, 0);
}
/* Rozwinięty hamburger. W trybie pełnym menu i tak jest widoczne, więc ta
   reguła nic wtedy nie zmienia — nie trzeba jej wyłączać.               */
.pp-burger-check:checked ~ .pp-menu { display: block; }
.pp-menu ul { list-style: none; margin: 0; padding: 0; }
.pp-menu li { border-bottom: 1px solid var(--pp-linia); }
.pp-menu li:last-child { border-bottom: 0; }

.pp-menu a,
.pp-menu summary {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 4px; color: var(--pp-tekst); text-decoration: none;
  cursor: pointer;
  /* Łamanie długich słów tylko wtedy, gdy naprawdę nie ma miejsca:
     „Wielojęzyczność" w czwartym poziomie wciętym cztery razy nie mieści
     się w kolumnie 113 px i bez tego wypychałaby całą stronę w bok.    */
  overflow-wrap: break-word; min-width: 0;
}
.pp-menu a:hover, .pp-menu summary:hover { color: var(--pp-akcent); }
.pp-menu summary { list-style: none; font-weight: 500; }
.pp-menu summary::-webkit-details-marker { display: none; }

/* Strzałka rysowana znakiem, nie obrazkiem: obraca się o 90° po otwarciu
   i nie wymaga drugiego pliku. */
.pp-menu summary::after {
  content: "›"; margin-left: auto;
  font-size: 17px; line-height: 1; color: var(--pp-tekst-2);
  transition: transform .18s ease;
}
.pp-menu details[open] > summary::after { transform: rotate(90deg); }
.pp-menu details[open] > summary { color: var(--pp-akcent); font-weight: 600; }

/* Zagnieżdżenie: wcięcie plus pionowa kreska — pokazuje, dokąd sięga
   gałąź, kiedy jest otwartych kilka naraz. */
.pp-menu details ul {
  margin: 0 0 8px 4px; padding-left: 14px;
  border-left: 1px solid var(--pp-linia-2);
}
.pp-menu details ul li { border-bottom: 0; }
.pp-menu details ul a,
.pp-menu details ul summary { padding: 7px 4px; font-size: 13.5px; color: var(--pp-tekst-2); }
.pp-menu details ul a:hover, .pp-menu details ul summary:hover { color: var(--pp-akcent); }
.pp-menu details ul summary::after { font-size: 15px; }
/* Trzeci i czwarty poziom coraz mniejsze — inaczej drzewo wygląda jak
   cztery różne menu jedno pod drugim, a nie jedno zagnieżdżone. */
.pp-menu details details ul a,
.pp-menu details details ul summary { font-size: 13px; }
.pp-menu details details details ul a { font-size: 12.5px; }

.pp-menu .is-tu > a,
.pp-menu .is-tu > summary { color: var(--pp-akcent); font-weight: 600; }

/* ── TREŚĆ ARTYKUŁU ───────────────────────────────────────────────────
   Miara wiersza ograniczona do ~78 znaków. Nie dlatego, że tak wygląda
   lepiej, ale dlatego, że po przekroczeniu tej długości oko traci początek
   następnego wiersza i czytanie zwalnia. Kolumna 2/3 na monitorze 4K bez
   tego limitu daje wiersze po 140 znaków.

   W trybie hamburgera limit znika: skoro drzewo zeszło z kolumny, treść
   ma dostać całą szerokość, a nie zostawiać puste pole tam, gdzie stało
   menu. Tak działają serwisy z hamburgerem na dużym ekranie i po to
   właśnie ktoś ten tryb włącza.                                        */
/* Miara czytania (78 znaków) obowiązuje TEKST, a nie całą kolumnę.

   We wzorcu limit siedział na `.pp-artykul`, bo tamta strona była samym
   artykułem. Tutaj w tej samej kolumnie stoją bloki treści — karty,
   zdjęcia, listy zasobów — a te przy limicie zostawały wąskie i przy
   zmianie podziału kolumn tylko przesuwały się w lewo i w prawo zamiast
   rosnąć. Limit wędruje więc na akapity i nagłówki. */
.pp-artykul { max-width: none; }
.pp-artykul > h1,
.pp-artykul > h2,
.pp-artykul > h3,
.pp-artykul > h4,
.pp-artykul > p,
.pp-artykul > ul,
.pp-artykul > ol,
.pp-artykul > .pp-lead,
.pp-artykul > .pp-sciezka,
.pp-artykul > .pp-spis,
.pp-artykul > .pp-cytat,
.pp-artykul > .pp-zrodla,
.cl-blok.cl-html,
.cl-blok.cl-kol--1 > * { max-width: var(--pp-artykul-szer, 78ch); }
.pp-sciezka { font-size: 12.5px; color: var(--pp-tekst-2); margin-bottom: 18px; }
.pp-sciezka a { color: var(--pp-tekst-2); text-decoration: none; }
.pp-sciezka a:hover { color: var(--pp-akcent); }
/* Ścieżkę składa PHP (`wygeneruj_breadcrumbs()`) i oddaje ją jako `<li>`.
   We wzorcu była wypisana w jednej linii ze znakiem `›` między pozycjami —
   odtwarzamy to układem listy, a nie przepisywaniem generatora.

   Selektor jest celowo mocniejszy niż `.pp-sciezka ul`: niżej w arkuszu
   stoi `.pp-artykul ul { padding-left: 24px }` o tej samej sile, a przy
   remisie wygrywa reguła późniejsza — ścieżka wcinała się wtedy o 24 px
   względem nagłówka. `.pp-artykul li` dokłada do tego dolny margines. */
.pp-artykul .pp-sciezka ul { list-style: none; margin: 0; padding: 0; }
.pp-artykul .pp-sciezka li { display: inline; margin: 0; }
.pp-artykul .pp-sciezka li + li::before { content: "›"; margin: 0 6px; color: var(--pp-linia-2); }

.pp-artykul h1 {
  margin: 0 0 6px; font: 700 clamp(28px, 3.2vw, 40px)/1.12 'Poppins', system-ui, sans-serif;
  letter-spacing: -.025em;
}
.pp-lead { font-size: 18px; line-height: 1.6; color: var(--pp-tekst-2); margin: 0 0 8px; }
.pp-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 12px 0; margin-bottom: 26px;
  border-top: 1px solid var(--pp-linia); border-bottom: 1px solid var(--pp-linia);
  font-size: 12.5px; color: var(--pp-tekst-2);
}

/* Spis treści. W długim wpisie to nie ozdoba — bez niego jedyną
   informacją o długości tekstu jest pasek przewijania. */
.pp-spis { margin: 0 0 34px; padding: 18px 20px; border: 1px solid var(--pp-linia); }
.pp-spis b { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pp-tekst-2); margin-bottom: 10px; }
.pp-spis ol { margin: 0; padding-left: 20px; font-size: 14px; }
.pp-spis li { margin-bottom: 5px; }
.pp-spis a { color: var(--pp-tekst); text-decoration: none; }
.pp-spis a:hover { color: var(--pp-akcent); text-decoration: underline; }

.pp-artykul h2 {
  margin: 40px 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--pp-linia);
  font: 600 24px/1.25 'Poppins', system-ui, sans-serif; letter-spacing: -.02em;
}
.pp-artykul h3 { margin: 28px 0 8px; font: 600 17.5px/1.3 'Inter', system-ui, sans-serif; }
.pp-artykul p { margin: 0 0 16px; }
.pp-artykul a { color: var(--pp-akcent); }
.pp-artykul ul, .pp-artykul ol { margin: 0 0 18px; padding-left: 24px; }
.pp-artykul li { margin-bottom: 7px; }
.pp-artykul strong { font-weight: 600; }

.pp-cytat {
  margin: 24px 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--pp-akcent);
  font-size: 17px; line-height: 1.6; color: var(--pp-tekst-2);
}
.pp-cytat cite { display: block; margin-top: 8px; font-size: 13px; font-style: normal; }

.pp-figura { margin: 28px 0; }
.pp-figura .plocha {
  aspect-ratio: 16 / 9; display: grid; place-items: center;
  border: 1px dashed var(--pp-linia-2); color: var(--pp-tekst-2); font-size: 12.5px;
}
.pp-figura figcaption { margin-top: 8px; font-size: 12.5px; color: var(--pp-tekst-2); }

.pp-przewin { margin: 24px 0; overflow-x: auto; }
.pp-tabela { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 14px; }
.pp-tabela th, .pp-tabela td { padding: 10px 12px; border-bottom: 1px solid var(--pp-linia); text-align: left; vertical-align: top; }
.pp-tabela th { font-weight: 600; border-bottom: 2px solid var(--pp-linia-2); }
.pp-tabela caption { caption-side: bottom; margin-top: 8px; font-size: 12.5px; color: var(--pp-tekst-2); text-align: left; }

.pp-zrodla { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--pp-linia); font-size: 13.5px; color: var(--pp-tekst-2); }
.pp-zrodla ol { padding-left: 20px; }

/* ── WĄSKI EKRAN: MENU POD HAMBURGEREM ────────────────────────────────
   Kolumna 1/3 na telefonie miałaby 130 px, a długie drzewo zamieniłoby
   się w słupek pojedynczych liter. Dlatego poniżej 900 px zostaje jedna
   kolumna, a drzewo schowane pod hamburgerem: rozwinięte zajmuje cały
   ekran i treść, po którą ktoś tu wszedł, byłaby dwa ekrany niżej.

   Poniżej JEDEN blok wartości, wpisany dwa razy: raz dla prawdziwej
   szerokości, raz dla wymuszenia z belki. `:not([data-menu="pelne"])`
   pilnuje, żeby wymuszenie „Pełne" wygrywało także na 360 px — po to
   właśnie ktoś je włącza.                                              */
@media (max-width: 900px) {
  html:not([data-menu="pelne"]) {
    --pp-kolumny: 1fr;
    --pp-nawig-kreska-p: 0;
    --pp-nawig-kreska-d: 1px;
    --pp-nawig-pad: 18px 0;
    --pp-tresc-pad: 26px 0 60px;
    --pp-gora-odstep: 0;
    --pp-znak-stopien: 24px;
    --pp-burger: inline-flex;
    --pp-menu: none;
    --pp-menu-pad: 14px;
    --pp-artykul-szer: none;
  }

  /* Te dwie wartości zależą od PRAWDZIWEJ szerokości, nie od trybu menu:
     nagłówek 40 px na ekranie 360 px jest za duży niezależnie od tego,
     czy drzewo stoi w kolumnie, czy pod hamburgerem.                   */
  .pp-artykul h1 { font-size: 27px; }
  .pp-lead { font-size: 16.5px; }
}

html[data-menu="mobilne"] {
  --pp-kolumny: 1fr;
  --pp-nawig-kreska-p: 0;
  --pp-nawig-kreska-d: 1px;
  --pp-nawig-pad: 18px 0;
  --pp-tresc-pad: 26px 0 60px;
  --pp-gora-odstep: 0;
  --pp-znak-stopien: 24px;
  --pp-burger: inline-flex;
  --pp-menu: none;
  --pp-menu-pad: 14px;
  --pp-artykul-szer: none;
}

@media (max-width: 760px) {
  .pv-bar { gap: 10px; padding: 10px 12px; }
  .pv-narzedzia { margin-left: 0; width: 100%; justify-content: space-between; }
  .pv-pas { padding: 7px 12px; gap: 3px; }
  .pv-pas-tytul { display: none; }        /* przy ciasnocie pas mówi sam o sobie */
  .pv-szer { padding: 0 7px; font-size: 12.5px; }
  .pv-menu-tryb { margin-left: 0; padding-left: 0; }
}

/* Wydruk: znika belka podglądu i nawigacja, zostaje sam artykuł —
   podgląd bywa drukowany do korekty i wtedy nasze narzędzia są śmieciem. */
@media print {
  .pv-bar, .pv-pas, .pv-nota, .pp-nawig { display: none !important; }
  .pp-uklad { grid-template-columns: 1fr; }
  .pp-tresc { padding: 0; }
}

/* Wydruk — z makiety. Nawigacja znika, treść dostaje całą szerokość.
   Selektory belki podglądu (`.pv-*`) pominięte: nie ma ich w serwisie. */
@media print {
  .pp-nawig { display: none !important; }
  .pp-uklad { grid-template-columns: 1fr; }
  .pp-tresc { padding: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   3. BLOKI TREŚCI
   ═══════════════════════════════════════════════════════════════════════

   Wzorzec `pagepreview.css` nie ma tej części — pokazywał artykuł pisany
   ręcznie, a nie stronę złożoną z bloków CMS-a. To jedyne reguły napisane
   tutaj od zera; wszystko powyżej jest przeniesione.

   Trzymają się języka wzorca: te same zmienne, te same włosowe kreski,
   ten sam rytm odstępów. Żadnych nowych kolorów.                        */

.cl-blok { margin: 0 0 34px; }
.cl-blok:last-child { margin-bottom: 0; }

/* Kolumny z panelu. `size_1` wybiera układ, siatka robi resztę — poniżej
   700 px wszystko schodzi do jednej kolumny, bo dwie kolumny tekstu na
   telefonie dają wiersze po pięć wyrazów. */
.cl-kol { display: grid; gap: 26px 34px; }
.cl-kol--1 { grid-template-columns: 1fr; }
.cl-kol--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-kol--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cl-kol--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cl-kol--21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.cl-kol--12 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

.cl-zdjecia, .cl-galeria, .cl-filmy {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.cl-zdjecie-tekst { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.cl-zdjecie-tekst--odwrotnie .cl-zdjecie-tekst__foto { order: 2; }

.cl-blok figure { margin: 0; }
.cl-blok figure img, .cl-blok img, .cl-obraz { display: block; width: 100%; height: auto; }
.cl-blok figcaption {
  margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--pp-tekst-2);
}

/* Zakładki i FAQ na <details> — ten sam mechanizm co drzewo menu we wzorcu.
   Strzałka rysowana obrotem kwadratu, żeby nie ciągnąć zestawu ikon. */
.cl-zakladki details { border-bottom: 1px solid var(--pp-linia); }
.cl-zakladki summary {
  list-style: none; cursor: pointer; padding: 12px 26px 12px 0; position: relative;
  font: 600 15.5px/1.4 'Inter', system-ui, sans-serif;
}
.cl-zakladki summary::-webkit-details-marker { display: none; }
.cl-zakladki summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid var(--pp-tekst-2); border-bottom: 2px solid var(--pp-tekst-2);
  transform: rotate(45deg); transition: transform .15s ease;
}
.cl-zakladki details[open] > summary { color: var(--pp-akcent); }
.cl-zakladki details[open] > summary::after {
  border-color: var(--pp-akcent); transform: rotate(-135deg); margin-top: -2px;
}
.cl-zakladki__tresc { padding: 0 0 16px; }

.cl-stronicowanie { margin-top: 24px; font-size: 14px; }
.cl-stronicowanie a { color: var(--pp-akcent); }

@media (max-width: 700px) {
  .cl-kol, .cl-zdjecie-tekst { grid-template-columns: 1fr; }
  .cl-zdjecie-tekst--odwrotnie .cl-zdjecie-tekst__foto { order: 0; }
}

/* Zaślepka bloku, którego Clean jeszcze nie przenosi. Ma być widoczna
   i nie udawać treści — stąd krój maszynowy i wyszarzenie. */
.cl-zaslepka {
  padding: 14px 16px;
  border: 1px dashed var(--pp-linia-2);
  font: 400 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--pp-tekst-2);
}

/* ── EKRANY POZA ARTYKUŁEM ────────────────────────────────────────────
   Komunikaty, bramka dostępu, wyniki szukania, lista wpisów. Ten sam
   zestaw zmiennych co reszta — żadnych nowych kolorów.               */

.cl-alert { padding: 12px 16px; margin: 0 0 20px; border-left: 3px solid var(--pp-akcent); background: #f6f8fa; font-size: 14.5px; }
.cl-alert--blad { border-left-color: #c0392b; }

.cl-brama { display: grid; gap: 14px; justify-items: start; max-width: 380px; }
.cl-brama__pin { display: flex; gap: 8px; }
.cl-brama__pin input { width: 44px; height: 52px; text-align: center; font-size: 20px; }
.cl-brama input[type="password"], .cl-mailing input[type="email"] {
  width: 100%; height: 44px; padding: 0 12px;
  border: 1px solid var(--pp-linia-2); font: inherit;
}
.cl-brama button, .cl-mailing input[type="button"] {
  height: 44px; padding: 0 22px; border: 0; cursor: pointer;
  background: var(--pp-marka); color: #fff;
  font: 600 14px/1 'Inter', system-ui, sans-serif;
}
.cl-brama button:hover, .cl-mailing input[type="button"]:hover { background: var(--pp-akcent); }

.cl-wyniki, .cl-pliki ul { list-style: none; margin: 0; padding: 0; }
.cl-wyniki li, .cl-pliki li { padding: 11px 0; border-bottom: 1px solid var(--pp-linia); }
.cl-pliki__meta { color: var(--pp-tekst-2); font-size: 13px; }

.cl-data { color: var(--pp-tekst-2); font-size: 13px; margin-bottom: 18px; }
.cl-naglowek__podtytul { color: var(--pp-tekst-2); }

.cl-liczby__siatka { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.cl-liczby__siatka b { display: block; font: 700 32px/1.1 'Poppins', system-ui, sans-serif; color: var(--pp-marka); }
.cl-liczby__siatka span { color: var(--pp-tekst-2); font-size: 14px; }

/* ── LISTA ZASOBÓW — NAPRZEMIENNE ─────────────────────────────────────
   Naprzemienność robi `:nth-child(even)`, a nie odwracanie kolejności
   w znacznikach: kod zostaje w kolejności czytania, więc czytnik ekranu
   i telefon zawsze dostają zdjęcie, potem opis.                       */

.cl-lista__naglowek {
  font: 700 clamp(22px, 2.2vw, 30px)/1.2 'Poppins', system-ui, sans-serif;
  margin-bottom: 30px;
}
.cl-lista__pozycja {
  display: grid; gap: 0; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-bottom: 24px;
  /* Bez obramowania — róg rysuje samo `border-radius` z `overflow`.
     Kreska o grubości piksela na zaokrągleniu daje włosowy prześwit
     między nią a przyciętą zawartością: krawędź przestaje być równa.
     Motyw SMART też jej tu nie ma (`.banners-news-47__item` ma samo
     `margin: 0`), a karta i tak się wydziela przygaszonym tłem. */
  border-radius: 14px;
  overflow: hidden;
}
/* Połowa z tekstem na lekko przygaszonym tle — zdjęcie zostaje samo sobie,
   a karta czyta się jako dwie części, nie jeden prostokąt. Odcień z tej
   samej rodziny co linie motywu, żeby nie dokładać nowego koloru. */
/* `align-self: center` zostawiało tę połowę wysoką na tyle, ile ma tekst.
   Przy zdjęciu wyższym od opisu (np. kadr 1:1) tło i zaokrąglenie nie
   dociągały do dołu karty. Teraz połowa rozciąga się na całą wysokość,
   a tekst siedzi w niej wyśrodkowany w pionie. */
.cl-lista__opis {
  padding: 28px 30px; background: #f2f4f7;
  display: flex; flex-direction: column; justify-content: center;
}
/* Zdjęcie dosuwa się do krawędzi karty — własne zaokrąglenie kadru
   zdejmujemy, bo róg ma rysować ramka, nie obrazek w środku. */
/* Proporcja wybrana w CMS-ie jest WYSOKOŚCIĄ MINIMALNĄ, a nie sztywną —
   dokładnie tak działa motyw SMART. Sprawdzone w przeglądarce: przy
   kadrze 16:10 i karcie wysokiej na 659 px zdjęcie miało 659, nie 400.

   Składa się to z dwóch rzeczy naraz:
     • `::before` z `padding-top` daje wysokość Z PROPORCJI — i to ona
       rządzi, gdy tekst obok jest krótszy,
     • `height: 100%` pozwala kadrowi urosnąć do wysokości karty, gdy to
       tekst jest dłuższy.

   Zdjęcie leży w środku na `position: absolute`, więc wypełnia obszar
   w obu przypadkach, a `object-fit: cover` przycina nadmiar zgodnie
   z punktem zainteresowania z kratki 3x3.

   Czego tu NIE MA i nie może być: wyłączenia `::before` na szerokim
   ekranie. Wybór proporcji w panelu przestawał wtedy cokolwiek znaczyć. */
.cl-lista__pozycja .cl-kadr { border-radius: 0; height: 100%; }
/* Selektor celowo mocniejszy niż `.cl-kadr img`. Wyżej w arkuszu stoją
   dwie reguły z `height: auto` o tej samej sile (`.cl-blok img`
   i `.cl-lista__foto img`) — przy remisie wygrywała kolejność, a zdjęcie
   zostawało przy swojej naturalnej wysokości zamiast wypełnić kadr. */
.cl-lista__pozycja .cl-kadr > figure > img,
.cl-lista__pozycja .cl-kadr > figure > video {
  width: 100%; height: 100%; object-fit: cover;
}
.cl-lista__pozycja .cl-kadr--miesci > figure > img,
.cl-lista__pozycja .cl-kadr--miesci > figure > video { object-fit: contain; }
.cl-lista__pozycja .cl-kadr.kadr-15 { border-radius: 50%; margin: 24px; height: auto; }
.cl-lista__pozycja:last-child { margin-bottom: 0; }
.cl-lista__pozycja:nth-child(even) .cl-lista__foto { order: 2; }

/* ── KADROWANIE ───────────────────────────────────────────────────────
   Mechanizm przepisany z motywu SMART, razem z wartościami: proporcję
   trzyma `::before` z `padding-top` (procent liczony od SZEROKOŚCI), a
   zdjęcie leży w środku na `position: absolute`. To nie jest przeżytek —
   `aspect-ratio` zrobiłoby to samo, ale wtedy Clean i SMART kadrowałyby
   przy tych samych ustawieniach odrobinę inaczej, a to jedna z rzeczy,
   których redaktor by nie wybaczył.

   Numery są tymi samymi numerami co w panelu: lista proporcji i kratka
   3x3 punktu zainteresowania. `kadr-1` to oryginał, bez kadrowania. */

.cl-lista__foto { position: relative; }
.cl-lista__foto figure { margin: 0; }
.cl-lista__foto img, .cl-lista__foto video { display: block; width: 100%; height: auto; }
.cl-lista__link { position: absolute; inset: 0; z-index: 2; }

.cl-kadr { position: relative; overflow: hidden; border-radius: 10px; background: #f2f4f7; }
.cl-kadr::before { content: ""; display: block; }
.cl-kadr > figure { position: absolute; inset: 0; margin: 0; }
.cl-kadr img, .cl-kadr video {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
}
/* „Mieści się w ramce" z panelu (`photo_filling`) — całe zdjęcie widoczne,
   z powietrzem po bokach, zamiast przyciętego do krawędzi. */
.cl-kadr--miesci img, .cl-kadr--miesci video { object-fit: contain; }

/* Oryginał: żadnej proporcji, wysokość ze zdjęcia. */
.cl-kadr.kadr-1::before { display: none; }
.cl-kadr.kadr-1 > figure { position: static; }
.cl-kadr.kadr-1 img, .cl-kadr.kadr-1 video { height: auto; }

/* Koło — proporcja 1:1 i pełne zaokrąglenie. */
.cl-kadr.kadr-15 { border-radius: 50%; }

.cl-kadr.kadr-2::before { padding-top: 100%; }
.cl-kadr.kadr-3::before { padding-top: 75%; }
.cl-kadr.kadr-4::before { padding-top: 56.25%; }
.cl-kadr.kadr-5::before { padding-top: 133.3333%; }
.cl-kadr.kadr-6::before { padding-top: 177.7778%; }
.cl-kadr.kadr-7::before { padding-top: 61.8036%; }
.cl-kadr.kadr-8::before { padding-top: 161.803%; }
.cl-kadr.kadr-9::before { padding-top: 150%; }
.cl-kadr.kadr-10::before { padding-top: 125%; }
.cl-kadr.kadr-11::before { padding-top: 62.5%; }
.cl-kadr.kadr-12::before { padding-top: 50%; }
.cl-kadr.kadr-13::before { padding-top: 43.75%; }
.cl-kadr.kadr-14::before { padding-top: 37.5%; }
.cl-kadr.kadr-15::before { padding-top: 100%; }

/* Nadpisanie proporcji na telefonie — osobne ustawienie w panelu. */
@media (max-width: 700px) {
  .cl-kadr.kadr-tel-2::before { padding-top: 100%; }
  .cl-kadr.kadr-tel-3::before { padding-top: 75%; }
  .cl-kadr.kadr-tel-4::before { padding-top: 56.25%; }
  .cl-kadr.kadr-tel-5::before { padding-top: 133.3333%; }
  .cl-kadr.kadr-tel-6::before { padding-top: 177.7778%; }
  .cl-kadr.kadr-tel-7::before { padding-top: 61.8036%; }
  .cl-kadr.kadr-tel-8::before { padding-top: 161.803%; }
  .cl-kadr.kadr-tel-9::before { padding-top: 150%; }
  .cl-kadr.kadr-tel-10::before { padding-top: 125%; }
  .cl-kadr.kadr-tel-11::before { padding-top: 62.5%; }
  .cl-kadr.kadr-tel-12::before { padding-top: 50%; }
  .cl-kadr.kadr-tel-13::before { padding-top: 43.75%; }
  .cl-kadr.kadr-tel-14::before { padding-top: 37.5%; }
  .cl-kadr.kadr-tel-15::before { padding-top: 100%; }
}

/* Punkt zainteresowania z kratki 3x3. */
.cl-kadr.zaczep-1 img, .cl-kadr.zaczep-1 video { object-position: 0 0; }
.cl-kadr.zaczep-2 img, .cl-kadr.zaczep-2 video { object-position: 50% 0; }
.cl-kadr.zaczep-3 img, .cl-kadr.zaczep-3 video { object-position: 100% 0; }
.cl-kadr.zaczep-4 img, .cl-kadr.zaczep-4 video { object-position: 0 50%; }
.cl-kadr.zaczep-5 img, .cl-kadr.zaczep-5 video { object-position: 50% 50%; }
.cl-kadr.zaczep-6 img, .cl-kadr.zaczep-6 video { object-position: 100% 50%; }
.cl-kadr.zaczep-7 img, .cl-kadr.zaczep-7 video { object-position: 0 100%; }
.cl-kadr.zaczep-8 img, .cl-kadr.zaczep-8 video { object-position: 50% 100%; }
.cl-kadr.zaczep-9 img, .cl-kadr.zaczep-9 video { object-position: 100% 100%; }

/* Cała karta o trzy punkty niżej niż tekst artykułu — jest gęściej
   złożona i przy rozmiarze z akapitu robiła się ciężka. */
.cl-lista__nadtytul {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pp-tekst-2); margin-bottom: 8px;
}
.cl-lista__tytul {
  margin: 0 0 10px;
  font: 700 clamp(17px, 1.7vw, 22px)/1.24 'Poppins', system-ui, sans-serif;
}
.cl-lista__data { font-size: 11px; color: var(--pp-tekst-2); margin-bottom: 10px; }
.cl-lista__tresc { color: var(--pp-tekst); font-size: 12.5px; line-height: 1.6; }
.cl-lista__przyciski { margin-top: 18px; }

/* Selektor z `.pp-artykul` z premedytacją: reguły odnośników w treści
   (`.pp-artykul a:hover`) przemalowywały napis na kolor akcentu, czyli
   niebieskim po niebieskim — przycisk po najechaniu wyglądał na pusty.
   Napis zostaje biały w każdym stanie, zmienia się samo tło. */
.pp-artykul .cl-przycisk,
.cl-przycisk {
  display: inline-block; padding: 12px 22px;
  background: var(--pp-marka); color: #fff; text-decoration: none;
  font: 600 12px/1 'Inter', system-ui, sans-serif;
  transition: background .15s ease;
}
.pp-artykul .cl-przycisk:hover, .pp-artykul .cl-przycisk:focus,
.cl-przycisk:hover, .cl-przycisk:focus { background: #000; color: #fff; }

@media (max-width: 700px) {
  .cl-lista__pozycja { grid-template-columns: 1fr; gap: 16px; }
  .cl-lista__pozycja:nth-child(even) .cl-lista__foto { order: 0; }
}


/* ── PLIKI DO POBRANIA (typ 4) ────────────────────────────────────────
   Kafelek jest odnośnikiem w całości, bo cel jest jeden: pobrać. Format
   i waga stoją pod nazwą, nie przy ikonie — Clean nie ciągnie zestawu
   ikon, a te dwie informacje i tak niosą więcej niż obrazek. */
.cl-pliki {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.cl-pliki--lista { grid-template-columns: 1fr; }

.cl-plik {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--pp-linia);
  border-radius: 6px;
  color: inherit; text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.cl-plik:hover { border-color: var(--pp-akcent); background: #f7fafe; }
.cl-plik__nazwa { font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.cl-plik__dane { display: flex; gap: 10px; font-size: 13px; color: var(--pp-tekst-2); }
.cl-plik__format {
  padding: 0 6px; border: 1px solid var(--pp-linia-2); border-radius: 3px;
  font: 600 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
}

/* ── VIDEO (typ 8) ────────────────────────────────────────────────────
   Proporcja z `aspect-ratio`, nie z rozpórki na paddingu: iframe dostaje
   ją bez opakowania i bez skryptu. */
.cl-film { aspect-ratio: 16 / 9; }
.cl-film iframe, .cl-film video, .cl-film embed, .cl-film object {
  display: block; width: 100%; height: 100%; border: 0;
}
.cl-filmy__naglowek {
  margin: 0 0 8px; font-weight: 600; font-size: 15px; color: var(--pp-tekst);
}

/* ── FORMULARZ (typ 11) ───────────────────────────────────────────────
   Etykiety NAD polami. Pływająca etykieta wymaga skryptu albo pustego
   `placeholder`-a i dodatkowej warstwy — pierwszego tu nie ma, drugie
   psuje autouzupełnianie. */
.cl-formularz--ramka { padding: 22px; border: 1px solid var(--pp-linia); border-radius: 6px; }
.cl-formularz--tlo { background: #f7f8fa; }
.cl-formularz__tytul { margin: 0 0 16px; font-weight: 600; font-size: 18px; }

.cl-form__rzad { display: grid; gap: 0 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cl-form__pole { display: block; margin: 0 0 16px; }
.cl-form__pole label { display: block; margin: 0 0 5px; font-size: 14px; color: var(--pp-tekst-2); }
.cl-form__pole input, .cl-form__pole select, .cl-form__pole textarea {
  display: block; width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--pp-linia-2); border-radius: 5px;
  font: inherit; color: inherit; background: #fff;
}
.cl-form__pole textarea { resize: vertical; }
.cl-form__pole input:focus, .cl-form__pole select:focus, .cl-form__pole textarea:focus {
  outline: 2px solid var(--pp-akcent); outline-offset: 1px; border-color: var(--pp-akcent);
}

.cl-form__wybor { margin: 0 0 16px; padding: 0; border: 0; }
.cl-form__wybor legend { padding: 0; margin: 0 0 8px; font-size: 14px; color: var(--pp-tekst-2); }
.cl-form__ptaszek { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; font-size: 14px; }
.cl-form__ptaszek input { margin: 4px 0 0; flex: none; }
.cl-form__zgoda { font-size: 13px; color: var(--pp-tekst-2); }
.cl-form__zgoda p { margin: 0; }

.cl-form__nota { margin: 0 0 16px; font-size: 13px; color: var(--pp-tekst-2); }
.cl-form__wyslij { margin: 18px 0 0; }
.cl-form__wyslij button {
  padding: 12px 26px;
  border: 0; border-radius: 5px;
  background: var(--pp-akcent); color: #fff;
  font: 600 15px/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
}
.cl-form__wyslij button:hover { background: #0c6ad6; }

@media (max-width: 700px) {
  .cl-form__rzad { grid-template-columns: 1fr; }
}

/* Film wstawiony w miejsce zdjęcia (blok 2, 3, 9) zachowuje się jak obrazek. */
.cl-blok video { display: block; width: 100%; height: auto; }


/* ── SZEROKOŚCI Z PANELU: SIATKA DWUNASTOKOLUMNOWA ────────────────────────
   Panel zapisuje układ zdjęć i filmów jako liczbę kolumn z dwunastu. To ta
   sama podziałka, której w motywie SMART używa Bootstrap — ale sama w sobie
   nie jest jego własnością: dwanaście dzieli się i na połowy, i na trzecie,
   i na ćwiartki. Tutaj wchodzi wprost do CSS Grid, bez biblioteki.

   Reguły stoją PO `.cl-zdjecia, .cl-galeria, .cl-filmy`, bo mają je
   nadpisać: tam siatka jest automatyczna, tu sterowana ustawieniem. */
.cl-siatka12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
}

.cl-kolumny--1  { grid-column: span 1; }
.cl-kolumny--2  { grid-column: span 2; }
.cl-kolumny--3  { grid-column: span 3; }
.cl-kolumny--4  { grid-column: span 4; }
.cl-kolumny--5  { grid-column: span 5; }
.cl-kolumny--6  { grid-column: span 6; }
.cl-kolumny--7  { grid-column: span 7; }
.cl-kolumny--8  { grid-column: span 8; }
.cl-kolumny--9  { grid-column: span 9; }
.cl-kolumny--10 { grid-column: span 10; }
.cl-kolumny--11 { grid-column: span 11; }
.cl-kolumny--12 { grid-column: span 12; }

/* ZŁOTY PODZIAŁ — bez zaokrąglania.
   61,8% to 7,4 kolumny z dwunastu, więc siatka kolumnowa umiałaby go tylko
   przybliżyć (7/5, czyli 58/42). Tutaj proporcja idzie wprost, bo CSS Grid
   przyjmuje dowolne części — i to jest ta jedna rzecz, którą motyw bez
   Bootstrapa robi DOKŁADNIEJ niż SMART. */
.cl-siatka-zloty {
    display: grid;
    grid-template-columns: 61.8fr 38.2fr;
    gap: 20px;
}

/* Węższa część jako pierwsza — układ „golden-b, golden-a" z panelu. */
.cl-siatka-zloty--odwrotnie { grid-template-columns: 38.2fr 61.8fr; }

/* Zdjęcie przerzucone na prawo (`float_photo = 3`) idzie tam przez `order`,
   czyli ląduje w DRUGIEJ kolumnie — a szerszą ma być ta, w której stoi. */
.cl-zdjecie-tekst--odwrotnie.cl-siatka-zloty { grid-template-columns: 38.2fr 61.8fr; }

/* Na wąskim ekranie podziały nie mają sensu — cztery zdjęcia po trzy
   kolumny dałyby paski szerokie na kciuk. Wszystko na pełną szerokość. */
@media (max-width: 700px) {
    .cl-siatka12 > * { grid-column: 1 / -1; }
    .cl-siatka-zloty { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BANER CIASTECZEK — `_cookies.html.twig`
   ═══════════════════════════════════════════════════════════════════════════
   Układ wzorowany na Cookiebocie (decyzja MK z 18.09.2026): zakładki
   „Zgoda" i „Szczegóły", kategorie w jednym rzędzie pod treścią, trzy
   RÓWNORZĘDNE przyciski — odmowa wygląda tak samo jak zgoda.

   Okno NIE zasłania strony — tak jak w SMART (`data-bs-backdrop="false"`).
   Stoi na środku przy dolnej krawędzi, na wąskim ekranie na całą szerokość.

   Przełączniki to zwykłe pola wyboru w `<label>` — obsługa klawiatury
   i czytnika ekranu jest wbudowana, suwak jest tylko rysunkiem.
   Ten sam szkielet obsługuje prosty pasek (tryb bez skryptów). */

.pp-cookies[hidden], .pp-cookies-przycisk[hidden], .pp-cookies [hidden] { display: none !important; }

/* Okno zgód stoi na ŚRODKU ekranu — w poziomie i w pionie (MK, 22.09.2026).
   Przy dolnej krawędzi ginęło w treści strony, zwłaszcza gdy pod spodem była
   stopka z czterema kolumnami. */
.pp-cookies {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  /* Przygaszone tło, jak w SmartWizardzie (MK, 22.09.2026) — okno zgód ma
     być jedyną rzeczą do kliknięcia, dopóki człowiek nie zdecyduje.
     Kontener łapie kliknięcia: to nie jest „klik obok zamyka”, bo zgoda
     musi być świadoma. */
  background: rgba(8, 14, 22, .55);
}


.pp-cookies__okno {
  display: flex; flex-direction: column; width: 100%; max-height: 100%;
  background: #fff; color: var(--pp-tekst);
  border: 1px solid var(--pp-linia-2); border-radius: 10px;
  box-shadow: 0 16px 48px rgba(14, 42, 72, .22);
  font-size: 15px; line-height: 1.6;
  overflow: hidden;
}
.pp-cookies--prosty .pp-cookies__okno { padding: 20px 24px; }
.pp-cookies__okno:focus { outline: none; }
.pp-cookies__okno:focus-visible { outline: 2px solid var(--pp-akcent); outline-offset: 2px; }

/* ── zakładki ── */
.pp-cookies__glowa { display: flex; align-items: stretch; border-bottom: 1px solid var(--pp-linia-2); }
.pp-cookies__zakladki { display: flex; flex: 1; }
.pp-cookies__zakladka {
  flex: 1; padding: 16px 12px 14px;
  border: 0; border-bottom: 3px solid transparent; background: none;
  font: 600 15px/1.3 'Inter', system-ui, sans-serif; color: var(--pp-tekst); cursor: pointer;
}
.pp-cookies__zakladka[aria-selected="true"] { color: var(--pp-akcent); border-bottom-color: var(--pp-akcent); }
.pp-cookies__zakladka:hover { background: #f7f8fa; }
.pp-cookies__zakladka:focus-visible { outline: 2px solid var(--pp-akcent); outline-offset: -2px; }
.pp-cookies__zamknij {
  flex: none; width: 48px; padding: 14px; border: 0; background: none;
  color: var(--pp-tekst-2); cursor: pointer;
}
.pp-cookies__zamknij:hover { color: var(--pp-tekst); background: #f7f8fa; }
.pp-cookies__zamknij svg { display: block; width: 100%; height: 100%; }

/* ── treść kart — przewija się ona, przyciski zostają na miejscu ── */
.pp-cookies__karty { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 20px 24px; }
.pp-cookies__tresc { color: var(--pp-tekst); }
.pp-cookies__tresc p { margin: 0 0 8px; }
.pp-cookies__tresc p:last-child { margin-bottom: 0; }
.pp-cookies__tresc a { color: var(--pp-akcent); }

.pp-cookies__szczegol { padding: 14px 0; border-bottom: 1px solid var(--pp-linia); }
.pp-cookies__szczegol:first-child { padding-top: 0; }
.pp-cookies__szczegol:last-child { border-bottom: 0; padding-bottom: 0; }
.pp-cookies__szczegol-nazwa { font-weight: 600; }
.pp-cookies__opis { margin-top: 4px; color: var(--pp-tekst-2); font-size: 14px; }
.pp-cookies__opis p { margin: 0; }
.pp-cookies__skrypt {
  margin-top: 8px; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--pp-linia); border-radius: 6px; background: #f7f8fa;
}
.pp-cookies__google { margin-top: 8px; font-size: 13px; color: var(--pp-tekst-2); }
.pp-cookies__google ul { margin: 4px 0 0; padding-left: 18px; }

/* ── kategorie w rzędzie, rozdzielone kreskami ── */
.pp-cookies__kategorie {
  flex: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--pp-linia-2); border-bottom: 1px solid var(--pp-linia-2);
}
.pp-cookies__kategoria {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 12px; text-align: center; cursor: pointer;
  border-left: 1px solid var(--pp-linia-2);
}
.pp-cookies__kategoria:first-child { border-left: 0; }
.pp-cookies__kategoria-nazwa { font-weight: 600; font-size: 14px; line-height: 1.35; }
.pp-cookies__wejscie { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pp-cookies__suwak {
  position: relative; flex: none; width: 52px; height: 28px;
  /* SZARY, nie czarny: czarny suwak wyglądał na włączony, a nie na
     wyłączony (MK, 22.09.2026). Kontrast z białą gałką zostaje, ale
     kolor nie udaje stanu aktywnego. */
  border-radius: 14px; background: #c7ccd4; transition: background .15s;
}
.pp-cookies__suwak::after {
  content: ""; position: absolute; top: 4px; left: 4px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  transition: transform .15s;
}
.pp-cookies__wejscie:checked + .pp-cookies__suwak { background: var(--pp-akcent); }
.pp-cookies__wejscie:checked + .pp-cookies__suwak::after { transform: translateX(24px); }
.pp-cookies__wejscie:disabled + .pp-cookies__suwak { opacity: .55; }
.pp-cookies__kategoria:has(.pp-cookies__wejscie:disabled) { cursor: default; }
.pp-cookies__wejscie:focus-visible + .pp-cookies__suwak { outline: 2px solid var(--pp-akcent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .pp-cookies__suwak, .pp-cookies__suwak::after { transition: none; }
}

/* ── trzy równorzędne przyciski ── */
.pp-cookies__przyciski { flex: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 16px 24px 20px; }
.pp-cookies--prosty .pp-cookies__przyciski { padding: 16px 0 0; }
.pp-cookies__btn {
  flex: 1 1 160px; padding: 12px 16px;
  border: 1px solid var(--pp-marka); border-radius: 6px;
  background: var(--pp-marka); color: #fff;
  font: 600 15px/1.3 'Inter', system-ui, sans-serif; cursor: pointer;
}
.pp-cookies__btn:hover { background: var(--pp-akcent); border-color: var(--pp-akcent); }
.pp-cookies__btn:focus-visible, .pp-cookies-przycisk:focus-visible { outline: 2px solid var(--pp-akcent); outline-offset: 2px; }

/* ── przycisk preferencji — widoczny, gdy okno jest schowane ── */
.pp-cookies-przycisk {
  position: fixed; left: 20px; bottom: 20px; z-index: 1999;
  width: 44px; height: 44px; padding: 10px;
  border: 1px solid var(--pp-linia-2); border-radius: 50%;
  background: #fff; color: var(--pp-marka); cursor: pointer;
  box-shadow: 0 4px 14px rgba(14, 42, 72, .14);
}
.pp-cookies-przycisk:hover { color: var(--pp-akcent); }
.pp-cookies-przycisk svg { display: block; width: 100%; height: 100%; fill: currentColor; }

/* ── „Cookies – zmiana ustawień" 1 i 2: linia pod treścią (zamiast stopki) ── */
.pp-cookies-stopka {
  margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--pp-linia);
  font-size: 14px; color: var(--pp-tekst-2);
}
.pp-cookies-stopka .cookies-button--preferences {
  padding: 0; border: 0; background: none; font: inherit;
  color: var(--pp-akcent); text-decoration: underline; cursor: pointer;
}
.pp-cookies-ikona {
  width: 36px; height: 36px; padding: 7px;
  border: 1px solid var(--pp-linia-2); border-radius: 50%;
  background: #fff; color: var(--pp-marka); cursor: pointer;
}
.pp-cookies-ikona:hover { color: var(--pp-akcent); }
.pp-cookies-ikona svg { display: block; width: 100%; height: 100%; }
.pp-cookies-stopka .cookies-button--preferences:focus-visible,
.pp-cookies-ikona:focus-visible { outline: 2px solid var(--pp-akcent); outline-offset: 2px; }

/* ── „Uniwersalna czcionka bezszeryfowa" — jak `.cookies-modal` w SMART ── */
.pp-cookies--systemowa, .pp-cookies--systemowa button { font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important; }

@media print { .pp-cookies-stopka { display: none; } }

@media (max-width: 600px) {
  /* Przypięty do OBU krawędzi zamiast `translateX(-50%)`: gdy coś na stronie
     wystaje w bok, przeglądarka poszerza obszar układu i baner liczony od
     środka uciekał poza ekran. */
  .pp-cookies { padding: 0; align-items: flex-end; }
  .pp-cookies__okno, .pp-cookies--prosty .pp-cookies__okno { width: 100%; max-height: 90vh; border-radius: 10px 10px 0 0; border-width: 1px 0 0; }
  .pp-cookies__karty { padding: 16px; }
  .pp-cookies__kategorie { grid-template-columns: 1fr 1fr; }
  .pp-cookies__kategoria { border-left: 0; border-top: 1px solid var(--pp-linia); padding: 12px 8px; }
  .pp-cookies__kategoria:nth-child(-n+2) { border-top: 0; }
  .pp-cookies__kategoria:nth-child(even) { border-left: 1px solid var(--pp-linia); }
  .pp-cookies__przyciski { padding: 12px 16px 16px; gap: 8px; }
  .pp-cookies-przycisk { left: 12px; bottom: 12px; }
}

@media print {
  .pp-cookies, .pp-cookies-przycisk { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   HERO, STOPKA, WIDGETY, DODATKOWE POZYCJE MENU
   ──────────────────────────────────────────────────────────────────────
   Szablony wystawiają sam MODEL DANYCH (`ai-doc`, wpis z 22.09.2026):
   decyzje redakcji wychodzą jako `data-*`, a układ jest sprawą wdrożenia.
   To poniżej NIE jest projekt graficzny — to minimum, żeby strona dawała
   się oglądać: zdjęcie w boxie o rozsądnej wysokości zamiast na pół ekranu,
   kilka banerów jako slider zamiast kolumny, napisy czytelne na zdjęciu.
   ══════════════════════════════════════════════════════════════════════ */

.cl-hero {
  position: relative;
  margin: 0 0 28px;
  border-radius: 8px;
  overflow: hidden;
  background: #0b1420;
}

/* Jeden baner: box o stałej proporcji. `aspect-ratio` zamiast wysokości
   w pikselach — przy wąskim oknie sam się skraca. */
.cl-hero__slajd { position: relative; aspect-ratio: 16 / 7; max-height: 62vh; }
.cl-hero__media { position: absolute; inset: 0; }
.cl-hero__media img,
.cl-hero__wideo { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Punkt zaczepienia kadru — te same numery co w panelu (klawiatura
   numeryczna: 7 lewy-góra … 3 prawy-dół). */
.cl-hero__media--kadr-1 { object-position: right top; }
.cl-hero__media--kadr-2 { object-position: right center; }
.cl-hero__media--kadr-3 { object-position: right bottom; }
.cl-hero__media--kadr-4 { object-position: center top; }
.cl-hero__media--kadr-5 { object-position: center center; }
.cl-hero__media--kadr-6 { object-position: center bottom; }
.cl-hero__media--kadr-7 { object-position: left top; }
.cl-hero__media--kadr-8 { object-position: left center; }
.cl-hero__media--kadr-9 { object-position: left bottom; }
.cl-hero__media img,
.cl-hero__wideo { object-position: inherit; }
.cl-hero__media[class*="--kadr-"] > img,
.cl-hero__media[class*="--kadr-"] > .cl-hero__wideo { object-position: inherit; }

/* Napisy na zdjęciu, nie pod nim. Gradient zamiast płaskiej nakładki —
   czytelność bez przygaszania całego kadru. */
.cl-hero__tresc {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 28px 26px 22px;
  color: #fff;
  background: linear-gradient(to top, rgba(8, 14, 22, .78), rgba(8, 14, 22, 0));
}
.cl-hero__tytul { font-size: clamp(20px, 3.4vw, 34px); font-weight: 700; line-height: 1.15; }
.cl-hero__podtytul { margin-top: 6px; font-size: clamp(13px, 1.6vw, 17px); opacity: .92; }
.cl-hero__tresc p { margin: 0; }

/* SLIDER — kilka banerów leży obok siebie, nie jedno pod drugim.
   Bez skryptu: przewijanie w poziomie z przyciąganiem do slajdu. #}
   Kontener dostaje `data-cl-hero-slajdow` dopiero przy dwóch i więcej. */
.cl-hero[data-cl-hero-slajdow] {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}
.cl-hero[data-cl-hero-slajdow] .cl-hero__slajd {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

/* ── Dodatkowe pozycje menu (klawisze i linki z folderów systemowych) ──
   Stoją pod menu, w tej samej kolumnie, więc układają się tak samo jak ono:
   jedna pod drugą, wyrównane DO LEWEJ (MK, 22.09.2026: „wyrównaj do lewej
   jako button i link — wtedy identycznie jak menu”). Klawisz wygląda jak
   przycisk, link jak link. */
.cl-menu-dodatkowe {
  margin-top: 16px; padding: 14px;
  border: 1px solid var(--pp-linia); border-radius: 8px;
  background: #fbfcfd;
}
.cl-menu-dodatkowe__tytul {
  margin-bottom: 10px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pp-tekst-2);
}
.cl-menu-dodatkowe ul {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px; margin: 0; padding: 0; list-style: none;
}
.cl-menu-dodatkowe li { margin: 0; }
.cl-menu-dodatkowe a { display: inline-block; font-size: 14px; text-decoration: none; }
.cl-menu-dodatkowe[data-rodzaj="klawisz"] a {
  padding: 8px 14px; border-radius: 6px;
  background: var(--pp-marka); color: #fff;
}
.cl-menu-dodatkowe[data-rodzaj="klawisz"] a:hover { background: var(--pp-akcent); }
.cl-menu-dodatkowe[data-rodzaj="link"] a {
  padding: 8px 14px; border-radius: 6px;
  border: 1px solid var(--pp-linia-2); background: #fff;
  color: var(--pp-marka); text-decoration: none;
}
.cl-menu-dodatkowe[data-rodzaj="link"] a:hover { border-color: var(--pp-akcent); color: var(--pp-akcent); }

/* ── Zawartość boxów w stopce (widgety reklamowe) ── */
.cl-widgety__pozycja { min-width: 0; }
.cl-widgety__pozycja + .cl-widgety__pozycja { margin-top: 14px; }
.cl-widgety__media img { width: 100%; height: auto; border-radius: 6px; display: block; }
.cl-widgety__tytul { margin-top: 8px; font-weight: 600; }
.cl-widgety__podtytul { color: var(--pp-tekst-2); font-size: 14px; }
.cl-widgety__link { display: inline-block; margin-top: 6px; font-size: 14px; }

/* ── Stopka ── */
.cl-stopka {
  display: grid; gap: 24px;
  margin: 40px 0 0; padding: 28px 0 0;
  border-top: 1px solid var(--pp-linia);
  font-size: 14px;
}
.cl-stopka[data-kolumn="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-stopka[data-kolumn="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cl-stopka[data-kolumn="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cl-stopka__tytul { margin-bottom: 8px; font-weight: 600; color: var(--pp-marka); }
.cl-stopka__tresc p { margin: 0 0 6px; }
.cl-stopka__logo { grid-column: 1 / -1; }
.cl-stopka__logo img { max-width: 180px; height: auto; }
.cl-stopka__zdjecie { display: none; } /* zdjęcie tła — do decyzji przy wdrożeniu */
/* TRZY BOXY pod kolumnami: przyciski, widgety, ikony. Każdy z nagłówkiem,
   bo bez niego nie wiadomo, co to jest (MK, 22.09.2026). */
.cl-stopka__pasy {
  grid-column: 1 / -1;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 8px; padding-top: 24px;
  border-top: 1px solid var(--pp-linia);
}
.cl-stopka__box {
  padding: 16px;
  border: 1px solid var(--pp-linia); border-radius: 8px;
  background: #fbfcfd;
}
.cl-stopka__box-tytul {
  margin-bottom: 10px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pp-tekst-2);
}
.cl-stopka__klawisze,
.cl-stopka__spolecznosciowe { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cl-stopka__klawisze a {
  display: inline-block; padding: 8px 14px; border-radius: 6px;
  background: var(--pp-marka); color: #fff; text-decoration: none;
}
.cl-stopka__klawisze a:hover { background: var(--pp-akcent); }
.cl-stopka__spolecznosciowe a { text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }

@media (max-width: 900px) {
  .cl-stopka[data-kolumn="3"],
  .cl-stopka[data-kolumn="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cl-hero__slajd { aspect-ratio: 4 / 3; }
  .cl-hero__tresc { padding: 18px 16px 14px; }
  .cl-stopka { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ── Wersje językowe obok znaku ── */
.cl-jezyki {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 12px 0 0; padding: 0; list-style: none;
}
.cl-jezyki li { margin: 0; }
.cl-jezyki a,
.cl-jezyki span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; text-decoration: none; color: var(--pp-tekst-2);
}
.cl-jezyki a:hover { color: var(--pp-akcent); }
.cl-jezyki img { width: 20px; height: 20px; border-radius: 50%; display: block; }
.cl-jezyki__biezacy span { font-weight: 600; color: var(--pp-marka); }

/* ── Pas z logotypami (pod hero strony głównej) ──
   Boxy przewijane w poziomie, zdjęcie w kwadracie 1:1 (MK, 22.09.2026). */
.cl-logotypy { margin: 0 0 28px; }
.cl-logotypy ul {
  display: flex; gap: 12px; margin: 0; padding: 0 0 6px; list-style: none;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.cl-logotypy__box {
  flex: 0 0 150px; scroll-snap-align: start;
  border: 1px solid var(--pp-linia); border-radius: 8px;
  background: #fff; overflow: hidden;
}
.cl-logotypy__box > a { display: block; text-decoration: none; color: inherit; }
.cl-logotypy__media { display: block; aspect-ratio: 1 / 1; }
.cl-logotypy__media img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 10px; box-sizing: border-box; }
.cl-logotypy__nazwa {
  display: block; padding: 8px 10px 10px;
  font-size: 12px; line-height: 1.3; color: var(--pp-tekst-2);
  border-top: 1px solid var(--pp-linia);
}
.cl-logotypy__box > a:hover .cl-logotypy__nazwa { color: var(--pp-akcent); }

/* Stopka nie może kleić się do dołu okna (MK, 22.09.2026). */
.cl-stopka { padding-bottom: 48px; }

.cl-stopka__podpis {
  grid-column: 1 / -1;
  margin-top: 8px; padding-top: 20px;
  border-top: 1px solid var(--pp-linia);
  text-align: center; font-size: 12px; color: var(--pp-tekst-2);
}
.cl-stopka__podpis a { color: inherit; }
.cl-stopka__podpis a:hover { color: var(--pp-akcent); }

/* Szerokość okna zgód — NA KOŃCU arkusza, bo `.pp-cookies__okno` wyżej ma
   `width: 100%` (rozciąga się na całą szerokość kontenera) i przy równej
   specyficzności wygrywa reguła późniejsza. */
.pp-cookies__okno { width: min(880px, 100%); max-height: calc(100vh - 40px); }
.pp-cookies--prosty .pp-cookies__okno { width: min(560px, 100%); }

@media (max-width: 600px) {
  .pp-cookies__okno,
  .pp-cookies--prosty .pp-cookies__okno { width: 100%; max-height: 90vh; }
}

/* Suwak kategorii przy opisie w „Szczegółach” (MK, 22.09.2026). */
.pp-cookies__szczegol-glowa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pp-cookies__szczegol-glowa .pp-cookies__kategoria { border: 0; padding: 0; flex: 0 0 auto; }

/* Szczegóły kategorii zwijane — domyślnie zamknięte (MK, 22.09.2026). */
.pp-cookies__rozwin { margin-top: 10px; }
.pp-cookies__rozwin > summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--pp-akcent); list-style: none;
}
.pp-cookies__rozwin > summary::-webkit-details-marker { display: none; }
.pp-cookies__rozwin > summary::before { content: "▸"; font-size: 11px; }
.pp-cookies__rozwin[open] > summary::before { content: "▾"; }
.pp-cookies__rozwin > summary:hover { text-decoration: underline; }
.pp-cookies__rozwin-tresc { margin-top: 10px; }

/* ── KLAWISZE NA HERO I PRZYPIĘTE DO STRONY ──────────────────────────────
   MK, 23.09.2026: „na Cleanie nie wyświetla przycisków na hero, jeśli są
   dodane, trzeba dodać”. Jak reszta Cleanu — minimum, żeby było widać
   i dało się kliknąć; docelowy wygląd dorabia się tutaj.

   Kolory z panelu przychodzą jako zmienne `--cl-klawisz-*` ustawione na
   samym klawiszu, więc styl poniżej działa i bez nich. */
.cl-hero__klawisze { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cl-hero__klawisz,
.cl-klawisze-strony__klawisz {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid var(--cl-klawisz-tlo, #0e2a48);
    border-radius: 6px;
    background: var(--cl-klawisz-tlo, #0e2a48);
    color: var(--cl-klawisz-tekst, #fff);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}
.cl-hero__klawisz:hover,
.cl-klawisze-strony__klawisz:hover { opacity: .9; text-decoration: none; }

/* Klawisz banera i klawisz dodatkowy mają wyglądać inaczej — drugi jest
   dopowiedzeniem, nie główną akcją. */
.cl-hero__klawisz[data-zrodlo="dodatkowy"] {
    background: var(--cl-klawisz-tlo, transparent);
    border-color: var(--cl-klawisz-tlo, #fff);
    color: var(--cl-klawisz-tekst, #fff);
}

/* Popup wideo: znak, że klawisz nie prowadzi na stronę. Samo otwieranie
   w okienku należy do skryptu motywu, nie do arkusza. */
.cl-hero__klawisz[data-wideo]::before,
.cl-klawisze-strony__klawisz[data-wideo]::before { content: "▶"; font-size: 11px; }

/* `place = 1` — przypięte do okna, nad treścią, w lewym dolnym rogu. */
.cl-klawisze-strony {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ══ WARIANTY LISTY W CLEAN (MK, 24.09.2026) ═════════════════════════
   Własna lista wariantów bloku „Zasoby zewnętrzne” — `block_templates_clean`
   w `config/cms/templates.php`. Naprzemienne (1001) stoi wyżej (`.cl-lista`);
   tu boxy (1002), boxy z tekstem na zdjęciu (1003), wiersze ze zdjęciem
   z boku (1004) i slider (1005). Kadrowanie — wspólne `.cl-kadr` wyżej.  */

/* ── BOXY — ZDJĘCIE NAD TEKSTEM (1002) ───────────────────────────────── */

.cl-boxy__siatka {
  display: grid; gap: 22px;
  grid-template-columns: repeat(var(--cl-kolumny, 3), minmax(0, 1fr));
}
.cl-boxy__karta {
  position: relative; display: flex; flex-direction: column;
  background: #f2f4f7; border-radius: 14px; overflow: hidden;
}
/* Zdjęcie dosuwa się do krawędzi karty — róg rysuje karta, nie kadr. */
.cl-boxy__karta .cl-boxy__foto { border-radius: 0; }
.cl-boxy__opis { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.cl-boxy__nadtytul {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pp-tekst-2);
}
.cl-boxy__nadtytul::before {
  content: ""; width: 18px; height: 2px; flex: none; background: var(--pp-akcent);
}
.cl-boxy__tytul {
  margin: 0 0 8px;
  font: 700 clamp(16px, 1.4vw, 19px)/1.28 'Poppins', system-ui, sans-serif;
}
.cl-boxy__tresc { color: var(--pp-tekst); font-size: 12.5px; line-height: 1.6; }
.cl-boxy__opis .cl-lista__przyciski { margin-top: auto; padding-top: 16px; }
.cl-boxy__link { position: absolute; inset: 0; z-index: 2; }
.cl-boxy__karta:hover .cl-boxy__tytul { color: var(--pp-akcent); }

/* ── BOXY — TEKST NA ZDJĘCIU (1003) ──────────────────────────────────── */

/* Proporcja kadru daje wysokość MINIMALNĄ (jak w naprzemiennych): tekst
   dłuższy niż zdjęcie wydłuża kartę zamiast wychodzić poza nią. */
.cl-boxy-tlo__karta { border-radius: 14px; display: flex; align-items: flex-end; }
.cl-boxy-tlo__karta.cl-kadr > figure { z-index: 0; }
.cl-boxy-tlo__karta::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(14, 42, 72, .45) 0%, rgba(14, 42, 72, .55) 40%, rgba(14, 42, 72, .88) 100%);
  transition: background .2s ease;
}
.cl-boxy-tlo__karta:hover::after {
  background: linear-gradient(180deg, rgba(14, 42, 72, .6) 0%, rgba(14, 42, 72, .92) 100%);
}
.cl-boxy-tlo__karta.cl-kadr::before { flex: none; width: 0; }
.cl-boxy-tlo__opis {
  position: relative; z-index: 2; padding: 22px 24px 26px; color: #fff; flex: 1;
}
.cl-boxy-tlo__nadtytul {
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  opacity: .8; margin-bottom: 8px;
}
.cl-boxy-tlo__tytul {
  margin: 0 0 8px; color: #fff;
  font: 700 clamp(17px, 1.6vw, 22px)/1.24 'Poppins', system-ui, sans-serif;
}
.cl-boxy-tlo__data { font-size: 11px; opacity: .75; margin-bottom: 8px; }
.cl-boxy-tlo__tresc { font-size: 12.5px; line-height: 1.6; opacity: .92; }
.cl-boxy-tlo__tresc a, .cl-boxy-tlo__tytul a { color: #fff; }
.cl-boxy-tlo__karta .cl-boxy__link { z-index: 3; }

/* ── WIERSZE — ZDJĘCIE Z BOKU (1004) ─────────────────────────────────── */

.cl-wiersze__pozycja {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  margin-bottom: 18px; border-radius: 14px; overflow: hidden; background: #f2f4f7;
}
.cl-wiersze__pozycja:last-child { margin-bottom: 0; }
.cl-wiersze__foto { position: relative; border-radius: 0; height: 100%; }
.cl-wiersze__opis {
  padding: 24px 28px; display: flex; flex-direction: column; justify-content: center;
}
.cl-wiersze__tytul {
  margin: 0 0 10px;
  font: 600 clamp(17px, 1.7vw, 23px)/1.25 'Poppins', system-ui, sans-serif;
}

/* ── SLIDER PRZEŁĄCZANY (1005) ───────────────────────────────────────── */

.cl-slider__tor {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; border-radius: 14px;
}
.cl-slider__tor::-webkit-scrollbar { display: none; }
.cl-slider__tor:focus-visible { outline: 2px solid var(--pp-akcent); outline-offset: 3px; }
.cl-slider__slajd {
  flex: 0 0 100%; scroll-snap-align: start;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: #f2f4f7;
}
.cl-slider__foto { position: relative; border-radius: 0; height: 100%; }
.cl-slider__opis {
  padding: 32px 38px; display: flex; flex-direction: column; justify-content: center;
}
.cl-slider__tytul {
  margin: 0 0 12px;
  font: 700 clamp(19px, 2vw, 28px)/1.2 'Poppins', system-ui, sans-serif;
}
.cl-slider__kropki { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.cl-slider__kropka {
  width: 22px; height: 4px; padding: 0; border: 0; border-radius: 2px;
  background: var(--pp-linia-2); cursor: pointer; transition: background .2s ease, width .2s ease;
}
.cl-slider__kropka[aria-current="true"] { width: 34px; background: var(--pp-marka); }

/* Zdjęcie wypełnia kadr. Selektor celowo mocniejszy niż ogólne
   `img { height: auto }` wyżej w arkuszu — tak samo jak w naprzemiennych;
   bez tego zdjęcie zostawało przy naturalnej wysokości (np. w 1003 kończyło
   się w połowie karty). */
.cl-boxy .cl-kadr > figure > img, .cl-boxy .cl-kadr > figure > video,
.cl-boxy-tlo .cl-kadr > figure > img, .cl-boxy-tlo .cl-kadr > figure > video,
.cl-wiersze .cl-kadr > figure > img, .cl-wiersze .cl-kadr > figure > video,
.cl-slider .cl-kadr > figure > img, .cl-slider .cl-kadr > figure > video {
  width: 100%; height: 100%; object-fit: cover;
}
.cl-boxy .cl-kadr--miesci > figure > img, .cl-wiersze .cl-kadr--miesci > figure > img { object-fit: contain; }

/* ── Telefon: jedna kolumna, zdjęcie nad tekstem ─────────────────────── */

@media (max-width: 900px) {
  .cl-boxy__siatka { grid-template-columns: repeat(min(var(--cl-kolumny, 3), 2), minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .cl-boxy__siatka { grid-template-columns: minmax(0, 1fr); }
  .cl-wiersze__pozycja, .cl-slider__slajd { grid-template-columns: minmax(0, 1fr); }
  .cl-wiersze__foto, .cl-slider__foto { height: auto; }
  .cl-slider__opis, .cl-wiersze__opis { padding: 22px; }
}
