/* raster — assets/css/styles.css
   PLIK GENEROWANY z partiali w template-parts/scss.
   Nie edytuj go ręcznie — poprawki idą do partiala, potem:
   python3 narzedzia/zbuduj-arkusz.py
   Kolejność partiali: main.scss */

/* raster — tokeny

   WARTOŚCI SĄ TU JAKO AWARYJNE, NIE JAKO ŹRÓDŁO PRAWDY.
   Paletę ustawia Customizer i wypisuje ją krótkim blokiem w <head>
   (rst_zmienne_kolorow() w inc/assets.php) — inaczej jeden arkusz dla całej
   sieci nie mógłby się cache'ować. To, co stoi poniżej, jest wartością
   startową dla portalu, który jeszcze nic nie ustawił, i zgadza się co do
   znaku z makietą.

   NAZWY SĄ TE SAME, CO W MAKIECIE (--bg, --surface, --line…). Dzięki temu
   znaczniki przeniesione z makiety działają bez przepisywania zmiennych,
   a przy kolejnym wydaniu makiety widać od razu, czy coś się rozjechało. */
:root {
  --bg: #0B0F19;
  --surface: #151C2C;
  --surface2: #1C2438;
  --fg: #F8FAFC;
  --muted: #94A3B8;
  --accent: #00F0FF;
  --accent2: #7C3AED;
  --accent3: #FF4757;

  /* Linie: makieta używa trzech mocy tej samej bieli. Słabsza dzieli kafle,
     mocniejsza obrysowuje karty, najmocniejsza podkreśla nagłówki sekcji. */
  --line: rgba(248, 250, 252, .09);
  --line-2: rgba(248, 250, 252, .12);
  --line-3: rgba(248, 250, 252, .18);

  --header-bg: rgba(11, 15, 25, .9);

  /* Kroje: Space Grotesk na nagłówkach, IBM Plex Sans w tekście — jak
     w makiecie. Oba mają awaryjny stos systemowy, bo motyw nie dociąga
     plików z zewnętrznych serwerów. */
  --font-naglowek: 'Space Grotesk', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-tekst: 'IBM Plex Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Rytm pionowy — jedna skala na cały motyw. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  --wrap: 1320px;

  /* PŁYTA ZE ZNAKIEM PORTALU.
     `--maszt-odsadzka` to odległość od lewej krawędzi OKNA do lewej krawędzi
     TREŚCI: połowa wolnego miejsca obok kolumny plus wewnętrzny odstęp
     `.wrap`. Płyta cofa się o tyle ujemnym marginesem i o tyle dokłada sobie
     wyściółki, dzięki czemu dochodzi do krawędzi ekranu, a napis stoi
     równo z resztą treści. Poniżej 1320 px człon z `50vw` schodzi poniżej
     `--s5`, więc `max()` pilnuje, żeby nie wyszedł ujemny.

     `--logo-strefa` to szerokość wygaszenia prawej krawędzi — i zarazem
     prawa wyściółka płyty, bo napis nie może wejść w gasnący pas. */
  --maszt-odsadzka: max(var(--s5), calc(50vw - var(--wrap) / 2 + var(--s5)));
  --logo-strefa: 150px;
  --logo-tlo: #F6F8FC;

  /* Maska z sześcioma przystankami zamiast dwóch. Przy zwykłym przejściu
     „krycie 1 → 0” widać wyraźny pas w połowie gradientu; ramp
     z przyspieszeniem wygasza płytę tak, że nie da się wskazać miejsca,
     w którym się kończy. Przystanki liczą się od `--logo-strefa`, więc
     zmiana szerokości wygaszenia przelicza całą maskę. */
  --logo-maska: linear-gradient(90deg,
    #000 0,
    #000 calc(100% - var(--logo-strefa)),
    rgba(0, 0, 0, .94) calc(100% - var(--logo-strefa) * .76),
    rgba(0, 0, 0, .72) calc(100% - var(--logo-strefa) * .52),
    rgba(0, 0, 0, .36) calc(100% - var(--logo-strefa) * .28),
    rgba(0, 0, 0, .07) calc(100% - var(--logo-strefa) * .07),
    transparent 100%);
  --wrap-waski: 760px;
  --radius: 4px;

  /* PROMIEŃ RAMEK ZDJĘĆ — OSOBNO OD `--radius`.
     Makieta ma narożniki zdjęć ostre, a przyciski i pola formularzy
     zaokrąglone. Jeden token na oba dawał wybór między zaokrąglonymi
     zdjęciami a kanciastym polem wyszukiwania. */
  --radius-kadr: 0;
}

/* raster — baza

   MOTYW JEST CIEMNY Z ZAŁOŻENIA, NIE PRZEZ `prefers-color-scheme`.
   Makieta ma jedną wersję i taka wchodzi do motywu; jasny wariant wymagałby
   drugiego kompletu decyzji projektowych, a nie samego odwrócenia kolorów. */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* TŁO SIEDZI NA `html`, NIE NA `body`.
   Warstwa ozdobna (body::before) stoi na `z-index: -1`, czyli POD treścią,
   ale NAD tłem własnego elementu. Dopóki tło malowało się na `body`,
   zakrywało ją w całości — siatki nie było widać ani piksela. */
html { background: var(--bg); }

body {
  position: relative;
  margin: 0;
  background: transparent;
  color: var(--fg);
  font-family: var(--font-tekst);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* =========================================================
   SIATKA RASTROWA I POŚWIATY NAD PIERWSZYM EKRANEM

   Jedyny ozdobnik w motywie i jedyne miejsce, w którym widać, skąd nazwa.
   Warstwa jest pseudoelementem `body`, a nie tłem `main`, bo ma sięgać
   także pod maszt — maszt ma tło z przezroczystością (`--header-bg`),
   więc siatka przez niego prześwituje.

   `z-index: -1` jest tu obowiązkowy. Pseudoelement jest pozycjonowany,
   a treść strony nie, więc bez niego warstwa malowałaby się NAD tekstem
   (elementy pozycjonowane idą wyżej od statycznych, niezależnie od
   kolejności w dokumencie).

   `mask-image` wygasza siatkę ku dołowi. Bez maski kreski ciągnęłyby się
   twardą krawędzią przez środek pierwszej sekcji.

   Wysokość 640 px to maszt (73) plus slogan plus kadr otwarcia — czyli
   dokładnie tyle, ile widać przed pierwszym przewinięciem na laptopie.
   ========================================================= */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 640px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(760px 520px at 80% -12%, rgba(124, 58, 237, .20), transparent 70%),
    radial-gradient(620px 420px at 10% -18%, rgba(0, 240, 255, .09), transparent 70%),
    linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(to bottom, var(--line) 1px, transparent 1px) 0 0 / 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .35) 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .35) 60%, transparent 100%);
}

/* Ozdobnik znika przy `prefers-reduced-transparency` i w druku — w obu
   wypadkach jest wyłącznie szumem. */
@media print {
  body::before { display: none; }
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-naglowek);
  line-height: 1.15;
  letter-spacing: -.02em;
}

p { margin: 0; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

/* ODNOŚNIKI W TREŚCI SĄ PODKREŚLONE, w kaflach i menu nie.
   Zerowanie wyglądu odnośnika w całym motywie jest wygodne w kaflach, gdzie
   klikalny jest cały element — ale w zdaniu odbiera czytelnikowi jedyny
   sygnał, że coś jest klikalne. Dlatego reguła wraca punktowo, w treści
   (_wpis.scss) i w dokumentach prawnych (_strony.scss). */

/* Widoczny fokus na klawiaturze — bez tego nawigacja tabulatorem jest ślepa. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s5);
}

.wrap--waski { max-width: var(--wrap-waski); }

/* Treść widoczna wyłącznie dla czytników ekranu. */
.tylko-czytnik {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Przeskok do treści — widoczny dopiero po sfokusowaniu. */
.skip {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: var(--s3) var(--s4);
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}

.skip:focus { left: var(--s4); top: var(--s4); }

.pusto { color: var(--muted); padding: var(--s6) 0; }

/* Przycisk „do góry” (wytyczna 17). Zwykła kotwica; skrypt tylko ją chowa
   przy samej górze strony, więc bez JavaScriptu jest po prostu zawsze. */
.do-gory {
  position: fixed;
  right: var(--s5);
  bottom: var(--s5);
  z-index: 30;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: var(--surface2);
  border: 1px solid var(--line-3);
  border-radius: var(--radius);
  color: var(--fg);
}

.do-gory:hover { border-color: var(--accent); color: var(--accent); }

/* Skrypt dokłada `jest-widoczny` po przewinięciu; przy wyłączonym
   JavaScripcie klasa nie przyjdzie nigdy, więc domyślnie przycisk JEST
   widoczny, a chowamy go dopiero wtedy, gdy skrypt przejmie stan. */
.js .do-gory { opacity: 0; pointer-events: none; transition: opacity .2s; }
.js .do-gory.jest-widoczny { opacity: 1; pointer-events: auto; }

/* Okruszki (wytyczna 11). */
.okruszki {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s5) 0 var(--s4);
  font-size: 13px;
  color: var(--muted);
}

.okruszki a:hover { color: var(--accent); }
.okruszki__sep { color: var(--line-3); }

/* Plakietka AI (wytyczna 10). Stoi NAD kadrem, nie obok — czytelnik ma ją
   zobaczyć razem ze zdjęciem, którego dotyczy. */
.ai-znak {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
  padding: 2px var(--s2);
  background: rgba(11, 15, 25, .82);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent);
  font-family: var(--font-naglowek);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
}

.kadr {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-kadr);
  background: var(--surface2);
}

/* ZDJĘCIE WYPEŁNIA RAMKĘ, RAMKA TRZYMA PROPORCJĘ.
   `height: 100%` działa dopiero wtedy, gdy rodzic ma wysokość — daje mu ją
   `aspect-ratio` na `.kadr`. `object-fit: cover` bez tego nic by nie
   zmienił, bo przy `height: auto` ramka ma dokładnie wymiary zdjęcia
   i nie ma czego przycinać.

   REGUŁA JEST ZAGNIEŻDŻONA W `.kadr` CELOWO. Luzem obiecywała wysokość
   rodzica każdemu `.kadr__foto` w dokumencie, także temu, który stoi poza
   ramką — a tam `height: 100%` nie ma do czego się odnieść i cicho spada do
   `auto`. Działało przez przypadek; gdyby taki rodzic kiedykolwiek dostał
   wysokość, zdjęcie by się rozciągnęło. Poniżej stoi więc wariant domyślny
   dla zdjęć poza ramką. */
.kadr__foto { width: 100%; height: auto; }

.kadr .kadr__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.szukaj { display: flex; gap: var(--s2); margin: var(--s4) 0; }

.szukaj__pole {
  flex: 1;
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--fg);
  font: inherit;
}

.szukaj__przycisk {
  padding: var(--s3) var(--s5);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  color: var(--bg);
  font-family: var(--font-naglowek);
  font-weight: 600;
  cursor: pointer;
}

/* raster — maszt i menu

   MENU MOBILNE JEST ELEMENTEM <details>. Strzałka znacznika jest ukryta
   (`list-style: none` plus `::-webkit-details-marker`), bo rolę znaku pełni
   hamburger. Reszta zachowania — rozwijanie, klawiatura, czytnik ekranu —
   zostaje natywna, więc działa bez skryptu. */
.maszt {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.maszt__rzad {
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-height: 72px;
}

/* SLOT LOGO NA JASNYM TLE (wytyczna 13).
   Logotypy klientów przychodzą w czarnym foncie na przezroczystym tle —
   na ciemnym maszcie byłyby niewidoczne. Jasny prostokąt rozwiązuje to bez
   proszenia o drugą wersję pliku. */
/* =========================================================
   PŁYTA ZE ZNAKIEM PORTALU

   Jasny prostokąt dochodzi do LEWEJ KRAWĘDZI OKNA, nie do marginesu
   kolumny — stąd ujemny margines o `--maszt-odsadzka` i taka sama wartość
   dołożona do wyściółki z lewej. Bez tej pary napis przesunąłby się razem
   z płytą i przestał stać w jednej linii z pierwszym kaflem.

   PRAWA KRAWĘDŹ JEST WYGASZANA, NIE UCIĘTA. Jasna płyta kończąca się
   pionową kreską w połowie ciemnego masztu wygląda jak niedomalowany
   element, a nie jak decyzja. Maska ma kilka przystanków zamiast dwóch,
   bo liniowe przejście alfa widać jako wyraźny pas w środku gradientu —
   oko lepiej znosi ramp z przyspieszeniem.

   `align-self: stretch` daje płycie pełną wysokość rzędu; bez tego brałaby
   wysokość napisu i siedziała w maszcie jak naklejka.
   ========================================================= */
.maszt__nazwa {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  align-self: stretch;
  margin-left: calc(-1 * var(--maszt-odsadzka));
  padding-left: calc(var(--maszt-odsadzka) + 22px);
  padding-right: var(--logo-strefa);
  background: var(--logo-tlo);
  -webkit-mask-image: var(--logo-maska);
  mask-image: var(--logo-maska);
}

/* Sam napis — ten sam w maszcie i w stopce. */
.znak {
  font-family: var(--font-naglowek);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: var(--bg);
  white-space: nowrap;
}

/* Na wąskim ekranie strefa wygaszania zabierałaby połowę masztu — razem
   z miejscem na przycisk menu. 150 px ma sens przy kolumnie 1272 px,
   nie przy 342 px. */
@media (max-width: 719px) {
  /* Nadpisujemy TOKEN, nie samą wyściółkę: maska liczy swoje przystanki
     z tej samej wartości, więc wygaszenie zwęża się razem z płytą. */
  .maszt__nazwa { --logo-strefa: 56px; }
  .znak { font-size: 18px; }
}

.maszt__menu { flex: 1; min-width: 0; }

.maszt__przelacznik {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line-3);
  border-radius: var(--radius);
  font-family: var(--font-naglowek);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg);
  cursor: pointer;
  list-style: none;
}

.maszt__przelacznik::-webkit-details-marker { display: none; }

.maszt__burger {
  position: relative;
  width: 14px; height: 10px;
  flex: none;
}

.maszt__burger::before,
.maszt__burger::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: currentColor;
}

.maszt__burger::before { top: 0; box-shadow: 0 4px 0 currentColor; }
.maszt__burger::after { bottom: 0; }

.maszt__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-naglowek);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.maszt__lista a:hover,
.maszt__lista .jest-tutaj > a,
.maszt__lista .current-menu-item > a { color: var(--accent); }

/* LINK KLIENTA W MASZCIE (wytyczna 1).

   To zwykła pozycja menu, której redakcja nadaje w „Wygląd → Menu” klasę
   CSS `link-klienta`. Motyw tylko ją inaczej rysuje — dzięki temu atrybut
   `rel` zostaje ten, który ustawiono w panelu (wytyczna 21), a redakcja nie
   potrzebuje osobnego pola w żadnej wtyczce.

   Wygląda inaczej niż działy, żeby czytelnik widział, że to nie jest dział
   portalu. */
.maszt__lista .link-klienta > a,
.maszt__link-klienta {
  display: inline-block;
  margin-top: var(--s3);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--accent2);
  border-radius: var(--radius);
  font-family: var(--font-naglowek);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent2);
}

/* PODMENU (drugi poziom).
   Poniżej progu stoi otwarte jako wcięta lista — panel jest pionowy, więc
   rozwijanie niczego nie oszczędza, a dokłada rzeczy do kliknięcia.
   Powyżej progu jest rozwijane hoverem i fokusem. */
.maszt__lista .sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 999.98px) {
  .maszt__nawigacja { padding: var(--s4) 0 var(--s5); }

  .maszt__lista { flex-direction: column; gap: var(--s3); }

  .maszt__lista .sub-menu {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    margin-top: var(--s2);
    padding-left: var(--s4);
    border-left: 1px solid var(--line-2);
    font-size: 12px;
    text-transform: none;
    letter-spacing: .04em;
  }
}

@media (min-width: 1000px) {
  .maszt__przelacznik { display: none; }

  /* Bez przycisku panel ma być zawsze otwarty — `details` bez `open`
     chowa treść, więc wymuszamy jej wyświetlenie. Reguła zostaje dla
     przeglądarek ze starym modelem `details` (Safari, Firefox do 140). */
  .maszt__menu > .maszt__nawigacja { display: block !important; }

  /* OD CHROME 131 SAMO `display` NIE WYSTARCZA.
     Zamknięty `details` nie chowa już dzieci przez `display: none` — nakłada
     `content-visibility: hidden` na `::details-content`, czyli na warstwę
     POMIĘDZY `details` a nawigacją. Reguła wyżej ustawia więc `display`
     elementowi, którego i tak nikt nie maluje: menu ma w DOM-ie poprawne
     wymiary (665×21 px przy 1024 px), `innerText` zwraca pusty łańcuch,
     a na ekranie nie ma go wcale. Zmierzone na Chrome 152 — maszt pokazywał
     samo logo. */
  .maszt__menu::details-content {
    content-visibility: visible;
    block-size: auto;
  }

  .maszt__lista { flex-wrap: nowrap; }

  .maszt__lista > .menu-item-has-children { position: relative; }

  .maszt__lista > .menu-item-has-children > a::after {
    content: " \25BE";
    font-size: 10px;
    color: var(--muted);
  }

  .maszt__lista > .menu-item-has-children > .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    min-width: 200px;
    display: grid;
    gap: var(--s3);
    margin-top: var(--s3);
    padding: var(--s4);
    background: var(--surface);
    border: 1px solid var(--line-3);
    border-radius: var(--radius);
    text-transform: none;
    letter-spacing: .02em;
    visibility: hidden;
    opacity: 0;
  }

  /* MOSTEK NAD ODSTĘPEM. Między pozycją a listą stoi margines; bez tego
     przezroczystego paska kursor w drodze do podmenu opuszcza `li`,
     :hover gaśnie i lista znika w pół ruchu. Ta sama pułapka co w tp_glam. */
  .maszt__lista > .menu-item-has-children > .sub-menu::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: calc(-1 * var(--s3) - 1px);
    height: calc(var(--s3) + 1px);
  }

  .maszt__lista > .menu-item-has-children:hover > .sub-menu,
  .maszt__lista > .menu-item-has-children:focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
  }

  .maszt__lista .link-klienta { margin-left: auto; }
  .maszt__lista .link-klienta > a,
  .maszt__link-klienta { margin: 0; }

  .maszt__nawigacja { display: flex; align-items: center; gap: var(--s5); }
}

/* BELKA WP-ADMINA.

   NIEAKTYWNE przy domyślnych ustawieniach: motyw zdejmuje belkę z frontu
   filtrem `show_admin_bar` (inc/setup.php), więc klasa `admin-bar` na
   <body> nie powstaje i te reguły nie mają do czego się przyczepić.

   Zostają świadomie. Belka wraca jednym `remove_filter` — na portalu, gdzie
   redakcja będzie jej chciała, albo w motywie potomnym — i wtedy odstęp musi
   już być na miejscu. Bez niego maszt wjeżdża pod belkę i traci pierwsze
   32 px, czyli całą linię z nazwami działów.

   Progi są progami belki, nie naszymi — we wszystkich motywach WordPressa
   zachowuje się tak samo:
     - od 783 px belka ma 32 px i jest przyklejona,
     - 601–782 px belka ma 46 px i nadal jest przyklejona,
     - do 600 px belka jest `position: absolute` i odjeżdża razem ze stroną,
       więc maszt wraca na `top: 0`. */
@media screen and (min-width: 783px) {
  body.admin-bar .maszt { top: 32px; }
}

@media screen and (min-width: 601px) and (max-width: 782px) {
  body.admin-bar .maszt { top: 46px; }
}

/* raster — strona główna: slogan, sekcje, kafle */
.slogan { padding: var(--s7) 0 var(--s5); }

.slogan__tytul {
  max-width: 24ch;
  font-size: clamp(30px, 4.6vw, 62px);
  font-weight: 700;
  letter-spacing: -.045em;
}

.sekcja { padding-top: var(--s7); }

/* GŁOWA SEKCJI: numer, nazwa działu, odesłanie do kategorii.
   Kreska pod spodem jest jedynym elementem, który oddziela działy od siebie —
   bez niej cztery sekcje pod rząd czytają się jak jedna lista. */
.sekcja__glowa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}

/* NUMER DZIAŁU JEST OZDOBNIKIEM, NIE TREŚCIĄ.
   W dokumencie stoi z `aria-hidden`, bo czytnikowi ekranu nie mówi nic,
   czego nie mówi nazwa działu tuż obok, a wyliczanka „zero jeden” przed
   każdym nagłówkiem tylko spowalnia słuchanie. */
.sekcja__numer {
  font-family: var(--font-naglowek);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--muted);
}

.sekcja__tytul {
  margin-bottom: var(--s5);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 600;
}

.sekcja__glowa .sekcja__tytul { margin-bottom: 0; }

.sekcja__tytul a:hover { color: var(--accent); }

/* Tytuł sekcji sponsorowanej jest CICHY (wytyczna 12): ma oznaczać, a nie
   zapraszać. Stąd rozmiar tekstu pomocniczego i kolor `--muted`. */
.sekcja__tytul--cichy {
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-tekst);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}

.sekcja__wiecej {
  margin-left: auto;
  font-family: var(--font-naglowek);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.sekcja--sponsorowane { padding: var(--s7) 0 var(--s8); }

/* SIATKI `auto-fit minmax` (wytyczna 16 — mobile-first).
   Liczba kolumn wynika z dostępnej szerokości, a nie z zapytań medialnych,
   więc ten sam kod obsługuje telefon, tablet i monitor. */
.siatka {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.siatka--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Materiały sponsorowane: trzy kolumny zwartych pozycji. Próg 280 px, bo
   pozycja ma stałą miniaturę 104 px plus tytuł — niżej tytuł łamie się na
   dwa znaki w wierszu. */
.siatka--sponsorowane { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* RZĄD PIĘCIU POD OTWARCIEM.
   `auto-fit` z progiem 150 px daje na telefonie dwie kolumny, na tablecie
   trzy, a od 900 px twarde pięć. Twarde, bo przy `auto-fit` szósta kolumna
   wskakiwałaby na szerokim monitorze i rząd przestawałby odpowiadać
   otwarciu nad nim.

   PRÓG 150, NIE 170. Przy 170 px na ekranie 390 px nie mieściły się dwie
   kolumny (170 × 2 + 24 odstępu = 364 > 342 dostępnych) i rząd pięciu
   rozsypywał się na pięć pełnowymiarowych kafli pod sobą — czyli drugie
   „Najnowsze” zaraz pod otwarciem. */
.siatka--swieze {
  margin-top: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

@media (min-width: 900px) {
  .siatka--swieze { grid-template-columns: repeat(5, 1fr); }
}

.kafel { display: flex; flex-direction: column; gap: var(--s3); }

.kafel__tresc { display: flex; flex-direction: column; gap: var(--s2); }

.kafel__dzial {
  font-family: var(--font-naglowek);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.kafel__numer {
  font-family: var(--font-naglowek);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--muted);
}

.kafel__tytul {
  font-family: var(--font-naglowek);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.kafel__tytul a:hover { color: var(--accent); }

.kafel__lead { color: var(--muted); font-size: 14px; }

.kafel__metryczka {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  font-size: 13px;
  color: var(--muted);
}

/* =========================================================
   PROPORCJE KADRÓW

   Ramka trzyma proporcję, zdjęcie ją wypełnia — nie odwrotnie. Zanim tu
   stanęło `aspect-ratio`, wysokość kafla brała się z proporcji pliku, który
   akurat wydał WordPress: dla zdjęcia węższego niż 800 px rdzeń nie tworzy
   przyciętego rozmiaru (nie powiększa), więc podawał oryginał. Zmierzone na
   localhoście: jeden rząd miał kadry 300×169, 300×300, 300×473 i 300×200.

   Proporcja jest więc decyzją ARKUSZA, nie bazy. Zmiana układu nie wymaga
   regeneracji miniatur, bo plik jest zawsze szerszy niż ramka,
   a `object-fit: cover` dobiera wycinek.
   ========================================================= */
.kadr { aspect-ratio: 4 / 3; }

.kafel--otwarcie .kadr { aspect-ratio: 21 / 9; }
.kafel--swiezy .kadr  { aspect-ratio: 16 / 10; }
.kafel--duzy .kadr    { aspect-ratio: 16 / 9; }
.kafel--trio .kadr    { aspect-ratio: 4 / 3; }

/* Na telefonie panorama 21:9 zostawia pasek wysokości 180 px — za mało,
   żeby cokolwiek było na nim widać. Otwarcie wraca tam do 16:9. */
@media (max-width: 599px) {
  .kafel--otwarcie .kadr { aspect-ratio: 16 / 9; }
}

/* =========================================================
   OTWARCIE I RZĄD PIĘCIU
   ========================================================= */
.kafel--otwarcie .kafel__tytul {
  max-width: 28ch;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  letter-spacing: -.03em;
}

.kafel--otwarcie .kafel__lead { max-width: 60ch; font-size: 15px; }

.kafel--swiezy .kafel__tytul {
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
}

/* =========================================================
   UKŁADY DZIAŁOWE

   Dwa, na przemian — patrz komentarz w front-page.php.
   ========================================================= */
.rozklad { display: grid; gap: var(--s6); }

/* DUET: wiodący i kolumna zwartych pozycji.
   Proporcja 7:5, nie 1:1 — przy równych kolumnach kadr 16:9 wiodącego robi
   się niższy od czterech pozycji obok i układ wygląda na przechylony. */
@media (min-width: 900px) {
  .rozklad--duet {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s7);
  }
}

.rozklad__lista {
  display: grid;
  gap: var(--s5);
  align-content: start;
}

.kafel--duzy .kafel__tytul {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -.02em;
}

/* TRIO: trzy kolumny z numerami. */
.rozklad--trio { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.kafel--trio .kafel__tytul { font-size: 18px; }

/* =========================================================
   ZWARTA POZYCJA LISTY
   ========================================================= */
.zwarty {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
}

.zwarty__tresc { display: flex; flex-direction: column; gap: var(--s2); }

.zwarty__tytul {
  font-family: var(--font-naglowek);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
}

.zwarty__tytul a:hover { color: var(--accent); }

/* Pozycja sponsorowana: bez akcentu i bez autora (wytyczna 12). */
.zwarty--cichy .zwarty__tytul a { color: var(--muted); }
.zwarty--cichy .zwarty__tytul a:hover { color: var(--fg); }

/* Kafel sponsorowany: bez akcentu, bez etykiety działu (wytyczna 12). */
.kafel--cichy .kafel__tytul { font-size: 15px; font-weight: 500; }
.kafel--cichy .kafel__tytul a { color: var(--muted); }
.kafel--cichy .kafel__tytul a:hover { color: var(--fg); }

/* raster — wpis

   TREŚĆ PRZYCHODZI BEZ KLAS. Wydawca wypuszcza gołe `<p>`, `<h2>`, `<ul>`,
   `<table>` — dlatego wszystko poniżej celuje w znaczniki wewnątrz `.tresc`,
   a nie w klasy, których w treści nigdy nie będzie. */
.wpis__glowa { padding-top: var(--s3); }

.wpis__dzial {
  margin-bottom: var(--s3);
  font-family: var(--font-naglowek);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.wpis__tytul {
  margin-bottom: var(--s4);
  font-size: clamp(28px, 4.6vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.035em;
  text-wrap: pretty;
}

.wpis__lead {
  margin-bottom: var(--s4);
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
}

.wpis__sponsorowany {
  display: inline-block;
  margin-bottom: var(--s4);
  padding: var(--s1) var(--s3);
  border: 1px solid var(--line-3);
  border-radius: var(--radius);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.wpis__metryczka {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  font-size: 14px;
  color: var(--muted);
}

.wpis__autor { color: var(--fg); }
.wpis__autor:hover { color: var(--accent); }

/* BOHATER WPISU — 4:3, tak jak w makiecie (820 × 614 px przy 1440 px).
   Proporcja stoi na `.kadr`, nie na `<figure>`: ramka ma `overflow: hidden`,
   a `<figure>` niesie jeszcze podpis, który nie może zostać przycięty. */
.wpis__kadr { margin: var(--s6) 0 var(--s5); }

.kadr--bohater { aspect-ratio: 4 / 3; }

/* Na telefonie 4:3 zjada prawie cały ekran, zanim zacznie się tekst. */
@media (max-width: 599px) {
  .kadr--bohater { aspect-ratio: 3 / 2; }
}
.wpis__podpis { margin-top: var(--s2); font-size: 13px; color: var(--muted); }

/* Spis treści (wytyczna 9). */
.spis {
  margin: var(--s6) 0;
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
}

.spis__tytul {
  margin-bottom: var(--s3);
  font-family: var(--font-naglowek);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.spis__lista { margin: 0; padding-left: 1.4em; display: grid; gap: var(--s2); }
.spis__lista a:hover { color: var(--accent); }

/* ===== treść wpisu ===== */

/* RYTM PIONOWY JEDNĄ REGUŁĄ.
   `:where()` po OBU stronach, nie tylko przy liście znaczników: `:where()`
   zeruje wyłącznie własną zawartość, więc `.tresc :where(p, ul)` ma nadal
   wagę (0,1,0) — dokładnie tyle co reguła obok, i o wyniku decydowałaby
   kolejność w pliku. Złapane w tp_atelier. */
:where(.tresc) :where(p, ul, ol, figure, blockquote, table) { margin: 0; }

.tresc > * + * { margin-top: var(--s5); }

.tresc { font-size: 17px; line-height: 1.75; }

.tresc h2 {
  margin-top: var(--s7);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.02em;
  scroll-margin-top: 100px;
}

.tresc h3 {
  margin-top: var(--s6);
  font-size: 21px;
  font-weight: 600;
  scroll-margin-top: 100px;
}

/* Odnośniki W TREŚCI są podkreślone — w zdaniu to jedyny sygnał, że coś
   jest klikalne. `:not([class])` omija bloki edytora z własnym wyglądem. */
.tresc a:not([class]) {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--line-3);
  text-underline-offset: 3px;
}

.tresc a:not([class]):hover { text-decoration-color: var(--accent); }

.tresc ul, .tresc ol { padding-left: 1.6em; }
.tresc li + li { margin-top: var(--s2); }
.tresc li { color: var(--fg); }

.tresc blockquote {
  padding: var(--s4) var(--s5);
  border-left: 2px solid var(--accent);
  background: var(--surface);
  font-size: 19px;
  line-height: 1.5;
}

.tresc blockquote cite {
  display: block;
  margin-top: var(--s3);
  font-size: 14px;
  font-style: normal;
  color: var(--muted);
}

/* TABELE PRZEWIJAJĄ SIĘ SAME, NIE CIĄGNĄ STRONY.
   Szeroka tabela w treści rozpychała całą stronę na telefonie i przewijała
   ją w poziomie — zgłoszone z produkcji w tp_atelier. Otoczkę dokłada
   rst_opakuj_tabele() w inc/tresc.php. */
.tabela-otoczka { overflow-x: auto; }

.tresc table.dane {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
}

.tresc table.dane th,
.tresc table.dane td {
  padding: var(--s3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.tresc table.dane thead th {
  font-family: var(--font-naglowek);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line-3);
}

/* FAQ z bloku edytora (wytyczna 9). */
.tresc details {
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line);
}

.tresc summary {
  font-family: var(--font-naglowek);
  font-weight: 600;
  cursor: pointer;
}

/* Okno redakcji pod wpisem. */
.autor-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  margin-top: var(--s7);
  padding: var(--s5);
  background: var(--surface);
  border-top: 2px solid var(--accent);
}

.autor-box__foto { border-radius: 50%; }
.autor-box__nazwa { font-family: var(--font-naglowek); font-weight: 600; }
.autor-box__opis { margin-top: var(--s2); color: var(--muted); font-size: 15px; }

/* raster — kategoria, autor, wyniki wyszukiwania */
.archiwum__glowa { padding-bottom: var(--s6); }

.archiwum__tytul {
  font-size: clamp(28px, 4.4vw, 46px);
  font-weight: 700;
  letter-spacing: -.03em;
}

.archiwum__opis {
  max-width: 68ch;
  margin-top: var(--s4);
  color: var(--muted);
}

.archiwum__uklad {
  display: grid;
  gap: var(--s7);
  grid-template-columns: 1fr;
}

@media (min-width: 1000px) {
  .archiwum__uklad { grid-template-columns: minmax(0, 1fr) 300px; }
}

.archiwum__lista { display: grid; gap: var(--s6); }

/* Na liście archiwum kafel jest poziomy: zdjęcie obok tekstu. Pionowy
   działałby też, ale przy dwudziestu wpisach strona robi się nieskończona. */
@media (min-width: 640px) {
  .archiwum__lista > .kafel {
    flex-direction: row;
    gap: var(--s5);
    padding-bottom: var(--s6);
    border-bottom: 1px solid var(--line);
  }

  .archiwum__lista > .kafel > .kadr { flex: 0 0 280px; }
}

.autor-glowa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5);
  padding-bottom: var(--s6);
}

.autor-glowa__foto { border-radius: 50%; }

.archiwum__panel { display: grid; gap: var(--s5); align-content: start; }

.widget {
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.widget__tytul {
  margin-bottom: var(--s3);
  font-family: var(--font-naglowek);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.widget ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }
.widget a:hover { color: var(--accent); }

/* PAGINACJA ZE STANEM AKTYWNYM (wytyczna 19).
   Bieżąca strona ma inne tło i nie jest odnośnikiem — czytelnik widzi,
   gdzie jest, bez czytania adresu. */
.pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding-top: var(--s6);
}

.pager .page-numbers {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--s3);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-family: var(--font-naglowek);
  font-size: 14px;
  color: var(--muted);
}

.pager a.page-numbers:hover { border-color: var(--accent); color: var(--accent); }

.pager .page-numbers.current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 600;
}

/* raster — strony służbowe i prawne */
.strona { padding-bottom: var(--s8); }

.strona__tytul {
  margin-bottom: var(--s5);
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 700;
  letter-spacing: -.03em;
}

/* DOKUMENT PRAWNY.

   Podnagłówki MUSZĄ być mniejsze od rozdziałowych. W tp_glam `h3` miał
   dokładnie tyle samo pikseli co `h2` i „3.6 Jak zarządzać cookies” czytało
   się jak nowy rozdział, a nie jak podpunkt rozdziału 3 — zmierzone
   na produkcji. */
.tresc--prawna { font-size: 15px; line-height: 1.7; }

.tresc--prawna h2 {
  margin-top: var(--s7);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
  font-size: 22px;
  scroll-margin-top: 100px;
}

.tresc--prawna h2:first-of-type { margin-top: 0; }

.tresc--prawna h3 {
  margin-top: var(--s5);
  font-size: 17px;
  scroll-margin-top: 100px;
}

.tresc--prawna p, .tresc--prawna li { color: var(--muted); }

/* NUMERY I PUNKTORY W DOKUMENCIE PRAWNYM.
   Regulamin jest zbudowany z list numerowanych i sam się do tych numerów
   odwołuje („zgodnie z zasadami opisanymi w 7 rozdziale”). Bez znaczników
   czytelniczka nie ma jak znaleźć punktu, o którym mowa — tak wyszło
   w tp_glam, gdzie baza motywu zerowała listy globalnie.
   Wcięcie 1.6em mieści dwucyfrowy numer: „10.” przy 15 px zajmuje ~21 px,
   a 1.6em to 24 px. */
.tresc--prawna ul, .tresc--prawna ol { padding-left: 1.6em; }
.tresc--prawna ul > li { list-style: disc; }
.tresc--prawna ol > li { list-style: decimal; }
.tresc--prawna li > ul, .tresc--prawna li > ol { margin-top: var(--s2); }

/* Odnośniki w dokumencie prawnym — odesłania niosą tu treść, więc muszą być
   rozpoznawalne. Forma ta sama, co w treści wpisu. */
.tresc--prawna a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--line-3);
  text-underline-offset: 3px;
}

.tresc--prawna a:hover { text-decoration-color: var(--accent); }

/* Strona kontaktu — klasy WSPÓLNE DLA CAŁEJ SIECI (tp_glam, tp_atelier,
   tp-journal, raster): ten sam znacznik i to samo zdanie, różni się
   wyłącznie warstwa wizualna. */
.kontakt-mail {
  padding: var(--s6);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
}

.kontakt-mail__tekst { margin-bottom: var(--s4); color: var(--muted); }

.kontakt-mail__adres a {
  font-family: var(--font-naglowek);
  font-size: clamp(20px, 5.2vw, 30px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--accent);
  overflow-wrap: anywhere;
}

/* Mapa serwisu (wytyczna 14). */
.mapa__dzial { margin-top: var(--s6); }
.mapa__dzial--poziom-1 { margin-left: var(--s5); }
.mapa__dzial--poziom-2 { margin-left: var(--s6); }

.mapa__tytul {
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
  font-size: 19px;
  font-weight: 600;
}

.mapa__lista { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s2); font-size: 15px; }
.mapa__lista a { color: var(--muted); }
.mapa__lista a:hover { color: var(--accent); }

/* Spis redakcji (wytyczna 6). */
.redakcja__lista { margin: var(--s6) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s5); }

.redakcja__osoba {
  display: flex;
  gap: var(--s4);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
}

.redakcja__foto { border-radius: 50%; flex: none; }
.redakcja__nazwa { font-family: var(--font-naglowek); font-weight: 600; font-size: 18px; }
.redakcja__nazwa a:hover { color: var(--accent); }
.redakcja__opis { margin-top: var(--s2); color: var(--muted); font-size: 15px; }
.redakcja__licznik { margin-top: var(--s2); font-size: 13px; color: var(--muted); }

/* 404 (wytyczna 19). */
.blad { padding: var(--s7) 0 var(--s8); }
.blad__tytul { font-size: clamp(24px, 3.4vw, 36px); font-weight: 700; }
.blad__opis { margin-top: var(--s4); color: var(--muted); }

.blad__dzialy {
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

.blad__dzialy a {
  display: inline-block;
  padding: var(--s2) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-size: 14px;
}

.blad__dzialy a:hover { border-color: var(--accent); color: var(--accent); }

/* raster — banery i linki klientów (wytyczna 1)

   NAZWY KLAS NIE ZAWIERAJĄ „ad”, „reklama” ani „banner”.
   Filtry kosmetyczne blokerów ukrywają `.reklama`, `.foot-ad` i podobne —
   razem z opłaconą kreacją. Sprawdzone w tp_fundament: `.baner`,
   `.pas-banerow` i `.linki-k` przechodzą. */
.pas-banerow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
}

.pas-banerow--maszt {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.pas-banerow--stopka { justify-content: flex-start; padding: var(--s5) 0 0; }

.pas-banerow img { max-width: 100%; height: auto; }

.linki-k {
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s2);
  font-size: 14px;
}

.linki-k a { color: var(--muted); }
.linki-k a:hover { color: var(--accent); }

/* raster — stopka (wytyczna 15)

   Tytuły kolumn to `<p class="stopka__tytul">`, nie nagłówki: stopka stoi
   poza hierarchią nagłówków dokumentu. Wygląd mają nagłówkowy, rolę — nie. */
.stopka {
  margin-top: var(--s8);
  padding: var(--s7) 0 var(--s5);
  background: var(--surface);
  border-top: 1px solid var(--line-2);
}

/* CZTERY RÓWNE KOLUMNY OD 900 px.
   Przy samym `auto-fit` liczba ścieżek wychodziła większa niż liczba kolumn
   (pięć ścieżek na cztery wpisy), a pusta ścieżka oddawała szerokość
   sąsiadowi — kolumna z opisem robiła się dwa razy szersza od pozostałych.
   Zmierzone: 620 px wobec 294 px. */
.stopka__siatka {
  display: grid;
  gap: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

@media (min-width: 900px) {
  .stopka__siatka { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* KOLUMNA Z OPISEM MA SZEROKOŚĆ JEDNEJ KOLUMNY, NIE DWÓCH.
   Przy `span 2` i czterech kolumnach pierwszy rząd był pełny po trzech
   wpisach, a kolumna „Informacje” spadała do drugiego rzędu i stawała
   samotnie pod logo. Makieta ma cztery równe kolumny. */
.stopka__kolumna--opis { grid-column: span 1; }

/* W stopce płyta jest zwykłym prostokątem: nie dotyka żadnej krawędzi,
   więc nie ma czego wygaszać. */
.stopka__logo {
  display: inline-flex;
  padding: var(--s2) var(--s4);
  background: var(--logo-tlo);
}

.stopka__logo .znak { font-size: 19px; }

.stopka__opis { margin-top: var(--s4); color: var(--muted); max-width: 60ch; }

/* Nota o wsparciu AI (wytyczne 10 i 15) — zdanie, nie plakietka: dotyczy
   całego portalu, a nie pojedynczego zdjęcia. */
.stopka__nota-ai {
  margin-top: var(--s3);
  font-size: 13px;
  color: var(--muted);
}

.stopka__tytul {
  margin-bottom: var(--s4);
  font-family: var(--font-naglowek);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.stopka__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s2);
  font-size: 15px;
}

.stopka__lista a { color: var(--fg); }
.stopka__lista a:hover { color: var(--accent); }

.stopka__dol {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}