/* ═══════════════════════════════════════════════════════════════════════════
   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()`), a rozwija je sam CSS.

   ── BEZ WIZARDA ──────────────────────────────────────────────────────
   Ani jednej zmiennej z `settings`. Motyw SMART wstrzykuje `--color_*`
   i `--font_*` blokiem `<style>` w `<head>`; tutaj paletę niosą tokeny
   projektu WSBiNoZ (`--ink`, `--muted`, `--line`, `--navy`, `--magenta*`…),
   a zmienne `--pp-*` motywu tylko je wskazują (od 09.10.2026).

   ── SZEROKOŚCI JAK W MOTYWIE SMART (od 02.10.2026) ───────────────────
   Cztery rodzaje kontenera — mini, zwykły, szeroki, 100% — z pikselami
   1:1 z map SMART-a (`assets/themes/default/sass/parts/_custom.scss`),
   ale w zmiennych CSS, nie w klasach Bootstrapa. Inny projekt graficzny
   przestawia szerokości, nadpisując zmienne `--cl-kontener*`
   i `--cl-margines` w jednym miejscu. Progi (`@media`) muszą zostać
   liczbami — zmiennej nie da się użyć w warunku `@media`.
   ═══════════════════════════════════════════════════════════════════════ */

/* ══ WSBINOZ — TOKENY PROJEKTU (strona główna, 09.10.2026) ═══════════════
   Zmienne z `_projekt/zasoby/styl.css` (linie 1–18), przeniesione 1:1.
   Same własności `--…` na `:root` — nic tu nie zmienia wyglądu reszty
   Clean, dopóki reguła ich nie użyje. Nazwy nie zderzają się z `--pp-*`
   i `--cl-*` motywu. Reguły bazowe źródła (linie 19–51: `.wrap`, `.btn`,
   `.lbl`, `.h2`, `.lead`, `.sec`, `.sr`) są na końcu arkusza, w sekcji
   „WSBINOZ — SEKCJE STRONY GŁÓWNEJ” — muszą stać PO regułach artykułu
   (`.pp-artykul h2/p/a/ul`), żeby z nimi wygrać.

   Krój `--f` (Poppins, wagi 300–900) ładuje `<head>` w `base.html.twig`
   tak jak źródło (`_projekt/szablon/gora.php`, linie 45–47). */
:root {
  --magenta:#E5007D; --magenta-light:#FF2D9B; --magenta-dark:#C20069;
  --cyan:#00CBAA; --cyan-light:#33E0C2; --cyan-ink:#00806C;   /* --cyan-ink: turkus czytelny na bieli */
  --navy:#1A1A2E; --navy-mid:#232342; --white:#fff; --black:#111;
  --ink:#2B2B3A; --muted:#5C5C6E; --line:#E4E4EC; --paper:#F6F6F9;
  /* Ramka elementu do obsługi (pole, lista, kafel pliku) — 3,39:1 na bieli,
     3,14:1 na `--paper` (WCAG 1.4.11). `--line` (1,2:1) zostaje dla linii
     podziału. Decyzja właściciela z 09.10.2026 — źródło ma tu `--line`. */
  --line-pole:#8A8A9C;
  --gold:#B98B3C; --gold-light:#E2C083;
  --f:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* stan końcowy kaskady źródła (styl.css 1418): gradient o stopień ciemniej,
     #C20069 → #E5007D — biel na nim ma 4,5:1 (WCAG), jaśniejszy wariant nie */
  --grad-m:linear-gradient(135deg,var(--magenta-dark),var(--magenta));
  --grad-c:linear-gradient(135deg,var(--cyan),var(--cyan-light));
  --sh-m:0 4px 24px rgba(229,0,125,.35); --sh-m-h:0 6px 32px rgba(229,0,125,.45);
  --sh-c:0 4px 24px rgba(0,203,170,.3);
  --glass:rgba(255,255,255,.05); --glass-b:rgba(255,255,255,.1); --dim:rgba(255,255,255,.7);
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px;
  --ease:cubic-bezier(.4,0,.2,1);
  --maxw:1280px; --gut:clamp(20px,4vw,48px);
  --hh:72px;                 /* wysokość headera */
}

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

:root {
  /* Szerokości kontenerów (z marginesem w środku, jak `max-width` w SMART)
     i margines boczny. Poniżej 1024 px wszystkie trzy to 100%; od 1280
     każdy idzie swoją drogą. Wartości dla progów — sekcja KONTENER. */
  --cl-kontener: 100%;
  --cl-kontener-mini: 100%;
  --cl-kontener-sredni: 100%;
  --cl-margines: 15px;

  /* PALETA CLEAN = TOKENY PROJEKTU WSBiNoZ (09.10.2026). Zmienne `--pp-*`
     zostają (używa ich cała baza motywu), ale nie niosą już własnych
     kolorów — wskazują tokeny z `_projekt/zasoby/styl.css` (linie 1–17).
     Przy każdej: reguła źródła, z której wzięto kolor.
     Lista menu `@menu-lista()` (`.pp-menu`) stoi jak nawigacja źródła:
     biel, pismo `--ink`, podpozycje `--muted` (`.hdr`, `.mega a`, 53, 80). */
  --pp-belka-tlo: var(--white);
  --pp-belka-tekst: var(--ink);
  --pp-belka-tekst-2: var(--muted);

  --pp-tekst: var(--ink);           /* body, 21 */
  --pp-tekst-2: var(--muted);       /* .okruchy, .proza p, 1434/1531 */
  --pp-linia: var(--line);          /* .faq details, .oplaty, 1742/1734 */
  --pp-linia-2: var(--line);        /* kreski przerywane, nagłówek tabeli; ramki pól — `--line-pole` */
  --pp-marka: var(--navy);          /* tła ciemne, .khero, 1452 */
  --pp-akcent: var(--magenta-dark); /* tekst akcentu na bieli, .proza a, 2115 (6:1) */
  --pp-blad: #B3003C;               /* błąd pola, .frm__c:user-invalid, 2369 — źródło nie ma tokenu */
}

html { -webkit-text-size-adjust: 100%; }

/* ── PŁYNNE PRZEWIJANIE I FOKUS — reset źródła (linie 20, 26–27, 131) ──
   Jak w projekcie WSBiNoZ: cała strona, nie tylko nagłówek i sekcje
   strony głównej. Reguły z klasą (np. `.foot a.st-akcja:focus-visible`)
   stoją dalej i wygrywają, jak w źródle. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; border-radius: 2px; }
.dark :focus-visible { outline-color: var(--cyan); }

/* ── BAZOWA CZCIONKA — stałe 16 px, jak w projekcie WSBiNoZ (09.10.2026) ──
   Wszystkie stopnie pisma w tym arkuszu są w `rem`. Projekt
   (`_projekt/zasoby/styl.css`) liczy je od stałych 16 px przeglądarki,
   więc baza jest stała — wcześniejsza drabinka z motywu SMART (14 px na
   telefonie, płynnie do 16 px przy 1680, wzrost powyżej 2200) dawała
   na stronie pismo mniejsze niż w projekcie (390 px: −12,5%, 1024: −8%). */
html { font-size: 16px; }
html, body { margin: 0; padding: 0; background: var(--white); }
body {
  /* krój projektu (Poppins, `--f`), także w treści podstron */
  font: 400 1rem/1.65 var(--f);
  color: var(--pp-tekst);
  -webkit-font-smoothing: antialiased;
}


/* ── KONTENER — progi i piksele 1:1 z motywu SMART ─────────────────────
   Tabela (szerokość kontenera RAZEM z marginesem, tak jak `max-width`
   w SMART; treść jest o dwa marginesy węższa):

     ekran        mini    zwykły   szeroki   margines
     < 680        100%    100%     100%      15
     680–1023     100%    100%     100%      30
     1024–1279     980     980      980      30
     1280–1399     930    1130     1180      10
     1400–1679    1000    1200     1280      10
     1680–2199    1100    1300     1500      10
     2200–2879    1180    1480     1750      10
     od 2880      1720    1920     2250      10

   Skoki zamiast płynnego `clamp()` są celowe: przy płynnej szerokości
   długość wiersza zmienia się przy każdym ruchu okna.                  */
@media (min-width: 680px)  { :root { --cl-margines: 30px; } }
@media (min-width: 1024px) { :root { --cl-kontener: 980px;  --cl-kontener-mini: 980px;  --cl-kontener-sredni: 980px; } }
@media (min-width: 1280px) { :root { --cl-kontener: 1130px; --cl-kontener-mini: 930px;  --cl-kontener-sredni: 1180px; --cl-margines: 10px; } }
@media (min-width: 1400px) { :root { --cl-kontener: 1200px; --cl-kontener-mini: 1000px; --cl-kontener-sredni: 1280px; } }
@media (min-width: 1680px) { :root { --cl-kontener: 1300px; --cl-kontener-mini: 1100px; --cl-kontener-sredni: 1500px; } }
@media (min-width: 2200px) { :root { --cl-kontener: 1480px; --cl-kontener-mini: 1180px; --cl-kontener-sredni: 1750px; } }
@media (min-width: 2880px) { :root { --cl-kontener: 1920px; --cl-kontener-mini: 1720px; --cl-kontener-sredni: 2250px; } }

/* Pojedynczy element w kontenerze — strony tymczasowe.
   Szerokość i marginesy zewnętrzne zamiast wewnętrznego `padding`: tło
   i ramka elementu kończą się tam, gdzie treść, a nie na krawędzi
   marginesu. */
.container {
  width: calc(100% - 2 * var(--cl-margines));
  max-width: calc(var(--cl-kontener) - 2 * var(--cl-margines));
  margin-left: auto; margin-right: auto;
}

/* ── TREŚĆ: SIATKA SZEROKOŚCI ─────────────────────────────────────────
   Każde dziecko treści (tytuł, ścieżka, hero, KAŻDY blok) wybiera swoją
   szerokość linią siatki, a nie własnym `max-width` i `margin: auto` —
   bo `margin: 0 0 34px` na bloku albo nagłówku zjadałby wyśrodkowanie.

   Ramka całej treści to szeroki kontener (MK, 02.10.2026: hero i cała
   reszta do stopki na szerokim kontenerze), więc „100%" bloku
   (`container-fluid`) też kończy się na nim. Linie `pelna` (do marginesu)
   i `krawedz` (do brzegu ekranu) zostają dla projektu, który zechce
   wyjść szerzej.

     krawedz | pelna | szeroki | zwykły | MINI | zwykły | szeroki | pelna | krawedz
                                                                         */
.pp-artykul,
.pp-artykul > .baguetteGallery {
  display: grid;
  grid-template-columns:
    [krawedz-start] var(--cl-margines)
    [pelna-start] minmax(0, 1fr)
    [sredni-start] minmax(0, calc((var(--cl-kontener-sredni) - var(--cl-kontener)) / 2))
    [kontener-start] minmax(0, calc((var(--cl-kontener) - var(--cl-kontener-mini)) / 2))
    [mini-start] min(100% - 2 * var(--cl-margines), var(--cl-kontener-mini) - 2 * var(--cl-margines))
    [mini-end] minmax(0, calc((var(--cl-kontener) - var(--cl-kontener-mini)) / 2))
    [kontener-end] minmax(0, calc((var(--cl-kontener-sredni) - var(--cl-kontener)) / 2))
    [sredni-end] minmax(0, 1fr)
    [pelna-end] var(--cl-margines)
    [krawedz-end];
}

/* Domyślnie zwykły kontener — kontener treści: tytuł strony, listy
   i każdy blok bez ustawienia (tak jak nowy blok w panelu). Tytuł stoi
   w jednej linii z treścią pod nim (MK, 02.10.2026). Ścieżka i hero
   trzymają linię szerokiego kontenera, razem z belką i stopką.
   Opakowanie bloków idzie na całą siatkę i powtarza ją u siebie, żeby
   każdy blok wybrał swoją linię. */
.pp-artykul > *,
.pp-artykul > .baguetteGallery > * { grid-column: kontener; min-width: 0; }
.pp-artykul > .pp-sciezka { grid-column: sredni; }
.pp-artykul > .baguetteGallery { grid-column: krawedz; }

.pp-artykul [data-szerokosc="container-mini"]   { grid-column: mini; }
.pp-artykul [data-szerokosc="container"]        { grid-column: kontener; }
.pp-artykul [data-szerokosc="container-middle"] { grid-column: sredni; }
.pp-artykul [data-szerokosc="container-fluid"]  { grid-column: sredni; }

/* Sekcja z własną ramką (`.wrap` wewnątrz — pasy WSBiNoZ: liczby, kierunki,
   20-lecie, quiz, aktualności) przy „100%” idzie od brzegu do brzegu ekranu
   i bez odstępu pod spodem: tło sekcji sięga krawędzi, a treść trzyma
   szerokość `.wrap`, jak w źródle (`_projekt/index.php`). Zwykły blok
   „100%” bez własnej ramki dalej kończy się na szerokim kontenerze. */
.pp-artykul [data-szerokosc="container-fluid"]:is(:has(> .wrap), :has(> section > .wrap), :has(> .pasfakt > .wrap)) {
  grid-column: krawedz;
  margin-bottom: 0;
}
/* Taka sekcja na samym końcu treści styka się z tym, co pod nią (pas
   rekrutacji, stopka) — bez dolnego odstępu treści, jak w źródle.
   `:has()` nie zagnieżdża się, więc oba kształty sekcji osobno. Ostatnia
   SEKCJA, nie ostatnie dziecko: wpis z galerią kończy się skryptem
   lightboxa (`<script>` w `.baguetteGallery`), który `:last-child` zasłaniał. */
/* Zapas dla przeglądarek bez `:nth-last-child(… of S)` (sprzed 2023) — osobna reguła,
   bo nieznany selektor unieważnia całą listę; łapie wszystko poza wpisem z galerią
   na końcu (tam zostaje stary odstęp). Nowe przeglądarki biorą też regułę niżej. */
.pp-tresc:has(> .pp-artykul > :last-child > [data-szerokosc="container-fluid"]:last-child > .wrap),
.pp-tresc:has(> .pp-artykul > :last-child > [data-szerokosc="container-fluid"]:last-child > section > .wrap) {
  padding-bottom: 0;
}
.pp-tresc:has(> .pp-artykul > :last-child > [data-szerokosc="container-fluid"]:nth-last-child(1 of :not(script)) > .wrap),
.pp-tresc:has(> .pp-artykul > :last-child > [data-szerokosc="container-fluid"]:nth-last-child(1 of :not(script)) > section > .wrap) {
  padding-bottom: 0;
}

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

/* Nagłówek strony (pasek górny, logo, megamenu, szuflada) — sekcja
   „WSBINOZ — NAGŁÓWEK” na końcu arkusza. Ciemna belka `pp-belka` z menu
   na polu wyboru i menu mobilnym zniknęła 09.10.2026. */

/* ── MENU POZIOME, ROZWIJANE ──────────────────────────────────────────
   Od 09.10.2026 tylko lista znacznika wsadu `@menu-lista()`
   (`wsad/czesci.html.twig`) — strona ma nagłówek WSBiNoZ.
   Pozycja z podstronami to przycisk (jak dropdown w SMART), lista
   rozwija się po najechaniu albo fokusie w gałęzi — bez skryptu, z
   klawiaturą. Na belce rozwija się pierwszy poziom; głębsze stoją
   w rozwiniętej liście jako wcięcia pod nagłówkiem. Pozycje z prawego
   końca belki rozwijają się w lewo, żeby lista nie wyszła za ekran.   */
.pp-menu {
  order: var(--pp-menu-kolejnosc, 2); flex: var(--pp-menu-flex, 1 1 auto);
  display: var(--pp-menu, block);
  max-height: var(--pp-menu-wys, none); overflow: var(--pp-menu-przewijanie, visible);
  font-size: 0.875rem;
}
.pp-menu ul { list-style: none; margin: 0; padding: 0; }
.pp-menu > ul {
  display: flex; flex-direction: var(--pp-menu-kierunek, row);
  flex-wrap: wrap; justify-content: var(--pp-menu-wyrownanie, flex-end);
  padding: var(--pp-menu-pad, 0);
}
.pp-menu > ul > li { position: relative; border-bottom: var(--pp-menu-kreska, 0) solid var(--line); }

.pp-menu a,
.pp-menu .pp-menu__rodzic {
  display: block; width: 100%;
  padding: var(--pp-menu-poz-pad, 24px 10px);
  border: 0; background: none; text-align: left;
  font-family: var(--f); font-weight: 500;
  font-size: inherit; line-height: 1.3;
  color: var(--pp-belka-tekst); text-decoration: none; cursor: pointer;
}
.pp-menu a:hover,
.pp-menu .pp-menu__rodzic:hover { color: var(--pp-akcent); }
button.pp-menu__rodzic::after {
  content: ""; display: inline-block; margin-left: 7px; vertical-align: 3px;
  width: 5px; height: 5px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.pp-menu .is-tu > a,
.pp-menu .is-tu > .pp-menu__rodzic { color: var(--pp-akcent); font-weight: 600; }

/* Lista rozwijana. */
.pp-menu .pp-menu__galaz > ul {
  display: none;
  position: var(--pp-pod-pozycja, absolute); top: 100%; left: 0; z-index: 41;
  min-width: 240px; max-width: 340px;
  padding: var(--pp-pod-pad, 8px 0);
  background: var(--pp-pod-tlo, var(--pp-belka-tlo));
  box-shadow: var(--pp-pod-cien, 0 14px 30px rgba(0, 0, 0, .22));
}
.pp-menu > ul > li:nth-last-child(-n+2) > ul { left: auto; right: 0; }
/* Gałąź z otwartą podstroną — rozwinięta tylko w hamburgerze; na belce
   otwarta na stałe przykrywałaby treść. */
.pp-menu .pp-menu__galaz.is-tu > ul { display: var(--pp-tu-otwarte, none); }
/* Najechanie albo fokus rozwija listę na belce. Na wąskim ekranie belka
   w ogóle nie pokazuje tego menu — tam działa osobne menu mobilne. */
.pp-menu .pp-menu__galaz:hover > ul,
.pp-menu .pp-menu__galaz:focus-within > ul { display: block; }

.pp-menu .pp-menu__galaz ul a,
.pp-menu .pp-menu__galaz ul .pp-menu__rodzic { padding: 8px 18px; font-size: 0.875rem; color: var(--pp-belka-tekst-2); }
.pp-menu .pp-menu__galaz ul a:hover { color: var(--pp-akcent); }
/* Poziom trzeci i głębiej — wcięcie pod nagłówkiem, zawsze widoczne. */
.pp-menu .pp-menu__galaz ul .pp-menu__galaz > ul {
  display: block; position: static; min-width: 0; max-width: none;
  padding: 0 0 4px 14px; background: none; box-shadow: none;
}
.pp-menu .pp-menu__galaz ul span.pp-menu__rodzic { color: var(--pp-belka-tekst); font-weight: 600; cursor: default; }

/* ── 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. */
/* Od 02.10.2026 szerokość treści ustawia kontener bloku (panel), tak jak
   w SMART — limit 78 znaków byłby drugim, ukrytym ogranicznikiem, przez
   który „100%" w bloku tekstowym nic by nie zmieniało. Projekt, który
   chce miary czytania, wpisuje ją w `--pp-artykul-szer`. */
.cl-blok.cl-kol--1 > * { max-width: var(--pp-artykul-szer, none); }
.pp-sciezka { font-size: 0.7812rem; color: var(--pp-tekst-2); margin-bottom: 18px; }
.pp-sciezka a, .pp-artykul .pp-sciezka a { color: var(--pp-tekst-2); text-decoration: none; }   /* mocniej niż `.pp-artykul a` niżej */
/* Kolory ścieżki jak `.okruchy` źródła (styl.css 1432–1445): odnośniki
   `--muted`, najechanie z podkreśleniem, bieżąca strona `--ink` 600.
   Najechanie `--magenta`, jak w źródle (4,54:1 na bieli — AA). */
.pp-artykul .pp-sciezka a:hover, .pp-artykul .pp-sciezka a:focus-visible { color: var(--magenta); text-decoration: underline; }
.pp-sciezka li.last { color: var(--pp-tekst); font-weight: 600; }
/* Ś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-tekst-2); opacity: .45; }   /* .okruchy li::after, 1437 */

.pp-artykul h1 {
  margin: 0 0 28px;   /* MK, 02.10.2026 — było 6 px, tytuł kleił się do treści */
  font: 700 clamp(1.75rem, 3.2vw, 2.5rem)/1.12 'Poppins', system-ui, sans-serif;
  letter-spacing: -.025em;
}
/* H1 z bloku (strony „Tylko bloki”: `h1.h2` w `wsbinoz-kierunki`): krój i interlinia
   jak `h1` źródła (`--f`, `h1,h2,h3,h4,h5{line-height:1.15}`, styl.css 25); stopień,
   wagę i odstępy daje `.h2` / `.sec .h2`. */
.pp-artykul h1.h2 { font-family: var(--f); line-height: 1.15; }
.pp-lead { font-size: 1.125rem; 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: 0.7812rem; 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: 0.6875rem; 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: 0.875rem; }
.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 1.5rem/1.25 'Poppins', system-ui, sans-serif; letter-spacing: -.02em;
}
.pp-artykul h3 { margin: 28px 0 8px; font: 600 1.0938rem/1.3 var(--f); }
.pp-artykul p { margin: 0 0 16px; }
/* Odnośnik w treści jak `.proza a` źródła (styl.css 2115–2121):
   `--magenta-dark` z cienkim podkreśleniem, przy najechaniu grubszym.
   Najechanie `--magenta` jak w źródle (4,54:1 — AA), fokus — obwódka
   `--magenta`. Podkreślenie tylko
   w tekście bloków (tekst, zdjęcie z tekstem, zakładki) — karty, kafle
   plików i sekcje strony głównej też są odnośnikami w `.pp-artykul`. */
.pp-artykul a { color: var(--pp-akcent); }
:is(.cl-kol, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) a {
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
  overflow-wrap: anywhere; /* jak `.proza a` źródła (2117): długi adres łamie się, nie rozpycha kolumny */
}
:is(.cl-kol, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) a:hover { color: var(--magenta); text-decoration-thickness: 2px; }
:is(.cl-kol, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) a:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; border-radius: 2px; }
/* Akapity i listy bloku tekstowego i odpowiedzi w zakładkach — `--muted`,
   jak `.proza p`, `.proza ul/ol` i `.faq p` źródła (1531, 2204, 1753;
   6,5:1 na bieli). Nagłówki zostają w `--ink` (`.proza h3`, 2196). */
.cl-kol p, .cl-kol ul, .cl-kol ol,
.cl-zdjecie-tekst__tekst p, .cl-zdjecie-tekst__tekst ul, .cl-zdjecie-tekst__tekst ol,
.cl-zakladki__tresc p, .cl-zakladki__tresc ul, .cl-zakladki__tresc ol { color: var(--pp-tekst-2); }
.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: 1.0625rem; line-height: 1.6; color: var(--pp-tekst-2);
}
.pp-cytat cite { display: block; margin-top: 8px; font-size: 0.8125rem; 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: 0.7812rem;
}
.pp-figura figcaption { margin-top: 8px; font-size: 0.7812rem; 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: 0.875rem; }
.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: 0.7812rem; color: var(--pp-tekst-2); text-align: left; }

/* Tabela z edytora (blok tekstu, kolumny, zdjęcie+tekst, zakładki, FAQ,
   pola `edytor` w `.proza`) — domyślnie wygląd `.oplaty` źródła
   (styl.css 1732–1737, kopia niżej przy `.oplaty`): wiersz to klucz–wartość,
   komórka `th` (albo pierwsza `td` wiersza o dwóch komórkach — redaktor
   często nie ma `th`) przygaszona, szerokość 45%, wartość zwykła (pogrubienie robi redaktor przez `strong`). Wiersz
   nagłówka (`thead`) wygląda jak `.program thead th` (2072–2074).
   Odmiany z menu „Style" edytora (klasa na `<table>`):
   `godziny` (1845–1847), `program` (2071–2079, liczby w prawo, w poziomie
   przewijana), `program--wpis` (2162–2180, zdania w komórkach, bez przewijania).
   Szablony z własną tabelą `.oplaty` (np. `wsbinoz-zasady`) nie są ruszane —
   stoją poza tymi kontenerami. */
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: .9375rem; color: var(--ink); }
/* Tabela na końcu treści (także w `.table-responsive`) — bez dolnego marginesu,
   jak `.proza p:last-child` źródła; odstęp do końca sekcji daje sama sekcja
   (decyzja właściciela 13.10.2026). */
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) > table:last-child,
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) > .table-responsive:last-child > table { margin-bottom: 0; }
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) :is(th, td) { padding: .75rem .25rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) th { font-weight: 600; color: var(--muted); }
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) td { font-weight: 400; color: var(--ink); }
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) :is(th, tbody td:first-child:nth-last-child(2)) { width: 45%; }
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) tbody td:first-child:nth-last-child(2) { font-weight: 600; color: var(--muted); }
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) thead :is(th, td) {
  font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); border-bottom: 2px solid var(--kreska, #E7E7EE); padding-bottom: .625rem;
}
/* Szeroka tabela: opakowanie `.table-responsive` dokłada edytor przy wstawieniu,
   tabela dopisana przez Smart API go nie ma — wtedy przewija się kontener. */
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc):has(> table.program) { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Przekreślenie z edytora (przycisk „przekreślenie” daje `<s>`): jak `.bylo`
   źródła (2355–2358) — stara cena przygaszona, żeby było widać, która
   obowiązuje. Źródło ma klasę, edytor jej nie wstawia, więc reguła idzie
   na sam znacznik. */
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) :is(s, del) { color: var(--muted, #5C5C6E); opacity: .7; text-decoration-thickness: .09em; margin-right: .15em; }
/* `.tabelka` źródła (2069–2071: overflow-x + odstęp u góry 1.75rem; w FAQ
   obszarów 1.25rem, 2154) to w CMS opakowanie `.table-responsive` (wyżej)
   albo kontener tabeli `program` — osobnej klasy nie ma. Przewijanie już
   jest; odstęp u góry dokłada reguła niżej, gdy tabela otwiera treść (po
   akapicie wystarcza jego dolny margines). */
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) > :is(.table-responsive, table:not(.program)):first-child { margin-top: 1.75rem; }
.faq :is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) > :is(.table-responsive, table:not(.program)):first-child { margin-top: 1.25rem; }
/* Tabela `godziny` zaraz pod tytułem sekcji: w źródle (`table.oplaty.godziny`
   w `.wrap` pod `h2`) stoi 20 px pod nagłówkiem, bez ramy `.proza--2` (40 px)
   i bez odstępu `.tabelka` (28 px; reguła stoi PO regule `.tabelka`, bo ma tę samą specyficzność) — tu tabela jest w prozie bloku tekstu. */
.h2 + .proza--2:has(> table.godziny:first-child){margin-top:1.25rem}
.proza--2 > table.godziny:first-child{margin-top:0}
/* Tabela `program--wpis` (`.tabelka` źródła: 28 px od nagłówka albo od początku sekcji) w bloku tekstu tuż pod tytułem albo bez tytułu:
   rama `.proza--2` dawała 40 px. Tylko sekcja strony (`.wrap`), nie odpowiedź FAQ. */
.wrap > .proza--2:has(> table.program--wpis:first-child){margin-top:1.75rem}

/* godziny: jak `.godziny` źródła — klucz bez pogrubienia, wartość 700. */
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) table.godziny td { font-weight: 700; }
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) table.godziny tbody td:first-child:nth-last-child(2) { font-weight: 600; }

/* program / cennik: kolumny liczbowe w prawo i bez zawijania, pierwsza kolumna
   (th albo td) jak `.program tbody th` — ink, 600, zawijana. */
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) table.program { min-width: 34rem; margin-top: 0; }
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) table.program :is(td, th):not(:first-child) { text-align: right; white-space: nowrap; }
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) table.program :is(tbody th, tbody td:first-child) { font-weight: 600; color: var(--ink); text-align: left; white-space: normal; padding-right: 1.5rem; }
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) table.program tbody td:not(:first-child) { font-weight: 700; }

/* program wydarzenia: zdania w komórkach, tabela zwężana do ekranu; kolumna
   godzin 34% (`.program__c1` źródła), reszta zawijana. */
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) table.program--wpis { min-width: 0; max-width: 100%; table-layout: fixed; }
/* Reset szerokości musi przebić regułę 45% (też dla `thead`): jej selektor w `:is()` ma specyficzność `tbody td:first-child:nth-last-child(2)`, więc reset powtarza ten sam zapis. */
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) table.program--wpis :is(th, td, tbody td:first-child:nth-last-child(2)) { width: auto; white-space: normal; text-align: left; font-weight: 600; color: var(--ink); overflow-wrap: break-word; }
/* Wartość (druga komórka) 700 jak `td` w `.program--wpis` źródła. Selektor niesie `:not()` z tym samym argumentem co reguła wyżej, bo `:is()` w niej
   (specyficzność jej najmocniejszego argumentu) wygrywał z gołym `td` i wartości traciły pogrubienie. */
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) table.program--wpis tbody td:not(:first-child:nth-last-child(2)) { font-weight: 700; }
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) table.program--wpis tbody td:first-child:nth-last-child(2) { font-weight: 600; }
/* Wiersz-nagłówek grupy (`th scope="rowgroup"`, np. prelegent czy „WYKŁADY”) — `.program--wpis tbody th[scope="rowgroup"]` źródła (styl.css 2170–2172):
   wersaliki 800, .8125rem. Podwójna klasa i `tr` dla specyficzności, żeby przebić reset `:is(th, td, …)` i `program :is(tbody th, …)` wyżej. */
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) table.program--wpis.program--wpis tbody tr th[scope="rowgroup"] { padding-top: 1.25rem; padding-right: 1.5rem; font-weight: 800; color: var(--ink); text-transform: uppercase; font-size: .8125rem; letter-spacing: .06em; }
/* podwójna klasa — specyficzność równa resetowi wyżej, wygrywa kolejnością */
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) table.program--wpis.program--wpis :is(thead, tbody) :is(th, td):first-child { width: 34%; padding-right: 1rem; }
/* 20.10.2026: tabela zaczynająca się wierszem scalonym (`colspan`, np. „WYKŁADY” — konferencja „Terapia z udziałem koni”).
   W układzie `fixed` szerokości kolumn liczy PIERWSZY wiersz, więc scalona komórka dawała kolumny 50/50, a 34% z kolejnych
   wierszy nie działało (źródło trzyma 34% przez `colgroup` > `col.program__c1`, którego edytor nie wyklika). Taka tabela
   idzie układem `auto` (34% z komórek kolejnych wierszy), a scalona komórka nie dostaje 34%. */
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) table.program--wpis:has(> tbody > tr:first-child > [colspan]:not([colspan="1"])) { table-layout: auto; width: 100%; }
:is(.cl-kol, .proza, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) table.program--wpis.program--wpis :is(thead, tbody) :is(th, td)[colspan]:not([colspan="1"]) { width: auto; }

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

/* ── WĄSKI EKRAN ──────────────────────────────────────────────────────
   Mniejszy tytuł i wstęp poniżej 1400 px. (Zmienne dawnej belki i tryby
   `?menu=` zniknęły razem z nią 09.10.2026.) */
@media (max-width: 1399px) {
  .pp-artykul h1 { font-size: 1.6875rem; }
  .pp-lead { font-size: 1.0312rem; }
}

.pp-tresc { padding: 34px 0 80px; min-width: 0; overflow-x: clip; }

/* Wydruk — nagłówek znika (przyklejony drukowałby się na każdej stronie),
   treść dostaje całą szerokość papieru. */
@media print {
  .skip, .tb, .hdr, .dr { display: none !important; }
  .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. Kolory — wyłącznie tokeny projektu WSBiNoZ.                        */

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

/* Ustawienia bloku z panelu (`blocks/_kontener.html.twig`), jak w SMART:
   „bez odstępu pod blokiem" i szerszy odstęp między kolumnami w bloku
   (60 px zamiast 20 — trzykrotny odstęp siatki, jak `row--gap`). */
.cl-blok[data-bez-odstepu] { margin-bottom: 0; }
.cl-blok[data-odstep="szeroki"],
.cl-blok[data-odstep="szeroki"] > .cl-siatka12,
.cl-blok[data-odstep="szeroki"] > .cl-siatka-zloty { column-gap: 60px; }

/* 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: 0.8125rem; 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 0.9688rem/1.4 var(--f);
}
.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(--magenta); border-bottom: 2px solid var(--magenta);
  transform: rotate(45deg); transition: transform .15s ease;
}
/* Strzałka zawsze `--magenta`, otwarte pytanie bez zmiany koloru — jak
   `.faq summary::after` i `.faq details[open]` źródła (1746–1750). */
.cl-zakladki details[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.cl-zakladki__tresc { padding: 0 0 16px; }

.cl-stronicowanie { margin-top: 24px; font-size: 0.875rem; }
.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 0.8125rem/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(--magenta); background: var(--paper); font-size: 0.9062rem; }
.cl-alert--blad { border-left-color: var(--pp-blad); }

.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: 1.25rem; }
.cl-brama input[type="password"], .cl-mailing input[type="email"] {
  width: 100%; height: 44px; padding: 0 12px;
  border: 1px solid var(--line-pole); font: inherit; color: var(--pp-tekst); background: var(--white);
}
.cl-brama input:focus-visible, .cl-mailing input[type="email"]:focus-visible { outline: 3px solid var(--magenta); outline-offset: 1px; border-color: var(--magenta); }
/* Przyciski jak `.btn--m` źródła (35–36): gradient magenty, biały napis
   (4,5:1 na jaśniejszym końcu), cień `--sh-m`, przy najechaniu `--sh-m-h`. */
.cl-brama button, .cl-mailing input[type="button"] {
  height: 44px; padding: 0 22px; border: 0; cursor: pointer;
  background: var(--grad-m); color: var(--white); box-shadow: var(--sh-m);
  font: 600 0.875rem/1 var(--f);
}
.cl-brama button:hover, .cl-mailing input[type="button"]:hover { box-shadow: var(--sh-m-h); }

.cl-wyniki { list-style: none; margin: 0; padding: 0; }
.cl-wyniki li { padding: 11px 0; border-bottom: 1px solid var(--pp-linia); }

.cl-data { color: var(--pp-tekst-2); font-size: 0.8125rem; 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 2rem/1.1 'Poppins', system-ui, sans-serif; color: var(--pp-marka); }
.cl-liczby__siatka span { color: var(--pp-tekst-2); font-size: 0.875rem; }

/* ── 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(1.375rem, 2.2vw, 1.875rem)/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: var(--paper);
  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: var(--paper); }   /* .gal__m, 2041 */
.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: 0.6562rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pp-tekst-2); margin-bottom: 8px;
}
.cl-lista__tytul {
  margin: 0 0 10px;
  font: 700 clamp(1.0625rem, 1.7vw, 1.375rem)/1.24 'Poppins', system-ui, sans-serif;
}
.cl-lista__data { font-size: 0.6875rem; color: var(--pp-tekst-2); margin-bottom: 10px; }
.cl-lista__tresc { color: var(--pp-tekst); font-size: 0.7812rem; 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(--grad-m); color: var(--white); text-decoration: none;
  box-shadow: var(--sh-m);
  font: 600 0.75rem/1 var(--f);
  transition: box-shadow .15s ease;
}
/* Kolory `.btn--m` źródła (35–36); najechanie mocniejszym cieniem. */
.pp-artykul .cl-przycisk:hover, .pp-artykul .cl-przycisk:focus,
.cl-przycisk:hover, .cl-przycisk:focus { box-shadow: var(--sh-m-h); color: var(--white); }

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


/* ── 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: 0.9375rem; 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: var(--paper); }   /* .sec--paper, 51 */
.cl-formularz--ramka { max-width: 50rem; box-sizing: border-box; }
.cl-formularz__tytul { margin: 0 0 16px; font-weight: 600; font-size: 1.125rem; }

/* 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; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CIASTECZKA — link i ikona pod treścią (`cookies_view` 1 i 2)
   ═══════════════════════════════════════════════════════════════════════════
   Sam panel zgód i przycisk w rogu mają wygląd projektu WSBiNoZ
   (`.wdg-ciastka`, sekcja „ELEMENTY PŁYWAJĄCE" na końcu arkusza). Tu tylko
   to, co otwiera panel spod treści, gdy w panelu wybrano link albo ikonę. */
.pp-cookies-stopka {
  width: calc(100% - 2 * var(--cl-margines));
  max-width: calc(var(--cl-kontener-sredni) - 2 * var(--cl-margines));
  margin: 48px auto 0;
  padding-top: 16px; border-top: 1px solid var(--pp-linia);
  font-size: 0.875rem; 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: var(--white); 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: 3px solid var(--magenta); outline-offset: 2px; }

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

/* ══════════════════════════════════════════════════════════════════════
   HERO I KLAWISZE PRZYPIĘTE DO STRONY
   ──────────────────────────────────────────────────────────────────────
   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: var(--navy);   /* .khero, 1452 */
}

/* Jeden baner: box o stałej proporcji. `aspect-ratio` zamiast wysokości
   w pikselach — przy wąskim oknie sam się skraca. */
/* Proporcja 16:7 i nic więcej (MK, 02.10.2026). Do tego dnia stał tu
   jeszcze limit `max-height: 62vh` — na szerokim ekranie dobijał do
   niego, przeglądarka liczyła z proporcji szerokość i slajd robił się
   węższy od boksu, z pasem tła z prawej. */
.cl-hero__slajd { position: relative; width: 100%; aspect-ratio: 16 / 7; }
.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: var(--white);
  /* apla w barwie `.khero__s` źródła — rgba(18,18,31), 1461–1464 */
  background: linear-gradient(to top, rgba(18, 18, 31, .78), rgba(18, 18, 31, 0));
}
.cl-hero__tytul { font-size: clamp(1.25rem, 3.4vw, 2.125rem); font-weight: 700; line-height: 1.15; }
.cl-hero__podtytul { margin-top: 6px; font-size: clamp(0.8125rem, 1.6vw, 1.0625rem); 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;
}

@media (max-width: 560px) {
  /* Hero zostaje 16:7 także na telefonie (MK, 02.10.2026) — wcześniej
     przechodził tu na 4:3. */
  .cl-hero__tresc { padding: 18px 16px 14px; }
}

/* ── 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; }
/* `a.` przed klasą — inaczej wygrywa `.pp-artykul a` (linki treści
   w kolorze akcentu) i napis wychodził niebieski na granatowym tle.
   Domyślnie akcent jak klawisz na belce: granat na ciemnym zdjęciu ginął
   (MK, 02.10.2026). */
a.cl-hero__klawisz,
a.cl-klawisze-strony__klawisz {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid var(--cl-klawisz-tlo, var(--pp-akcent));
    border-radius: 6px;
    background: var(--cl-klawisz-tlo, var(--grad-m));   /* domyślnie `.btn--m`, 35 */
    color: var(--cl-klawisz-tekst, var(--white));
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}
/* Najechanie: domyślny klawisz biały z granatowym napisem; klawisz
   z kolorami z panelu (zmienne w `style`) tylko lekko przygasa, żeby
   nie zgubić kolorów, które ktoś świadomie ustawił. */
a.cl-hero__klawisz:hover,
a.cl-klawisze-strony__klawisz:hover { text-decoration: none; }
a.cl-hero__klawisz:not([style]):hover,
a.cl-klawisze-strony__klawisz:not([style]):hover { background: var(--white); border-color: var(--white); color: var(--pp-marka); }   /* .btn--outw:hover, 40 */
a.cl-hero__klawisz[style]:hover,
a.cl-klawisze-strony__klawisz[style]:hover { opacity: .9; }

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

/* 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: 0.6875rem; }

/* `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: var(--paper); 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: 0.625rem; 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(1rem, 1.4vw, 1.1875rem)/1.28 'Poppins', system-ui, sans-serif;
}
.cl-boxy__tresc { color: var(--pp-tekst); font-size: 0.7812rem; 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;
  /* barwa apli `.khero__s` źródła (1461), wcześniej granat Clean #0e2a48 */
  background: linear-gradient(180deg, rgba(18, 18, 31, .45) 0%, rgba(18, 18, 31, .55) 40%, rgba(18, 18, 31, .88) 100%);
  transition: background .2s ease;
}
.cl-boxy-tlo__karta:hover::after {
  background: linear-gradient(180deg, rgba(18, 18, 31, .6) 0%, rgba(18, 18, 31, .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: var(--white); flex: 1;
}
.cl-boxy-tlo__nadtytul {
  font-size: 0.625rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  opacity: .8; margin-bottom: 8px;
}
.cl-boxy-tlo__tytul {
  margin: 0 0 8px; color: var(--white);
  font: 700 clamp(1.0625rem, 1.6vw, 1.375rem)/1.24 'Poppins', system-ui, sans-serif;
}
.cl-boxy-tlo__data { font-size: 0.6875rem; opacity: .75; margin-bottom: 8px; }
.cl-boxy-tlo__tresc { font-size: 0.7812rem; line-height: 1.6; opacity: .92; }
.cl-boxy-tlo__tresc a, .cl-boxy-tlo__tytul a { color: var(--white); }
.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: var(--paper);
}
.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(1.0625rem, 1.7vw, 1.4375rem)/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: 3px solid var(--magenta); 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: var(--paper);
}
.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(1.1875rem, 2vw, 1.75rem)/1.2 'Poppins', system-ui, sans-serif;
}
.cl-slider__kropki { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }

/* ── STOPNIE PISMA LIST — 1:1 ZE SKALI SMART (MK, 02.10.2026) ─────────
   Wcześniej listy miały pismo „o trzy punkty niżej" niż artykuł. Pomiar
   przy oknie 2304 px na tej samej stronie: tytuł 23 px w Clean wobec 38 px
   w SMART, treść 13 wobec 17, przycisk 13 wobec 19. Teraz stopnie są te
   same co w SMART, łącznie z płynnym wzrostem między 680 a 1680 px —
   wzór z miksina `fluid-font` (`assets/themes/default/sass/parts/_mixins.scss`):
     min + (max − min) · (100vw − 680px) / 1000
   Reguły stoją PO wariantach list, więc nadpisują rozmiar ze skrótów `font`.

   Szerokie wiersze (lista, wiersze, slider) — tytuł jak `fs-36`;
   karty (boksy) — jak `fs-24`, bo 36 px w karcie na trzy kolumny łamie
   tytuł co dwa słowa.                                                  */
.cl-lista__tytul, .cl-wiersze__tytul, .cl-slider__tytul { font-size: 1.5625rem; }
.cl-boxy__tytul, .cl-boxy-tlo__tytul { font-size: 1.25rem; }
@media (min-width: 680px) {
  .cl-lista__tytul, .cl-wiersze__tytul, .cl-slider__tytul { font-size: calc(1.5625rem + 11 * (100vw - 42.5rem) / 1000); }
  .cl-boxy__tytul, .cl-boxy-tlo__tytul { font-size: calc(1.25rem + 4 * (100vw - 42.5rem) / 1000); }
}
@media (min-width: 1680px) {
  .cl-lista__tytul, .cl-wiersze__tytul, .cl-slider__tytul { font-size: 2.25rem; }
  .cl-boxy__tytul, .cl-boxy-tlo__tytul { font-size: 1.5rem; }
}

.cl-lista__nadtytul, .cl-boxy__nadtytul, .cl-boxy-tlo__nadtytul { font-size: .875rem; }
.cl-lista__tresc, .cl-boxy__tresc, .cl-boxy-tlo__tresc { font-size: 1rem; }
.cl-lista__data, .cl-boxy-tlo__data { font-size: .875rem; }
.pp-artykul .cl-przycisk, .cl-przycisk { font-size: 1.125rem; }

.cl-slider__kropka {
  width: 22px; height: 4px; padding: 0; border: 0; border-radius: 2px;
  background: var(--pp-tekst-2); cursor: pointer; transition: background .2s ease, width .2s ease;
}
/* Źródło nie ma kropek suwaka: nieaktywna `--muted` (kreska `--line` miała
   1,2:1 — za mało dla elementu sterującego, WCAG 1.4.11), bieżąca
   `--magenta`, jak bieżąca strona `.pager__l [aria-current]` (2234). */
.cl-slider__kropka[aria-current="true"] { width: 34px; background: var(--magenta); }

/* 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; }
}


/* ══ WSBINOZ — SEKCJE STRONY GŁÓWNEJ (09.10.2026) ═══════════════════════
   Reguły do szablonów bloków `public/custom_blocktemplates/wsbinoz-liczby`,
   `-kierunki`, `-jubileusz` i `-quiz`. Źródło: `_projekt/zasoby/styl.css`;
   klasy 1:1, wartości z OSTATECZNEGO stanu kaskady źródła (tam wiele reguł
   ma późniejsze poprawki — tu są już scalone, z numerem linii źródła).
   Tokeny `--…` — na początku arkusza.

   Pominięte celowo: tryb wysokiego kontrastu i zapas `.wrap` pod pływające
   widżety źródła (linie 283, 1095, 1426) — oba są w sekcji „WSBINOZ —
   ELEMENTY PŁYWAJĄCE” na końcu arkusza — i globalny reset `*{margin:0}`
   / `body{…}` — Clean ma własne `body` (Poppins z `--f`), więc reset i krój
   dostają tylko sekcje.

   ZDERZENIA Z CLEAN. Treść strony stoi w `.pp-artykul`, a ten nadaje
   `h2`, `p`, `a`, `ul`, `li` marginesy, kreskę i kolor akcentu (siła
   0,1,1), `.cl-blok img` — szerokość 100%. Dlatego:
   1. „Zerowanie” niżej ma tę samą siłę i stoi później — gasi tamte;
   2. reguły klas, które ustawiają te same własności na `h2/p/a/ul/img`,
      mają przedrostek `html ` (siła 0,1,1, stoją jeszcze później). */

/* ── Zerowanie wewnątrz sekcji (zamiast resetu `*` ze źródła) ─────────── */
.band, .sec, .hero, .pasfakt, .klam { font-family: var(--f); color: var(--ink); line-height: normal; }
.pp-artykul :where(.band, .sec, .klam) h2,
.pp-artykul :where(.band, .sec, .klam) p,
.pp-artykul :where(.band, .sec, .klam) ul,
.pp-artykul :where(.band, .sec, .klam) li { margin: 0; padding: 0; border: 0; }
.pp-artykul :where(.band, .sec, .klam) h2 { font: inherit; line-height: 1.15; letter-spacing: -.02em; }
.pp-artykul :where(.band, .sec, .klam) a { color: inherit; text-decoration: none; }
.cl-blok :where(.band, .sec, .klam) img { width: auto; max-width: 100%; height: auto; }

/* ── Reguły bazowe źródła (linie 28–51, 448/1880) ─────────────────────── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 34px;
  font-size: 0.9375rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; border-radius: var(--r-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s;
}
html .btn--m { background: var(--grad-m); color: #fff; box-shadow: var(--sh-m); }
html .btn--m:hover { transform: scale(1.03); box-shadow: var(--sh-m-h); }
html .btn--out { border: 2px solid currentColor; color: var(--ink); }
html .btn--out:hover { background: var(--ink); color: #fff; }
/* `.btn--outw` w stanie końcowym źródła (linia 416 nadpisuje 39): granatowy
   napis na mlecznym tle — tak wygląda też przycisk w pasie 20-lecia. */
html .btn--outw { border: 2px solid var(--navy); color: var(--navy); background: rgba(255,255,255,.88); backdrop-filter: blur(3px); }
/* Ramka przy najechaniu biała — linia 40 źródła; 416 zmienia tylko tło i napis. */
html .btn--outw:hover { background: var(--navy); color: #fff; border-color: #fff; }
html .btn--w { background: #fff; color: var(--navy); }
html .btn--w:hover { transform: scale(1.03); }
html .btn--sm { padding: 11px 22px; font-size: 0.8125rem; }
.lbl {
  display: block; font-size: 0.75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cyan-ink); margin-bottom: 14px;
}
.dark .lbl { color: var(--cyan); }
html .h2 { font-size: clamp(1.625rem, 4.2vw, 2.5rem); font-weight: 900; text-transform: uppercase; letter-spacing: -.5px; }
html .lead { font-size: 1rem; line-height: 1.7; color: var(--muted); max-width: 62ch; margin-top: 16px; }
.dark .lead { color: var(--dim); }
.sec { padding: clamp(56px, 8vw, 96px) 0; }
.sec--paper { background: var(--paper); }
/* linia 1529: odstęp pod nagłówkiem sekcji */
html .sec .h2 { margin: 0 0 1.25rem; }
/* linia 1880: długie wyrazy łamią się bez dywizu */
html .h2, html .jub__t { overflow-wrap: break-word; hyphens: none; -webkit-hyphens: none; }

/* ── Wstęga liczb — `section.band` (linie 1063–1068) ──────────────────── */
.band { background: var(--navy); color: #fff; padding: 26px 0; }
.band__g { display: grid; gap: 18px 26px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .band__g { grid-template-columns: repeat(4, 1fr); } }
.band__n { font-size: clamp(1.75rem, 4vw, 2.625rem); font-weight: 900; line-height: 1; letter-spacing: -.04em; }
.band__n span { color: var(--cyan); }
.band__l { font-size: 0.7188rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-top: 7px; }

/* ── Pasy kierunków — `a.strip` (linie 1070–1091, 1224, 1234) ─────────── */
.strip {
  position: relative; display: grid; grid-template-columns: 1fr; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-bottom: 10px;
  transition: border-color .22s, box-shadow .22s;
}
.strip:hover { border-color: var(--magenta); box-shadow: 0 14px 34px rgba(0,0,0,.07); }
@media (min-width: 880px) { .strip { grid-template-columns: minmax(0, .95fr) 44px minmax(0, 1.05fr); } }
.strip__i { position: relative; aspect-ratio: 16/11; min-height: 230px; }
@media (min-width: 880px) { .strip__i { aspect-ratio: auto; align-self: stretch; } }
.strip__v {
  display: none; background: var(--magenta); color: #fff; align-items: center; justify-content: center;
  writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.6875rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
@media (min-width: 880px) { .strip__v { display: flex; } }
.strip__v--c { background: var(--cyan); color: var(--navy); }
.strip__b { padding: clamp(26px, 3.4vw, 40px); display: flex; flex-direction: column; align-items: flex-start; }
/* Tytuł pasa jako `h2` (strony „Tylko bloki”, `wsbinoz-kierunki` ze znacznikiem h1 — jak
   `h2.strip__t` źródła): `.pp-artykul h2` i `.pp-artykul :where(.sec) h2` dawałyby
   margines, kreskę i własny krój; w źródle `h2[class]{margin:0}` i reguła `.strip__t`.
   Najpierw zerowanie (`font: inherit`), potem wspólna reguła `.strip__t` z tym samym
   selektorem — wygrywa późniejsza, więc stopień, waga i interlinia wracają. */
.pp-artykul h2.strip__t { margin: 0; padding: 0; border: 0; font: inherit; }
.strip__t, .pp-artykul h2.strip__t { font-size: clamp(1.375rem, 3vw, 2rem); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.08; }
.strip__s { font-size: 0.8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta-dark); margin-top: 10px; }
.strip__d { font-size: 0.9062rem; line-height: 1.68; color: var(--muted); margin-top: 14px; max-width: 52ch; }
html .strip__ul { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
html .strip__ul li { position: relative; padding-left: 26px; font-size: 0.8438rem; line-height: 1.5; }
.strip__ul li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; background: var(--cyan);
  clip-path: polygon(0 0, 42% 0, 100% 50%, 42% 100%, 0 100%, 58% 50%);
}
.strip__a {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; padding: 12px 24px;
  border: 2px solid var(--navy); font-size: 0.8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  border-radius: var(--r-sm); transition: .2s var(--ease);
}
.strip:hover .strip__a { background: var(--magenta); border-color: var(--magenta); color: #fff; }

/* Zdjęcie pasa — `span.duo` w stanie końcowym źródła (linie 1103–1129):
   fotografia w kolorze, magenta wjeżdża z prawej przy najechaniu. */
.duo { position: absolute; inset: 0; z-index: 0; overflow: hidden; isolation: isolate; }
html .duo img {
  width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; filter: none;
  transition: transform .6s var(--ease), filter .4s var(--ease);
}
.duo::after {
  content: ""; position: absolute; inset: 0; background: var(--cyan); mix-blend-mode: color; z-index: 1; opacity: 0;
  transition: opacity .4s var(--ease);
}
.duo::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 0;
  z-index: 2; background: var(--magenta); mix-blend-mode: color; opacity: .9;
  transition: width .45s var(--ease);
}
.strip:hover .duo::before, .strip:focus-within .duo::before { width: 100%; }
.strip:hover .duo img, .strip:focus-within .duo img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .duo::before, .duo::after, html .duo img { transition: none; } }

/* ── Pas 20-lecia — `section.sec.jub` (linie 156–161, 387) ────────────── */
.jub { background: linear-gradient(120deg, #17172B 0%, #232342 60%, #2E2440 100%); color: #fff; position: relative; overflow: hidden; }
.jub__g { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .jub__g { grid-template-columns: auto 1fr auto; gap: 48px; } }
html .jub__t { font-size: clamp(1.375rem, 3.2vw, 2rem); font-weight: 900; text-transform: uppercase; line-height: 1.15; }
html .jub__d { font-size: 0.9375rem; line-height: 1.7; color: rgba(255,255,255,.72); margin-top: 12px; max-width: 52ch; }
html .sygnet20 { width: auto; height: clamp(112px, 13vw, 168px); display: block; max-width: 100%; }

/* ── Quiz — `section.sec.quiz` (linie 162–168, 777–787) ───────────────── */
.quiz { background: var(--grad-m); color: #fff; }
.quiz__g { display: grid; gap: 30px; align-items: center; }
@media (min-width: 860px) { .quiz__g { grid-template-columns: auto 1.3fr .7fr; gap: 52px; } }
html .quiz__h { font-size: clamp(1.5rem, 3.6vw, 2.25rem); font-weight: 900; text-transform: uppercase; line-height: 1.12; }
html .quiz__d { font-size: 0.9688rem; line-height: 1.7; color: rgba(255,255,255,.88); margin-top: 14px; max-width: 52ch; }
.quiz__s {
  display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px; font-size: 0.75rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75);
}
/* kwadratowy znak QUIZ — ten sam rytm, co znak 20-lecia w pasie wyżej */
.g-quiz__znak {
  display: grid; place-content: center; gap: .25rem; text-align: center;
  aspect-ratio: 1; height: clamp(6.25rem, 11vw, 10rem); flex-shrink: 0;
  border: .1875rem solid rgba(255,255,255,.9); border-radius: 1rem;
  padding: .75rem; box-sizing: border-box;
}
.g-quiz__znak b { display: block; font-size: clamp(1.5rem, 3.4vw, 2.625rem); font-weight: 900; letter-spacing: -.02em; line-height: 1; color: #fff; }
.g-quiz__znak span {
  display: block; font-size: clamp(.5625rem, 1.1vw, .75rem); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.86); line-height: 1.25;
}
/* Zdjęcie z pola `zdjecie` zamiast znaku QUIZ (tego źródło nie ma) —
   ten sam kwadrat, kadr `cover`. */
.quiz__f { display: block; aspect-ratio: 1; height: clamp(6.25rem, 11vw, 10rem); border-radius: 1rem; overflow: hidden; }
html .quiz__f img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 52rem) { .g-quiz__znak, .quiz__f { height: 5.5rem; } }

/* ══ WSBINOZ — NAGŁÓWEK: PASEK GÓRNY, LOGO, MEGAMENU, SZUFLADA (09.10.2026) ══
   Reguły z `_projekt/zasoby/styl.css`, przeniesione 1:1 w kolejności źródła
   (kaskada źródła rozstrzyga się tu tak samo); nad każdym kawałkiem numery
   linii. Markup: `partials/naglowek.html.twig`, skrypt: `js/menu.js`.
   Tokeny (`--magenta`, `--hh`…) i `.wrap`, `.sr`, `.btn` są wyżej
   (sekcje „TOKENY PROJEKTU” i „SEKCJE STRONY GŁÓWNEJ”).

   Różnice wobec źródła:
     • reset źródła (linie 19–27) działa tylko w nagłówku, przez `:where()`,
       żeby nie ruszać reszty Clean;
     • `.hdr__cta` ma przedrostek `.hdr` — `html .btn` z sekcji strony
       głównej (0,1,1) wygrywałby z gołą klasą;
     • zdjęcie kafla to `<img>` z `get_img()` bez klasy `.im`, więc reguły
       `.im` (linie 183–184) idą na `.megapromo .im--fill img`;
     • belka quizu (`.quiz-link`, także jej ustępowanie przy otwartej
       szufladzie i megamenu), tryb kontrastu, powiększony tekst
       (`html[data-…]`) i odstępy pod pływające widżety są w sekcji
       „WSBINOZ — ELEMENTY PŁYWAJĄCE” na końcu arkusza. */

/* ── Reset źródła (linie 19–27) — tylko w nagłówku ── */
.skip, .tb, .hdr, .dr {
  font-family: var(--f); line-height: normal; color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
:where(.tb, .hdr, .dr) :where(*) { margin: 0; padding: 0; }
:where(.tb, .hdr, .dr) a { color: inherit; text-decoration: none; }
:where(.tb, .hdr, .dr) button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:where(.tb, .hdr, .dr) :where(img, svg) { max-width: 100%; display: block; }
:where(.tb, .hdr, .dr) h5 { line-height: 1.15; letter-spacing: -.02em; }
/* Fokus — reguła globalna na początku arkusza (linia 26 źródła). */

/* ── Link „Przejdź do treści” (linie 29–30) ── */
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--magenta);color:#fff;padding:12px 20px;font-weight:800;
  text-decoration:none}   /* `a{text-decoration:none}` z resetu źródła (linia 22) */
.skip:focus{left:0}
/* ── Header i megamenu, język, hamburger (linie 52–109) ── */
.hdr{position:sticky;top:0;z-index:90;background:#fff;border-bottom:1px solid var(--line);
  transition:box-shadow .25s}
.hdr.up{box-shadow:0 2px 18px rgba(0,0,0,.07)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:var(--hh);min-width:0}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo__m{width:40px;height:40px;flex-shrink:0}
.hdr__r{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav{display:none}
@media(min-width:1180px){.nav{display:flex;align-items:center}}
.nav__item{position:static}
.nav__link{display:inline-flex;align-items:center;gap:6px;padding:14px 10px;font-size:0.8438rem;font-weight:700;
  letter-spacing:-.01em;white-space:nowrap;transition:color .2s}
.nav__link:hover,.nav__item.open .nav__link{color:var(--magenta-dark)}
.chev{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.6;transition:transform .2s}
.nav__item.open .chev{transform:rotate(225deg) translateY(-2px)}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:3px solid var(--magenta);
  border-bottom:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.35);
  padding:34px var(--gut) 28px;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:.24s var(--ease);z-index:80}
.mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav__item:hover>.mega,.nav__item.open>.mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega__inner{max-width:var(--maxw);margin:0 auto;display:grid;gap:26px 34px;
  grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.mega__inner>div:not(.megapromo){min-width:0}
.mega h5{font-size:0.6875rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--magenta-dark);
  margin:0 0 13px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.mega a{display:block;padding:6px 0;font-size:0.875rem;color:var(--muted);transition:color .18s,transform .18s}
.mega a:hover{color:var(--magenta-dark);transform:translateX(3px)}
.mega__all{display:block;max-width:var(--maxw);margin:24px auto 0;padding-top:18px;border-top:1px solid var(--line);
  font-size:0.8125rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.mega__all:hover{color:var(--magenta-dark)}
.megapromo{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:210px;
  border-radius:var(--r-md);overflow:hidden;padding:20px;color:#fff;isolation:isolate;transform:none!important}
.megapromo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(26,26,46,.55) 0%,rgba(26,26,46,.82) 45%,rgba(26,26,46,.96) 100%)}
.megapromo>*{position:relative;z-index:2}
.megapromo__k{font-size:0.6562rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:7px}
.megapromo__t{font-size:1.1875rem;font-weight:800;line-height:1.15;margin-bottom:6px}
.megapromo__d{font-size:0.7812rem;line-height:1.5;color:rgba(255,255,255,.8)}
@media(min-width:1180px){.mega__inner{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.mega__inner:has(.megapromo){grid-template-columns:repeat(4,minmax(0,1fr)) 290px}}
.lang{display:flex;gap:1px;flex-shrink:0}
.lang a{padding:5px 8px;font-size:0.7188rem;font-weight:800;letter-spacing:.05em;color:var(--muted);border-radius:3px}
.lang a[aria-current]{background:var(--navy);color:#fff}
.lang a:hover{color:var(--magenta-dark)}
@media(max-width:767px){.hdr .lang{display:none}}
.hdr .hdr__cta{display:none;white-space:nowrap}
@media(min-width:920px){.hdr .hdr__cta{display:inline-flex}}
@media(min-width:1180px) and (max-width:1359px){.hdr .hdr__cta{padding:10px 14px;font-size:0.75rem}
.nav__link{padding:14px 8px;font-size:0.8125rem}}
.burger{display:flex;flex-direction:column;gap:5px;padding:10px}
.burger span{display:block;width:24px;height:2px;background:var(--ink);transition:.25s var(--ease)}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:1180px){.burger{display:none}}
/* ── Szuflada (linie 110–127) ── */
.dr{position:fixed;inset:var(--hh) 0 0;background:#fff;z-index:85;overflow-y:auto;
  padding:20px var(--gut) 60px;transform:translateX(100%);visibility:hidden;transition:.3s var(--ease)}
.dr.open{transform:none;visibility:visible}
@media(min-width:1180px){.dr{display:none}}
.dr__grp summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;
  font-size:1rem;font-weight:800;border-bottom:1px solid var(--line);cursor:pointer;list-style:none}
.dr__grp summary::-webkit-details-marker{display:none}
.dr__grp summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--magenta);
  border-bottom:2px solid var(--magenta);transform:rotate(45deg);transition:transform .2s;flex-shrink:0}
.dr__grp[open]>summary::after{transform:rotate(225deg)}
.dr__grp--1 summary{font-size:0.9062rem;font-weight:700;color:var(--muted)}
.dr__sub{padding:4px 0 10px 16px;border-left:2px solid var(--paper)}
.dr__a,.dr__self{display:block;padding:11px 0;font-size:0.9062rem;color:var(--muted);border-bottom:1px solid var(--paper)}
.dr__a:hover,.dr__self:hover{color:var(--magenta-dark)}
.dr__self{font-weight:700;color:var(--ink)}
.dr__a--1{font-size:0.875rem}
.dr__foot{display:flex;flex-direction:column;gap:10px;margin-top:26px}
/* ── Zdjęcie kafla „Polecamy” (linie 183–184; `.im` → `img`) ── */
.megapromo .im--fill img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.im--fill{position:absolute;inset:0;z-index:0;display:block}
/* ── Logo uczelni (linie 192–196) ── */
.logo{display:flex;align-items:center;flex-shrink:0}
.logo__m{width:auto;height:38px;max-width:none;flex-shrink:0;display:block;
  transition:filter .3s}
@media(max-width:420px){.logo__m{height:32px}}
/* ── Pasek górny, progi menu, megamenu (linie 197–260) ── */
.tb{background:var(--paper);border-bottom:1px solid var(--line);font-size:0.7812rem}
.tb__in{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:40px}
.tb__l,.tb__r{display:flex;align-items:center;gap:12px}
.tb__l{min-width:0}
.tb__a{color:var(--muted);font-weight:600;white-space:nowrap}
.tb__a:hover{color:var(--magenta-dark)}
.tb__sep{width:1px;height:14px;background:var(--line);flex-shrink:0}
.tb__soc{display:flex;gap:2px}
.tb__soc a{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);color:var(--muted);transition:color .2s,background .2s}
.tb__soc a:hover{color:var(--magenta);background:rgba(229,0,125,.08)}
/* Na wąskich ekranach topbar się ZWIJA, a nie znika — razem z nim zniknęłyby
   ułatwienia dostępu i przełącznik języka, a te są potrzebne właśnie na
   telefonie. Ustępują kolejno: linki tekstowe, potem ikony społecznościowe. */
.tb__in{flex-wrap:wrap}
@media(max-width:1024px){.tb__l{display:none}
.tb__in{justify-content:flex-end}}
@media(max-width:680px){.tb__soc{display:none}}
@media(max-width:420px){.tb__r{gap:8px}
.tb__sep{display:none}}
/* pasek nawigacji: logo bez osobnego napisu + język w topbarze = więcej miejsca */
.hdr__in{gap:18px}
.nav{gap:2px}
.nav__link{padding:14px 13px;font-size:0.9062rem;letter-spacing:-.005em}
/* Próg musi być ten sam dla menu, hamburgera i szuflady. Wcześniej menu
   włączało się przy 1080 px, a hamburger znikał dopiero przy 1180 px — między
   tymi wartościami pasek pokazywał jedno i drugie naraz i się przepełniał. */
@media(min-width:1080px){.nav{display:flex;align-items:center}
.burger{display:none}
.dr{display:none}}
/* Poniżej 1280 px logo, sześć pozycji menu i przycisk rekrutacji nie mieszczą
   się razem (zmierzone przepełnienie 66 px przy 1120 px). Menu jest ważniejsze
   — przycisk zostaje w szufladzie i jako duże wezwanie w treści hero. */
@media(min-width:1080px) and (max-width:1279px){.nav__link{padding:14px 9px;font-size:0.8438rem}
.hdr .hdr__cta{display:none}}
@media(max-width:1079px){.nav{display:none}
.burger{display:inline-flex}}
/* megamenu: szersze kolumny i oddech między nimi */
.mega__inner{gap:26px 30px;padding:30px 0 26px}
@media(min-width:1080px){.mega__inner{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
/* Kafel promocyjny trzyma się ostatniej kolumny i całej wysokości panelu —
     bez tego reguła dopisana później spychała go do drugiego wiersza. */
.mega__inner:has(.megapromo){grid-template-columns:repeat(4,minmax(0,1fr)) 300px}
.megapromo{grid-column:-2;grid-row:1/-1}}
@media(min-width:1080px) and (max-width:1279px){.mega__inner:has(.megapromo){grid-template-columns:repeat(3,minmax(0,1fr)) 260px}}
.mega h5{font-size:0.75rem;letter-spacing:.1em;margin-bottom:12px}
.mega a{font-size:0.8438rem;line-height:1.55;padding:3px 0}
/* najdłuższy panel („O uczelni”) miał 709 px — na laptopie 1440×800 nie mieścił
   się na ekranie; ograniczamy wysokość i pozwalamy przewijać zawartość */
.mega{max-height:calc(100vh - var(--hh) - 46px);overflow-y:auto;overscroll-behavior:contain}
/* `.mega a` ma wyższą specyficzność niż `.megapromo` i nadpisywało display:flex
   na block — przez to justify-content nie działał, tekst lądował u góry kafla,
   gdzie przyciemnienie jest najsłabsze, i robił się nieczytelny */
.mega a.megapromo{display:flex;flex-direction:column;justify-content:flex-end;
  min-height:236px;padding:22px}
.megapromo .im{opacity:1}
.megapromo::after{background:linear-gradient(180deg,
  rgba(26,26,46,.25) 0%,rgba(26,26,46,.72) 46%,rgba(26,26,46,.95) 100%)}
.megapromo>*{display:block}
.megapromo__k{display:inline-block;padding:4px 9px;border-radius:var(--r-sm);
  background:var(--magenta);color:#fff;font-size:0.625rem;letter-spacing:.12em;margin-bottom:10px}
.megapromo__t{font-size:1.25rem;font-weight:900;line-height:1.15;margin-bottom:7px;color:#fff}
.megapromo__d{font-size:0.7812rem;line-height:1.55;color:rgba(255,255,255,.86)}
/* ── Linki paska górnego (linie 434–439) ── */
.tb__a{display:inline-flex;
  align-items:center;justify-content:center;min-height:24px;min-width:24px;
  padding:4px 2px}
.tb .lang a:not([aria-current]){color:var(--muted)}
.tb .lang a:not([aria-current]):hover{color:var(--magenta-dark)}
/* ── Szuflada pod realnym dołem nagłówka (linie 440–444; wartość ustawia `menu.js`) ── */
.dr{top:var(--gora-szuflady, var(--hh))}
/* ── Pasek górny i nagłówek na pełną szerokość, logo i przycisk (linie 611–662) ── */
.tb .wrap,.hdr .wrap{
  max-width:none;padding-left:clamp(1.25rem,2.6vw,2.5rem);
  padding-right:clamp(1.25rem,2.6vw,2.5rem)}
/* logo może być większe, skoro pasek ma całą szerokość — razem z nim rośnie
   wysokość paska, żeby znak nie dotykał krawędzi */
.logo__m{height:2.75rem}
@media(min-width:52rem){:root,.hdr{--hh:5.5rem}
.logo__m{height:3.375rem}}
@media(max-width:34rem){.logo__m{height:2.375rem}}
@media(max-width:26rem){.logo__m{height:2.125rem}}
/* znak jubileuszu stale przy logo — na telefonie też, tylko mniejszy */
.logo{gap:.875rem}
.logo__20{height:2.375rem;width:auto;display:block;flex-shrink:0}
@media(min-width:52rem){.logo__20{height:3rem}}
@media(max-width:34rem){.logo{gap:.5rem}
.logo__20{height:2.0625rem}}
@media(max-width:26rem){.logo__20{height:1.875rem}}
/* Przycisk rekrutacji chował się razem z menu — a na telefonie to najważniejsze
   wezwanie na stronie. Zamiast znikać, zwęża się do kompaktowej formy. */
.hdr .hdr__cta{display:inline-flex}
@media(max-width:1279px){.hdr .hdr__cta{display:inline-flex;padding:.5625rem .8125rem;font-size:.75rem;
    letter-spacing:.01em}}
@media(min-width:1080px) and (max-width:1279px){.logo__m{height:2.625rem}
.logo__20{height:2.25rem}
.logo{gap:.5rem}
.hdr__in{gap:.625rem}
.nav__link{padding-left:.4375rem;padding-right:.4375rem;
    font-size:.8125rem;letter-spacing:-.01em}
.hdr .hdr__cta{padding:.5rem .625rem;font-size:.6875rem}
:root,.hdr{--hh:4.75rem}}
@media(max-width:34rem){.hdr .hdr__cta{padding:.5rem .6875rem;font-size:.6875rem;text-transform:none}}
@media(max-width:26rem){.hdr .hdr__cta{padding:.4375rem .5625rem;font-size:.625rem}}
/* Przy 365 px pasek przepełniał się o 4 px, a przy 320 px o 44 px — logo,
   znak jubileuszu, przycisk i hamburger nie mieszczą się w jednym rzędzie
   w pełnych rozmiarach. Ostatni stopień oddaje wysokość znaków, nie treść.
   Próg podniesiony z 24 do 26 rem: przy 390 px (iPhone 14/15) rząd mieścił
   się tylko dlatego, że zjadał cały prawy margines — hamburger kończył się
   dokładnie na krawędzi ekranu, a w projekcie 7 wychodził 2,5 px poza nią
   i strona przewijała się w poziomie (WCAG 1.4.10). */
@media(max-width:26rem){.hdr__in{gap:.5rem}
.logo{gap:.375rem}
.logo__m{height:1.75rem}
.logo__20{height:1.5rem}
.hdr .hdr__cta{padding:.375rem .5rem;letter-spacing:0}}
/* Poniżej 336 px zostaje sam znak słowny — jubileusz nie ma już gdzie stanąć. */
@media(max-width:21rem){.logo__20{display:none}}
/* ── Skróty w szufladzie (linie 669–675) ── */
.dr__skroty{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.875rem;
  padding-top:1rem;border-top:1px solid var(--line)}
.dr__skrot{padding:.5rem .875rem;border:1px solid var(--line);border-radius:1.5rem;
  font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted)}
.dr__skrot:hover{border-color:var(--magenta);color:var(--magenta)}
/* ── Megamenu: siatka kolumn, kafel (linie 724–766) ── */
.mega__inner:not(:has(.megapromo)){
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2.25rem 2.75rem;align-items:start;padding-top:.25rem}
@media(max-width:80rem){.mega__inner:not(:has(.megapromo)){grid-template-columns:repeat(3,minmax(0,1fr))}}
/* równy start list mimo dwuwierszowych nagłówków */
.mega__inner{align-items:start}
/* Najdłuższy tytuł działu („Dział Projektów Edukacyjnych i Międzynarodowych”)
   łamie się na trzy wiersze — wysokość pudełka musi zmieścić trzy, inaczej
   ta jedna kolumna spycha swoją listę niżej niż sąsiednie. */
.mega__inner h5{min-height:4.35em;display:flex;align-items:flex-end;
  letter-spacing:.08em}
.mega__inner .megapromo h5{min-height:0;display:block}
/* Kolumna „ciąg dalszy” należy do tego samego działu, więc kreska nagłówka
   ma iść dalej nad nią. Ujemny margines przykrywa rynnę między kolumnami,
   dzięki czemu linia jest jedna, a nie dwie z przerwą. */
.mega h5.mega__h5--empty{color:transparent;margin-left:-2.75rem;padding-left:2.75rem}
/* Linia nad odnośnikiem do całej sekcji miała 18 px odstępu i czytała się jak
   podkreślenie napisu, a nie jak granica panelu. */
.mega__all{margin-top:2rem;padding-top:1.75rem}
/* Panel bywał wyższy niż ekran — przy siedmiu działach miał 709 px.
   Po zrównaniu kolumn mieści się bez przewijania, ale limit zostaje. */
.mega a{padding:.1875rem 0;line-height:1.5}
/* Liczba kolumn musi odpowiadać liczbie działów, a nie być stała: panel
   „Projekty” ma trzy działy i przy sztywnych czterech kolumnach zostawiał
   pustą kolumnę między treścią a kaflem. Liczymy dzieci (działy + kafel). */
.mega__inner:has(.megapromo){grid-template-columns:repeat(4,minmax(0,1fr)) 19rem}
.mega__inner:has(.megapromo):has(>:nth-child(3):last-child){
  grid-template-columns:repeat(2,minmax(0,1fr)) 19rem}
.mega__inner:has(.megapromo):has(>:nth-child(4):last-child){
  grid-template-columns:repeat(3,minmax(0,1fr)) 19rem}
.mega__inner:has(.megapromo):has(>:nth-child(5):last-child){
  grid-template-columns:repeat(4,minmax(0,1fr)) 19rem}
.mega .megapromo{grid-column:-2;grid-row:1/-1;align-self:start;
  aspect-ratio:1/1;min-height:0;height:auto;width:100%}
.mega a.megapromo{min-height:0}
@media(min-width:1080px) and (max-width:1279px){.mega__inner:has(.megapromo){grid-template-columns:repeat(3,minmax(0,1fr)) 16rem}}
@media(max-width:1079px){.mega .megapromo{aspect-ratio:auto;min-height:13rem}}
/* ── Kolory pozycji, nagłówek kolumny jako odnośnik (linie 824–849) ── */
.mega a{color:var(--ink,#2B2B3A)}
.mega a:hover,.mega a:focus-visible{color:var(--magenta-dark,#C20069)}
/* Nagłówki kolumn zostają w kolorze marki, ale ciemniejszym odcieniu —
   jasna magenta na bieli miała 3,9:1. */
.mega h5{color:var(--magenta-dark,#C20069)}
/* ═══ POZYCJE W SZUFLADZIE: JASNE TŁO ═══ */
.dr__a,.dr__self{color:var(--ink,#2B2B3A)}
.dr__a:hover,.dr__self:hover{color:var(--magenta-dark,#C20069)}
.mega h5 a{color:inherit;text-decoration:none;display:inline-flex;
  align-items:center;gap:.375rem;transition:color .18s}
.mega h5 a::after{content:"→";font-size:.9em;opacity:0;transform:translateX(-.25rem);
  transition:opacity .18s,transform .18s}
.mega h5 a:hover::after,.mega h5 a:focus-visible::after{opacity:1;transform:none}
.mega h5 a:hover{color:var(--magenta,#E5007D)}
.mega h5 a:focus-visible{outline:3px solid var(--magenta,#E5007D);outline-offset:3px}
/* ── Przycisk rekrutacji (linie 962–1054) ── */
:root{
  --akcja-ls:.02em;
  --mint-hi:#6FFBDF;                 /* mięta rozjaśniona — hover CTA */
  --mint-aura:rgba(74,246,212,.16);
  --mint-halo:rgba(74,246,212,.55);
}
.hdr .hdr__cta{
  position:relative;isolation:isolate;overflow:hidden;
  align-items:center;justify-content:center;gap:.5rem;
  box-sizing:border-box;
  min-height:3rem;                       /* 48 px — było ok. 38 px */
  padding:0 1.5rem;
  border-radius:0;
  font-size:.875rem;font-weight:800;
  letter-spacing:var(--akcja-ls);
  text-transform:none;                   /* pasek nawigacji jest małymi literami */
  white-space:nowrap;
  background:var(--mint,#4AF6D4)!important;
  color:#000!important;                  /* 15,42:1 */
  box-shadow:0 0 0 .125rem var(--mint-aura),
             0 .375rem 1.25rem -.375rem var(--mint-halo)!important;
  transition:background-color .2s var(--ease,cubic-bezier(.4,0,.2,1)),
             box-shadow .25s var(--ease,cubic-bezier(.4,0,.2,1));
}
/* strzałka — lustro słuchawki telefonu: ikona zawsze na ZEWNĘTRZNEJ
   krawędzi lockupu. To jest klamra rodzinna obu elementów (zamiast
   grafitowego znacznika 2 px, który czytałby się jak artefakt). */
.hdr__cta-t,.hdr__cta-ar{position:relative;z-index:1}
.hdr__cta-ar{width:1rem;height:1rem;flex:0 0 auto;
  transition:transform .22s var(--ease,cubic-bezier(.4,0,.2,1))}
/* PRZEBŁYSK — dwa przejścia, ostatnia klatka w 4,8 s od startu strony.
   Poniżej progu 5 s z WCAG 2.2.2, więc bez obowiązku przycisku pauzy.
   Nieskończona pętla (7 s) naruszałaby 2.2.2. */
.hdr .hdr__cta::after{content:"";position:absolute;top:-50%;bottom:-50%;left:0;
  width:2.25rem;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),
                                   rgba(255,255,255,.55),
                                   rgba(255,255,255,0));
  transform:translateX(-140%) skewX(-18deg);opacity:0;
  animation:ctaBlysk 2.2s var(--ease,cubic-bezier(.4,0,.2,1)) .4s 2}
@keyframes ctaBlysk{
  0%{transform:translateX(-140%) skewX(-18deg);opacity:0}
  10%{opacity:1}
  40%,100%{transform:translateX(420%) skewX(-18deg);opacity:0}
}
.hdr .hdr__cta:hover,.hdr .hdr__cta:focus-visible{
  background:var(--mint-hi,#6FFBDF)!important;      /* tekst 16,54:1 */
  color:#000!important;
  box-shadow:0 0 0 .3125rem rgba(74,246,212,.22),
             0 .5rem 1.625rem -.375rem rgba(74,246,212,.8)!important;
  transform:none!important}
/* neutralizuje .btn--m:hover{scale(1.03)} */
.hdr .hdr__cta:hover .hdr__cta-ar,.hdr .hdr__cta:focus-visible .hdr__cta-ar{transform:translateX(.1875rem)}
.hdr .hdr__cta:hover::after{animation:ctaBlyskH .85s var(--ease,cubic-bezier(.4,0,.2,1)) 1}
@keyframes ctaBlyskH{
  0%{transform:translateX(-140%) skewX(-18deg);opacity:0}
  10%{opacity:1}
  40%,100%{transform:translateX(420%) skewX(-18deg);opacity:0}
}
/* Biel zamiast globalnej magenty: #E5007D na graficie to 3,43:1 — ledwie
   próg 3:1. Biel na graficie: 15,56:1. Offset .375rem odsuwa pierścień
   poza poświatę (ta rośnie do .3125rem w stanie focus).
   Zweryfikowane klawiszem Tab: outline rgb(255,255,255) solid 3px,
   outline-offset 6px, :focus-visible = true. */
.hdr .hdr__cta:focus-visible{outline:.1875rem solid #fff;outline-offset:.375rem;
  border-radius:0}
/* ── SKALA 360 px → 1920 px (każdy stopień zmierzony w przeglądarce) ── */
@media(min-width:100rem){/* ≥ 1600 px → 176x52 px */
.hdr .hdr__cta{min-height:3.25rem;padding:0 1.75rem;font-size:.9375rem}
.hdr__cta-ar{width:1.125rem;height:1.125rem}}
@media(max-width:1399px){/* → 134x44 px */
.hdr .hdr__cta{min-height:2.75rem;padding:0 1rem;font-size:.8125rem;gap:.4375rem}
.hdr__cta-ar{width:.875rem;height:.875rem}}
@media(max-width:52rem){/* ≤ 832 px, pasek 88 → 60 px → 122x40 px */
.hdr .hdr__cta{min-height:2.5rem;padding:0 .8125rem;font-size:.75rem}}
@media(max-width:26rem){/* ≤ 416 px → 107x36 px, poświata o połowę */
.hdr .hdr__cta{min-height:2.25rem;padding:0 .625rem;font-size:.6875rem;gap:.375rem;
    box-shadow:0 0 0 .0625rem var(--mint-aura),
               0 .25rem .75rem -.3125rem var(--mint-halo)!important}
.hdr__cta-ar{width:.75rem;height:.75rem}}
@media(max-width:24rem){/* ≤ 384 px → 82x36 px, mieści się przy 360 px */
.hdr .hdr__cta{padding:0 .5rem;letter-spacing:0}
.hdr__cta-ar{display:none}}
@media(prefers-reduced-motion:reduce){.hdr .hdr__cta::after,.hdr .hdr__cta:hover::after{display:none;animation:none}
.hdr__cta-ar,.hdr .hdr__cta:hover .hdr__cta-ar,.hdr .hdr__cta:focus-visible .hdr__cta-ar{transform:none}}
/* ── Megamenu: kreski nagłówków na jednej wysokości — subgrid (linie 1261–1288) ── */
@supports (grid-template-rows:subgrid){@media(min-width:1080px){/* Dwa JAWNE pasy: nagłówki i listy. Bez nich kafel polecany, który ma
       `grid-row:1/-1`, rozwiązywał `-1` na koniec pustej siatki jawnej —
       czyli zajmował sam pas nagłówków i rozpychał go do swojej wysokości
       (zmierzone: pas nagłówków 304 px zamiast 58). Nagłówki, dosunięte do
       dolnej krawędzi pasa, lądowały wtedy w połowie panelu, a nad nimi
       zostawała pusta przestrzeń. Drugi pas dostaje `1fr`, więc to on
       pochłania ewentualny nadmiar wysokości kafla, a nie pas nagłówków. */
.mega__inner{grid-template-rows:auto 1fr}
.mega__inner>div:not(.megapromo){display:grid;grid-template-rows:subgrid;
      grid-row:span 2;align-self:stretch;row-gap:0}
/* pas siatki sam ustala wysokość — stała przestaje być potrzebna */
.mega__inner h5{min-height:0}}}
/* ── Ciasne progi paska (linie 2086–2096) ── */
@media(min-width:1280px) and (max-width:1321px){.logo__m{height:2.625rem}
.logo__20{height:2.25rem}
.logo{gap:.5rem}
.hdr__in{gap:.625rem}
.nav__link{padding-left:.4375rem;padding-right:.4375rem;
    font-size:.8125rem;letter-spacing:-.01em}
.hdr .hdr__cta{min-height:2.75rem;padding:0 .75rem;font-size:.75rem}}
@media(min-width:1080px) and (max-width:1099px){.nav__link{padding-left:.3125rem;padding-right:.3125rem}}
/* ── Nazwa działu jako odnośnik (linie 2110–2114) ── */
.mega__h{color:inherit;text-decoration:none}
.mega__h:hover{text-decoration:underline;text-underline-offset:3px}
.mega__h:focus-visible{outline:3px solid var(--magenta);outline-offset:3px}
/* ── Uzupełnienia dla CMS (bez odpowiednika w źródle) ── */
/* Logo bez pliku w panelu — znak słowny w miejscu grafiki. */
.logo__m--tekst{width:auto;height:auto;font-size:1.25rem;font-weight:800;color:var(--navy);white-space:nowrap}
/* Serwis bez ikony w źródle (X, Telegram, BIP…) — skrót nazwy. */
.tb__soc-t{font-size:.625rem;font-weight:800;letter-spacing:.02em}
/* Język bez wersji tej podstrony — bez `href`; źródło nie ma osobnego stylu, tu tylko kursor. */
.lang a.wylaczony{cursor:default}

/* ══ WSBINOZ — HERO STRONY GŁÓWNEJ (09.10.2026) ═════════════════════════
   Markup: `partials/hero.html.twig`, wariant `glowna`; skrypt: `js/hero.js`.
   Reguły z `_projekt/zasoby/styl.css` w kolejności źródła (kaskada
   rozstrzyga się tu tak samo), nad każdym kawałkiem numery linii.

   Różnice wobec źródła:
     • hero stoi w `.pp-artykul` (siatka treści) — dostaje linię `krawedz`,
       czyli całą szerokość okna, a `.pp-tresc` gubi górny odstęp;
     • `.pp-artykul h1/p` (0,1,1) nadają marginesy i krój — zerowanie niżej
       ma tę samą siłę, a reguły `.hero__h/.hero__k/.hero__p` przedrostek
       `html ` (stoją później, więc wygrywają);
     • reset przycisku źródła (linia 23) tylko na zakładkach, przez `:where()`;
     • plakat filmu (`hero-wsbinoz-plakat.webp`, linia 1157) — CMS go nie
       ma; tło filmu to granat;
     • tryb kontrastu, powiększony tekst (`html[data-…]`) i odstępy pod
       pływające widżety i belkę quizu (linie 283–286, 459, 666–668, 881)
       — w sekcji „WSBINOZ — ELEMENTY PŁYWAJĄCE” na końcu arkusza;
     • pominięte: animacja planszy (linia 814 — źródło i tak gasi ją
       w linii 1192), reguły `.duo` w hero (1127–1128). */

/* ── Miejsce w siatce treści (Clean) ── */
.pp-artykul > .hero { grid-column: krawedz; }
.pp-tresc:has(> .pp-artykul > .hero:first-child),
.pp-tresc:has(> .pp-artykul > h1.sr:first-child + .hero) { padding-top: 0; }
.hero { font-family: var(--f); -webkit-font-smoothing: antialiased; }
.pp-artykul :where(.hero) h1,
.pp-artykul :where(.hero) p { margin: 0; padding: 0; border: 0; font: inherit; }
.pp-artykul :where(.hero) a { text-decoration: none; }
.pp-artykul :where(.hero) a:not(.btn) { color: inherit; }
:where(.hero) button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; margin: 0; padding: 0; }

/* ── Podstawa (linie 133–151, 25) ── */
.hero{position:relative;min-height:clamp(480px,72vh,720px);display:flex;align-items:flex-end;
  background:var(--navy);overflow:hidden;padding:40px 0 clamp(32px,5vw,56px)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero__tabs{display:flex;flex-wrap:wrap;gap:0;margin-bottom:28px;border-bottom:2px solid rgba(255,255,255,.16)}
.hero__tab{padding:12px 18px;font-size:0.875rem;font-weight:800;letter-spacing:-.01em;color:rgba(255,255,255,.55);
  border-bottom:3px solid transparent;margin-bottom:-2px;transition:color .2s,border-color .2s;white-space:nowrap}
.hero__tab:first-child{padding-left:0}
.hero__tab[aria-selected=true]{color:#fff;border-bottom-color:var(--magenta)}
.hero__tab:hover{color:#fff}
html .hero__k{font-size:0.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:16px}
html .hero__h{font-size:clamp(2rem,6.4vw,4.25rem);font-weight:900;line-height:1.02;letter-spacing:-.03em;
  color:#fff;text-transform:uppercase;max-width:16ch;min-height:2.1em}
@media(min-width:768px){html .hero__h{min-height:2.05em}}
.hero__h em{font-style:normal;color:var(--magenta-light)}
.hero__b{display:flex;flex-direction:column;gap:22px;margin-top:22px}
@media(min-width:860px){.hero__b{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px}}
html .hero__p{font-size:1rem;line-height:1.65;color:rgba(255,255,255,.82);max-width:46ch;min-height:3.3em}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;flex-shrink:0}
.hero__bar{position:absolute;left:0;bottom:0;height:3px;background:var(--magenta);z-index:3;transition:width .1s linear}

/* ── Slajdy w stosie, zakładki na wąskim ekranie (linie 370–385) ── */
.hero__slides{display:grid}
.hero__slide{grid-area:1/1;display:flex;flex-direction:column;min-width:0;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease}
.hero__slide.is-on{opacity:1;visibility:visible;pointer-events:auto}
.hero__slide .hero__b{margin-top:auto}
html .hero__h{min-height:0;max-width:15ch}
html .hero__p{min-height:0}
.hero__slide .hero__b{margin-top:auto;padding-top:24px}
@media(max-width:720px){.hero__tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hero__tabs::-webkit-scrollbar{display:none}
.hero__tab{flex:0 0 auto;font-size:0.8125rem;padding:11px 14px}}
@media(prefers-reduced-motion:reduce){.hero__slide{transition:none}}

/* ── Kompozycja z okładki informatora (linie 389–433) ── */
.hero{background:#fff;align-items:center;padding:clamp(28px,4vw,52px) 0}
.hero .wrap{position:relative;z-index:2}
.hero__slides,.hero__tabs{margin-left:auto;max-width:min(640px,56%);padding-right:.24em}
.hero__tabs{border-bottom-color:rgba(26,26,46,.16)}
.hero__tab{color:rgba(26,26,46,.55)}
.hero__tab:hover{color:var(--navy)}
.hero__tab[aria-selected=true]{color:var(--navy);border-bottom-color:var(--magenta)}
html .hero__k{color:var(--cyan-ink)}
html .hero__h{color:var(--navy);background:none;padding:0;line-height:1.28;max-width:none;
  hyphens:none}
.hero__h>span,.hero__h em{display:inline;background:#fff;padding:.06em .2em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero__h em{color:var(--magenta-dark)}
html .hero__p{color:#3A3A4C;background:rgba(255,255,255,.82);padding:10px 14px;
  border-radius:var(--r-sm);backdrop-filter:blur(2px)}
.hero__slide .hero__b{padding-top:20px;flex-direction:column;align-items:flex-start;gap:18px}
html .hero__p{max-width:none}
.hero__znak{position:absolute;left:clamp(20px,4vw,48px);bottom:clamp(20px,3vw,38px);
  z-index:2;height:clamp(76px,9vw,124px);width:auto}
.hero__bar{background:var(--magenta)}
@media(max-width:1100px){.hero__slides,.hero__tabs{max-width:min(560px,62%)}
.hero__znak{height:78px}}
@media(max-width:820px){.hero{align-items:flex-end;min-height:clamp(520px,80vh,680px)}
.hero__slides,.hero__tabs{max-width:100%;margin-left:0}
.hero__znak{position:static;margin:0 0 18px;height:70px}
html .hero__p{background:rgba(255,255,255,.9)}}

/* ── Łamanie i stopień tytułu (linie 453–457) ── */
.hero__h,.hero__h em,.hero__h span{
  overflow-wrap:normal;word-break:normal;hyphens:none}
html .hero__h{font-size:clamp(2rem,5.4vw,3.875rem)}

/* ── Plansza i wejście treści (linie 808–820; ruch planszy zgaszony w 1192) ── */
.hero__plansza{position:absolute;inset:0;z-index:0;overflow:hidden;
  transform-origin:center bottom}
.hero .wrap{will-change:transform}
@media(prefers-reduced-motion:no-preference){
.hero .wrap>*{animation:tresc-wejscie .7s cubic-bezier(.22,.9,.3,1) backwards}
.hero .wrap>*:nth-child(1){animation-delay:.18s}
.hero .wrap>*:nth-child(2){animation-delay:.28s}}
@keyframes tresc-wejscie{from{opacity:0;transform:translate3d(0,1.25rem,0)}}

/* ── Telefon (linie 855–892) ── */
@media(max-width:820px){
.hero__h .hero__ht{display:inline;background:#fff;padding:.06em .2em;
    box-decoration-break:clone;-webkit-box-decoration-break:clone}
html .hero__h{line-height:1.42}
.hero{flex-direction:column;align-items:stretch;justify-content:flex-end}
.hero .wrap{width:100%}
.hero__znak{align-self:flex-start;margin:0 0 1.125rem var(--gut,1.25rem)}
.hero__tabs{display:grid;grid-template-columns:1fr 1fr;gap:0 .5rem;
    overflow:visible;border-bottom:0;margin-bottom:1.25rem}
.hero__tab{flex:none;width:100%;text-align:left;padding:.625rem .25rem;
    font-size:.8125rem;border-bottom:2px solid rgba(26,26,46,.16)}
.hero__tab[aria-selected=true]{border-bottom-color:var(--magenta)}}
@media(max-width:20rem){.hero__tabs{grid-template-columns:1fr}
.hero__tab{padding:.5rem .25rem}}

/* ── Film w tle i nakładka (linie 1155–1216) ── */
.hero__wideo{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:center;pointer-events:none;
  /* plakat także jako tło (linia 1157) — zanim wczyta się `poster` albo film;
     plik z pola slajdu, `--hero-plakat` w `partials/hero.html.twig` */
  background:var(--hero-plakat,none) center/cover no-repeat var(--navy)}
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(26,26,46,0) 0%,
    rgba(26,26,46,.09) 16%,
    rgba(26,26,46,.46) 29%,
    rgba(26,26,46,.68) 40%,
    rgba(26,26,46,.72) 100%)}
@media(max-width:56rem){.hero__wideo{object-position:32% center}
.hero__scrim{background:rgba(26,26,46,.60)}
.hero__tab{color:rgba(255,255,255,.94)}}
.hero__tab{color:rgba(255,255,255,.88);
  text-shadow:0 1px 4px rgba(0,0,0,.7),0 0 12px rgba(0,0,0,.45)}
.hero__tab:hover,.hero__tab[aria-selected=true]{color:#fff}
html .hero__k{color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.7),0 0 12px rgba(0,0,0,.45)}
@media(max-width:820px){.hero__tab{border-bottom-color:rgba(255,255,255,.26)}
.hero__tab[aria-selected=true]{border-bottom-color:var(--magenta,#E5007D)}}

/* ── Jeden przycisk pauzy (film i zmiana slajdów) — wstawia go `js/hero.js` (linie 1251–1260); ten sam przycisk przy filmie w czołówce podstron — `js/khero.js` ── */
.hero__pauza{position:absolute;right:clamp(3.5rem,5vw,5rem);
  bottom:clamp(1.25rem,3vw,2rem);z-index:5;width:2.75rem;height:2.75rem;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;cursor:pointer;font-size:.8125rem;
  background:rgba(12,12,20,.62);color:#fff;
  transition:background .2s,transform .2s}
.hero__pauza[hidden]{display:none}
.hero__pauza:hover{background:#0C0C14;transform:scale(1.06)}
.hero__pauza:focus-visible{outline:3px solid var(--magenta,#E5007D);
  outline-offset:3px}
@media(max-width:26rem){.hero__pauza{right:.75rem;bottom:.75rem}}

/* ── Łamanie przy długim wyrazie (linia 1397) ── */
.hero__h,.hero__h em,.hero__ht{overflow-wrap:break-word}


/* ══ WSBINOZ — HERO PODSTRON: CZOŁÓWKA `section.khero` (12.10.2026) ═════
   Markup: `partials/hero-podstrony.html.twig` (dane: `App\Serwis\HeroPodstrony`).
   Reguły z `_projekt/zasoby/styl.css` w kolejności źródła, nad każdym
   kawałkiem numery linii. `.lbl`, `.h2`, `.btn`, `.btn--m`, `.btn--outw`
   (linie 32–47 i 416–418) są wyżej, w „Reguły bazowe źródła”.

   Różnice wobec źródła:
     • czołówka stoi w `.pp-artykul` (siatka treści) — dostaje linię
       `krawedz`, czyli całą szerokość okna, a `.pp-tresc` gubi górny odstęp;
     • reset `*{margin:0;padding:0}` źródła (linia 19) zastępuje zerowanie
       `.khero h1/p/ol/ul/li` (gasi `.pp-artykul h1/p/ol/li`), a reguły
       elementów czołówki mają przedrostek `.khero ` — wygrywają z nim
       i z `.pp-artykul h1` (krój, interlinia 1,12, margines 28 px);
     • `line-height: normal` na sekcji — źródło nie ustawia interlinii
       w `body`, Clean ma 1,65;
     • opis to jeden `div.khero__opis` z edytora: blok `.subhead-class`
       wygląda jak `.khero__h` (1477–1479), każdy inny jak `.khero__z`
       (1474–1475); odnośniki w opisie, listy i kadr zdjęcia z panelu
       (`khero__f--kadr-N`) — uzupełnienia CMS, źródło ich nie ma;
     • tryb kontrastu i powiększony tekst — źródło nie ma reguł dla
       czołówki; działają wspólne `html[data-kontrast]` (zerowanie tła,
       szare zdjęcie) i `html[data-tekst]` (rem) z „ELEMENTY PŁYWAJĄCE”;
     • podtytuł zawsze 72ch (`.khero__h--w`, 1484 — decyzja właściciela);
     • kadr zdjęcia tylko z panelu (9 punktów), bez wartości wpisanych
       na stronie jak inline w źródle;
     • pominięte: `.khero--pod` i `.khero__e` (strona `formularz.php`). */

/* ── Miejsce w siatce treści (Clean) ── */
.pp-artykul > .khero { grid-column: krawedz; }
.pp-tresc:has(> .pp-artykul > .khero:first-child) { padding-top: 0; }
/* Strona „Tylko bloki” (szablon 13, `article/article_empty`): okruchy bez czołówki
   stoją w `div.wrap.okruchy__pas` — jak `main > .wrap > nav.okruchy` źródła stron
   stopni. Pas idzie na linię `krawedz`, a `width: 100%` gasi skurcz elementu siatki
   z `margin: auto` (`.wrap`) — inaczej okruchy stały wyśrodkowane na szerokość
   treści; `.pp-tresc` gubi górny odstęp — odstęp daje `.okruchy` (1,25rem).
   `line-height: normal` jak w `.khero` (źródło nie ustawia interlinii, Clean ma 1,65). */
.pp-artykul > .okruchy__pas { grid-column: krawedz; width: 100%; line-height: normal; }
.pp-tresc:has(> .pp-artykul > .okruchy__pas:first-child) { padding-top: 0; }
.khero { font-family: var(--f); line-height: normal; color: var(--ink); -webkit-font-smoothing: antialiased; }
.khero h1, .khero p, .khero ol, .khero ul, .khero li { margin: 0; padding: 0; }
/* `a{text-decoration:none}` źródła (linia 21); kolor zostaje klasom (`.btn--m`, `.okruchy a`) */
.khero a { text-decoration: none; }

/* ── Okruchy (linie 1432–1445, 1789) ── */
.okruchy{padding:1.25rem 0 0}
.okruchy ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  gap:.25rem .5rem;margin:0;padding:0;font-size:.8125rem;
  color:var(--muted,#5C5C6E)}
.okruchy li{display:flex;align-items:center;gap:.5rem;margin:0}
.okruchy li::after{content:"›";opacity:.45}
.okruchy li:last-child::after{content:none}
.okruchy a{color:inherit;text-decoration:none}
.okruchy a:hover,.okruchy a:focus-visible{color:var(--magenta,#E5007D);
  text-decoration:underline}
.okruchy [aria-current="page"]{color:var(--ink,#2B2B3A);font-weight:600}
.okruchy a{padding:.25rem 0}

/* ── Rząd przycisków (linia 1450) ── */
.przyciski{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

/* ── Czołówka na zdjęciu (linie 1452–1491) ── */
.khero{position:relative;overflow:hidden;background:var(--navy,#1A1A2E);
  isolation:isolate}
.khero__f{position:absolute;inset:0;z-index:0;display:block}
.khero__f img,.khero__f video{width:100%;height:100%;object-fit:cover;object-position:center 45%;display:block}
/* kadr z panelu (`seo_zdjecie_crop_position`): siatka 3×3 jak w wyborniku panelu
   (1 lewo-góra, 2 środek-góra, 3 prawo-góra, 4 lewo-środek, 5 środek = domyślny
   źródła, bez klasy, 6 prawo-środek, 7–9 dół); środek w pionie = 45% jak w źródle */
.khero__f--kadr-1 :is(img,video){object-position:left top}
.khero__f--kadr-2 :is(img,video){object-position:center top}
.khero__f--kadr-3 :is(img,video){object-position:right top}
.khero__f--kadr-4 :is(img,video){object-position:left 45%}
.khero__f--kadr-6 :is(img,video){object-position:right 45%}
.khero__f--kadr-7 :is(img,video){object-position:left bottom}
.khero__f--kadr-8 :is(img,video){object-position:center bottom}
.khero__f--kadr-9 :is(img,video){object-position:right bottom}
.khero__s{position:absolute;inset:0;z-index:1;display:block;
  background:linear-gradient(90deg,rgba(18,18,31,.93) 0%,rgba(18,18,31,.88) 42%,
    rgba(18,18,31,.66) 74%,rgba(18,18,31,.48) 100%)}
@media(max-width:899px){.khero__s{background:rgba(18,18,31,.88)}}
.khero{min-height:23rem;display:flex;align-items:flex-end}
@media(min-width:900px){.khero{min-height:30rem}}
.khero__in{position:relative;z-index:2;width:100%;
  padding-top:2rem;padding-bottom:2.75rem}
@media(min-width:900px){.khero__in{padding-top:2.5rem;padding-bottom:4rem}}
/* `.khero__z` (1474–1475) — każdy blok opisu bez `.subhead-class` */
.khero .khero__opis>*{color:rgba(255,255,255,.88);font:400 1rem/1.65 var(--f);
  letter-spacing:normal;text-transform:none;font-style:normal;border:0;padding:0;
  margin:1rem 0 0;max-width:62ch}
.khero .khero__t{color:#fff;margin:.25rem 0 0;font-family:var(--f);line-height:1.15}
/* `.khero__h` (1477–1479) — blok „Podtytuł” z edytora. Szerokość zawsze
   72ch (`.khero__h--w`, 1484) — decyzja właściciela: źródło ma 46ch i wariant
   72ch na 238 stronach; stały szeroki różni się od źródła na 25 stronach,
   próg 60 znaków różnił się na 47. */
.khero .khero__opis>.subhead-class{color:var(--mint-hi,#6FFBDF);font-size:1.0625rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;margin:.75rem 0 0;
  line-height:1.35;max-width:72ch}
.khero .przyciski{margin-top:2rem}
.lbl--w{color:var(--mint-hi,#6FFBDF)}
.khero .okruchy{padding-top:0}
.khero .okruchy ol{color:rgba(255,255,255,.8)}
.khero .okruchy [aria-current="page"]{color:#fff}
.khero .okruchy a:hover,.khero .okruchy a:focus-visible{
  color:var(--mint-hi,#6FFBDF)}
/* uzupełnienia CMS: listy i odnośniki w opisie (magenta `.pp-artykul a`
   miałaby na granacie za mały kontrast) */
.khero .khero__opis>:is(ul,ol){padding-left:1.25rem}
.khero .khero__opis li{margin:0}
.khero .khero__opis a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.khero .khero__opis a:hover,.khero .khero__opis a:focus-visible{color:var(--mint-hi,#6FFBDF)}

/* ── Okruchy zawsze przy górnej krawędzi (linie 2188–2190) ── */
.khero{align-items:stretch}
.khero__in{display:flex;flex-direction:column;justify-content:flex-end}
.khero__in>.okruchy{margin-bottom:auto}


/* ══ WSBINOZ — AKTUALNOŚCI: KARTY (09.10.2026) ═════════════════════════
   Wariant bloku 10 nr 1006 (`templates/clean_aktualnosci.html.twig`);
   nagłówek sekcji i przycisk — `blocks/block_10_contents.html.twig`.
   Reguły z `_projekt/zasoby/styl.css` w stanie końcowym kaskady.
   Liczba kolumn z ustawienia bloku (`--cl-kolumny`, w źródle stałe 3). */
.pp-artykul :where(.news) h3 { margin: 0; padding: 0; border: 0; font: inherit; }
.pp-artykul :where(.news) a { color: inherit; text-decoration: none; }
/* linie 171–175 */
.news{display:grid;gap:8px;margin-top:34px;font-family:var(--f);color:var(--ink);line-height:normal}
@media(min-width:700px){.news{grid-template-columns:repeat(var(--cl-kolumny,3),1fr);gap:22px}}
.news__c{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;transition:border-color .2s,box-shadow .2s}
.news__c:hover{border-color:var(--magenta);box-shadow:0 10px 26px rgba(0,0,0,.06)}
/* linie 176, 712–716: kadr 4:3 i zdjęcie `cover`. Proporcję, „mieści
   się w ramce” i punkt zaczepienia daje tu `.cl-kadr` z ustawień bloku
   (domyślnie 3 = 4:3), więc `aspect-ratio` i `object-*` źródła odpadają;
   zostaje tło i brak zaokrąglenia (zaokrągla karta). */
.news__i{position:relative;display:block;background:var(--paper,#F1F1F5);overflow:hidden}
.news__i.cl-kadr{border-radius:0;background:var(--paper,#F1F1F5)}
html .news__i img,html .news__i .im{width:100%;height:100%;max-width:none;display:block}
.news__i.kadr-1 > .im--fill{position:static}
html .news__i.kadr-1 img{height:auto}
/* linie 1681–1683: zbliżenie po najechaniu */
html .news__c .news__i .im{transition:transform .5s var(--ease,cubic-bezier(.4,0,.2,1))}
html .news__c:hover .im,html .news__c:focus-within .im{transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){html .news__c:hover .im,html .news__c:focus-within .im{transform:none}}
/* linie 177–181, 468, 1828–1831, 1880 */
.news__b{padding:20px 20px 24px;display:flex;flex-direction:column;flex:1}
.news__k{font-size:0.6875rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:9px}
html .news__t{display:block;font-size:1.0312rem;font-weight:800;line-height:1.3;letter-spacing:-.01em;
  overflow-wrap:break-word;hyphens:none;-webkit-hyphens:none}
.news__x{font-size:0.8438rem;color:var(--muted);line-height:1.6;margin-top:9px;flex:1}
.news__a{display:block;margin-top:1rem;font-size:.8125rem;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:var(--magenta,#E5007D);transition:transform .2s}
.news__c:hover .news__a{transform:translateX(.125rem)}
/* linie 718–720, 1838: przycisk pod listą i ścięty dolny zapas sekcji */
.akt-wiecej{display:flex;justify-content:center;
  margin-top:clamp(2.25rem,4.5vw,3.5rem)}
section:has(.akt-wiecej){padding-bottom:clamp(2rem,4vw,3rem)}
/* Nagłówek sekcji w pozostałych wariantach listy (poza `.sec`) — krój
   projektu; odstęp pod tytułem jak `.sec .h2` (linia 1529). */
.cl-zasoby > .lbl, .cl-zasoby > .h2 { font-family: var(--f); }
html .cl-zasoby > .h2 { margin: 0 0 1.25rem; padding: 0; border: 0; }

/* ══ WSBINOZ — PAS REKRUTACJI, PARTNERZY, STOPKA (09.10.2026) ═══════════
   Markup: `partials/pas-rekrutacji.html.twig`, `partials/partnerzy.html.twig`,
   `partials/stopka.html.twig`; pauza taśmy: `js/partnerzy.js`.
   Reguły z `_projekt/zasoby/styl.css`, wartości z OSTATECZNEGO stanu
   kaskady źródła (scalone, nad każdym kawałkiem numery linii).

   Różnice wobec źródła:
     • pas i stopka stoją poza `.pp-artykul`, więc zamiast resetu `*` źródła
       jest zerowanie przez `:where()` — tylko w nich;
     • kolumny stopki to HTML z panelu (`.st-kol__tresc`), a nie gotowe
       `ul.st-lista` / `address` — reguły list i adresu idą na zawartość;
     • siatka kolumn liczy się z `data-kolumn` (panel włącza 0–4 kolumny),
       kafle „Zacznij studia” z `data-pozycji`;
     • `.foot [class$="__soc"]` źródła — tu wprost `.st-dol__soc`;
     • podpis autora to napis „Created by ewi.agency”, nie logo eWitryny;
     • tryb kontrastu (`html[data-kontrast]`), zapas po bokach `.foot .wrap`
       (linie 666–668) i odstęp pod pływające widżety (933–934) —
       w sekcji „WSBINOZ — ELEMENTY PŁYWAJĄCE” na końcu arkusza; martwa
       w źródle linia 475 stoi w szkielecie stopki tak jak tam — nadpisana. */

/* ── Zerowanie i krój (linie 19–27) — tylko w pasie i stopce ── */
.rk, .foot { font-family: var(--f); line-height: normal; -webkit-font-smoothing: antialiased; }
:where(.rk, .foot) :where(h2, h3, p, ul, li, address) { margin: 0; padding: 0; }
:where(.rk, .foot) a { text-decoration: none; }
:where(.rk, .foot) button { font-family: inherit; cursor: pointer; }
:where(.rk, .foot) :where(h2, h3) { line-height: 1.15; }   /* `h1–h5` źródła (linia 25) */

/* ── Pas rekrutacji — `section.sec.rk` (linie 1131–1139, 705; style
      wpisane w `_projekt/index.php` przy nadtytule, nagłówku i przyciskach) ── */
.rk{background:var(--navy);color:#fff}
.rk .lbl{color:var(--cyan)}
html .rk .h2{color:#fff}
html .rk .lead{color:var(--dim)}
.rk__g{display:grid;gap:10px;margin-top:32px}
@media(min-width:640px){.rk__g{grid-template-columns:1fr 1fr;gap:18px}}
@media(min-width:1050px){.rk__g{grid-template-columns:repeat(4,1fr)}}
.rk__s{padding:26px 22px;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--glass-b);
  border-top:3px solid var(--magenta)}
.rk__n{font-size:2.25rem;font-weight:900;line-height:1;color:var(--magenta-light);letter-spacing:-.04em;margin-bottom:12px}
.rk__t{font-size:1rem;font-weight:800;margin-bottom:7px;color:#fff}
.rk__d{font-size:0.8438rem;color:var(--dim);line-height:1.6}
.rk__d a{color:#fff;text-decoration:underline}
.pas-cta{margin-top:30px;display:flex;gap:13px;flex-wrap:wrap;margin-bottom:clamp(1.25rem,2.5vw,2.25rem)}

/* ── Szkielet stopki (linie 128–131, 289–294, 470–476) ── */
.foot{background:#12121F;color:#fff;padding:0}
.foot::before{content:"";display:block;height:3px;margin:0;
  background:linear-gradient(90deg,var(--magenta),var(--cyan))}
.foot .wrap{padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(1.5rem,3vw,2.5rem)}
/* Belka quizu jest przyklejona do prawej krawędzi na każdej szerokości.
   Dopóki okno nie jest szersze od kontenera z zapasem, treść stopki musi
   się od niej odsunąć — inaczej wezwania po prawej wchodzą pod nią.
   (linie 472–475; jak w źródle nadpisują ją niżej reguła pełnej
   szerokości 611–617 i zapas od 52 rem 666–668 — zostaje w tym samym
   miejscu kaskady, żeby szerokość stopki była ta sama co w projekcie) */
@media(max-width:87.5rem){.foot .wrap{padding-right:calc(var(--gut,3rem) + 3.25rem)}}
.foot a{display:block;font-size:0.8438rem;color:inherit;padding:5px 0;transition:color .18s}
.foot a:hover{color:#fff}
/* pełna szerokość (linie 611–617); zapas po bokach od 52 rem (666–668)
   — razem z hero i sekcjami w „WSBINOZ — ELEMENTY PŁYWAJĄCE” */
.foot .wrap,.st-a__pas .wrap{max-width:none;
  padding-left:clamp(1.25rem,2.6vw,2.5rem);padding-right:clamp(1.25rem,2.6vw,2.5rem)}

/* ── Partnerzy — biały pas z taśmą (linie 500–545) ── */
.st-partnerzy{background:#fff;color:#12121F;padding:1.375rem 0;overflow:hidden}
.st-partnerzy__in{display:grid;gap:.875rem 1.75rem;align-items:center}
@media(min-width:64rem){.st-partnerzy__in{grid-template-columns:auto minmax(0,1fr) auto}}
.st-partnerzy__et{font-size:1.125rem;font-weight:900;letter-spacing:-.01em;white-space:nowrap}
/* Wygaszenie krawędzi: logotypy mają wjeżdżać i wyjeżdżać, a nie urywać się. */
.st-partnerzy__okno{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3rem,#000 calc(100% - 3rem),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 3rem,#000 calc(100% - 3rem),transparent 100%)}
.st-partnerzy__tasma{display:flex;align-items:center;gap:3.25rem;width:max-content;
  animation:st-przesuw 46s linear infinite}
.st-partnerzy__tasma img{height:2.25rem;width:auto;max-width:none;display:block;
  filter:grayscale(1);opacity:.7;transition:filter .2s,opacity .2s}
.st-partnerzy__tasma img:hover{filter:none;opacity:1}
@keyframes st-przesuw{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 1.625rem))}
}
.st-partnerzy:hover .st-partnerzy__tasma,.st-partnerzy:focus-within .st-partnerzy__tasma,
.st-partnerzy[data-pauza="tak"] .st-partnerzy__tasma{animation-play-state:paused}
/* Bez ruchu taśma stoi i daje się przewinąć — pauza nie ma wtedy czego
   zatrzymywać, więc znika (źródło zostawiało martwy przycisk). */
@media(prefers-reduced-motion:reduce){.st-partnerzy__tasma{animation:none}
  .st-partnerzy__okno{overflow-x:auto}
  .st-partnerzy__stop{display:none}}
.st-partnerzy__akcje{display:flex;align-items:center;gap:1rem}
.st-partnerzy__stop{width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid #D8D8E0;
  background:#fff;color:#12121F;display:inline-flex;align-items:center;
  justify-content:center;flex-shrink:0;padding:0}
.st-partnerzy__stop:hover{border-color:#12121F}
.st-partnerzy__ikona{width:.75rem;height:.875rem;
  border-left:.25rem solid currentColor;border-right:.25rem solid currentColor}
.st-partnerzy[data-pauza="tak"] .st-partnerzy__ikona{
  width:0;height:0;border:0;border-left:.75rem solid currentColor;
  border-top:.4375rem solid transparent;border-bottom:.4375rem solid transparent}
.foot a.st-partnerzy__w{display:inline-flex;align-items:center;gap:.375rem;
  min-height:2.75rem;padding:.5rem 0;font-size:.75rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--magenta-dark,#C20069);
  white-space:nowrap}
.foot a.st-partnerzy__w:hover{color:#12121F}
@media(max-width:64rem){.st-partnerzy__et{font-size:1rem}}
/* Odstęp `.foot .wrap` (linia 471) działa też na taśmę — jak w źródle
   (decyzja o wierności, 09.10.2026; wcześniej Clean go zerował). */

/* ── „Zacznij studia” — pas kafli na magencie (linie 484–495, 597–604, 1405) ── */
.st-a__pas{background:var(--magenta,#E5007D)}
.foot .st-a__pas .wrap{padding-top:clamp(1.75rem,3.5vw,2.5rem);padding-bottom:clamp(1.75rem,3.5vw,2.5rem)}
.st-a__nad{font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin:0 0 1rem}
.st-a__akcje{display:grid;gap:.75rem}
@media(min-width:48rem){.st-a__akcje{grid-template-columns:repeat(3,1fr)}
  .st-a__akcje[data-pozycji="1"]{grid-template-columns:1fr}
  .st-a__akcje[data-pozycji="2"]{grid-template-columns:repeat(2,1fr)}
  .st-a__akcje[data-pozycji="4"]{grid-template-columns:repeat(4,1fr)}}
.foot a.st-akcja{display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:.25rem .875rem;padding:1.0625rem 1.25rem;border-radius:.5rem;
  background:#fff;color:#12121F;transition:transform .2s,box-shadow .2s;min-width:0}
.foot a.st-akcja--bez-ikony{grid-template-columns:1fr}
.foot a.st-akcja:hover{transform:translateY(-.125rem);box-shadow:0 .5rem 1.5rem rgba(0,0,0,.3)}
.foot .st-akcja__i{grid-row:span 2;display:inline-flex;align-self:center}
.foot .st-akcja__i img{width:1.625rem;height:1.625rem;object-fit:contain;display:block}
.foot .st-akcja__t{font-weight:800;font-size:.9375rem;line-height:1.25;
  overflow-wrap:anywhere;align-self:end;display:block}
.foot .st-akcja__s{font-size:.8125rem;font-weight:700;opacity:.72;align-self:start;display:block}
.foot a.st-akcja:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ── Logo, opis, kolumny (linie 477–483, 490–493, 605–612, 618–619, 678–684) ── */
.st-a__g{display:grid;gap:1.75rem 1.5rem;max-width:110rem;margin-left:auto;margin-right:auto}
@media(min-width:44rem){.st-a__g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:68rem){
  .st-a__g[data-kolumn="1"]{grid-template-columns:1.4fr minmax(0,1fr)}
  .st-a__g[data-kolumn="2"]{grid-template-columns:1.4fr repeat(2,minmax(0,1fr))}
  .st-a__g[data-kolumn="3"]{grid-template-columns:1.4fr repeat(3,minmax(0,1fr))}
  .st-a__g[data-kolumn="4"]{grid-template-columns:1.4fr repeat(4,minmax(0,1fr))}}
.st-logo{height:2.375rem;width:auto;max-width:100%;display:block;filter:brightness(0) invert(1)}
.st-a__opis{font-size:.875rem;line-height:1.65;color:rgba(255,255,255,.72);
  margin:1rem 0 1.125rem;max-width:34ch}
.st-a__opis p{margin:0}
.st-a__opis p + p{margin-top:.5rem}
.foot .st-kol__h{font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cyan,#00CBAA);margin:0 0 1.5rem;padding-bottom:.6875rem;
  border-bottom:1px solid rgba(255,255,255,.16);
  /* dwuwierszowy tytuł („Jednolite magisterskie”) mieści się bez
     przesuwania startu sąsiednich list */
  min-height:3.45em;display:flex;align-items:flex-end}
/* Reguła `@media(max-width:40rem){.st-kol__h{min-height:0}}` (linia 684)
   przegrywa w źródle swoistością z `.foot .st-kol__h` — wysokość zostaje
   także na telefonie, więc jej tu nie ma. */
/* zawartość kolumny z panelu: listy jak `.st-lista`, akapity i adres jak `.st-kontakt` */
.st-kol__tresc ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.st-kol__tresc p,.st-kol__tresc address{font-style:normal;font-size:.875rem;line-height:1.45;
  color:rgba(255,255,255,.82);margin:0 0 .4375rem}
.foot .st-kol__tresc a{font-size:.875rem;line-height:1.45;color:rgba(255,255,255,.82);padding:.125rem 0}
.foot .st-kol__tresc li a{display:inline-block}
/* adres jak `.st-kontakt address` źródła (linia 496): wiersze z odstępem.
   `<address>` redakcja wybiera z listy formatów edytora („Address”), kolejne
   wiersze przez Shift+Enter — `<br>` między linkami-blokami dałby pustą
   linię, więc go chowamy; tekst bez linku dalej łamie się na `<br>`. */
.st-kol__tresc address{display:grid;gap:.4375rem;margin:0}
.st-kol__tresc address a+br{display:none}
/* wiersz adresu: `.foot a` źródła (linia 130) — blok z 5 px nad i pod,
   wysokość linii z resetu (normal) */
.foot .st-kol__tresc address a{display:block;padding:5px 0;line-height:normal}
.foot .st-kol__tresc a:hover{color:#fff}

/* ── Symbole, filie, społecznościowe (linie 546–575, 686–687) ── */
.st-dol{display:grid;gap:1.125rem 1.75rem;align-items:center;padding:1.25rem 0;
  border-top:1px solid rgba(255,255,255,.12);margin-top:2.75rem}
@media(max-width:40rem){.st-dol{margin-top:2rem}}
@media(min-width:56rem){.st-dol{grid-template-columns:auto minmax(0,1fr) auto}}
.st-symbole{display:flex;align-items:center;gap:1.125rem;flex-wrap:wrap}
.st-symbole img{height:2.75rem;width:auto;display:block}
.st-symbole img.st-symbole__bip{height:1.625rem}
.foot .st-symbole a{padding:0}
.st-a__tresc .st-symbole{margin-top:1rem}   /* linia 610 */
.st-symbole a:focus-visible{outline:3px solid var(--cyan,#00CBAA);outline-offset:4px}   /* linia 557 */
.st-dol__et{display:block;font-size:.6875rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.25rem}
.st-dol__f{font-size:.8125rem;color:rgba(255,255,255,.78);line-height:1.5}
.st-dol__f p{margin:0}
/* bez własnego stopnia — w źródle obowiązuje `.foot a{font-size:.8438rem}` (linia 130) */
.foot .st-dol__f a{display:inline-block;padding:.25rem 0;
  color:rgba(255,255,255,.78);text-decoration:underline;text-underline-offset:.15em}
.foot .st-dol__f a:hover{color:#fff}
.st-dol__soc,.st-dol__ikony{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
/* `.foot [class$="__soc"]{gap:.75rem}` (linia 563) wygrywa w źródle z `.st-dol__soc{gap:.875rem}` */
.st-dol__soc{justify-self:end;grid-column:-2}
.st-dol__soc .st-dol__et{margin-bottom:0;white-space:nowrap}
@media(max-width:56rem){.st-dol__soc{justify-self:start;grid-column:auto}}
.foot .st-dol__ikony a{width:2.625rem;height:2.625rem;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid rgba(255,255,255,.22);border-radius:.5rem;color:#fff;
  transition:all .2s;flex:0 0 auto;padding:0}
.foot .st-dol__ikony a:hover{border-color:var(--cyan,#00CBAA);color:var(--cyan,#00CBAA);
  background:rgba(0,203,170,.12)}
.foot .st-dol__ikony a:focus-visible{outline:3px solid var(--cyan,#00CBAA);outline-offset:2px}   /* linia 569 */
/* serwis bez ikony w źródle (X, Telegram…) — nazwa w kafelku */
.st-dol__soc-t{font-size:.5625rem;font-weight:800;letter-spacing:.02em}

/* ── Pasek prawny i podpis autora (linie 435–437, 576–595) ── */
.st-prawne{display:grid;gap:1rem;align-items:center;
  padding:1.375rem 0 .5rem;border-top:1px solid rgba(255,255,255,.12)}
@media(min-width:60rem){.st-prawne{grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,auto);
    gap:1.25rem 2rem}}
.st-prawne>*{min-width:0}
.st-copy{font-size:.8125rem;color:rgba(255,255,255,.55);margin:0}
.st-prawne__l{display:flex;gap:1.125rem;flex-wrap:wrap}
.foot .st-prawne__l a{display:inline-flex;align-items:center;justify-content:center;
  min-height:24px;min-width:24px;padding:4px 2px;font-size:.8125rem;color:rgba(255,255,255,.72)}
.foot .st-prawne__l a:hover{color:#fff}
.foot a.st-wykonawca{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.5rem;
  padding:0;opacity:.85;transition:opacity .2s;color:#fff;font-size:.8125rem;font-weight:700}
.foot a.st-wykonawca:hover{opacity:1}
.st-wykonawca__e{font-size:.6875rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.5);white-space:nowrap}
.foot a.st-wykonawca:focus-visible{outline:3px solid var(--cyan,#00CBAA);outline-offset:4px;opacity:1}

/* ══ WSBINOZ — ELEMENTY PŁYWAJĄCE (09.10.2026) ═══════════════════════════
   Ułatwienia dostępu po lewej (`partials/widzety.html.twig`, `js/widzety.js`),
   belka quizu przy prawej krawędzi, „Napisz do nas” (banery grupy 4)
   i wszystko, co od nich zależy: zapas `.wrap` po bokach, powiększony tekst,
   tryb wysokiego kontrastu, odstęp pod stopką. Źródło: `_projekt/zasoby/styl.css`,
   numery linii przy regułach. Kolejność reguł zapasu = kolejność w źródle,
   bo kolejne progi nadpisują poprzednie.

   Zapas `.wrap` obowiązuje ZAWSZE, nie tylko przy włączonym `wcag` — jak
   w źródle: szerokość treści ma być ta sama co w projekcie, a z prawej
   miejsca potrzebuje też belka quizu. */

/* ── Zapas `.wrap` pod pływające (linie 280–286) ── */
@media(max-width:900px){.hero .wrap,.sec .wrap,.band .wrap,.nums .wrap{
    padding-right:calc(var(--gut) + 46px)}}
@media(max-width:819px){.hero .wrap,.sec .wrap,.band .wrap,.nums .wrap{
    padding-right:calc(var(--gut) + 40px)}}
/* treść hero ustępuje belce quizu (linia 459) */
@media(max-width:87.5rem){.hero .wrap{padding-right:calc(var(--gut,3rem) + 3.25rem)}}
/* Zapas na pływające ułatwienia dostępu po lewej — po OBU stronach
   (linie 663–668): sam lewy przesuwał treść w prawo. */
@media(min-width:52rem){.hero .wrap,.sec .wrap,.foot .wrap{
    padding-left:clamp(3.75rem,4.5vw,4.5rem);
    padding-right:clamp(3.75rem,4.5vw,4.5rem)}}
/* telefon: zapas na belkę quizu pod jej realną szerokość (linia 881) */
@media(max-width:820px){.hero .wrap{padding-right:calc(var(--gut,1.25rem) + 2.25rem)}}
/* kafle kierunków i pasy (linie 1092–1098) */
@media(max-width:900px){.strip .wrap,.band .wrap{
    padding-right:calc(var(--gut) + 46px)}}
@media(max-width:819px){.strip .wrap,.band .wrap{
    padding-right:calc(var(--gut) + 40px)}}
/* Widżet (46 px) dokuje przy lewej krawędzi od 52 rem, a margines strony
   dochodzi do 46 px dopiero przy ~1150 px — pozostałe kontenery dostają
   z lewej miejsce na niego (linia 1426). */
@media(min-width:52rem) and (max-width:1150px){.wrap{padding-left:max(var(--gut),3.25rem)}}

/* ── UŁATWIENIA DOSTĘPU: powiększony tekst (linie 295–329) ──
   Skalowanie zmienia rozmiar bazowy, więc rośnie wszystko w rem/em.
   `html{font-size:16px}` z początku arkusza ma niższą siłę. */
html[data-tekst="1"]{font-size:112.5%}
html[data-tekst="2"]{font-size:125%}
/* Powiększony tekst nie mieści się w pasku nawigacji — pasek najpierw
   ściska odstępy, potem oddaje menu szufladzie. */
html[data-tekst="1"] .nav__link{padding-left:9px;padding-right:9px}
html[data-tekst="1"] .hdr__cta{padding:9px 14px}
html[data-tekst="2"] .nav{display:none!important}
html[data-tekst="2"] .burger{display:inline-flex!important}
html[data-tekst="2"] .hdr__cta{display:none}
@media(max-width:1400px){html[data-tekst="1"] .nav{display:none!important}
html[data-tekst="1"] .burger{display:inline-flex!important}}
/* Szuflada na szerokim ekranie ma `display:none` — bez tego menu znikałoby
   z powiększonego tekstu całkowicie. */
html[data-tekst="2"] .dr{display:block!important}
@media(max-width:1400px){html[data-tekst="1"] .dr{display:block!important}}
/* przy powiększonym tekście szuflada to panel przy prawej krawędzi — nie
   wchodzi pod pasek ułatwień po lewej */
@media(min-width:52rem){html[data-tekst] .dr{left:auto;right:0;width:min(30rem,100vw)}}
/* Zapas przy przewijaniu do elementu z fokusem: przyklejony nagłówek u góry,
   na telefonie pasek ułatwień na dole (WCAG 2.4.11). */
html{scroll-padding-top:6rem;scroll-padding-bottom:1.5rem}
@media(max-width:52rem){html{scroll-padding-top:5.5rem;scroll-padding-bottom:4rem}}

/* ── TRYB WYSOKIEGO KONTRASTU (linie 330–368, 460–464) ──
   Czarne tło zakłada dokument, wszystko wewnątrz jest przezroczyste i żółte,
   wyjątki są dopisane świadomie. Działa też na blokach i elementach Clean
   (`.pp-*`, `.cl-*`) — reguła jest uniwersalna. */
html[data-kontrast="1"]{background:#000!important}
html[data-kontrast="1"] body{background:#000!important}
html[data-kontrast="1"] *:not(svg):not(path):not(circle):not(g){
  background-color:transparent!important;
  background-image:none!important;
  color:#FFE500!important;
  border-color:#FFE500!important;
  box-shadow:none!important;
  text-shadow:none!important;
  backdrop-filter:none!important}
/* przyciski i wezwania do działania odwrócone, żeby odróżniały się od treści */
html[data-kontrast="1"] .btn,html[data-kontrast="1"] .quiz-link,html[data-kontrast="1"] .skip:focus,html[data-kontrast="1"] .wdg__b[aria-pressed="true"]{
  background-color:#FFE500!important;color:#000!important;border:2px solid #FFE500!important}
html[data-kontrast="1"] .btn *,html[data-kontrast="1"] .quiz-link *,html[data-kontrast="1"] .skip:focus *,html[data-kontrast="1"] .wdg__b[aria-pressed="true"] *{color:#000!important}
/* zdjęcia zostają jako tło informacyjne, ale przygaszone i bez barw */
html[data-kontrast="1"] img{opacity:.45;filter:grayscale(1) contrast(1.15)}
html[data-kontrast="1"] .megapromo::after{display:none!important}
/* obramowania rozdzielają bloki, skoro tła są jednolicie czarne */
html[data-kontrast="1"] .sec,html[data-kontrast="1"] .hdr,html[data-kontrast="1"] .tb,html[data-kontrast="1"] .foot{border-bottom:1px solid #FFE500!important}
html[data-kontrast="1"] :focus-visible{outline:3px solid #FFE500!important;outline-offset:2px}
/* panel szuflady dostaje fokus programowo — pierścień należy się pozycjom */
.dr:focus,.dr:focus-visible,html[data-kontrast="1"] .dr:focus-visible{outline:none!important}
/* pływające: czarna płytka i żółta ramka */
html[data-kontrast="1"] .wdg,html[data-kontrast="1"] .wdg__b,html[data-kontrast="1"] .wdg-ciastka__panel,html[data-kontrast="1"] .wdg-ciastka__b{
  background-color:#000!important;color:#FFE500!important;
  border:2px solid #FFE500!important}
html[data-kontrast="1"] .wdg *{color:#FFE500!important}
html[data-kontrast="1"] .wdg-ciastka__b--tak{
  background-color:#FFE500!important;color:#000!important}
html[data-kontrast="1"] .wdg-ciastka__b--tak *{color:#000!important}
/* Suwaki kategorii (dodatek — w źródle ich nie ma): tor z żółtą ramką,
   włączony — żółty z czarną gałką. Inaczej po wyzerowaniu teł zostaje sama
   gałka i stanu nie widać. */
html[data-kontrast="1"] .wdg-ciastka__suwak{background-color:#000!important;border:2px solid #FFE500!important}
html[data-kontrast="1"] .wdg-ciastka__suwak::after{background-color:#FFE500!important;top:.0625rem;left:.0625rem}
html[data-kontrast="1"] .wdg-ciastka__przel input:checked+.wdg-ciastka__suwak{background-color:#FFE500!important}
html[data-kontrast="1"] .wdg-ciastka__przel input:checked+.wdg-ciastka__suwak::after{background-color:#000!important}
html[data-kontrast="1"] .wdg-ciastka__kat,html[data-kontrast="1"] .wdg-ciastka__skrypt{border-color:#FFE500!important}
/* przyklejony nagłówek, szuflada i megamenu zostają nieprzezroczyste —
   inaczej treść przewija się pod nimi i jest czytelna przez wierzch */
html[data-kontrast="1"] .hdr,html[data-kontrast="1"] .tb,html[data-kontrast="1"] .dr,html[data-kontrast="1"] .mega,html[data-kontrast="1"] .quiz-link{background-color:#000!important}
html[data-kontrast="1"] .quiz-link{background-color:#FFE500!important}
/* Wyjątki z dalszej części źródła (linie 1045–1061, 1171–1181, 1243–1248,
   1289–1398) — tam, gdzie reguła ogólna psuła konkretny element. */
/* przycisk e-rekrutacji przy 125%: zostaje w pasku (szuflada nie ma
   jego odpowiednika); bez przebłysku i miętowej poświaty w kontraście */
html[data-tekst="2"] .hdr .hdr__cta{
  display:inline-flex!important;
  min-height:2.75rem;padding:0 .875rem;font-size:.75rem;gap:.375rem}
html[data-tekst="2"] .hdr .hdr__cta-ar{width:.875rem;height:.875rem}
html[data-kontrast="1"] .hdr__cta::after{display:none!important}
html[data-kontrast="1"] .hdr__cta:hover,html[data-kontrast="1"] .hdr__cta:focus-visible{
  background-color:#FFE500!important;color:#000!important;box-shadow:none!important}
/* w Clean reguła przycisku ma przedrostek `.hdr` (0,2,0 z `!important`)
   i przebijała ogólne `box-shadow:none` — poświata zostawała miętowa */
html[data-kontrast="1"] .hdr .hdr__cta{background-color:#FFE500!important;box-shadow:none!important}
@media(max-width:30rem){html[data-tekst="2"] .hdr__in{gap:8px;padding-left:14px;padding-right:14px}
html[data-tekst="2"] .logo{gap:6px}
html[data-tekst="2"] .logo__20{display:none}
html[data-tekst="2"] .logo__m{height:30px}
html[data-tekst="2"] .hdr__cta{padding:8px 10px;font-size:13px;letter-spacing:0}
html[data-tekst="2"] .hdr__cta-ar{width:12px;height:12px}}
/* film hero bez barw i przygaszony, nad nim czarna apla — żółć ma 11:1 */
html[data-kontrast="1"] .hero__wideo{
  opacity:.45!important;filter:grayscale(1) contrast(1.1)!important}
html[data-kontrast="1"] .hero__scrim{
  background-image:none!important;background-color:rgba(0,0,0,.6)!important}
/* Czołówka podstron tak samo jak hero głównej. Reguła ogólna wyżej zdejmuje
   gradient `.khero__s`, więc szare zdjęcie (45%) leżało wprost pod żółtym
   tekstem — na jasnym zdjęciu ok. 3,8:1, poniżej AA. Czarna apla 60% daje
   co najmniej ok. 10:1. Źródło ma ten sam błąd — poprawka świadoma
   (decyzja właściciela, 12.10.2026). */
html[data-kontrast="1"] .khero__s{
  background-image:none!important;background-color:rgba(0,0,0,.6)!important}
html[data-kontrast="1"] .khero__f video{
  opacity:.45!important;filter:grayscale(1) contrast(1.1)!important}
/* Znaki uczelni białe zamiast przygaszonych. Źródło łapie je też po nazwie
   pliku; w CMS logo to plik z ustawień, więc dochodzi klasa logo stopki
   (`.st-logo`) i ikony kafli „Zacznij studia” (`.st-akcja__i img`) —
   w źródle to wbudowane SVG malowane `currentColor`, tu pliki z folderu 5. */
html[data-kontrast="1"] .logo__m,html[data-kontrast="1"] .logo__20,html[data-kontrast="1"] .hero__znak,html[data-kontrast="1"] .st-logo,html[data-kontrast="1"] .st-akcja__i img,html[data-kontrast="1"] img[src*="logo-wsbinoz"],html[data-kontrast="1"] img[src*="symbol-20-lat"],html[data-kontrast="1"] img[src*="ewitryna"]{
  opacity:1!important;filter:brightness(0) invert(1)!important}
/* pseudoelementy (punktory, szewrony, kreska nad stopką) — reguła ogólna
   ich nie dotyczy */
html[data-kontrast="1"] .strip__ul li::before,html[data-kontrast="1"] .foot::before{
  background:#FFE500!important;background-image:none!important}
html[data-kontrast="1"] .dr__grp summary::after,html[data-kontrast="1"] .faq summary::after{
  border-color:#FFE500!important}
html[data-kontrast="1"] .kn .ik{color:#FFE500!important;stroke:#FFE500!important}
/* duotone kart kierunków wyłączony; najechanie: jaśniejsze zdjęcie i żółty przycisk */
html[data-kontrast="1"] .duo::before,html[data-kontrast="1"] .duo::after{display:none!important}
html[data-kontrast="1"] .strip:hover .duo img,html[data-kontrast="1"] .strip:focus-within .duo img{opacity:.8!important}
html[data-kontrast="1"] .strip:hover .strip__a,html[data-kontrast="1"] .strip:focus-within .strip__a{
  background-color:#FFE500!important;color:#000!important}
html[data-kontrast="1"] .strip:hover .strip__a *,html[data-kontrast="1"] .strip:focus-within .strip__a *{color:#000!important}
/* logotypy partnerów: biała płyta pod taśmą i skala szarości (prawo do
   znaku ma jego właściciel — nie przemalowujemy) */
html[data-kontrast="1"] .st-partnerzy__okno{
  background:#fff!important;border-radius:.5rem;padding:.625rem .875rem}
html[data-kontrast="1"] .st-partnerzy__tasma img,html[data-kontrast="1"] .st-partnerzy img{
  opacity:1!important;filter:grayscale(1) contrast(1.05)!important}
/* wybrana zakładka hero — odwrócenie tła i tekstu (WCAG 1.4.1) */
html[data-kontrast="1"] .hero__tabs,html[data-kontrast="1"] .hero__tab{
  border-bottom-color:rgba(255,229,0,.28)!important}
html[data-kontrast="1"] .hero__tab{transition:none!important}
html[data-kontrast="1"] .hero__tab[aria-selected="true"]{
  background-color:#FFE500!important;color:#000!important;
  border-bottom-color:#FFE500!important}
/* godło, BIP i pieczęć — znaki, nie zdjęcia: bez przygaszenia */
html[data-kontrast="1"] .st-symbole img{
  opacity:1!important;filter:grayscale(1) contrast(1.1)!important}
/* długie słowa nagłówka hero przy powiększonym tekście (WCAG 1.4.4;
   samo `overflow-wrap` — w sekcji hero) */
html[data-tekst="1"] .hero__h,html[data-tekst="2"] .hero__h{hyphens:auto;-webkit-hyphens:auto}

/* Elementy pływające stoją poza sekcjami — wysokość linii z resetu źródła
   (`body` bez `line-height`, czyli normal), nie 1,65 z `body` Clean. */
.quiz-link, .wdg, .wdg-ciastka { line-height: normal; }

/* ── BELKA QUIZU (linie 261–279) ──
   Pionowa belka przy prawej krawędzi, obrócona o 270°. Odstęp `.wrap` pod
   nią — wyżej („Zapas `.wrap`”); w trybie kontrastu — reguły 346–348
   i 463–464 w sekcji kontrastu (mają `!important`, więc wygrywają z 279). */
.quiz-link{display:inline-flex;align-items:center;justify-content:center;
  position:fixed;right:0;top:50%;transform-origin:100% 0;
  transform:rotate(270deg) translateY(-100%) translateX(50%);
  background:var(--magenta,#E5007D);color:#fff;z-index:90;
  padding:12px 20px 15px;border-radius:4px}
.quiz-link:hover,.quiz-link:focus,.quiz-link:active{
  background:var(--magenta-dark,#C20069);color:#fff}
/* Fokus belki (WCAG 2.4.7/1.4.11, 21.10.2026): źródło ma białą obwódkę, niewidoczną na
   jasnym tle strony. Podwójny pierścień — biały przy belce i granatowy na zewnątrz —
   widać i na bieli, i na ciemnych sekcjach. */
.quiz-link:focus-visible{outline:3px solid var(--navy,#1A1A2E);outline-offset:3px;box-shadow:0 0 0 3px #fff}
.quiz-link span{font-weight:700;line-height:1;margin:0}
.quiz-link span:first-child{text-transform:uppercase;margin-right:20px;font-size:2.375rem}
.quiz-link span:last-child{font-size:1.125rem}
@media(max-width:1279px){.quiz-link{padding:8px 15px 10px}
.quiz-link span:first-child{font-size:1.75rem;margin-right:15px}
.quiz-link span:last-child{font-size:1rem}}
@media(max-width:819px){.quiz-link{padding:5px 12px 7px}
.quiz-link span:first-child{font-size:1.375rem;margin-right:10px}
.quiz-link span:last-child{font-size:0.875rem}}
/* w trybie wysokiego kontrastu obecny serwis daje żółć na czerni — zachowujemy */
html[data-kontrast="1"] .quiz-link{background:#ff0;color:#000;border:2px solid #000}
/* przy otwartej szufladzie belka quizu tylko przeszkadza (linia 446) */
html:has(.dr.open) .quiz-link{display:none}
/* Belka przykrywała ostatnią kolumnę megamenu — na czas przeglądania menu
   ustępuje (linie 767–771). Źródło chowa ją też przy `:focus-within`, czyli przy
   samym przejściu klawiaturą po pozycjach menu, choć panel się wtedy nie otwiera —
   belka znikała bez powodu (21.10.2026). Chowamy ją tylko przy otwartym panelu:
   najechanie albo `.open` (Enter/klik, `menu.js`). */
html:has(.nav__item:hover) .quiz-link,html:has(.nav__item.open) .quiz-link{
  opacity:0;pointer-events:none;transition:opacity .18s}
/* Rozwinięta lista nawigacji kierunku (`.kn`, podstrony kierunków) —
   ustępuje tak samo (linie 1818–1821). W CMS tej listy jeszcze nie ma;
   reguła czeka na szablon podstrony kierunku. */
html:has(.kn.jest-otwarte) .quiz-link{
  opacity:0;pointer-events:none;transition:opacity .18s}
/* Reset odnośnika ze źródła (linia 22: bez podkreślenia, kolor
   dziedziczony) — Clean nie ma globalnego, więc tylko w pływających,
   jak `:where(.rk, .foot) a` w stopce. */
:where(.quiz-link, a.wdg){text-decoration:none}

/* ── ELEMENTY PŁYWAJĄCE (linie 893–912, 933–949) ── */
.wdg{position:fixed;z-index:88;display:inline-flex;align-items:center;
  justify-content:center;transition:transform .2s,background .2s,box-shadow .2s}
.wdg:focus-visible{outline:3px solid var(--magenta,#E5007D);outline-offset:3px}
/* ułatwienia dostępu: lewa krawędź na dużym ekranie */
.wdg--dostep{left:0;top:50%;transform:translateY(-50%);flex-direction:column;gap:1px;
  border-radius:0 .5rem .5rem 0;overflow:hidden;box-shadow:0 .25rem 1.25rem rgba(0,0,0,.22)}
.wdg__b{width:2.875rem;height:2.875rem;display:inline-flex;align-items:center;
  justify-content:center;background:var(--navy,#1A1A2E);color:#fff;border:0;
  font-family:var(--f);font-size:.8125rem;font-weight:800;line-height:1;padding:0;
  cursor:pointer;transition:background .18s}
.wdg__b svg{display:block}
.wdg__b:hover{background:var(--magenta,#E5007D)}
.wdg__b[aria-pressed="true"]{background:var(--magenta,#E5007D)}
.wdg__b:focus-visible{outline:3px solid var(--cyan,#00CBAA);outline-offset:-3px}
/* „Napisz do nas”: prawy dolny róg (linie 906–912). Kolejne banery grupy 4
   stają nad pierwszym — `--wdg-nr` (0, 1, 2…) daje szablon, krok =
   wysokość widżetu (3,375 rem) + 0,5 rem; pierwszy stoi jak w źródle. */
.wdg--kontakt{right:1.5rem;bottom:calc(2.125rem + var(--wdg-nr,0) * 3.875rem);gap:.75rem;padding:.5rem .5rem .5rem 1.25rem;
  border-radius:2rem;background:var(--cyan,#00CBAA);color:var(--navy,#1A1A2E);
  font-weight:700;font-size:.9375rem;box-shadow:0 .375rem 1.5rem rgba(0,0,0,.28)}
.wdg--kontakt:hover{transform:translateY(-.125rem);box-shadow:0 .5rem 1.75rem rgba(0,0,0,.34)}
.wdg__i{width:2.375rem;height:2.375rem;border-radius:50%;background:var(--navy,#1A1A2E);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
/* ciasteczka: lewy dolny róg (linie 913–931; `_cookies.html.twig`).
   Reset ze źródła (linie 19, 22–23, 25) tylko w panelu — Clean go nie ma. */
:where(.wdg-ciastka) :is(h2,p,ul){margin:0}
:where(.wdg-ciastka) button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;padding:0}
.wdg-ciastka [hidden]{display:none!important}
.wdg--ciastka{left:1.5rem;bottom:2.125rem;width:3.375rem;height:3.375rem;border-radius:50%;
  background:var(--cyan,#00CBAA);color:var(--navy,#1A1A2E);border:0;
  box-shadow:0 .375rem 1.5rem rgba(0,0,0,.28)}
/* Ikona ciasteczka (WCAG 1.4.11, decyzja właściciela 21.10.2026): źródło ma turkus
   #00CBAA na białym kółku — kontrast 2,1:1 (wymagane 3:1 dla elementu sterującego,
   niezależnie od rozmiaru). Odwrócone: turkusowe kółko marki, granatowe ciastko
   z turkusowymi kropkami — 8,2:1, widoczne na bieli, „papierze” i granatowych sekcjach
   (granatowe kółko znikało na pasie rekrutacji i w stopce). Kółko 54 px — wysokość
   przycisku „Napisz do nas” po drugiej stronie (źródło 52); na telefonie oba 52 px. */
.wdg--ciastka svg circle{fill:var(--cyan,#00CBAA)}
html[data-kontrast="1"] .wdg--ciastka svg circle{fill:#000}
.wdg--ciastka:hover{transform:translateY(-.125rem)}
.wdg--ciastka svg{display:block;max-width:100%;width:1.5rem;height:1.5rem}
/* `z-index` 89 jak w źródle (linia 918): panel — w obu widokach — leży NAD
   paskiem ułatwień dostępu (88) i może go częściowo przykryć (decyzja
   właściciela z 09.10.2026); belka quizu (90) zostaje nad panelem. */
.wdg-ciastka__panel{position:fixed;left:1.5rem;bottom:6.5rem;z-index:89;width:min(22rem,calc(100vw - 2.25rem));
  background:#fff;color:#1F1F2B;border-radius:.75rem;padding:1.25rem;
  box-shadow:0 .75rem 2.5rem rgba(0,0,0,.32);display:none;
  /* Dodatek: widok „Ustawienia” (kategorie) bywa wyższy od okna — przewija
     się panel, przyciski pod nim zostają osiągalne, a góra nie wchodzi pod
     nagłówek z paskiem górnym (9 rem). */
  max-height:calc(100vh - 15.5rem);max-height:max(12rem,calc(100dvh - 15.5rem));overflow-y:auto;overscroll-behavior:contain;
  line-height:normal}
.wdg-ciastka.jest-otwarte .wdg-ciastka__panel{display:block}
/* Panel dostaje fokus programowo (otwarcie z przycisku) — pierścień należy
   się kontrolkom w środku, nie pudełku, jak przy szufladzie (linia 358). */
.wdg-ciastka__panel:focus,html[data-kontrast="1"] .wdg-ciastka__panel:focus{outline:none!important}
.wdg-ciastka__glowa{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
/* Margines 0, nie .5rem z linii 922: w źródle wygrywa `h2[class]{margin:0}`
   (większa specyficzność) — przeniesiony wygląd, nie sama reguła. */
.wdg-ciastka__h{font-size:1rem;font-weight:800;margin:0;line-height:1.15;letter-spacing:-.02em}
.wdg-ciastka__d{font-size:.8125rem;line-height:1.6;margin:0 0 1rem;color:#4A4A5A}
/* Link do polityki stoi w opisie z panelu — wygląd linku `.wdg-ciastka__l`
   ze źródła (linie 931–932). */
.wdg-ciastka__d a{color:#5C5C6E;text-decoration:underline}
/* Treść z panelu bywa w kilku akapitach (opis, potem link do polityki) —
   bez domyślnych marginesów `p`, odstęp jak `.wdg-ciastka__l` (linia 931). */
.wdg-ciastka__d p{margin:0}
.wdg-ciastka__d p+p{margin-top:.5rem}
.wdg-ciastka__akcje{display:grid;gap:.5rem}
.wdg-ciastka__b{padding:.6875rem 1rem;border-radius:.375rem;font-weight:700;
  font-size:.8125rem;border:1px solid #D8D8E0;background:#fff;color:#1F1F2B}
.wdg-ciastka__b:hover{border-color:var(--navy,#1A1A2E)}
.wdg-ciastka__b--tak{background:var(--magenta,#E5007D);border-color:var(--magenta,#E5007D);
  color:#fff}
.wdg-ciastka__b--tak:hover{background:var(--magenta-dark,#C20069)}
/* Link pod przyciskami (linie 931–932) — tu „Ustawienia” i „Wróć”. */
.wdg-ciastka__l{display:inline-block;margin-top:.75rem;font-size:.75rem;
  color:#5C5C6E;text-decoration:underline}
.wdg-ciastka__x{flex:none;width:2rem;height:2rem;margin:-.375rem -.375rem 0 0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:#5C5C6E}
.wdg-ciastka__x:hover{color:#1F1F2B;background:#F2F2F5}
/* Widok „Ustawienia”: kategorie z panelu SMART (grupy skryptów) w skali
   opisu ze źródła — 13 px, linie rozdzielające jak obramowanie przycisków. */
.wdg-ciastka__kategorie{margin:.5rem 0 1rem;font-size:.8125rem;line-height:1.5;color:#4A4A5A}
.wdg-ciastka__kat{padding:.75rem 0;border-bottom:1px solid #D8D8E0}
.wdg-ciastka__kat:first-child{padding-top:0}
.wdg-ciastka__kat-glowa{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.wdg-ciastka__kat-nazwa{font-weight:700;color:#1F1F2B}
.wdg-ciastka__kat-opis{margin-top:.25rem}
.wdg-ciastka__kat-opis p{margin:0}
.wdg-ciastka__przel{position:relative;flex:none;display:inline-flex;cursor:pointer}
.wdg-ciastka__przel:has(input:disabled){cursor:default}
.wdg-ciastka__przel input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.wdg-ciastka__suwak{position:relative;width:2.5rem;height:1.375rem;border-radius:1rem;
  background:var(--line-pole);transition:background .15s}
.wdg-ciastka__suwak::after{content:"";position:absolute;top:.1875rem;left:.1875rem;width:1rem;height:1rem;
  border-radius:50%;background:#fff;transition:transform .15s}
.wdg-ciastka__przel input:checked+.wdg-ciastka__suwak{background:var(--magenta,#E5007D)}
.wdg-ciastka__przel input:checked+.wdg-ciastka__suwak::after{transform:translateX(1.125rem)}
.wdg-ciastka__przel input:disabled+.wdg-ciastka__suwak{opacity:.55}
.wdg-ciastka__przel input:focus-visible+.wdg-ciastka__suwak{outline:3px solid var(--magenta,#E5007D);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.wdg-ciastka__suwak,.wdg-ciastka__suwak::after{transition:none}}
.wdg-ciastka__rozwin{margin-top:.375rem}
.wdg-ciastka__rozwin>summary{cursor:pointer;display:inline-flex;align-items:center;gap:.375rem;
  font-size:.75rem;color:#5C5C6E;text-decoration:underline;list-style:none}
.wdg-ciastka__rozwin>summary::-webkit-details-marker{display:none}
.wdg-ciastka__rozwin>summary::before{content:"▸";font-size:.6875rem;text-decoration:none}
.wdg-ciastka__rozwin[open]>summary::before{content:"▾"}
.wdg-ciastka__rozwin-tresc{margin-top:.5rem}
.wdg-ciastka__skrypt{margin-top:.5rem;padding:.5rem .625rem;border:1px solid #D8D8E0;border-radius:.375rem}
.wdg-ciastka__google{margin-top:.5rem}
.wdg-ciastka__google ul{margin:.25rem 0 0;padding-left:1.125rem}
/* „Uniwersalna czcionka bezszeryfowa” (`cookies_sans_serif_font`) */
.wdg-ciastka--systemowa,.wdg-ciastka--systemowa button{font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif!important}
/* pod stopką miejsce na pływające w rogach (linie 933–934) */
.foot{padding-bottom:7.5rem}
@media(max-width:52rem){.foot{padding-bottom:10rem}}
/* telefon: ułatwienia dostępu jako pasek na dole, nad pozostałymi */
@media(max-width:52rem){.wdg--dostep{left:0;right:0;top:auto;bottom:0;transform:none;flex-direction:row;
    justify-content:center;border-radius:0;gap:0;
    box-shadow:0 -.25rem 1.25rem rgba(0,0,0,.24)}
.wdg__b{flex:1 1 auto;max-width:5rem;height:3rem}
/* Na telefonie napis ustępuje: w środku rzędu staje przełącznik wersji,
     a rozwinięty przycisk zabierał mu połowę szerokości ekranu (linia 942;
     kolejne banery — krok 3,25 + 0,5 rem). */
.wdg--kontakt{bottom:calc(4rem + var(--wdg-nr,0) * 3.75rem);right:.75rem;padding:.4375rem;gap:0}
/* `display:none` zamiast chowania przez `clip-path` — nazwę przycisku niesie
     `aria-label`, więc czytnik nic nie traci, a układ nie ma ucinanego
     tekstu (linia 945). */
.wdg__t{display:none}
/* ciasteczka nad paskiem dostępności (linie 946–947) */
.wdg--ciastka{bottom:4rem;left:.75rem;width:3.25rem;height:3.25rem}
.wdg-ciastka__panel{bottom:7.75rem;left:.75rem;max-height:calc(100vh - 16.25rem);max-height:max(12rem,calc(100dvh - 16.25rem))}
/* belka quizu ustępuje, żeby nie nachodziła na pasek dostępności (linia 949) */
.quiz-link{top:38%}
/* miejsce na pasek, żeby nie zasłaniał końca strony — tylko gdy pasek jest
   (w źródle zawsze; tu widżet zależy od ustawienia `wcag`) */
body:has(.wdg--dostep){padding-bottom:3rem}}


/* ══ WSBINOZ — KARTY (szablon bloku `wsbinoz-karty`) ═════════════════════
   Sekcje „Zanim się zapiszesz” i „Zapisy” ze strony studiów podyplomowych
   (`_projekt/oferta-ksztalcenia/studia-podyplomowe/index.php`). Karta
   `.news__c` i jej części są wspólne z aktualnościami (sekcja wyżej);
   tu dochodzą reguły ze źródła, których tamte nie miały. */
/* źródło 1754–1761: stała liczba kolumn karty (wyżej `--cl-kolumny`) */
@media(min-width:1000px){.news--3{grid-template-columns:repeat(3,1fr)}}
/* źródło 2645–2650: cztery w rzędzie dopiero od 1000 px (niżej trzy, jak `.news`),
   dwie w rzędzie bez progu ponad 700 px (wariant listy 1007 `clean_karty`) */
@media(min-width:1000px){.news--4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:700px){.news--2{grid-template-columns:repeat(2,1fr)}}
/* źródło 1825–1827: odnośnik w tytule; pionowy zapas ponad próg WCAG 2.5.8 */
.karta__a{color:inherit;text-decoration:none;display:inline-block;padding:.1875rem 0}
.karta__a:hover,.karta__a:focus-visible{color:var(--magenta,#E5007D)}
/* źródło 1890–1898: cała karta klika się odnośnikiem z tytułu */
.news__c--link{position:relative;cursor:pointer}
.news__c--link .karta__a::after{content:"";position:absolute;inset:0;z-index:1}
.news__c--link:hover .karta__a{color:var(--magenta,#E5007D)}
.news__c--link:hover .news__a{transform:translateX(.1875rem)}
.news__c--link:focus-within{outline:3px solid var(--magenta,#E5007D);outline-offset:3px;border-radius:var(--r-md)}
.news__c--link .karta__a:focus-visible{outline:none}

/* ══ WSBINOZ — STRONICOWANIE LIST I ZNAK W KARCIE (20.10.2026) ═══════════
   Markup: `blocks/block_10_contents.html.twig` (`nav.pager`),
   `templates/clean_aktualnosci.html.twig` (`news__i--znak`). */
/* źródło 2225–2236: cele dotykowe 44×44 px (WCAG 2.5.8) */
.pager{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:2.5rem;flex-wrap:wrap;font-family:var(--f)}
html .pager__l{display:flex;gap:.25rem;list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:center}
html .pager__l li{margin:0;padding:0}
.pager__l a,.pager__l span,.pager__p{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-width:44px;min-height:44px;padding:0 .875rem;border-radius:var(--r-sm);font-weight:700;font-size:.9375rem;line-height:1;text-decoration:none;box-sizing:border-box}
.pager__l .sr{position:absolute;min-width:0;min-height:0;padding:0}
.pager__l a,.pager__p{color:var(--ink);border:1px solid var(--line)}
.pager__l a:hover,.pager__p:hover{border-color:var(--magenta);color:var(--magenta)}
.pager__l [aria-current]{background:var(--magenta);color:#fff}
.pager a:focus-visible{outline:3px solid var(--magenta);outline-offset:2px}
/* źródło 2333–2335: znak w całości na białym tle, bez powiększenia przy najechaniu */
.news__i--znak{background:#fff}
.news__i.news__i--znak.cl-kadr{background:#fff}
.news__i--znak .im{object-fit:contain;padding:.75rem}
.news__c:hover .news__i--znak .im{transform:none}

/* ══ WSBINOZ — ARCHIWUM MIESIĘCY (20.10.2026) ═════════════════════════
   Markup: `blocks/_archiwum.html.twig` (sekcja pod listą grupy wpisów).
   Źródło `styl.css` 2237–2258: rocznik wierszem, miesiące odznakami 44 px. */
.arch{margin-top:1.5rem;display:grid;gap:0}
.arch__r{display:grid;grid-template-columns:4.5rem 1fr;gap:.75rem;align-items:start;padding:1.25rem 0;border-top:1px solid var(--line)}
.arch__r:first-child{border-top:0;padding-top:.25rem}
html .arch__y{margin:0;font-size:1.125rem;font-weight:800;line-height:44px;color:var(--muted)}
html .arch__l{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
html .arch__l li{margin:0;padding:0}
.arch__b{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 .875rem;border:1px solid var(--line);border-radius:var(--r-sm);font-weight:600;font-size:.9375rem;color:var(--ink);text-decoration:none;box-sizing:border-box}
a.arch__b:hover{border-color:var(--magenta);color:var(--magenta)}
.arch__b[aria-current]{background:var(--magenta);border-color:var(--magenta);color:#fff}
@media (max-width:560px){.arch__r{grid-template-columns:1fr;gap:.375rem}
html .arch__y{line-height:1.2}}

/* ═══ WSBINOZ — KIERUNEK ═══════════════════════════════════════════════ */
/* FAQ (blok zakładek, warianty 3–6) — `.faq` 1:1 ze `styl.css` 1741–1753;
   kontrast: `.faq summary::after` w regule 2491 (źródło 1300). Odpowiedź
   to bloki tekstu wprost po `summary`, więc `.faq p` bierze akapity. */
.faq{border-top:1px solid var(--line);margin-top:1.75rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:1.0625rem 2.5rem 1.0625rem 0;
  position:relative;font-weight:800;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.75rem;top:1.4375rem;
  width:.5rem;height:.5rem;border-right:2px solid var(--magenta);
  border-bottom:2px solid var(--magenta);transform:rotate(45deg);
  transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.5625rem}
.faq p{margin:0 0 1.25rem;color:var(--muted,#5C5C6E);line-height:1.75}

/* Szuflada sekcji strony (`nav.kn`, blok `wsbinoz-nawigacja`) — 1:1 ze
   `styl.css` 1501–1523, 1796–1821 i 1306 (kontrast). `top` przyklejenia
   idzie za wysokością nagłówka Clean (`--hh` + 1 px ramki), a nie za
   stałymi ze źródła (73 px / 5,5625 rem). */
/* Opakowanie bloku znika z układu: `nav` przykleja się do całego artykułu
   (nie tylko do własnego opakowania) i idzie od brzegu do brzegu. */
.cl-szablon[data-szablon="wsbinoz-nawigacja"]{display:contents}
.cl-szablon[data-szablon="wsbinoz-nawigacja"] > .kn{grid-column:krawedz}
/* Pasek w inwersji — na bieli ginął między jasnymi sekcjami. Ciemna
   zieleń/granat wiąże go z czołówką nad nim i z ciemnymi pasami niżej. */
.kn{position:sticky;top:calc(var(--hh) + 1px);z-index:20;
  line-height:1.5; /* wysokość paska jak w źródle (55 / 52 px): Clean ma wyższy line-height bazowy */
  background:linear-gradient(135deg,#17172B 0%,#232342 100%);
  border-bottom:0;box-shadow:0 2px 14px rgba(18,18,31,.18)}
.kn__in{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
/* od progu, w którym pozycje się mieszczą, rozkładamy je równo na
   szerokość kontenera — inaczej zostaje 300 px pustki po prawej */
@media(min-width:1000px){.kn__in{overflow:visible}
/* `.kn a` stoi niżej w arkuszu, więc przy równej swoistości wygrywa
     kolejnością — stąd `.kn .kn__in a` */
.kn .kn__in a{flex:1 1 0;justify-content:center;text-align:center}}
.kn__in::-webkit-scrollbar{display:none}
.kn a{flex:0 0 auto;display:flex;align-items:center;gap:.5rem;
  padding:1rem 1.125rem;font-size:.8125rem;font-weight:800;
  color:#fff;text-decoration:none;white-space:nowrap;
  border-bottom:3px solid transparent;transition:background-color .2s}
.kn .ik{width:1.25rem;height:1.25rem;flex:0 0 auto;
  color:var(--mint-hi,#6FFBDF)}
.kn a:hover,.kn a:focus-visible{border-bottom-color:var(--mint-hi,#6FFBDF);
  background:rgba(255,255,255,.07)}
/* ── nawigacja kierunku na telefonie ──────────────────────────────
   Pasek przewijany w bok był nieczytelny: widać było półtorej pozycji
   i nic nie mówiło, że reszta jest dalej. Poniżej 1000 px zamienia się
   w jeden przycisk „Wybierz sekcję”, który rozwija pełną listę.
   Ikony są `svg.ik` wewnątrz `.kn`, więc tryb wysokiego kontrastu
   przestawia je na żółć istniejącą już regułą `.kn .ik`. */
.kn__t{display:none}
@media(max-width:999px){.kn__t{display:flex;align-items:center;gap:.75rem;width:100%;
    padding:1rem 0;background:none;border:0;cursor:pointer;
    color:#fff;font:inherit;font-size:.8125rem;font-weight:800;
    letter-spacing:.04em;text-transform:uppercase;text-align:left}
.kn__ik--x{display:none}
.kn.jest-otwarte .kn__ik--m{display:none}
.kn.jest-otwarte .kn__ik--x{display:block}
.kn__in{display:none;flex-direction:column;overflow-x:visible;
    max-height:calc(100dvh - 10rem);overflow-y:auto;
    padding-bottom:.5rem}
.kn.jest-otwarte .kn__in{display:flex}
.kn .kn__in a{padding:.9375rem .25rem;white-space:normal;
    border-bottom:0;border-top:1px solid rgba(255,255,255,.14)}
.kn .kn__in a:hover,.kn .kn__in a:focus-visible{
    border-bottom-color:transparent;background:rgba(255,255,255,.08)}}
/* Belka quizu wisi przy prawej krawędzi i kładła się na rozwiniętej
   liście. Ustępuje tak samo, jak przy otwartym megamenu i szufladzie. */
html:has(.kn.jest-otwarte) .quiz-link{
  opacity:0;pointer-events:none;transition:opacity .18s}
html[data-kontrast="1"] .kn .ik{color:#FFE500!important;stroke:#FFE500!important}
/* Po kliknięciu pozycji sekcja nie może stanąć pod nagłówkiem i szufladą.
   `html{scroll-padding-top}` (6 rem / 5,5 rem) pokrywa sam nagłówek;
   tu dochodzi wysokość szuflady (55 / 52 px). */
html:has(.kn) [data-szerokosc][id]{scroll-margin-top:3.5rem}

/* ── Szablony treściowe kierunku: fakty, opis, chipy, klamra, atuty,
   ścieżki (`wsbinoz-fakty`, `-opis`, `-chipy`, `-klamra`, `-atuty`,
   `-sciezki`) — reguły 1:1 ze `styl.css`; numery linii w komentarzach. ── */
/* 1493–1500: pas faktów pod czołówką */
.pasfakt{background:#fff;border-bottom:1px solid var(--line)}
.fakty{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
  gap:1.25rem 2rem;margin:0;padding:1.75rem 0}
.fakty div{border-top:3px solid var(--magenta);padding-top:.625rem}
.fakty dt{font-size:.6875rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted,#5C5C6E)}
.fakty dd{margin:.25rem 0 0;font-size:1.0625rem;font-weight:800;
  color:var(--ink,#2B2B3A)}
/* 1766: wprowadzenia i akapity na stronie kierunku idą na pełną szerokość
   kontenera (decyzja Klienta). W źródle robi to `.skier` na `<main>`; Clean
   nie ma takiego rodzica, więc znacznik `sec--kier` stoi na samych sekcjach. */
.sec--kier .lead,.sec--kier .proza p{max-width:none}
/* Pogrubienie w treści kierunku: źródło bez reguły na `strong` (przeglądarka
   daje 700), a `.pp-artykul strong` (384) ustawia 600 — zawijanie wierszy
   „W skrócie” rozjeżdżało się o linię. To samo w wyglądzie „W skrócie”
   (`sec--skrot`: strona „Kadra”, instytuty, „Baza dydaktyczna”). */
.sec--kier strong,.sec--skrot strong{font-weight:700}
/* 1564–1568, 1574–1578: zdjęcie + ramka „W skrócie”. `#o-kierunku` źródła
   → `.okier` (klasa sekcji, niezależna od kotwicy bloku). */
.dwa{display:grid;gap:2.5rem;margin-top:2rem}
@media(min-width:900px){.dwa{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:3.5rem;
    align-items:start}
.dwa--rowne{grid-template-columns:1fr 1fr;gap:3rem}}
.dwa .h2{margin-top:0}
.skrot{background:var(--paper);border-left:4px solid var(--cyan);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:1.375rem 1.5rem;margin:0}
@media(min-width:900px){.okier .dwa{align-items:stretch}
.okier .skrot{display:flex;flex-direction:column;
    justify-content:center;padding:2rem 2rem 2rem 1.75rem}}
.sec--paper .skrot{background:#fff}
.skrot p{margin:0;line-height:1.75;color:var(--ink,#2B2B3A)}
/* dodatek szablonu: gdy jest tylko zdjęcie albo tylko ramka, zajmuje całą
   szerokość (źródło ma zawsze obie części) */
@media(min-width:900px){.dwa--jedno{grid-template-columns:minmax(0,1fr)}}
/* źródło 2780–2790: „W skrócie” strony „Baza dydaktyczna” (wygląd szablonu
   `wsbinoz-opis`) — wysokość wiersza wyznacza ramka, zdjęcie dopasowuje się kadrem */
@media(min-width:900px){.sec--skrot .dwa{align-items:stretch}
.sec--skrot .okier__f{aspect-ratio:auto;height:100%;min-height:17rem}
.sec--skrot .okier__f .im{height:100%;object-fit:cover}
.sec--skrot .skrot{display:flex;flex-direction:column;
    justify-content:center;padding:2rem 2rem 2rem 1.75rem}}
/* 1584–1588: zdjęcie „O kierunku”. Wymiary i `object-fit` podaje tu reguła
   `.im` źródła (183), której Clean nie ma. */
.okier__f{position:relative;margin:0;overflow:hidden;
  border-radius:var(--r-md);background:var(--paper);aspect-ratio:16/10}
.okier__f .im{width:100%;height:100%;object-fit:cover;display:block;
  max-width:none;transition:transform .6s var(--ease,cubic-bezier(.4,0,.2,1))}
.okier__f:hover .im{transform:scale(1.04)}
/* 1923–1926: zdjęcie „W skrócie” bywa odnośnikiem (okładka informatora → PDF) */
.okier__f--link a{display:block;width:100%;height:100%}
/* ramka od środka: `figure.okier__f` ma overflow:hidden, obwódka na zewnątrz
   byłaby obcięta (źródło ma ten sam błąd — tu poprawione) */
.okier__f--link a:focus-visible{outline:3px solid var(--magenta);
  outline-offset:-3px;border-radius:var(--r-md)}
/* 1592–1594: opis w jednej kolumnie na pełną szerokość */
/* 1530–1533: akapity opisu (`.proza p` źródła; Clean ma je tylko pod swoimi
   klasami) */
.proza{margin-top:0}
.proza p{font-size:1rem;line-height:1.75;color:var(--muted,#5C5C6E);
  margin:0 0 1.25rem;max-width:64ch}
.proza p:last-child{margin-bottom:0}
/* Pogrubienie w opisie: źródło nie ma reguły na `strong` (przeglądarka daje
   700), a `.pp-artykul strong` ustawia 600 — sekcja z bloku tekstu miała
   inną szerokość wiersza niż „Profil zawodowy” w źródle. */
.proza strong{font-weight:700}
/* To samo w odpowiedzi FAQ „kierunek” (`.cl-kol`, nie `.proza`): `<strong>` w źródle to 700, a `.pp-artykul strong` dawało 600 — długi wiersz
   z pogrubieniem zawijał się inaczej niż w źródle (projekt „Odkrywając granice…”, 2 wiersze zamiast 1). */
.faq--kier .cl-kol strong{font-weight:700}
/* 2115–2121: odnośnik w opisie */
.proza a{color:var(--magenta-dark);text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px;
  overflow-wrap:anywhere}
.proza a:hover{color:var(--magenta);text-decoration-thickness:2px}
.proza a:focus-visible{outline:3px solid var(--magenta);outline-offset:2px;
  border-radius:2px}
/* 2080–2085 (`.plakat`): grafika wstawiona w edytorze jako odnośnik (obraz w linku,
   np. „Plakat do pobrania” na stronach miast studiów podyplomowych) — rama, szerokość
   najwyżej 34 rem, ramka #E7E7EE (źródło: `--kreska` nie jest tam zdefiniowana, więc zawsze wychodzi zapas), odstęp 1.75 rem u góry i powiększenie 1.02 po najechaniu. Źródło
   ma `figure.plakat`; blok tekstu nie tworzy `figure`, więc zaczepem jest sam odnośnik
   z obrazem (`:has(> img)`), a lead stoi nad nim w osobnym akapicie. */
.proza a:has(> img){display:block;overflow:hidden;max-width:34rem;margin-top:1.75rem;
  border-radius:var(--r-md);border:1px solid #E7E7EE;text-decoration:none}
.proza a:has(> img) img{display:block;width:100%;height:auto;
  transition:transform .4s var(--ease,cubic-bezier(.4,0,.2,1))}
.proza a:has(> img):hover img{transform:scale(1.02)}
@media (prefers-reduced-motion: reduce) { .proza a:has(> img) img { transition: none; } }
/* 2192–2221: śródtytuły i listy z edytora (strzałki i kropki — niżej) */
.proza h3{margin:2rem 0 .75rem;font-size:1.0625rem;font-weight:800;
  line-height:1.4;color:var(--ink)}
.proza p,.proza li,.proza h3{overflow-wrap:break-word}
.proza h3:first-child{margin-top:0}
.proza ul,.proza ol{margin:0 0 1.25rem;padding-left:1.35rem;
  font-size:1rem;line-height:1.75;color:var(--muted)}
.proza li{margin-bottom:.5rem}
.proza li:last-child{margin-bottom:0}
/* Zagnieżdżona lista: ostatni punkt bez odstępu pod spodem (odstęp daje punkt nadrzędny). */
:is(.proza,.cl-blok.cl-kol) :is(ul,ol) :is(ul,ol)>li:last-child{margin-bottom:0}
.proza ol{list-style:decimal}
.proza ul{list-style:disc}
.proza ul:last-child,.proza ol:last-child{margin-bottom:0}
/* Śródtytuły niższych rzędów, cytat i tabela z edytora. Źródło ma tylko
   `.proza h3` (2196); h4–h6 i blockquote nie mają tam reguł, więc wygląd
   dopisano wzorem `.pp-cytat`, a tabela dostaje reguły bloku tekstu
   (`:is(.cl-kol, .proza …) table`, wyżej). Zdjęcie: `.cl-blok img`
   (width 100%, height auto) działa też w `.proza`. */
.proza :is(h4,h5,h6){margin:1.5rem 0 .5rem;font-size:1rem;font-weight:800;
  line-height:1.4;color:var(--ink);overflow-wrap:break-word}
.proza h5{font-size:.9375rem}
.proza h6{font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase}
.proza :is(h4,h5,h6):first-child{margin-top:0}
.proza blockquote{margin:1.5rem 0;padding:.25rem 0 .25rem 1.25rem;
  border-left:3px solid var(--magenta-dark);font-size:1.0625rem;
  line-height:1.6;color:var(--muted)}
.proza blockquote>:last-child{margin-bottom:0}
/* Listy z edytora: zwykłe wypunktowanie (bez klasy albo z obcą, np. `MsoList…`
   po wklejeniu z Worda) ma wygląd `ul.lista` źródła (2213–2219) — turkusowe
   strzałki; klasa `lista-kropki` ze stylu „Lista z kropkami” w edytorze
   zostawia kropki. Strzałki tylko na pierwszym poziomie, listy zagnieżdżone
   wracają do kropek z wcięciem. Te same reguły dla tekstu w odpowiedziach
   FAQ i zakładkach (`.cl-blok.cl-kol` — podblok tekstu nie ma `.proza`, bo ta
   zmieniałaby FAQ kierunków). Nie dotyczy `strip__ul`. */
:is(.proza,.cl-blok.cl-kol) ul:not(.lista-kropki){list-style:none;
  padding-left:0;display:flex;flex-direction:column;gap:.5rem}
:is(.proza,.cl-blok.cl-kol) ul:not(.lista-kropki)>li{position:relative;
  padding-left:1.625rem;margin-bottom:0}
:is(.proza,.cl-blok.cl-kol) ul:not(.lista-kropki)>li::before{content:"";
  position:absolute;left:0;top:.5625rem;width:12px;height:12px;
  background:var(--cyan);
  clip-path:polygon(0 0,42% 0,100% 50%,42% 100%,0 100%,58% 50%)}
:is(.proza,.cl-blok.cl-kol) ul.lista-kropki{list-style:disc;padding-left:1.35rem}
:is(.proza,.cl-blok.cl-kol) :is(ul,ol) ul:not(.lista-kropki){list-style:disc;
  display:block;padding-left:1.35rem;margin:.5rem 0 0}
:is(.proza,.cl-blok.cl-kol) :is(ul,ol) ul:not(.lista-kropki)>li{padding-left:0;
  margin-bottom:.5rem}
:is(.proza,.cl-blok.cl-kol) :is(ul,ol) ul:not(.lista-kropki)>li::before{
  content:none}
html[data-kontrast="1"] :is(.proza,.cl-blok.cl-kol) ul:not(.lista-kropki)>li::before{
  background:#FFE500!important;background-image:none!important}
/* Źródło (1592) daje `.proza--2` stały margines 2,5 rem, który ma sens tylko
   pod tytułem sekcji — w sekcji bez tytułu odsuwał tekst o 40 px niżej niż
   sąsiednie sekcje (decyzja właściciela 19.10.2026). Odstęp dostaje więc
   tylko tekst, przed którym coś stoi (nadtytuł, tytuł, lead). Tekst obok
   obrazu (`metr__z`) startuje równo z górą ramki — w źródle był 40 px niżej;
   na telefonie odstęp od obrazu daje sam `gap` siatki (1,25 rem). Wstęp
   pod górnym „Wróć do” zachowuje 60 px przez padding sekcji (reguła przy
   `.powrot__sek`). */
.proza--2{margin-top:0}
.wrap > * + .proza--2{margin-top:2.5rem}
.proza--2 p{max-width:none}
.proza--2 p:last-child{margin-bottom:0}
/* Blok tekstu w kilku kolumnach (sekcja strony): każda kolumna to osobne
   `.proza.proza--2`; wspólny odstęp od nagłówka daje siatka, nie kolumny.
   Układy kolumn z `.cl-kol--*` (panel: 2/3/4, 2:1, 1:2), poniżej 700 px
   jedna kolumna, „dodatkowy odstęp” z panelu to 60 px między kolumnami. */
.proza-kol{display:grid;gap:26px 34px;margin-top:2.5rem}
.proza-kol>.proza{margin-top:0}
.cl-blok[data-odstep="szeroki"] .proza-kol{column-gap:60px}
@media (max-width:700px){.proza-kol{grid-template-columns:1fr}}
/* 1595–1597: napis nad skrótem */
.pod{display:block;font-size:.75rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted,#5C5C6E);margin:0 0 .75rem}
.news__b .pod{margin-top:1.125rem}
/* 1603–1608, 1686–1688: przedmioty jako kafelki */
html .chipy{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;
  margin:1.25rem 0 0;padding:0}
html .chip{background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:.5rem 1rem;font-size:.875rem;font-weight:600;
  color:var(--ink,#2B2B3A)}
.sec--paper .chip{background:var(--paper)}
html .chip{transition:border-color .2s,color .2s,transform .2s}
html .chip:hover{border-color:var(--magenta);color:var(--magenta-dark,#C20069);
  transform:translateY(-.125rem)}
/* 1613–1623, 1795: pas na turkusie, treść w inwersji */
.przedm{background:var(--cyan,#00CBAA)}
.przedm .lbl{color:rgba(18,18,31,.72)}
.przedm .h2{color:var(--navy,#12121F)}
.przedm .lead{color:rgba(18,18,31,.84)}
.przedm .chip{background:var(--navy,#12121F);border-color:var(--navy,#12121F);
  color:#fff}
.przedm .chip:hover,.przedm .chip:focus-visible{
  background:var(--magenta,#E5007D);border-color:var(--magenta,#E5007D);
  color:#fff;transform:translateY(-.125rem)}
.przedm :focus-visible{outline-color:var(--navy,#1A1A2E)}
/* 1636–1648, 1692–1693, 1769–1771: atuty jako ciemny pas. Kolory nadtytułu
   i nagłówka to w źródle style wpisane w znaczniku (`color:var(--cyan)`,
   `color:#fff`); tu są regułami, bo edytor szablonu nie ma stylów inline. */
.atuty{background:linear-gradient(135deg,#17172B 0%,#232342 100%);
  color:#fff}
.atuty .lbl{color:var(--cyan)}
.atuty .h2{color:#fff}
.atuty__g{display:grid;gap:2rem 2.5rem;margin-top:2rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.atut__n{display:block;font-size:2rem;font-weight:900;line-height:1;
  color:var(--cyan,#00CBAA)}
html .atut__t{font-size:1.0625rem;font-weight:800;margin:.75rem 0 .5rem;
  line-height:1.15;letter-spacing:-.02em;color:#fff}
html .atut__d{margin:0;font-size:.9375rem;line-height:1.7;
  color:rgba(255,255,255,.78)}
.atut{transition:transform .25s}
.atut:hover{transform:translateY(-.25rem)}
html .atuty__g .atut__t{margin:.75rem 0 .875rem}
/* 1694–1712, 1773–1776: klamra */
.klam__f .im{transition:transform .6s var(--ease,cubic-bezier(.4,0,.2,1))}
.klam__in:hover .klam__f .im{transform:scale(1.04)}
.klam{background:#fff}
.klam__in{display:grid;gap:2rem;align-items:center;
  padding-top:3.5rem;padding-bottom:3.5rem}
@media(min-width:900px){.klam__in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:4rem;padding-top:5rem;padding-bottom:5rem}}
/* dodatek szablonu: bez zdjęcia tekst zajmuje całą szerokość */
@media(min-width:900px){.klam__in--bez{grid-template-columns:minmax(0,1fr)}}
.klam__f{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;
  border-radius:var(--r-md);background:#fff;margin:0}
.klam__f .im{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.klam__t{padding:0}
html .klam__n{margin:0;font-size:clamp(3rem,7vw,4.5rem);font-weight:900;
  line-height:1;color:var(--magenta);letter-spacing:-.03em}
html .klam__h{margin:.25rem 0 1rem;font-size:clamp(1.25rem,2.6vw,1.75rem);
  font-weight:900;line-height:1.15;text-transform:uppercase;letter-spacing:-.01em;
  color:var(--ink,#2B2B3A)}
html .klam__d{margin:0 0 1.5rem;font-size:1rem;line-height:1.75;
  color:var(--muted,#5C5C6E);max-width:56ch}
html .klam .klam__h{margin:.5rem 0 1.125rem}

/* ── Szablony z danymi kierunku: pracownie, wykładowcy, perspektywy,
   zasady (`wsbinoz-pracownie`, `-wykladowcy`, `-perspektywy`, `-zasady`) —
   reguły 1:1 ze `styl.css`; numery linii w komentarzach. ── */
/* 1625–1633, 1681–1685: pas pracowni. `.news__i` to `<span>`; w figurze
   trzeba go zblokować. Zdjęcie kadruje `.cl-kadr` (4:3), więc zaokrąglenie
   źródła wraca regułą z przedrostkiem (Clean zeruje je w `.news__i.cl-kadr`). */
.prac{display:grid;gap:1.25rem;margin-top:1.75rem;
  grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr))}
.prac__i{margin:0}
html .prac__i .news__i{display:block;border-radius:var(--r-md);background:#fff}
.prac__i figcaption{margin-top:.75rem;font-size:.8125rem;font-weight:700;
  color:var(--ink,#2B2B3A);line-height:1.45}
html .prac__i .news__i .im{transition:transform .5s var(--ease,cubic-bezier(.4,0,.2,1))}
html .prac__i:hover .im,html .prac__i:focus-within .im{transform:scale(1.06)}
.prac__i figcaption{transition:color .2s}
.prac__i:hover figcaption{color:var(--magenta-dark,#C20069)}
/* dodatek: karta z odnośnikiem do wpisu (źródło nie ma linków) — wygląda
   tak samo, odnośnik dziedziczy kolor i nie ma podkreślenia */
.prac__i a{display:block;color:inherit;text-decoration:none}
.prac__i figcaption a:focus-visible{outline:3px solid var(--magenta);
  outline-offset:2px;border-radius:2px}
/* 1716–1717, 1721–1722: pojedynczy odnośnik pod zdjęciami */
html .wiecej{margin:2rem 0 0}
.wiecej a{display:inline-flex;align-items:center;gap:.5rem;
  font-size:.9375rem;font-weight:800;color:var(--magenta-dark,#C20069);
  text-decoration:none;border-bottom:2px solid transparent;
  padding-bottom:.125rem;transition:border-color .2s}
.wiecej a:hover,.wiecej a:focus-visible{
  border-bottom-color:var(--magenta-dark,#C20069)}
/* 1667–1690, 1772: wykładowcy — karty z kreską u góry */
html .wyki{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
html .wyk{background:#fff;border:1px solid var(--line);
  border-top:3px solid var(--magenta);border-radius:0 0 var(--r-md) var(--r-md);
  padding:1.5rem;margin:0}
.sec--paper .wyk{background:#fff}
html .wyk__n{font-size:1rem;font-weight:800;margin:0 0 .625rem;
  color:var(--ink,#2B2B3A);line-height:1.35;letter-spacing:-.02em}
html .wyk__o{margin:0;font-size:.9375rem;line-height:1.7;
  color:var(--muted,#5C5C6E)}
html .wyk{transition:transform .2s,box-shadow .2s,border-color .2s}
html .wyk:hover{transform:translateY(-.1875rem);
  border-color:var(--magenta);box-shadow:0 .75rem 1.75rem -.75rem rgba(18,18,31,.18)}
/* 1084–1086, 1298: lista z edytora ma wygląd `strip__ul` bez klasy w treści
   (kontener `.strip-ed` daje szablon); punktor jak `.strip__ul li::before` */
html .strip-ed ul{list-style:none;margin:18px 0 0;padding:0;display:flex;
  flex-direction:column;gap:9px}
html .strip-ed li{position:relative;padding-left:26px;margin:0;
  font-size:.8438rem;line-height:1.5}
html .strip-ed li::before{content:"";position:absolute;left:0;top:6px;
  width:12px;height:12px;background:var(--cyan);
  clip-path:polygon(0 0,42% 0,100% 50%,42% 100%,0 100%,58% 50%)}
html[data-kontrast="1"] .strip-ed li::before{
  background:#FFE500!important;background-image:none!important}
/* 1653–1659: pas perspektyw — granat jak „Atuty”. Do tego treść wstępu z
   edytora (listy, śródtytuły) czytelna na ciemnym. */
.persp{position:relative;background:linear-gradient(135deg,#17172B 0%,#232342 100%);
  color:#fff}
.persp__in{position:relative;z-index:2}
.persp .h2{color:#fff}
.persp .proza p{color:rgba(255,255,255,.86)}
.persp .proza :is(ul,ol,li){color:rgba(255,255,255,.86)}
.persp .proza h3{color:#fff}
.persp .proza a{color:var(--mint-hi,#6FFBDF)}
.persp .pod{color:var(--mint-hi,#6FFBDF)}
.persp .strip-ed li{color:rgba(255,255,255,.92)}
/* 1660–1665: szerokie zdjęcie */
.wiodace{display:block;position:relative;margin-top:2rem;
  aspect-ratio:16/6;overflow:hidden;border-radius:var(--r-md);
  background:var(--paper)}
.wiodace .im{width:100%;height:100%;object-fit:cover;display:block;max-width:none;
  transition:transform .6s var(--ease,cubic-bezier(.4,0,.2,1))}
.wiodace:hover .im{transform:scale(1.03)}
/* 1732–1739: opłaty */
.oplaty{width:100%;border-collapse:collapse;font-size:.9375rem}
html .oplaty th,html .oplaty td{text-align:left;padding:.75rem .25rem;
  border-bottom:1px solid var(--line);vertical-align:top}
html .oplaty th{width:45%;font-weight:600;color:var(--muted,#5C5C6E)}
html .oplaty td{font-weight:800;color:var(--ink,#2B2B3A)}
.oplaty .stara{text-decoration:line-through;color:var(--muted,#5C5C6E);
  font-weight:400;margin-right:.5rem}
html .przypis{font-size:.8125rem;color:var(--muted,#5C5C6E);margin-top:.75rem}
/* 1779, 1783–1785: przycisk pod kolumnami, ramka dokumentów */
html .przyciski--srodek{justify-content:center;margin-top:2.5rem}
.skrot--dok{align-self:start}
.skrot--dok .strip-ed ul{margin-bottom:0}
.skrot--dok .strip-ed li:last-child{margin-bottom:0}
/* Użytkownik z włączonym ograniczeniem ruchu: bez przesunięć i zbliżeń przy
   najechaniu (atuty, kafelki, zdjęcia opisu, klamry, pracowni, szerokiego
   zdjęcia, karty wykładowców) */
@media(prefers-reduced-motion:reduce){
  html .atut,html .chip,html .wyk,.okier__f .im,.klam__f .im,.wiodace .im,
  html .prac__i .news__i .im{transition:none}
  .atut:hover,html .chip:hover,html .przedm .chip:hover,html .przedm .chip:focus-visible,
  html .wyk:hover,.okier__f:hover .im,.klam__in:hover .klam__f .im,.wiodace:hover .im,
  html .prac__i:hover .im,html .prac__i:focus-within .im{transform:none}
}

/* ══ WSBINOZ — GALERIA (blok 7, układy 11 i 12; 12.10.2026) ═════════════
   `styl.css` źródła 2038–2045 (siatka i kafel) i 2103–2108 (`gal--dokument`).
   Sekcja, nagłówek i nadtytuł to zwykłe `.sec`/`.wrap`/`.lbl`/`.h2` Clean.
   Reguły źródła `.gal__m--znak/--pas/--portret` (2267–2330) i `.znaki`
   (2316–2325) obsługują układy 13 i 14 oraz kadr portretu (niżej, za `.faq .gal`).
   Lightbox (`lb*`) — niżej, skrypt `js/galeria.js`. */
.gal{display:grid;gap:.75rem;margin-top:1.5rem;
  grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}
.gal__m{display:block;overflow:hidden;border-radius:var(--r-sm,.375rem);
  aspect-ratio:3/2;background:var(--paper)}
.gal__m img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s}
.gal__m:hover img{transform:scale(1.05)}
.gal__m:focus-visible{outline:3px solid var(--magenta);outline-offset:3px}
.gal--dokument{grid-template-columns:minmax(0,60rem);justify-content:center}
.gal--dokument .gal__m{aspect-ratio:auto;background:transparent;
  box-shadow:0 2px 18px rgba(16,16,32,.10)}
.gal--dokument .gal__m img{height:auto;object-fit:contain}
.gal--dokument .gal__m:hover img{transform:none}
/* Galeria w odpowiedzi FAQ/zakładki (podblok: sama siatka, bez sekcji) —
   odstęp `.faq--obszary .gal` źródła (2152). Wygląd kafli jak w projekcie:
   zwykłe `gal__m` przycięte 3:2 bez ramki (układ 11), `gal__m--portret`
   z kadrem „góra środek”, `gal__m--znak` i `--pas` (układ 13) — w ramce, w całości.
   19.10.2026: usunięta hurtowa reguła `.faq .gal:not(.znaki) .gal__m*` (z 13.10),
   która każdy kafel w akordeonie robiła „znakiem w ramce” (biała ramka, padding,
   obraz bez przycięcia), także zdjęcia i okładki, które w źródle są przycięte. */
.faq .gal{margin-top:1.25rem}
/* Układ 13 z JEDNĄ grafiką w odpowiedzi: blok daje `gal--dokument` (kolumna 60 rem,
   cień, przezroczyste tło), a w źródle to zwykła siatka `.gal` z kafelkiem
   `gal__m--znak` (kolumna `minmax(11rem,1fr)`, np. 182 px) albo, dla poziomej,
   pas `--pas` na całą szerokość (`grid-column:1/-1`). Biblioteka (`gal--dokument`
   poza odpowiedzią) zostaje bez zmian. */
.faq .gal--dokument:has(>.gal__m--znak){
  grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));justify-content:normal}
.faq .gal--dokument>.gal__m--znak{background:#fff;box-shadow:none}
/* Układ 13 „Grafiki WSBiNoZ” — kafel `.gal__m--znak` i pas `.gal__m--pas`
   (`styl.css` 2267–2276, 2328–2329). `width:auto`: znak nigdy nie jest
   rozciągany ponad swój rozmiar, pudełko go wyśrodkowuje. */
.gal__m--znak{background:#fff;aspect-ratio:auto;
  border:1px solid var(--line);padding:.625rem;
  display:grid;place-items:center;min-height:6.5rem}
.gal__m--znak img{width:auto;max-width:100%;height:auto;max-height:11rem;
  object-fit:contain}
.gal__m--znak:hover img{transform:none}
.gal__m--pas{grid-column:1/-1;min-height:0}
.gal__m--pas img{max-height:8rem;margin:0 auto}
/* Pojedyncza grafika w `gal--dokument` (Biblioteka): `gal--dokument` daje
   jej kolumnę i cień, `--znak` białą ramkę, `--pas` niski pas — jak w źródle. */
/* Kadr zdjęcia z menedżera galerii (układ 11): `portret` = `styl.css` 2330
   (góra środek, głowy nie giną); pozostałe punkty — uzupełnienie CMS. */
.gal__m--portret img{object-position:center 22%}
.gal__m--kadr-1 img{object-position:left top}
.gal__m--kadr-3 img{object-position:right top}
.gal__m--kadr-4 img{object-position:left center}
.gal__m--kadr-6 img{object-position:right center}
.gal__m--kadr-7 img{object-position:left bottom}
.gal__m--kadr-8 img{object-position:center bottom}
.gal__m--kadr-9 img{object-position:right bottom}
/* Układ 14 „Logotypy WSBiNoZ” — pasek logotypów (`styl.css` 2316–2325):
   jeden rząd o wspólnej wysokości, nie siatka ramek. */
.znaki{display:flex;flex-wrap:wrap;align-items:center;
  gap:2.25rem 3rem;margin-top:1.5rem}
.znaki__z{display:block;flex:0 0 auto;border-radius:0;background:none;
  aspect-ratio:auto;overflow:visible;max-width:100%}
.znaki__z img{width:auto;height:7rem;max-width:100%;object-fit:contain;
  display:block}
.znaki__z:hover img{transform:scale(1.06)}
@media(max-width:900px){.znaki__z img{height:5.5rem}}
@media(max-width:600px){.znaki{gap:1.5rem 2rem}
.znaki__z img{height:4rem}}
@media(prefers-reduced-motion:reduce){.znaki__z:hover img{transform:none}}
/* Tryb kontrastu (dodatek względem źródła): grafiki i logotypy to treść
   informacyjna, ciemne na przezroczystym tle nie czytają się na czerni —
   zostają na białej płytce, pełnej jasności, z żółtą ramką. */
html[data-kontrast="1"] .gal__m--znak:not(svg):not(path):not(circle):not(g),
html[data-kontrast="1"] .znaki__z:not(svg):not(path):not(circle):not(g){
  background-color:#fff!important}
html[data-kontrast="1"] .gal__m--znak img,html[data-kontrast="1"] .znaki__z img{
  opacity:1;filter:none}
html[data-kontrast="1"] .znaki__z{padding:.5rem;border:1px solid #FFE500}
/* Śródtytuły w odpowiedzi FAQ/zakładki — `.faq--obszary .proza h4` źródła
   (2147–2149); podblok tekstu nie ma `.proza`, więc selektor idzie po bloku. */
.faq .cl-blok.cl-kol h4{margin:1.25rem 0 .5rem;font-size:.9375rem;
  font-weight:800;color:var(--ink);line-height:1.15;letter-spacing:-.02em}
.faq .cl-blok.cl-kol h4:first-child{margin-top:0}
@media(prefers-reduced-motion:reduce){
  .gal__m img{transition:none}
  .gal__m:hover img{transform:none}
}

/* Powiększenie zdjęcia. Bez JavaScriptu kafel jest zwykłym odnośnikiem
   do pliku i też działa — to jest tylko warstwa wygody. */
.lb{border:0;padding:0;background:rgba(10,10,20,.94);max-width:100vw;
  max-height:100vh;width:100vw;height:100vh}
.lb::backdrop{background:rgba(10,10,20,.94)}
.lb__f{display:grid;place-items:center;width:100%;height:100%;margin:0}
.lb__f img{max-width:min(100%,80rem);max-height:82vh;object-fit:contain;
  border-radius:var(--r-sm,.375rem)}
.lb__n{position:absolute;left:0;right:0;bottom:1.25rem;text-align:center;
  color:rgba(255,255,255,.85);font-size:.875rem}
.lb button{position:absolute;display:grid;place-items:center;width:3rem;
  height:3rem;border:0;border-radius:50%;background:rgba(255,255,255,.14);
  color:#fff;font-size:1.5rem;line-height:1;cursor:pointer}
.lb button[hidden]{display:none}
.lb button:hover{background:var(--magenta)}
.lb button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lb__x{top:1rem;right:1rem}
.lb__p{left:1rem;top:50%;margin-top:-1.5rem}
.lb__d{right:1rem;top:50%;margin-top:-1.5rem}
@media(max-width:34rem){.lb__p{left:.5rem}
.lb__d{right:.5rem}}
/* Tryb kontrastu: warstwa wspólna zdejmuje tła i przygasza zdjęcia, więc
   okno ma czarne tło, zdjęcie pełną jasność, a przyciski żółtą ramkę
   (dodatek względem źródła). */
html[data-kontrast="1"] .lb{background-color:#000!important}
html[data-kontrast="1"] .lb img{opacity:1;filter:none}
html[data-kontrast="1"] .lb button{border:2px solid #FFE500!important;background-color:#000!important}
html[data-kontrast="1"] .lb button:hover,html[data-kontrast="1"] .lb button:focus-visible{
  background-color:#FFE500!important;color:#000!important}

/* ── „Wróć do: …” (podstrona treściowa) — 1:1 ze źródła (`styl.css` 2136–2144) ──
   Pasek powrotu nad treścią: bez dolnego odstępu, bo zaraz pod nim
   zaczyna się pierwsza sekcja o tym samym tle — razem czytają się jak
   jedna całość, a nie dwa osobne pasy. */
.powrot__sek{padding-bottom:0}
.powrot__sek+.sec{padding-top:1.25rem}
/* Powrót na końcu treści — ten sam cel, co „« wróć" w obecnym
   serwisie, tylko na dole, bo tam kończy się czytanie. */
.powrot{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  padding:0 1rem;border:1px solid var(--line);border-radius:var(--r-sm);
  font-weight:700;font-size:.9375rem;color:var(--ink)}
.powrot:hover{border-color:var(--magenta);color:var(--magenta)}
.powrot:focus-visible{outline:3px solid var(--magenta);outline-offset:2px}
/* Pasek powrotu stoi w siatce artykułu wprost, nie w bloku — jak sekcja
   „100%” sięga krawędzi ekranu, a `.wrap` trzyma szerokość jak w źródle
   (bez tego link siedział we wciętym kontenerze, nie w osi treści).
   Pierwszy blok pod paskiem dostaje odstęp 1,25 rem, jak `.powrot__sek+.sec`
   w źródle (tu bloki idą w opakowaniu `.baguetteGallery`). Powrót na końcu
   treści styka się z pasem rekrutacji bez dolnego odstępu treści. */
.pp-artykul > .powrot__sek,
.pp-artykul > .sec:has(> .wrap > .powrot){grid-column:krawedz;margin-bottom:0}
/* Pas faktów wpisu („Opublikowano / Dział”) rysuje szablon wpisu wprost w siatce,
   poza blokiem — też od krawędzi do krawędzi, jak w źródle (21.10.2026). */
.pp-artykul > .pasfakt{grid-column:krawedz;margin-bottom:0}
.powrot__sek + .baguetteGallery > .sec:first-child{padding-top:1.25rem}
/* Blok-szablon (`.cl-szablon`: kontakty, osadzenie, karty…) jako pierwszy pod paskiem —
   ten sam odstęp 1,25 rem; sekcja siedzi o poziom głębiej niż blok zwykły. */
.powrot__sek + .baguetteGallery > .cl-szablon:first-child > .sec{padding-top:1.25rem}
/* Wstęp bez tytułu pod paskiem: 1,25 rem + dawny margines `.proza--2` (2,5 rem)
   — ten sam odstęp co w źródle, teraz z paddingu sekcji. */
.powrot__sek + .sec:has(> .wrap > .proza--2:first-child),
.powrot__sek + .baguetteGallery > .sec:first-child:has(> .wrap > .proza--2:first-child){padding-top:3.75rem}
.pp-tresc:has(> .pp-artykul > .sec:last-child > .wrap > .powrot){padding-bottom:0}
/* Dolny „Wróć do” ma tło PRZECIWNE do ostatniej sekcji treści (reguła źródła,
   1003 z 1007 stron): po sekcji białej — papier, po sekcji papierowej — biel.
   Ostatnią sekcję czyta sam CSS z wyrenderowanego HTML-a (opakowanie bloków
   `.baguetteGallery` tuż przed paskiem), więc działa dla każdego typu bloku
   i szablonu bez liczenia tła w PHP. */
.pp-artykul > .sec:has(> .wrap > .powrot):last-child{background:var(--paper)}
/* „Ostatnia sekcja” to ostatni BLOK galerii (`.cl-blok`): sekcja wprost albo
   sekcja w opakowaniu bloku-szablonu (`.cl-szablon > .sec`). `:last-of-type`
   liczyłby tylko `section` i pomijał szablon (107, 132). */
/* Zapas bez `… of S` (przeglądarki sprzed 2023): ostatnie dziecko opakowania. */
.pp-artykul:has(> .baguetteGallery:nth-last-child(2) > section.sec--paper:last-child,
                > .baguetteGallery:nth-last-child(2) > .cl-szablon:last-child > .sec--paper) > .sec:has(> .wrap > .powrot):last-child{background:#fff}
.pp-artykul:has(> .baguetteGallery:nth-last-child(2) > section.sec--paper:nth-last-child(1 of .cl-blok),
                > .baguetteGallery:nth-last-child(2) > .cl-szablon:nth-last-child(1 of .cl-blok) > .sec--paper) > .sec:has(> .wrap > .powrot):last-child{background:#fff}

/* ══ WSBINOZ — PODSTRONA: PLIKI DO POBRANIA (blok 4 i szablon wsbinoz-pliki) ══
   `styl.css` źródła 2027–2036 (`.plik`, `.plik__a/__b/__t/__o/__w`) i 2158–2160
   (`.pliki`) 1:1. Kreska `.plik__a` to `--line` jak w źródle (decyzja
   właściciela 13.10.2026): kafel to link rozpoznawalny po ikonie, nazwie
   i strzałce, więc ramka jest ozdobą, nie granicą pola (WCAG 1.4.11
   jej nie obejmuje); ciemne `--line-pole` zostaje przy polach. Sekcja,
   nadtytuł i tytuł to zwykłe `.sec`/`.wrap`/`.lbl`/`.h2` Clean. Odpowiednik
   `.faq--obszary .pliki` (2153) dla pliku w odpowiedzi FAQ: `.faq .pliki`. */
.plik{margin-top:1.5rem;max-width:34rem}
.plik__a{display:flex;gap:1.25rem;align-items:center;padding:1rem;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  text-decoration:none;color:inherit;transition:border-color .2s}
.plik__a:hover{border-color:var(--magenta)}
/* `color:inherit` źródła przegrywa z `.pp-artykul a` (kolor odnośników treści). */
.pp-artykul .plik__a{color:inherit}
.plik__b{display:block;min-width:0}
.plik__t{display:block;font-size:1.0625rem;font-weight:800;overflow-wrap:anywhere}
.plik__o{display:block;margin-top:.25rem;font-size:.9375rem;
  color:var(--muted);line-height:1.6}
.plik__w{display:block;margin-top:.5rem;font-size:.8125rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--magenta-dark)}
/* Lista dokumentów do pobrania — karty jedna pod drugą, na szerokim
   ekranie w dwóch kolumnach. */
.pliki{display:grid;gap:.75rem;margin-top:1.5rem}
@media (min-width:900px){.pliki{grid-template-columns:1fr 1fr}}
.pliki .plik{margin-top:0}
.faq .pliki{margin-top:1.25rem}
/* Kilka bloków plików jedna pod drugą (blok plików ma do 3 pozycji) czyta się
   jak jedna siatka: odstęp wiersza, nie odstęp od treści. */
.faq .pliki + .pliki{margin-top:.75rem}

/* ══ WSBINOZ — PODSTRONA: GRAFIKA / ZDJĘCIE Z TEKSTEM (blok 3, układy 91 i 92) ══
   `styl.css` źródła 2282–2302 (`.metr__z`, `.metr__l`, `.metr__l img`,
   `.metr__l--sam`, `.metr__l--foto`) 1:1. Pary etykieta–wartość (`.metr`, `.metr__w/__e/__v`) to
   osobna sekcja niżej („WSBINOZ — METRYCZKA”). Kolumna obrazu: 24 rem,
   poniżej 1100 px 18 rem, poniżej 760 px jedna kolumna z grafiką nie szerszą niż 16 rem. */
.metr__z{display:grid;grid-template-columns:minmax(0,24rem) minmax(0,1fr);
  gap:1.5rem 2.5rem;align-items:start}
.metr__l{display:grid;place-items:center;padding:1rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-sm)}
.metr__l img{width:auto;max-width:100%;height:auto;max-height:18rem;
  object-fit:contain}
.metr__l--sam{max-width:24rem;margin:0}
.metr__l--foto{padding:0;border:0;background:none;overflow:hidden}
.metr__l--foto img{width:100%;max-height:none;border-radius:var(--r-sm)}
@media(max-width:1100px){.metr__z{grid-template-columns:minmax(0,18rem) minmax(0,1fr);gap:1.5rem}}
@media(max-width:760px){.metr__z{grid-template-columns:minmax(0,1fr);gap:1.25rem}
.metr__l{justify-self:start;max-width:16rem}}

/* ══ WSBINOZ — METRYCZKA (szablon bloku `wsbinoz-metryczka`; 14.10.2026) ═══
   `styl.css` źródła 2277–2311: zwarty blok par etykieta–wartość (numer
   projektu, program, czas trwania, koordynator, strona) — dane katalogowe,
   nie tekst do czytania ciągiem. Obraz obok par to `.metr__z/.metr__l*`
   z sekcji wyżej. Reguła kreski jak w źródle (styl.css 2310), z selektorami
   `.sec--paper …` i `.sec …` — przebija ewentualne reguły `dl/div` sekcji. */
.metr{margin:0;max-width:64rem}
.metr__w{display:flex;flex-wrap:wrap;gap:.375rem;
  padding:.3125rem 0;line-height:1.65}
.metr__e{flex:0 0 auto;margin:0;font-weight:700;color:var(--ink)}
.metr__v{margin:0;min-width:0;color:var(--ink-2);overflow-wrap:anywhere}
.metr__v a{color:var(--magenta);text-decoration:underline;
  text-underline-offset:2px;overflow-wrap:anywhere}
.metr__v a:hover{text-decoration-thickness:2px}
.sec--paper .metr__w+.metr__w,.sec .metr__w+.metr__w{
  border-top:1px solid var(--line)}

/* ══ WSBINOZ — WIDEO I FORMULARZ: WIDEO (blok 8; 13.10.2026) ═════════════
   `styl.css` źródła 1997–2026 (`.wids`, `.wid`, `.wid__i`, `.wid__p`, `.wid__t`,
   `.wid--duzy`, `.wid__r`) 1:1. Różnice: `.wid__i .im` ma `display:block` (w źródle
   daje go globalne `.im`, którego Clean nie ma), a bez kadru zostaje ciemne tło
   `.wid__i` (granat) ze znakiem odtwarzania — Clean nie pobiera miniatury z serwerów wideo. */
.wids{display:grid;gap:1.25rem;margin:0 0 2rem;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
/* `display:flex` z `justify-content:flex-start`, a nie `block`: przeglądarka
   centruje treść przycisku w pionie, a siatka rozciąga kafle do wysokości
   najwyższego w rzędzie. Kafel z krótszym tytułem dostawał przez to
   miniaturę zepchniętą o kilkanaście pikseli w dół i rząd wyglądał krzywo. */
.wid{display:flex;flex-direction:column;align-items:stretch;
  justify-content:flex-start;width:100%;padding:0;border:0;background:none;
  text-align:left;cursor:pointer;font:inherit;color:inherit}
.wid__i{position:relative;display:block;overflow:hidden;
  border-radius:var(--r-md);aspect-ratio:16/9;background:var(--granat,#17172B)}
.wid__i .im{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .3s}
.wid:hover .im,.wid:focus-visible .im{transform:scale(1.04)}
/* Znak odtwarzania: trójkąt w kółku, rysowany, żeby nie dokładać pliku. */
.wid__p{position:absolute;left:50%;top:50%;width:3.5rem;height:3.5rem;
  margin:-1.75rem 0 0 -1.75rem;border-radius:50%;
  background:var(--magenta);box-shadow:0 .25rem 1rem rgba(0,0,0,.35)}
.wid__p::after{content:"";position:absolute;left:1.3125rem;top:1.0625rem;
  border:.6875rem solid transparent;border-left:1.0625rem solid #fff;
  border-right:0}
.wid:hover .wid__p{background:var(--magenta-dark)}
.wid__t{display:block;margin-top:.625rem;font-size:.9375rem;font-weight:700;
  line-height:1.45}
.wid:focus-visible{outline:3px solid var(--magenta);outline-offset:3px;
  border-radius:var(--r-md)}
.wid--duzy{max-width:60rem;margin-inline:auto}
.wid--duzy .wid__p{width:5rem;height:5rem;margin:-2.5rem 0 0 -2.5rem}
.wid--duzy .wid__p::after{left:1.9375rem;top:1.5rem;
  border-width:.9375rem;border-left-width:1.5rem;border-right-width:0}
.wid--duzy .wid__t{font-size:1.0625rem;text-align:center}
/* Odtwarzacz wstawiony po kliknięciu — w miejsce kafla. */
.wid__r{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);
  overflow:hidden;background:#000}
.wid__r iframe,.wid__r video{position:absolute;inset:0;width:100%;height:100%;border:0}
.wid--duzy+.wid__r,.wid__r--duzy{max-width:60rem;margin-inline:auto}

/* ══ WSBINOZ — WIDEO I FORMULARZ: FORMULARZ (blok 11; 13.10.2026) ════════
   `styl.css` źródła 2347–2399 (`.frm`, `.frm__g`, `.frm__l`, `.frm__p`, `.frm__e`,
   `.frm__w`, `.frm__c`, `.frm__s`, `.frm__r`, `.frm__ri`, `.frm__z`, `.frm__k`,
   `.frm__zl`, `.frm__zg`, `.frm__d`, `.frm__b`, `.frm__wst`, `.frm__f`, `.frm__i`,
   `.frm__pu`) 1:1. Różnice: (1) obwódka pola `.frm__c` to `--line-pole` (źródło:
   `--line`; WCAG 1.4.11 — jak dotąd w formularzach Clean); (2) dodane `.frm__bl`
   (komunikat błędu przy polu — w źródle formularz nie ma błędów po stronie serwera).
   `--ink-2` i `--ink-3` źródło pisze bez definicji (przeglądarka dziedziczy kolor) —
   tu tak samo. */
/* ── formularze rekrutacyjne ─────────────────────────────────────
   Z konwersji zostawał po formularzu stos akapitów („Imię *", „Wyślij")
   bez jednego pola do wpisania — pola składamy więc sami. Wysokość 44 px
   i widoczna obwódka przy skupieniu to minimum dla obsługi z klawiatury
   i dla palca na telefonie. */
.frm{max-width:46rem;margin:0}
.frm__g{margin:0 0 1.5rem;padding:1.25rem 1.25rem .5rem;border:1px solid
  var(--line);border-radius:var(--r-sm);background:#fff}
.frm__l{padding:0 .5rem;font-weight:800;font-size:1.0625rem;
  letter-spacing:-.01em;color:var(--ink)}
p.frm__p{margin:0 0 1.125rem}
.frm__e{display:block;margin-bottom:.375rem;font-weight:700;
  font-size:.9375rem;color:var(--ink)}
.frm__w{color:var(--magenta);font-weight:800}
.frm__c{display:block;width:100%;min-height:44px;padding:.5rem .75rem;
  border:1px solid var(--line-pole);border-radius:var(--r-sm);background:#fff;
  font:inherit;font-size:1rem;color:var(--ink);appearance:none}
textarea.frm__c{min-height:7rem;resize:vertical}
.frm__c:hover{border-color:var(--ink-3)}
.frm__c:focus-visible{outline:3px solid var(--magenta);outline-offset:1px;
  border-color:var(--magenta)}
.frm__c:disabled{background:var(--paper);color:var(--ink-3);cursor:not-allowed}
.frm__c:user-invalid{border-color:#B3003C}
/* Strzałka listy rozwijanej — własna, bo `appearance:none` zdejmuje
   systemową, a bez niej pole wygląda jak zwykłe okno tekstowe. Źródło pisze
   kolor przez niezdefiniowane `--ink-2`, przez co strzałki tam nie widać —
   zapasowy `--ink` ją pokazuje (decyzja właściciela 14.10.2026). */
.frm__s{position:relative;display:block}
.frm__s::after{content:"";position:absolute;right:1rem;top:50%;
  width:.5rem;height:.5rem;margin-top:-.3rem;pointer-events:none;
  border-right:2px solid var(--ink-2,var(--ink));border-bottom:2px solid var(--ink-2,var(--ink));
  transform:rotate(45deg)}
.frm__s .frm__c{padding-right:2.5rem}
/* Własna lista rozwijana (`js/lista.js`) — przycisk w wyglądzie `.frm__c`
   na niewidocznym natywnym `select` (ten niesie wartość i walidację) i lista
   opcji w stylu pól formularza. Bez skryptu i na ekranach dotykowych zostaje
   sam `select` z regułami wyżej. Lista pod `.frm__s` — reset list w treści
   (`.pp-artykul :where(.sec…) ul{border:0}`) jest mocniejszy od samego `.frm__lo`. */
.frm__s--lw .frm__lw-natywny{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;pointer-events:none}
.frm__lw{text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.frm__lw--pusta{color:var(--muted)}
.frm__s--lw:has(.frm__lw-natywny:focus) .frm__lw{outline:3px solid var(--magenta);
  outline-offset:1px;border-color:var(--magenta)}
.frm__s--otwarta::after{transform:rotate(-135deg);margin-top:-.05rem}
.frm__s .frm__lo{position:absolute;z-index:30;left:0;right:0;top:calc(100% + .25rem);
  margin:0;padding:.25rem;list-style:none;background:#fff;
  border:1px solid var(--line-pole);border-radius:var(--r-sm);
  box-shadow:0 12px 32px rgba(43,43,58,.16);max-height:18rem;overflow:auto}
.frm__s .frm__lo[hidden]{display:none}
.frm__s .frm__lo--gora{top:auto;bottom:calc(100% + .25rem)}
.frm__lo [role="option"]{padding:.5rem .75rem;border-radius:4px;cursor:pointer;
  color:var(--ink);line-height:1.4}
.frm__lo .frm__lo--akt{background:var(--paper)}
.frm__lo [aria-selected="true"]{font-weight:700;color:var(--magenta-dark)}
.frm__lo [aria-disabled="true"]{color:var(--muted);cursor:default}
.frm__r{margin:0 0 1.125rem;padding:0;border:0}
.frm__ri{display:inline-flex;align-items:center;gap:.4375rem;
  margin:0 1.25rem .375rem 0}
p.frm__z{display:flex;gap:.625rem;margin:0 0 1rem;align-items:flex-start}
.frm__k{flex:none;width:1.25rem;height:1.25rem;margin:.125rem 0 0;
  accent-color:var(--magenta)}
.frm__k:focus-visible{outline:3px solid var(--magenta);outline-offset:2px}
.frm__zl{font-size:.875rem;line-height:1.6;color:var(--ink-2)}
.frm__ri .frm__zl{font-size:1rem;color:var(--ink)}
.frm__zg{margin:0 0 1.25rem}
.frm__d{margin:0 0 1.25rem;font-size:.875rem;color:var(--ink-3)}
p.frm__b{margin:0}
.frm__b .btn{width:100%;justify-content:center}
p.frm__wst{max-width:46rem;margin:0 0 1.5rem;color:var(--ink-2)}
.frm__f{padding:.5rem;line-height:1.5}
.frm__i{display:block;margin-top:.375rem;font-size:.8125rem;
  color:var(--ink-3)}
/* Pułapka na roboty: widoczna tylko dla nich, więc nie `display:none` —
   część robotów pomija pola ukryte w ten sposób. */
.frm__pu{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(min-width:600px){.frm__g{padding:1.5rem 1.5rem .75rem}
.frm__b .btn{width:auto}}
/* Przeniesienie `*{margin:0;padding:0}` i `button{border:none;background:none}` źródła,
   których Clean nie ma: legenda grupy opcji bez domyślnego wcięcia, przycisk bez ramki
   przeglądarki; `p.frm__d` — `.pp-artykul p` (margines akapitu treści) jest mocniejszy
   od samej klasy, więc akapity formularza mają selektor z elementem (stąd `p.frm__p` itd.). */
legend.frm__e{padding:0}
p.frm__d{margin:0 0 1.25rem}
.frm__b .btn{border:0;font-family:inherit;cursor:pointer}
/* Komunikat błędu przy polu: kolor jak `:user-invalid` pola (#B3003C, 7:1 na bieli). */
.frm__bl{display:block;margin:.375rem 0 0;font-size:.875rem;font-weight:600;color:#B3003C}
.frm__bl[hidden]{display:none}
.frm__r .frm__bl{margin:0 0 .5rem}
.frm__c[aria-invalid="true"]{border-color:#B3003C}
/* Fokus z fragmentu skryptu po błędzie serwera nie zawsze liczy się jako :focus-visible — pole błędne ma obwódkę zawsze. */
.frm__c[aria-invalid="true"]:focus{outline:3px solid var(--magenta);outline-offset:1px}

/* ══ WSBINOZ — KADRA (szablon bloku `wsbinoz-kadra`; 14.10.2026) ═══════════
   Lista osób instytutu — `_projekt/o-uczelni/kadra/instytut-…/index.php`.
   Reguły `.faq--kier` (`styl.css` 1905–1922: lista kierunków podyplomowych —
   w Clean dotąd ich nie było) i `.faq--kadra` / `.os__*` (1957–1989) 1:1;
   `.faq` (rozwijanie, strzałka, kontrast strzałki) jest wyżej, w sekcji
   „WSBINOZ — KIERUNEK”. Różnice — tylko przeniesienie resetu źródła
   (`*{margin:0;padding:0}`, `img,svg{display:block}`, `h3[class]{margin:0}`),
   którego Clean nie ma: nagłówek osoby, rysunek i lista bez marginesów
   przeglądarki. Śródtytuł `h4.pdk__h` i e-mail `p.os__m` składa filtr
   `zyciorys` (`src/Serwis/Zyciorys.php`), nie redaktor. */
.faq--kier{margin-top:1.5rem;border-top:1px solid var(--line)}
.faq--kier .pdk__n{margin:0;font-size:1rem;font-weight:800;line-height:1.4;letter-spacing:-.02em}
.faq--kier .pdk__m{display:block;margin-top:.25rem;font-size:.8125rem;
  font-weight:600;color:var(--muted,#5C5C6E);letter-spacing:.01em}
.faq--kier .pdk__o{display:inline-block;margin:0 .5rem .25rem 0;
  padding:.125rem .4375rem;border-radius:.25rem;background:var(--magenta);
  color:#fff;font-size:.6875rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;vertical-align:.1em}
/* Śródtytuły w rozwiniętej treści: `--magenta` dawał 4,21:1 na pasie
   papierowym — poniżej progu 4,5:1 dla tekstu tej wielkości (WCAG 1.4.3).
   `--magenta-dark` daje 5,57:1 na papierze i 6,00:1 na bieli. */
.faq--kier .pdk__h{margin:1.25rem 0 .5rem;font-size:.75rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;color:var(--magenta-dark)}
.faq--kier details>.pdk__h:first-of-type{margin-top:.25rem}
.faq--kier ul{margin:0 0 1.25rem;padding-left:1.25rem;
  color:var(--muted,#5C5C6E)}
.faq--kier li{line-height:1.75;margin-bottom:.375rem}
.faq--kier details[open]{padding-bottom:.75rem}
/* Blok zakładek (FAQ) w wyglądzie „jak kierunek” (`wyglad: kierunek`):
   odpowiedź to podblok tekstu (`.cl-blok.cl-kol`), nie gołe `h4`/`ul`
   pod `details` jak w źródle (`rada-pracodawcow`, 1905–1922), więc te
   same reguły idą po bloku. `h4` bez pogrubienia = `h4.pdk__h`; `h4`
   z `strong` (kontakt) zostaje zwykłym śródtytułem `.faq .cl-blok.cl-kol h4`. */
.faq--kier .cl-blok.cl-kol h4:not(:has(>strong)){margin:1.25rem 0 .5rem;
  font-size:.75rem;font-weight:800;line-height:1.15;text-transform:uppercase;
  letter-spacing:.08em;color:var(--magenta-dark)}
.faq--kier .cl-blok.cl-kol h4:not(:has(>strong)):first-child{margin-top:.25rem}
.faq--kier .cl-blok.cl-kol ul{margin:0 0 1.25rem}
.faq--kier .cl-blok.cl-kol ul:not(.lista-kropki){padding-left:0}
/* Odpowiedź jak w obszarach źródła (`.faq--obszary .proza`, styl.css 2148, oraz
   `.proza p/ul/ol:last-child`, 1533 i 2221): .75rem od pytania, blok bez
   dolnego marginesu (`.cl-blok` daje 34px, a następny `.pliki`/`.gal` ma
   własny górny), ostatni akapit albo lista bez dolnego marginesu, lista ze
   strzałkami bez wcięcia (`ul.lista`, padding 0). Odpowiedź od śródtytułu
   kierunku (h4 bez pogrubienia = `h4.pdk__h`, `rada-pracodawcow`) nie ma
   `.proza`: w źródle zaczyna się od .25rem, ostatni element zostawia 1.25rem,
   a lista ma wcięcie 1.25rem — jej pierwszy śródtytuł oddaje różnicę
   (.25rem − .75rem), a następne elementy przywracają margines i wcięcie. */
.faq--kier .cl-blok.cl-kol{margin:.75rem 0 0}
.faq--kier .cl-blok.cl-kol > div > :is(p,ul,ol):last-child{margin-bottom:0}
.faq--kier .cl-blok.cl-kol > div > h4:first-child:not(:has(>strong)){margin-top:-.5rem}
.faq--kier .cl-blok.cl-kol > div > h4:first-child:not(:has(>strong)) ~ :is(p,ul,ol):last-child{margin-bottom:1.25rem}
.faq--kier .cl-blok.cl-kol > div > h4:first-child:not(:has(>strong)) ~ ul{padding-left:1.25rem}
/* Lista kadry — ta sama konstrukcja rozwijana, co lista kierunków,
   plus portret i stanowisko w wierszu nazwiska. */
.faq--kadra .os__n{display:flex;align-items:center;gap:.875rem;
  flex-wrap:wrap;font-size:1rem;font-weight:800;line-height:1.35}
.faq--kadra .os__f{flex:0 0 auto;width:3.25rem;height:3.25rem;
  border-radius:50%;object-fit:cover;background:var(--paper)}
.faq--kadra .os__f--znak{display:grid;place-items:center;
  background:var(--granat,#17172B);color:#fff}
.faq--kadra .os__z{width:56%;height:56%;display:block}
/* Zdjęcie w rozwinięciu: własna kolumna obok tekstu. Stoi w miejscu —
   przyklejone przy przewijaniu wodziło wzrok za tekstem i przeszkadzało. */
.faq--kadra .os__duze{margin:0 0 1.25rem}
.faq--kadra .os__duze img{display:block;width:100%;max-width:16rem;
  height:auto;aspect-ratio:1;object-fit:cover;
  border-radius:var(--r-md);background:var(--paper)}
@media(min-width:56rem){.faq--kadra .os__t--foto{display:grid;
    grid-template-columns:16rem minmax(0,1fr);gap:0 2.25rem;
    align-items:start}
.faq--kadra .os__duze{margin:0}}
.faq--kadra .os__i{flex:1 1 12rem;min-width:0}
.faq--kadra .os__r{flex:1 1 100%;margin-left:4.125rem;font-size:.8125rem;
  font-weight:600;color:var(--muted)}
.faq--kadra .os__t{padding:0 0 .75rem 4.125rem}
.faq--kadra .os__m{margin:0 0 1.25rem;font-weight:700}
/* Adres e-mail bez odstępu miał 23 px wysokości — o piksel za mało
   wobec progu 24×24 px dla celu dotykowego (WCAG 2.5.8). */
.faq--kadra .os__m a{display:inline-block;padding:.25rem 0;
  color:var(--magenta-dark)}
.faq--kadra .os--plaska{border-bottom:1px solid var(--line);
  padding:1.0625rem 2.5rem 1.0625rem 0}
@media(max-width:34rem){.faq--kadra .os__r{margin-left:0}
.faq--kadra .os__t{padding-left:0}}
/* W trybie kontrastu tła znikają — znak zostałby bez kółka. */
html[data-kontrast="1"] .faq--kadra .os__f--znak{border:1px solid #FFE500}
/* Reset źródła, którego Clean nie ma (patrz nagłówek sekcji): `h3[class]`
   bez marginesu, `h1–h5{line-height:1.15;letter-spacing:-.02em}` (25),
   `img{display:block}` (23). */
.faq--kadra h3.os__n{margin:0;letter-spacing:-.02em}
.faq--kier h4.pdk__h{line-height:1.15}
.faq--kadra img.os__f{display:block}

/* ═══ WSBINOZ — KONTAKT (szablon bloku `wsbinoz-kontakty`) ═══════════════
   Karta kontaktowa `.news__c--kontakt` z podpisem roli i wierszami kontaktu
   — 1:1 ze `styl.css` 1840–1845 i 1859–1866 (`.news__k--pod`, `.kontakt__l`,
   `.kontakt__a`) oraz 2109 (długi adres e-mail zawija się, nie wypycha
   karty). Karta `.news__c`, `.news__b`, `.news__t` i siatka `.news--2/3`
   są wspólne z aktualnościami i kartami (sekcje wyżej). `.przyciski` i
   `.btn--out` (szablon `wsbinoz-przyciski`) są już w arkuszu. W trybie
   kontrastu źródło nie ma osobnych reguł dla tych klas. */
.news__k--pod{text-transform:none;letter-spacing:0;font-weight:600;
  color:var(--muted,#5C5C6E);margin-top:-.25rem}
.kontakt__l{display:block;font-size:.9375rem;line-height:1.7;
  color:var(--ink,#2B2B3A);margin-top:.375rem}
/* Telefon i e-mail muszą dać się kliknąć — odstęp pionowy podnosi pole
   dotyku powyżej progu 24 px (WCAG 2.5.8). */
.kontakt__a{display:inline-block;padding:.1875rem 0;color:inherit;
  text-decoration:none;border-bottom:1px solid rgba(229,0,125,.35);
  transition:color .2s,border-color .2s}
.kontakt__a:hover,.kontakt__a:focus-visible{color:var(--magenta,#E5007D);
  border-bottom-color:var(--magenta,#E5007D)}
.kontakt__l,.kontakt__a,.news__c--kontakt .news__t{overflow-wrap:anywhere}

/* ══ WSBINOZ — ADRES, OŚ CZASU, OSADZENIE (szablony `wsbinoz-adres`,
   `wsbinoz-os-czasu`, `wsbinoz-osadzenie`; 14.10.2026) ═══════════════════
   Reguły 1:1 ze `styl.css` źródła: `.adres*` (1534–1559, strona Kontakt),
   `.oc*` (1927–1941, Historia uczelni), `.nrz*` (2337–2346, Outlook Bookings
   i newsletter). `--tekst` (`.oc__m`) i `--ink-3` (`.nrz__z`) źródło pisze bez
   definicji — zostają tak samo (`--tekst` ma zapasowy #2B2B3A, `--ink-3` daje
   kolor dziedziczony). Dodatki bez odpowiednika w źródle: kafelek adresu bez
   odnośnika (`div.adres__a`, brak poprawnego adresu mapy) nie reaguje na
   najechanie, a odnośnik w zdarzeniu osi (`.oc__l a`) ma kolor i podkreślenie
   jak w innych listach (źródło nie ma w osi żadnego odnośnika).
   Reguły ustawiające margines albo dopełnienie `p`, `ol`, `ul`, `li` (`.adres__z`, `.oc`, `.oc__p`, `.oc__l`,
   `.nrz__z`) mają przedrostek `html ` — tak jak opisuje „ZDERZENIA Z CLEAN”
   na początku sekcji źródła (wyżej). */
html .adres__z{font-size:1.125rem;line-height:1.7;color:var(--muted,#5C5C6E);
margin:0 0 1.25rem;max-width:64ch}
.adres__z strong{color:var(--ink,#1B1B2A);font-weight:700}
.adres__a{display:inline-flex;align-items:center;gap:1rem;
padding:1.125rem 1.5rem;border:1px solid var(--line,#E6E6EF);
border-radius:1rem;background:#fff;color:inherit;text-decoration:none;
transition:border-color .2s,box-shadow .2s,transform .2s}
.adres__a:hover,.adres__a:focus-visible{border-color:var(--magenta,#E5007D);
box-shadow:0 .5rem 1.5rem rgba(27,27,42,.08);transform:translateY(-1px)}
div.adres__a:hover{border-color:var(--line,#E6E6EF);box-shadow:none;transform:none}
.adres__i{flex:none;width:2.5rem;height:2.5rem;border-radius:50%;
background:var(--magenta,#E5007D);position:relative}
.adres__i::before{content:"";position:absolute;left:50%;top:50%;
width:.75rem;height:.75rem;margin:-.5rem 0 0 -.375rem;border-radius:50%
50% 50% 0;background:#fff;transform:rotate(-45deg)}
.adres__t{display:flex;flex-direction:column;gap:.125rem}
.adres__u{font-size:1.0625rem;font-weight:700;color:var(--ink,#1B1B2A)}
.adres__k{font-size:.9375rem;color:var(--muted,#5C5C6E)}
.adres__d{font-size:.875rem;color:var(--muted,#5C5C6E)}
.adres__c{margin-left:auto;padding-left:1rem;font-size:.8125rem;
font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:var(--magenta,#E5007D);white-space:nowrap}
.adres__c::after{content:" →"}
@media(max-width:600px){.adres__a{flex-wrap:wrap;gap:.75rem}
.adres__c{margin-left:0;padding-left:3.5rem;width:100%}}
html .oc{list-style:none;margin:1.5rem 0 0;padding:0;position:relative}
html .oc__p{display:grid;gap:.25rem 1.75rem;padding:0 0 1.75rem;position:relative}
@media(min-width:40rem){.oc__p{grid-template-columns:5.5rem minmax(0,1fr)}
.oc__p::before{content:"";position:absolute;left:5.5rem;top:1.6rem;
    bottom:-.25rem;width:1px;background:var(--line)}
.oc__p:last-child::before{display:none}}
.oc__r{font-size:1.25rem;font-weight:900;color:var(--magenta-dark);
  line-height:1.4}
html .oc__l{margin:0;padding-left:1.125rem;color:var(--muted)}
.oc__l li{line-height:1.7;margin-bottom:.5rem}
.oc__m{display:block;font-size:.75rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tekst,#2B2B3A)}
.oc__l a{color:var(--magenta-dark);text-decoration:underline;
  text-underline-offset:2px}
.nrz{margin:0}
.nrz__r{display:block;width:100%;height:min(80vh,50rem);border:1px solid
  var(--line);border-radius:var(--r-sm);background:#fff}
html .nrz__z{margin:.75rem 0 0;font-size:.875rem;color:var(--ink-3);
  overflow-wrap:anywhere}
@media(max-width:600px){.nrz__r{height:min(78vh,38rem)}}

/* ══ WSBINOZ — WARIANTY BLOKU 10 Z BANERÓW: PARTNERZY I FILMY (14.10.2026) ═
   `styl.css` źródła: `.ptny`, `.ptn*` (1942–1954 + dopracowanie 2115–2132,
   strona „Partnerzy”), `h3.h3d` (1598–1600, strona „Filmy”). `.wids`/`.wid*` są
   wyżej (blok wideo) i służą także kafelkom „Filmów”. Reguły `p` z marginesem
   (`.ptn__b p`, `.ptn__u`) mają przedrostek `html ` (ZDERZENIA Z CLEAN); `h3.h3d`
   i `h3.ptn__n` — nazwę znacznika, bo zerowanie Clean (`.pp-artykul … `) ma siłę
   0,1,1 i bije samą klasę. Dodatki bez odpowiednika w źródle: kafel filmu to
   odnośnik `a.wid` (bez skryptu otwiera YouTube), okienko `dialog.film`
   (odstępstwo zatwierdzone: źródło gra film w miejscu) z ramką 16:9. */
.ptny{display:grid;gap:1.25rem;margin-top:1.5rem}
@media(min-width:48rem){.ptny{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ptn{display:grid;gap:1.25rem;align-content:start;padding:1.25rem;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  grid-template-columns:11rem minmax(0,1fr)}
.ptn__l{display:grid;place-items:center;padding:1rem;min-height:8rem;
  align-self:start;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-sm,.375rem)}
.ptn__l img{max-width:100%;height:auto;display:block}
html h3.ptn__n{font-size:1rem;font-weight:800;line-height:1.35;margin:0}
html .ptn__b p{margin:0 0 .625rem;font-size:.9375rem;line-height:1.7;
  color:var(--muted)}
html .ptn__b p.ptn__u{display:flex;flex-wrap:wrap;gap:.75rem;max-width:100%}
.ptn__a{display:inline-block;padding:.25rem 0;font-size:.8125rem;
  font-weight:700;color:var(--magenta-dark);overflow-wrap:anywhere;max-width:100%}
.ptn__b a{color:var(--magenta-dark);text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px;overflow-wrap:anywhere}
.ptn__b a:hover{color:var(--magenta);text-decoration-thickness:2px}
.ptn__b a:focus-visible{outline:3px solid var(--magenta);outline-offset:2px;
  border-radius:2px}
@media(max-width:700px){.ptn{grid-template-columns:8rem minmax(0,1fr)}
.ptn__l{min-height:6rem}}

h3.h3d{font-size:clamp(1.25rem,2.4vw,1.625rem);font-weight:900;
  text-transform:uppercase;letter-spacing:-.01em;margin:4.5rem 0 1rem;
  line-height:1.15}
.h3d + .lead{margin-top:0}
/* Kolejne grupy filmów to osobne bloki (w źródle — jedna sekcja): tytuł `h3.h3d`
   ma własny odstęp od góry (4,5 rem), więc sekcja z takim tytułem nie ma górnego
   dopełnienia, a sekcja przed nią (też „Filmy”) — ani dolnego, ani marginesu
   siatki: w źródle margines siatki (2 rem) zlewa się z marginesem tytułu
   (4,5 rem) w 4,5 rem, a tu osobne sekcje tego nie robią. */
.sec--filmy-h3{padding-top:0}
.sec--filmy:has(+ .sec--filmy-h3){padding-bottom:0}
.sec--filmy:has(+ .sec--filmy-h3) .wids{margin-bottom:0}
a.wid{text-decoration:none}

/* Okienko filmu (`js/film.js`) — wzór: lightbox `.lb`. */
.film{border:0;padding:0;background:rgba(10,10,20,.94);max-width:100vw;
  max-height:100vh;width:100vw;height:100vh}
.film::backdrop{background:rgba(10,10,20,.94)}
.film__o{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;
  justify-items:center;gap:1rem;width:100%;height:100%;padding:4.5rem 1rem 2rem}
.film__r{position:relative;aspect-ratio:16/9;width:min(100%,80rem,
  calc((100vh - 9rem) * 16 / 9));background:#000;
  border-radius:var(--r-md)}
.film__r iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  border-radius:var(--r-md)}
html .film__t{margin:0;text-align:center;color:rgba(255,255,255,.85);
  font-size:.9375rem;line-height:1.45}
.film__x{position:absolute;top:1rem;right:1rem;display:grid;place-items:center;
  width:3rem;height:3rem;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.5rem;line-height:1;
  cursor:pointer}
.film__x:hover{background:var(--magenta)}
.film__x:focus-visible{outline:3px solid #fff;outline-offset:2px}
html[data-kontrast="1"] .film{background-color:#000!important}
html[data-kontrast="1"] .film__x{border:2px solid #FFE500!important;
  background-color:#000!important}
html[data-kontrast="1"] .film__x:hover,html[data-kontrast="1"] .film__x:focus-visible{
  background-color:#FFE500!important;color:#000!important}

/* ── Kolor tekstu z menu „Style” edytora (21.10.2026) ─────────────
   `kolor-ink` — `--ink` (#2B2B3A), kolor tekstu metryczek źródła (`.metr__e`/`.metr__v`),
   ciemniejszy niż przygaszony `--muted` akapitów `.proza p`; dla par „etykieta: wartość”
   przeniesionych jako zwykły akapit. Wyższa specyficzność niż `.proza p`. */
:is(.proza, .cl-kol, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc, .khero__opis) .kolor-ink,
.kolor-ink { color: var(--ink, #2B2B3A); }
/* Akapit „Wstęp” z menu „Style” (`p.lead` w treści edytora, 21.10.2026) — wygląd `.lead`
   źródła (styl.css 48: interlinia 1,7) zamiast zwykłego `.proza p` (1,75); kolor i rozmiar
   te same, szerokość jak reszta prozy sekcji. */
:is(.proza, .cl-kol, .cl-zdjecie-tekst__tekst, .cl-zakladki__tresc) p.lead { line-height: 1.7; }