/*
Theme Name: WYD Magazyn
Theme URI: https://dobreportale.pl/
Author: WYD / DobrePortale.pl
Description: Ultralekki, szybki motyw magazynowy dla portali WYD. Trzy warianty stylistyczne jako warstwa tokenow na jednym szkielecie: 1) Gazetowy (domyslny) — szeryfowa winieta na bezszeryfowej tresci, cieply papier, linie wlosowe; 2) Neutralny — uniwersalna, stonowana skorka (biznes/finanse/ogolnotematyczny), bezszeryfowa, neutralny papier; 3) Technologiczny — chlodna paleta slate, bezszeryfowy, miekkie naroza. Bez kroku budowania, bez zaleznosci zewnetrznych. Dobrze wyglada z obrazkami wyroznionymi i bez nich.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wyd-magazyn
Tags: news, magazine, blog, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/* =========================================================================
   WYD-15 / C1 — Szkielet wariantu 1 (gazetowo-newsowy), warstwa wizualna.

   Zrodlo prawdy wizualnej: makiety B1 (WYD-14) w design/ (tokens.css,
   mockup.css, home.html, post.html) — odebrane bramka QA (WYD-23 = PASS).
   Tokeny B1 zmapowane 1:1 na zmienne --wyd-* (nizej). Charakter kierunku:
   szeryf (display) na naglowkach i winiecie, sans na tresci i UI; cieply
   papier druku; hairline + gruba linia sekcji zamiast cieni; radius 0.

   Kolor akcentu jest jedna zmienna (--wyd-accent) — cala personalizacja
   per-portal (C5 / WYD-19) idzie przez jej nadpisanie. Presety nizej.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens (mapowanie z design/tokens.css — B1)
   ------------------------------------------------------------------------- */
:root {
  /* Kolor akcentu: jedyny wymagany punkt personalizacji per-portal.
     Domyslnie "redakcyjna czerwien" (prasa, sekcje gazety). Podmien
     --wyd-accent + --wyd-accent-ink, reszta jest z nich wyprowadzona. */
  --wyd-accent:        #a6231f;
  --wyd-accent-strong: #7f1a17;
  --wyd-accent-soft:   #f4e4e2;
  --wyd-accent-ink:    #ffffff;   /* tekst NA akcencie                          */
  /* Akcent uzyty jako MALY tekst na papierze (kicker, „Wiecej"). Domyslnie =
     akcent (czerwien 6,98:1 > 4,5:1). Dla wlasnego akcentu PHP wyprowadza
     wariant >=4,5:1 vs --wyd-bg (wyd_darken_to_contrast), by nie zlamac AA. */
  --wyd-accent-text:   #a6231f;

  /* Papier i tusz (baza newsowa: ciepla biel druku + niemal-czern). */
  --wyd-bg:      #fbfaf7;   /* tlo strony — cieply papier                 */
  --wyd-bg-2:    #f3f1ea;   /* tlo sekcji naprzemiennych / wyroznionych   */
  --wyd-bg-3:    #eceae1;   /* baza zastepnika obrazka                     */
  --wyd-ink:     #16161a;   /* tekst glowny                               */
  --wyd-ink-2:   #3b3b42;   /* tekst drugorzedny                          */
  --wyd-ink-3:   #6a6a72;   /* meta: daty, autorzy, podpisy               */

  /* Linie — rytm gazety. */
  --wyd-rule:        #dfdcd2;   /* wlosowa (hairline)                     */
  --wyd-rule-strong: #16161a;   /* gruba linia pod naglowkiem sekcji      */
  --wyd-line:        var(--wyd-rule);   /* alias zgodnosci                */

  /* Obrys KONTROLEK INTERAKTYWNYCH (pola formularzy, wyszukiwarka) — WYD-153.
     Osobny token, bo --wyd-rule to dekoracja (WCAG 1.4.11 jej nie dotyczy),
     a granica pola formularza jest komponentem UI i wymaga >= 3:1 wzgledem
     WNETRZA pola (#fff) ORAZ tla strony za polem. Ten ciepły szary daje
     3,68:1 (#fff), 3,53:1 (papier #fbfaf7), 3,26:1 (bg-2 #f3f1ea) — z zapasem
     w kazdej kombinacji wariantu i skorki. Dekoracyjne wlosowki motywu
     (karty, rail, nawigacja, stopka) zostaja na --wyd-rule bez zmian. */
  --wyd-control-rule: #8a8578;

  /* Sygnaly stanu. */
  --wyd-fresh: #0f7b4a;   /* swiezosc: swiezy / zaktualizowany wpis        */
  /* Blad walidacji formularza (WYD-151). Celowo NIE pochodna --wyd-accent:
     akcent bywa per portal zielony/niebieski, a blad ma czytac sie jak blad.
     Kontrast na tlach motywu: 6,54:1 (#fff), 6,26:1 (papier), 5,78:1 (bg-2). */
  --wyd-invalid: #b3261e;

  /* Typografia — display (szeryf) na naglowkach, sans na tresci i UI.
     Domyslnie stacki systemowe: zero requestow, zero wagi. Ewentualny
     jeden self-hostowany szeryf do winiety — decyzja przy budzecie wagi. */
  --wyd-font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
                      Georgia, "Times New Roman", serif;
  --wyd-font-sans:    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                      Roboto, "Helvetica Neue", Arial, sans-serif;
  --wyd-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas,
                      "Liberation Mono", monospace; /* systemowy, zero pobierania */
  --wyd-font-head: var(--wyd-font-display); /* naglowki, tytuly, winieta  */
  --wyd-font-body: var(--wyd-font-sans);    /* tresc czytana              */
  --wyd-font-meta: var(--wyd-font-sans);    /* kickery, nawigacja, etykiety */

  /* Skala rozmiarow (fluid, clamp). rem wzgledem 16px. */
  --wyd-fs-kicker: 0.72rem;
  --wyd-fs-meta:   0.8rem;
  --wyd-fs-xs:     0.75rem;
  --wyd-fs-sm:     0.875rem;
  --wyd-fs-base:   1.0625rem;
  --wyd-fs-lg:     clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --wyd-fs-h3:     clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  --wyd-fs-h2:     clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  --wyd-fs-h1:     clamp(1.9rem, 1.4rem + 2.6vw, 3rem);
  --wyd-fs-lead:   clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  --wyd-fs-display: clamp(2.2rem, 1.6rem + 3vw, 3.5rem); /* winieta       */

  /* Interlinie. */
  --wyd-lh-tight: 1.14;   /* naglowki szeryf                              */
  --wyd-lh-snug:  1.3;
  --wyd-line-h:   1.62;   /* tekst czytany                                */

  /* Rytm / odstepy (skala 4px). */
  --wyd-space-1: 0.25rem;
  --wyd-space-2: 0.5rem;
  --wyd-space-3: 0.75rem;
  --wyd-space-4: 1rem;
  --wyd-space-5: 1.5rem;
  --wyd-space-6: 2rem;
  --wyd-space-7: 3rem;
  --wyd-space-8: 4rem;

  /* Uklad. */
  --wyd-container: 1200px;
  --wyd-container-narrow: 720px;
  --wyd-radius: 0;        /* zero zaokraglen — dyscyplina druku           */
  --wyd-hairline: 1px solid var(--wyd-rule);
}

/*
 * PRESETY AKCENTU (personalizacja per-portal — Faza C5/E).
 * Dodaj klase na <html> (np. <html class="accent-navy">) albo nadpisz
 * same zmienne. Caly motyw przestraja sie z jednej zmiennej.
 */
.accent-navy   { --wyd-accent:#123a63; --wyd-accent-strong:#0d2c4c;
                 --wyd-accent-soft:#e2e9f1; --wyd-accent-ink:#fff; --wyd-accent-text:#123a63; }
.accent-forest { --wyd-accent:#1f6b3b; --wyd-accent-strong:#164f2b;
                 --wyd-accent-soft:#e2efe7; --wyd-accent-ink:#fff; --wyd-accent-text:#1f6b3b; }
/* graph: akcent #b5651d = 4,15:1 na papierze (<4,5:1), wiec tekst = ciemniejszy #8c4e16 (6,26:1). */
.accent-graph  { --wyd-accent:#b5651d; --wyd-accent-strong:#8c4e16;
                 --wyd-accent-soft:#f5e8d9; --wyd-accent-ink:#fff; --wyd-accent-text:#8c4e16; }

/* -------------------------------------------------------------------------
   1b. Warianty stylistyczne (WYD-112) — warstwa na gotowym szkielecie.

   Zamawiane sa dokladnie dwa dodatkowe warianty: NEUTRALNY i TECHNOLOGICZNY.
   Kazdy to WYLACZNIE nadpisanie tokenow --wyd-* pod klasa na <body> (+ kilka
   drobnych korekt „tells" gazety, ktorych nie da sie wyrazic tokenem: gruba/
   podwojna linia pod winieta i sekcja -> linia wlosowa). Szablony i logika PHP
   pozostaja NIETKNIETE. Wariant wybiera sie w Personalizatorze -> klasa na <body>:
     (brak klasy)            = Wariant 1 „Gazetowy" (domyslny, tokeny :root wyzej)
     .wyd-variant--neutralny = Wariant 2 „Neutralny / ogolny"
     .wyd-variant--tech      = Wariant 3 „Technologiczny"

   Kolor akcentu jest ORTOGONALNY do wariantu — to jedyny punkt personalizacji
   per-portal (picker akcentu emituje :root{--wyd-accent…} inline). Warianty NIE
   nadpisuja tokenow akcentu, wiec picker dziala identycznie w kazdym wariancie,
   a wyprowadzana w PHP korekta AA (--wyd-accent-text) pozostaje wazna.

   Niezmiennik kontrastu: kazdy wariant trzyma --wyd-bg oraz --wyd-bg-2 o
   luminancji >= domyslnego tla sekcji v1 (#f3f1ea ≈ 0,879), a ink/ink-2/ink-3
   >= 4,5:1 na obu tlach — margines akcentu-tekstu (wyprowadzanego vs --wyd-bg)
   nie gorszy niz w odebranym wariancie 1. --wyd-bg-3 hostuje wylacznie
   zastepnik obrazka (.wyd-card__media, zero tekstu) -> nie podlega progowi.
   Zweryfikowane pomiarowo (tools/verify-theme.sh, sekcja WYD-112).
   ------------------------------------------------------------------------- */

/* Wariant 2 — „Neutralny / ogolny": uniwersalna, stonowana skorka dla portali
   biznesowych, finansowych i ogolnotematycznych. Mniej „gazetowa" niz v1:
   bezszeryfowe naglowki i winieta, neutralny (nie cieply) papier, linie
   wlosowe zamiast grubych, minimalne zaokraglenie. */
body.wyd-variant--neutralny {
  --wyd-font-display: var(--wyd-font-sans);   /* winieta bezszeryfowa        */
  --wyd-font-head:    var(--wyd-font-sans);   /* naglowki bezszeryfowe       */
  --wyd-font-body:    var(--wyd-font-sans);

  --wyd-bg:    #ffffff;   /* czysta biel                                     */
  --wyd-bg-2:  #f4f5f7;   /* neutralne tlo sekcji naprzemiennych             */
  --wyd-bg-3:  #e9ebee;   /* baza zastepnika obrazka                         */
  --wyd-ink:   #1a1c20;   /* neutralny prawie-czarny                         */
  --wyd-ink-2: #3d4249;   /* neutralny grafit                                */
  --wyd-ink-3: #616872;   /* neutralna meta, >= 4,5:1 na bieli i na bg-2     */

  --wyd-rule:        #e4e6e9;   /* neutralna wlosowa                         */
  --wyd-rule-strong: #1a1c20;
  /* Obrys kontrolek w chlodnej, neutralnej gamie (WYD-153):
     3,61:1 (#fff), 3,31:1 (bg-2 #f4f5f7). */
  --wyd-control-rule: #83878c;

  --wyd-radius: 2px;            /* ledwie zmiekczone naroza — nie „druk"     */
  --wyd-line-h: 1.65;
}
/* Tells: gazetowe grube/podwojne linie -> pojedyncza linia wlosowa. */
body.wyd-variant--neutralny .wyd-header-main { border-bottom: 1px solid var(--wyd-rule); }
body.wyd-variant--neutralny .wyd-section__head,
body.wyd-variant--neutralny .wyd-rail,
body.wyd-variant--neutralny .wyd-rail__head,
body.wyd-variant--neutralny .wyd-ticker { border-top-width: 1px; border-bottom-width: 1px; }
body.wyd-variant--neutralny .wyd-section__head,
body.wyd-variant--neutralny .wyd-rail__head { border-bottom-color: var(--wyd-rule); }

/* Wariant 3 — „Technologiczny": chlodna paleta slate, w calosci bezszeryfowy,
   miekkie naroza kart/pigulek, cyanowy sygnal swiezosci, cienkie linie zamiast
   grubych/podwojnych. Portal produktowo-technologiczny. */
body.wyd-variant--tech {
  /* Tell technologiczny (WYD-122): winieta + kickery/nawigacja/etykiety w
     systemowym monospace (--wyd-font-mono, zero pobierania). To jednoznacznie
     odroznia wariant tech od neutralnego, ktory zostaje w czystym sansie.
     Naglowki i tresc czytana pozostaja bezszeryfowe — monospace tylko w
     chromie UI (winieta, meta), gdzie „terminalowy" charakter jest czytelny
     i nie szkodzi czytelnosci dluzszych tytulow ani akapitow. */
  --wyd-font-display: var(--wyd-font-mono);   /* winieta monospace            */
  --wyd-font-meta:    var(--wyd-font-mono);   /* kickery, nav, etykiety, meta  */
  --wyd-font-head: var(--wyd-font-sans);   /* naglowki bezszeryfowe          */
  --wyd-font-body: var(--wyd-font-sans);

  --wyd-bg:    #ffffff;   /* chlodna biel                                    */
  --wyd-bg-2:  #f5f7f9;   /* chlodne tlo sekcji naprzemiennych               */
  --wyd-bg-3:  #e6ebf1;   /* baza zastepnika obrazka                         */
  --wyd-ink:   #0f172a;   /* grafit chlodny (slate-900)                      */
  --wyd-ink-2: #334155;   /* slate-700                                       */
  --wyd-ink-3: #556070;   /* slate meta, >= 4,5:1 na bieli i na bg-2         */

  --wyd-rule:        #e3e8ee;   /* chlodna wlosowa                           */
  --wyd-rule-strong: #0f172a;
  /* Obrys kontrolek w gamie slate (WYD-153):
     3,60:1 (#fff), 3,35:1 (bg-2 #f5f7f9). */
  --wyd-control-rule: #7d8896;
  --wyd-fresh:       #0e7490;   /* cyan-700 — sygnal swiezosci (nie akcent)  */

  --wyd-radius: 8px;            /* miekkie naroza — jezyk UI produktowego    */
  --wyd-line-h: 1.65;
}
/* Winieta monospace ma szerokie glify z wlasnym swiatlem — ujemny tracking
   winiety (-0.02em) ja sciska; zerujemy go dla tego wariantu. */
body.wyd-variant--tech .wyd-site-title { letter-spacing: 0; }
/* Tells: gazetowe grube/podwojne linie -> cienkie, nowoczesne. */
body.wyd-variant--tech .wyd-header-main { border-bottom: 1px solid var(--wyd-rule); }
body.wyd-variant--tech .wyd-section__head,
body.wyd-variant--tech .wyd-rail,
body.wyd-variant--tech .wyd-rail__head,
body.wyd-variant--tech .wyd-ticker { border-top-width: 1px; border-bottom-width: 1px; }
body.wyd-variant--tech .wyd-section__head,
body.wyd-variant--tech .wyd-rail__head { border-bottom-color: var(--wyd-rule); }

/* -------------------------------------------------------------------------
   1c. Biale tlo (opcja Customizera, WYD-122).

   Wariant gazetowy stoi domyslnie na cieplym papierze (--wyd-bg #fbfaf7).
   Portale, ktore chca czystej bieli zamiast kremu, wlaczaja opcje „Biale tlo"
   w Personalizatorze -> klasa .wyd-bg--white na <body> nadpisuje WYLACZNIE
   tokeny papieru na neutralna biel (tusz, akcent i linie bez zmian). Warianty
   neutralny/tech juz stoja na bieli — dla nich to normalizacja do tej samej
   neutralnej gamy szarosci, wiec opcja jest bezpieczna niezaleznie od wariantu.

   Niezmiennik AA zachowany: bg-2 (#f4f5f7 ≈ 0,930) jest jasniejsze od
   domyslnego #f3f1ea (≈ 0,879), a akcent-tekst wyprowadzany jest w PHP wzgledem
   ciemniejszego #f3f1ea — na bieli ma zatem tylko WYZSZY kontrast. */
body.wyd-bg--white {
  --wyd-bg:   #ffffff;
  --wyd-bg-2: #f4f5f7;
  --wyd-bg-3: #e9ebee;
}

/* -------------------------------------------------------------------------
   2. Reset / podstawy
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--wyd-bg);
  color: var(--wyd-ink);
  font-family: var(--wyd-font-body);
  font-size: var(--wyd-fs-base);
  line-height: var(--wyd-line-h);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wyd-font-head);
  line-height: var(--wyd-lh-tight);
  color: var(--wyd-ink);
  margin: 0 0 var(--wyd-space-3);
  font-weight: 700;
  letter-spacing: -0.01em;
}

p { margin: 0 0 var(--wyd-space-4); }

/* Dostepnosc: widoczny focus (WCAG 2.2). */
:focus-visible {
  outline: 3px solid var(--wyd-accent);
  outline-offset: 2px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--wyd-ink);
  color: #fff;
  padding: var(--wyd-space-3) var(--wyd-space-4);
}
.skip-link:focus { left: var(--wyd-space-2); top: var(--wyd-space-2); }

/* -------------------------------------------------------------------------
   3. Layout / kontener
   ------------------------------------------------------------------------- */
.wyd-container {
  width: 100%;
  max-width: var(--wyd-container);
  margin-inline: auto;
  padding-inline: var(--wyd-space-4);
}

.wyd-main { padding-block: var(--wyd-space-6); }

.wyd-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wyd-space-7);
}

.wyd-section { margin-bottom: var(--wyd-space-7); }

/* Rytm strony: sekcja na naprzemiennym papierze (gestosc "wydania"). */
.wyd-section--alt {
  background: var(--wyd-bg-2);
  padding-block: var(--wyd-space-6);
  margin-inline: calc(-1 * var(--wyd-space-4));
  padding-inline: var(--wyd-space-4);
}

.wyd-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wyd-space-3);
  border-bottom: 2px solid var(--wyd-rule-strong);
  padding-bottom: var(--wyd-space-2);
  margin-bottom: var(--wyd-space-5);
}
.wyd-section__title {
  font-family: var(--wyd-font-head);
  font-size: var(--wyd-fs-h2);
  margin: 0;
}
.wyd-section__more {
  font-family: var(--wyd-font-meta);
  font-size: var(--wyd-fs-kicker);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wyd-accent-text); /* maly tekst -> token gwarantujacy AA na papierze */
  font-weight: 700;
  white-space: nowrap;
}
.wyd-section__more:hover { color: var(--wyd-accent-strong); }

/* -------------------------------------------------------------------------
   4. Header — pasek uzytkowy + winieta + nawigacja
   ------------------------------------------------------------------------- */
.wyd-site-header { background: var(--wyd-bg); }

/* Pasek uzytkowy: ciemny, dateline + zaplecze zaufania (C2). */
.wyd-topbar {
  background: var(--wyd-ink);
  color: #d8d6cf;
  font-family: var(--wyd-font-meta);
  font-size: var(--wyd-fs-meta);
}
.wyd-topbar a { color: #d8d6cf; }
.wyd-topbar a:hover { color: #fff; }
.wyd-topbar .wyd-container { display: flex; justify-content: space-between; align-items: center; min-height: 38px; gap: var(--wyd-space-4); }
.wyd-topbar__date { text-transform: capitalize; letter-spacing: 0.02em; }

/* Winieta (masthead): podwojna linia pod spodem — tell "wydania". */
.wyd-header-main { border-bottom: 3px double var(--wyd-rule-strong); }
.wyd-header-main .wyd-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wyd-space-4);
  padding-block: var(--wyd-space-5);
}
.wyd-branding { display: flex; align-items: baseline; gap: var(--wyd-space-3); flex-wrap: wrap; }
.wyd-site-title {
  font-family: var(--wyd-font-display);
  font-size: var(--wyd-fs-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}
.wyd-site-title a:hover { text-decoration: none; }
.wyd-site-description {
  font-family: var(--wyd-font-meta);
  font-size: var(--wyd-fs-meta);
  color: var(--wyd-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: 0;
}
.wyd-custom-logo-link img { max-height: 64px; width: auto; }

/* Nawigacja sekcji. */
.wyd-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--wyd-space-2);
  background: none;
  border: 1px solid var(--wyd-rule-strong);
  border-radius: var(--wyd-radius);
  padding: var(--wyd-space-2) var(--wyd-space-3);
  font-family: var(--wyd-font-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--wyd-fs-xs);
  cursor: pointer;
  color: var(--wyd-ink);
}
.wyd-primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--wyd-space-5); }
.wyd-primary-nav a,
.wyd-menu__more-toggle {
  font-family: var(--wyd-font-meta);
  font-weight: 700;
  font-size: var(--wyd-fs-kicker);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding-block: var(--wyd-space-3);
  display: inline-block;
  border-bottom: 3px solid transparent;
}
.wyd-primary-nav a:hover { color: var(--wyd-accent); text-decoration: none; border-bottom-color: var(--wyd-accent); }
.wyd-primary-nav .current-menu-item > a { color: var(--wyd-ink); border-bottom-color: var(--wyd-accent); }

/* Priority+ — nadmiar kategorii pod przyciskiem "Wiecej" (WYD-56). */
.wyd-menu__more { position: relative; }
.wyd-menu__more[hidden] { display: none; }
.wyd-menu__more-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--wyd-space-2);
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--wyd-ink);
}
.wyd-menu__more-toggle:hover { color: var(--wyd-accent); border-bottom-color: var(--wyd-accent); }
.wyd-menu__caret { font-size: 0.75em; line-height: 1; transition: transform 0.15s ease; }
.wyd-menu__more.is-open .wyd-menu__caret { transform: rotate(180deg); }
/* Prefiks .wyd-primary-nav dla specyficznosci — inaczej ".wyd-primary-nav ul"
   (0,1,1) wygralby z regula pojemnika (0,1,0) i panel bylby zawsze widoczny. */
.wyd-primary-nav .wyd-menu__overflow {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 60;
  min-width: 13rem;
  flex-direction: column;
  gap: 0;
  padding: var(--wyd-space-2) 0;
  background: var(--wyd-bg);
  border: 1px solid var(--wyd-rule);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
}
.wyd-primary-nav .wyd-menu__more.is-open .wyd-menu__overflow { display: flex; }
.wyd-primary-nav .wyd-menu__overflow li { display: block; border-top: 0; }
.wyd-primary-nav .wyd-menu__overflow a {
  display: block;
  padding: var(--wyd-space-2) var(--wyd-space-4);
  border-bottom: 0;
}

/* -------------------------------------------------------------------------
   5. Breadcrumbs
   ------------------------------------------------------------------------- */
.wyd-breadcrumbs {
  font-family: var(--wyd-font-meta);
  font-size: var(--wyd-fs-meta);
  color: var(--wyd-ink-3);
  margin-bottom: var(--wyd-space-5);
}
.wyd-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--wyd-space-2); margin: 0; padding: 0; }
.wyd-breadcrumbs li { display: inline-flex; align-items: center; gap: var(--wyd-space-2); }
.wyd-breadcrumbs li + li::before { content: "\203A"; color: var(--wyd-ink-3); }
.wyd-breadcrumbs a:hover { color: var(--wyd-accent); }
.wyd-breadcrumbs [aria-current="page"] { color: var(--wyd-ink-2); }

/* -------------------------------------------------------------------------
   6. Karty wpisow (dzialaja z obrazkiem i bez)
   ------------------------------------------------------------------------- */
.wyd-card { display: flex; flex-direction: column; gap: var(--wyd-space-3); }
.wyd-card__media { position: relative; overflow: hidden; border-radius: var(--wyd-radius); background: var(--wyd-bg-3); aspect-ratio: 16 / 9; }
.wyd-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.wyd-card:hover .wyd-card__media img { transform: scale(1.04); }

/* Tryb B — karta BEZ obrazka wyroznionego (WYD-75 / uwaga 9). Zero kolorowych
   kwadratow: karta jest tekstowo-typograficzna (kicker + tytul + lead + meta).
   Tozsamosc niesie kolor kategorii (--wyd-cat-accent) na kickerze plus cienki
   znacznik pod nim — nigdy pelny prostokat. Karta bez media nie rezerwuje
   miejsca na obrazek, wiec w siatce po prostu jest nizsza. */
.wyd-card--textonly .wyd-card__kicker {
  display: inline-block;
  /* WYD-90 — cel dotykowy >=24px (WCAG 2.2 AA 2.5.8 target-size). WYD-80
     zakladalo, ze textonly osiaga 24px przez sam padding+obramowanie, ale
     wysokosc linii bywa mniejsza (mierzone 19,6–21,6px) i axe zglasza 16
     kickerow jako "serious". Dwa niezalezne warunki daja odporny cel:
     - min-height (box-sizing:border-box jest globalny) podloga box >=24px,
       niezaleznie od zmiennej wysokosci linii;
     - margin-block-end odsuwa link tytulu, ktorego leading nachodzil ~3px na
       kicker (axe: "partially obscured", wolna strefa 21,6px < 24) — bez tego
       samo min-height rosnie w dol i nie zwieksza wolnej strefy nad tytulem.
     Zmierzone axe target-size=0 na 1440/768/375, wolna strefa 25,6px. Zero
     zmian dla kart media (przechodza odstepem), bez wplywu na CLS. */
  min-height: 24px;
  margin-block-end: var(--wyd-space-1);
  padding-bottom: var(--wyd-space-1);
  border-bottom: 2px solid var(--wyd-cat-accent, var(--wyd-accent-text));
}

/* WYD-95 — dopelnienie WYD-90 dla karty LEAD bez obrazka. WYD-90 skalibrowal
   odstep (space-1 = 4px) pod ZWYKLY tytul karty (fs-lg, line-height ~25px):
   wolna strefa nad kickerem wychodzila ~25,6px. Ale tytul karty lead uzywa
   duzo wiekszego fontu (fs-lead, na 1440px ~41,6px, line-height ~47,4px), wiec
   jego line-box nachodzi leadingiem WYZEJ — az 1px NAD spod kickera. Zmierzona
   wolna strefa (titleTop - kickerTop) = 23,64px < 24 -> axe 'target-size'
   serious na 1 wezle (najbardziej eksponowana karta glowna home w buildzie bez
   zdjec). Fix: wiekszy odstep dla karty LEAD (space-2 = 8px), tyle ile realnie
   odsuwa powiekszony leading. Zmierzone: titleTop schodzi o ~4px -> wolna strefa
   ~27,6px (>= zwykle karty), axe target-size=0 na 1440/768/375. Statyczny CSS,
   bez JS -> CLS bez zmian.

   WYD-105: przyczyna (powiekszony font tytulu leadu, fs-lead) jest wspolna dla
   obu trybow karty. Build A (ze zdjeciami) ma lead media i tam kicker rowniez
   byl nachodzony leadingiem tytulu -> axe target-size serious na 1 wezle
   (.wyd-card--lead > .wyd-card__body > .wyd-card__kicker, desktop). Dlatego
   selektor obejmuje LEAD w obu trybach (bylo .wyd-card--lead.wyd-card--textonly),
   a nie tylko textonly. WAZNA KOLEJNOSC: ta regula MUSI stac PO regule trybu
   media (nizej), bo ma ta sama specyficznosc (0,2,0) i tylko pozniejsza w
   zrodle wygrywa margin-block-end; inaczej media (space-1) nadpisywalby
   space-2 na lead media i axe dalej zglaszalby ~23px. Zmierzone: build A
   target-size=0 na 1440/768/375. */

/* WYD-105 — cel dotykowy kickera w kartach Z OBRAZKIEM (build A dema, WCAG 2.2
   AA 2.5.8 target-size). Kicker media byl display:inline (~18,7px < 24px) ->
   axe target-size "serious" na home ze zdjeciami. Wyrownujemy do rozwiazania
   kart bez obrazka (WYD-90): min-height:24px podloga box (box-sizing:border-box
   globalny) + margin-block-end odsuwa leading tytulu, ktory nachodzil na kicker
   (bez tego sama podloga rosnie w dol i nie zwieksza wolnej strefy nad tytulem).
   BEZ border-bottom (to znacznik trybu textonly) i bez zmiany layoutu kart. */
.wyd-card--media .wyd-card__kicker {
  display: inline-block;
  min-height: 24px;
  margin-block-end: var(--wyd-space-1);
}

/* Lead override — po regulach trybu (textonly/media), zeby wygrac odstep. */
.wyd-card--lead .wyd-card__kicker {
  margin-block-end: var(--wyd-space-2);
}

.wyd-card__kicker {
  font-family: var(--wyd-font-meta);
  font-size: var(--wyd-fs-kicker);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* Delikatny akcent per kategoria (WYD-75); brak zmiennej = token AA motywu. */
  color: var(--wyd-cat-accent, var(--wyd-accent-text)); /* maly tekst -> AA na papierze */
}
.wyd-card__kicker:hover { color: var(--wyd-cat-accent, var(--wyd-accent-strong)); text-decoration: underline; }
.wyd-card__title {
  font-family: var(--wyd-font-head);
  font-size: var(--wyd-fs-lg);
  margin: 0;
  line-height: var(--wyd-lh-tight);
  /* Clamp + stabilna wysokosc: rozna dlugosc tytulu nie rozjezdza
     siatki (A1 §3, zero CLS). */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wyd-card__title a:hover { color: var(--wyd-accent); text-decoration: none; }
.wyd-card__excerpt { color: var(--wyd-ink-2); font-size: var(--wyd-fs-sm); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.wyd-entry-meta {
  font-family: var(--wyd-font-meta);
  font-size: var(--wyd-fs-meta);
  color: var(--wyd-ink-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wyd-space-3);
}
.wyd-entry-meta a:hover { color: var(--wyd-accent); }
.wyd-entry-meta .wyd-dot { color: var(--wyd-rule); }

/* Sygnal swiezosci (zielony punkt) — najtanszy dowod, ze portal zyje. */
.wyd-fresh { color: var(--wyd-fresh); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.wyd-fresh::before { content: "\25CF"; font-size: 0.6em; }

/* Wariant "lead" — glowny material na home. Tytul glowny BEZ clampu: to jest
   naglowek wydania i nie moze byc uciety (uwaga zarzadu WYD-99). Pelen tytul jest
   renderowany po stronie serwera i obecny od pierwszej klatki -> nie powoduje
   CLS (rozna dlugosc zmienia tylko wysokosc jednego, gornego materialu, nie
   przesuwa juz zaladowanej tresci). */
.wyd-lead__primary .wyd-card__title { font-size: var(--wyd-fs-lead); font-weight: 700; letter-spacing: -0.02em; display: block; -webkit-line-clamp: none; overflow: visible; }
.wyd-lead__primary .wyd-card__excerpt { font-size: var(--wyd-fs-lg); color: var(--wyd-ink-2); -webkit-line-clamp: 3; }

/* Hero home = jeden duzy, najnowszy material (primary) + kolumna 2-3 mniejszych
   kart PO PRAWEJ (secondary), uklad przywrocony na zyczenie zarzadu (WYD-99;
   cofniecie poziomego hero z WYD-87). Primary jest PIONOWY (obraz 16/9 na gorze,
   pelen tytul pod nim) i NIGDY nie jest rozciagany — to byl defekt A z WYD-81
   ("najwiekszy obrazek pionowy"). Kolumny primary|secondary wlaczaja sie od
   tabletu (sekcja responsywna); na mobile wszystko stackuje.

   Brak pustego pola (defekt B z WYD-81): primary tekstowy (build bez zdjec)
   rozciaga sie na wysokosc hero (flex:1), a rail ma 4 pozycje i miesci sie w
   wysokosci hero -> hero pozostaje najwyzsza kolumna, wiec pod glowna sekcja
   nie ma pustki (mierzone mainVoid=0 na obu buildach).

   WAZNE (WYD-102): tresc leadu bez miniatury GRUPUJE SIE U GORY karty; luz
   wysokosci (do wysokosci raila) schodzi POD podpis, nie miedzy zajawke a
   podpis. Wczesniej `margin-top:auto` spychal podpis na sam dol -> ~320px
   martwego bialego pasa w srodku karty (uwaga zarzadu na WYD-36). Karta jest
   bezramkowa, wiec luz pod podpisem czyta sie jak naturalny margines sekcji,
   a nie jak zepsuta dziura. Build ze zdjeciami jest nietkniety (regula dotyczy
   tylko `.wyd-card--textonly`). */
.wyd-lead__primary { display: flex; }
.wyd-lead__primary > .wyd-card { flex: 1; }
.wyd-lead__primary .wyd-card--textonly .wyd-card__body { flex: 1; display: flex; flex-direction: column; }

/* Karty poboczne: kompaktowe, poziome (miniatura obok tytulu), ulozone w
   kolumnie z cienkimi liniami — "mniejsze po prawej". Bez zajawki (gestosc). */
.wyd-lead__secondary { display: flex; flex-direction: column; gap: var(--wyd-space-4); }
.wyd-lead__secondary .wyd-card {
  flex-direction: row;
  gap: var(--wyd-space-4);
  align-items: flex-start;
  padding-bottom: var(--wyd-space-4);
  border-bottom: var(--wyd-hairline);
}
.wyd-lead__secondary .wyd-card:last-child { border-bottom: 0; padding-bottom: 0; }
.wyd-lead__secondary .wyd-card__media-link { flex: 0 0 40%; }
.wyd-lead__secondary .wyd-card__body { flex: 1 1 auto; min-width: 0; }
.wyd-lead__secondary .wyd-card__title { font-size: var(--wyd-fs-base); -webkit-line-clamp: 3; }

/* Wariant "rzeka" — gesta lista. */
.wyd-river { display: grid; gap: 0; }
.wyd-river .wyd-card {
  flex-direction: row;
  gap: var(--wyd-space-4);
  padding-block: var(--wyd-space-4);
  border-top: var(--wyd-hairline);
  align-items: flex-start;
}
.wyd-river .wyd-card:first-child { border-top: 0; padding-top: 0; }
.wyd-river .wyd-card__media { flex: 0 0 120px; aspect-ratio: 4 / 3; margin: 0; }
.wyd-river .wyd-card__title { font-size: var(--wyd-fs-base); -webkit-line-clamp: 2; }
.wyd-river .wyd-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--wyd-space-2); }

/* Siatka. */
.wyd-grid { display: grid; grid-template-columns: 1fr; gap: var(--wyd-space-6); }

/* Bloki sekcji strony glownej i modul "Czytaj takze" pytaja o 3 wpisy, ale
   moga zwrocic mniej (np. kategoria z 2 wpisami) — a przy 2 kolumnach 3 wpisy
   zostawiaja osierocona, pusta komorke. Uklad flex z wysrodkowaniem ostatniego
   rzedu likwiduje martwa komorke i trzyma rowna szerokosc kart. Nie dotyczy
   glownych siatek list (index/archiwum/kategoria) — te sa w .wyd-container,
   nie w .wyd-section, wiec zachowuja czyste 2x2. */
.wyd-section .wyd-grid--3 { display: flex; flex-wrap: wrap; justify-content: center; }
.wyd-section .wyd-grid--3 > * { flex: 0 1 100%; }

/* -------------------------------------------------------------------------
   7. Hero strony glownej (lead + poboczne + rail swiezosci)
   ------------------------------------------------------------------------- */
.wyd-lead { display: grid; grid-template-columns: 1fr; gap: var(--wyd-space-6); }
/* Hero = primary (duzy material) OBOK kolumny mniejszych kart (WYD-99). Mobile:
   wszystko w jednej kolumnie; podzial primary|secondary wlacza sie od tabletu. */
.wyd-lead__hero { display: grid; grid-template-columns: 1fr; gap: var(--wyd-space-6); }

/* Rail "Najnowsze na zywo" — numerowana lista swiezosci (A1 §5.2). */
.wyd-rail { border-top: 2px solid var(--wyd-rule-strong); padding-top: var(--wyd-space-4); }
.wyd-rail__head {
  font-family: var(--wyd-font-head);
  font-size: var(--wyd-fs-h3);
  border-bottom: 2px solid var(--wyd-rule-strong);
  padding-bottom: var(--wyd-space-2);
  margin: 0 0 var(--wyd-space-3);
  display: flex; align-items: baseline; gap: var(--wyd-space-2);
}
.wyd-rail__head .wyd-fresh { font-family: var(--wyd-font-meta); font-size: var(--wyd-fs-meta); }
.wyd-ranklist { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.wyd-ranklist li {
  counter-increment: rank;
  display: grid;
  grid-template-columns: 1.8rem 1fr;
  gap: var(--wyd-space-3);
  padding: var(--wyd-space-3) 0;
  border-bottom: var(--wyd-hairline);
}
.wyd-ranklist li:last-child { border-bottom: 0; }
.wyd-ranklist li::before {
  content: counter(rank);
  font-family: var(--wyd-font-display);
  font-size: var(--wyd-fs-h3);
  color: var(--wyd-accent);
  line-height: 1;
}
.wyd-ranklist__title { font-family: var(--wyd-font-head); font-weight: 700; line-height: var(--wyd-lh-snug); font-size: var(--wyd-fs-base); display: block; }
.wyd-ranklist__title:hover { color: var(--wyd-accent); text-decoration: none; }
.wyd-ranklist .wyd-entry-meta { margin-top: 4px; }

/* -------------------------------------------------------------------------
   8. Ticker "Ostatnio dodane" (pas swiezosci, pelna szerokosc)
   ------------------------------------------------------------------------- */
.wyd-ticker {
  display: flex;
  align-items: center;
  gap: var(--wyd-space-4);
  border-top: 2px solid var(--wyd-rule-strong);
  border-bottom: var(--wyd-hairline);
  background: var(--wyd-bg);
  padding-block: var(--wyd-space-3);
  margin-bottom: var(--wyd-space-7);
  font-family: var(--wyd-font-meta);
  font-size: var(--wyd-fs-meta);
}
.wyd-ticker__tag {
  font-family: var(--wyd-font-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--wyd-accent-ink);
  background: var(--wyd-accent);
  padding: 3px 8px;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* Pas swiezosci = samoprzesuwajacy sie marquee (WYD-104). Zarzad odrzucil i
   reczny suwak (janky, bez chwytu/snapu), i zawijana wielorzedowa liste
   (czyta sie jak spis) — chce jednorzedowego paska, ktory sam plynie.
   Technika: viewport z overflow:hidden przycina tor; tor to DWIE identyczne
   kopie listy obok siebie, animowane translateX 0 -> -50% w petli. Bo obie
   kopie sa identyczne, po przesunieciu o -50% (dokladnie szerokosc jednej
   kopii) obraz jest taki sam jak na starcie -> szew niewidoczny. Odstep miedzy
   elementami robi margin-right na <li> (nie flex-gap), zeby ostatni element
   kopii mial ten sam odstep przed poczatkiem nastepnej — inaczej szew skacze.
   Czysty CSS, zero JS, zero zadan zewnetrznych. */
.wyd-ticker__viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.wyd-ticker__track { display: flex; width: max-content; animation: wyd-ticker-scroll var(--wyd-ticker-duration, 40s) linear infinite; }
.wyd-ticker__list { list-style: none; display: flex; margin: 0; padding: 0; }
.wyd-ticker li { white-space: nowrap; margin-right: var(--wyd-space-5); color: var(--wyd-ink-2); }
.wyd-ticker li a:hover { color: var(--wyd-accent); }
@keyframes wyd-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* WCAG 2.2.2 (Pause/Stop/Hide). Mysz: :hover zatrzymuje pasek w miejscu, zeby
   dalo sie kliknac widoczny link. Klawiatura: :focus-within rozwija pasek do
   statycznej, zawijanej listy (jak WYD-99) — wszystkie linki widoczne i
   nieruchome, zaden cel fokusu nie ucieka poza kadr (2.4.11). Klon (aria-hidden)
   znika, zeby nie dublowac tresci w rozwinietym stanie. */
.wyd-ticker:hover .wyd-ticker__track { animation-play-state: paused; }
.wyd-ticker:focus-within .wyd-ticker__viewport { overflow: visible; }
.wyd-ticker:focus-within .wyd-ticker__track { animation: none; flex-wrap: wrap; width: auto; }
.wyd-ticker:focus-within .wyd-ticker__list { flex-wrap: wrap; row-gap: var(--wyd-space-3); }
.wyd-ticker:focus-within .wyd-ticker__list[aria-hidden="true"] { display: none; }
/* prefers-reduced-motion: reduce — globalna regula nizej gasi sama animacje;
   tu jeszcze rozwijamy pasek do statycznej, zawijanej listy (jak WYD-99), zeby
   przy braku ruchu zaden link nie zostal przyciety poza kadrem. Ten sam stan
   docelowy co :focus-within (WCAG 2.3.3 + 2.2.2). */
@media (prefers-reduced-motion: reduce) {
  .wyd-ticker__viewport { overflow: visible; }
  .wyd-ticker__track { flex-wrap: wrap; width: auto; }
  .wyd-ticker__list { flex-wrap: wrap; row-gap: var(--wyd-space-3); }
  .wyd-ticker__list[aria-hidden="true"] { display: none; }
}
/* Odstep czasu czytania od tytulu. Przy wylaczonych datach (swiezy motyw, G5)
   meta to <span class="wyd-reading-time">, a nie <time> — regula musi objac
   oba, inaczej czas czytania przykleja sie do tytulu (uwaga zarzadu WYD-99). */
.wyd-ticker li .wyd-reading-time,
.wyd-ticker li time { color: var(--wyd-ink-3); margin-left: var(--wyd-space-2); }

/* -------------------------------------------------------------------------
   9. Wpis (single)
   ------------------------------------------------------------------------- */
.wyd-article { max-width: var(--wyd-container-narrow); margin-inline: auto; }
.wyd-article__header { margin-bottom: var(--wyd-space-5); }
.wyd-article__title { font-size: var(--wyd-fs-h1); margin: var(--wyd-space-3) 0; }
.wyd-article__lead { font-family: var(--wyd-font-head); font-weight: 400; font-size: var(--wyd-fs-lg); color: var(--wyd-ink-2); line-height: var(--wyd-lh-snug); }
.wyd-article__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--wyd-space-3); margin-top: var(--wyd-space-4); padding: var(--wyd-space-3) 0; border-top: var(--wyd-hairline); border-bottom: var(--wyd-hairline); }
.wyd-updated { font-family: var(--wyd-font-meta); font-size: var(--wyd-fs-meta); color: var(--wyd-ink-3); }
.wyd-article__figure { margin: 0 0 var(--wyd-space-5); }
.wyd-article__figure figcaption { font-family: var(--wyd-font-meta); font-size: var(--wyd-fs-meta); color: var(--wyd-ink-3); padding-top: var(--wyd-space-2); }
.wyd-article__body { font-size: var(--wyd-fs-lg); }
.wyd-article__body h2 { font-size: var(--wyd-fs-h2); margin-top: var(--wyd-space-6); }
.wyd-article__body h3 { font-size: var(--wyd-fs-h3); margin-top: var(--wyd-space-5); }
.wyd-article__body a { color: var(--wyd-accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.wyd-article__body img { border-radius: var(--wyd-radius); margin-block: var(--wyd-space-5); }

/* Embed powiazanego w tresci ("Czytaj rowniez", styl s2) — WYD-43 / G3.
   Miniatura ma jawne width/height w CSS, wiec brak CLS takze bez obrazka. */
.wyd-inline-related {
  margin: var(--wyd-space-6) 0;
  padding: var(--wyd-space-4) 0;
  border-top: 2px solid var(--wyd-rule-strong);
  border-bottom: var(--wyd-hairline);
  font-size: var(--wyd-fs-base);
}
.wyd-inline-related--media {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--wyd-space-4);
  align-items: center;
}
.wyd-inline-related__media { display: block; }
.wyd-inline-related__media img {
  display: block;
  width: 96px;
  height: 72px;
  object-fit: cover;
  margin: 0;
  border-radius: var(--wyd-radius);
}
.wyd-inline-related__label {
  display: block;
  font-family: var(--wyd-font-meta);
  font-size: var(--wyd-fs-kicker);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--wyd-accent);
  margin-bottom: var(--wyd-space-1);
}
.wyd-inline-related__title {
  font-family: var(--wyd-font-head);
  font-size: var(--wyd-fs-lg);
  line-height: var(--wyd-lh-snug);
  color: var(--wyd-ink);
  text-decoration: none;
}
.wyd-inline-related__title:hover { color: var(--wyd-accent-strong); text-decoration: underline; }
.wyd-article__body blockquote {
  margin: var(--wyd-space-5) 0;
  padding-left: var(--wyd-space-5);
  border-left: 4px solid var(--wyd-accent);
  font-family: var(--wyd-font-head);
  font-size: var(--wyd-fs-h3);
  line-height: var(--wyd-lh-snug);
  color: var(--wyd-ink);
}
.wyd-article__tags { margin-top: var(--wyd-space-6); font-family: var(--wyd-font-meta); font-size: var(--wyd-fs-sm); }
.wyd-tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--wyd-space-2); margin: var(--wyd-space-2) 0 0; padding: 0; }
.wyd-tags li a { display: inline-block; border: var(--wyd-hairline); padding: 2px 10px; color: var(--wyd-ink-2); }
.wyd-tags li a:hover { border-color: var(--wyd-accent); color: var(--wyd-accent); text-decoration: none; }

/* -------------------------------------------------------------------------
   10. Sloty rezerwowane (budowa: C2 zaufanie / C3 sponsorowane)
   ------------------------------------------------------------------------- */
.wyd-slot { margin-block: var(--wyd-space-6); }
.wyd-sponsored {
  border: 1px solid var(--wyd-rule);
  border-top: 3px solid var(--wyd-accent);
  border-radius: var(--wyd-radius);
  padding: var(--wyd-space-4);
  background: var(--wyd-bg-2);
}
.wyd-sponsored__label {
  font-family: var(--wyd-font-meta);
  font-size: var(--wyd-fs-kicker);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wyd-ink-3);
  display: block;
  margin-bottom: var(--wyd-space-2);
}

/* -------------------------------------------------------------------------
   11. Footer
   ------------------------------------------------------------------------- */
.wyd-site-footer {
  background: var(--wyd-ink);
  color: #c9c7c0;
  margin-top: var(--wyd-space-8);
  padding-block: var(--wyd-space-7);
  font-family: var(--wyd-font-meta);
  font-size: var(--wyd-fs-meta);
}
.wyd-site-footer a { color: #c9c7c0; }
.wyd-site-footer a:hover { color: #fff; }
.wyd-footer-widgets {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wyd-space-6);
  margin-bottom: var(--wyd-space-6);
}
.wyd-footer-widgets h2,
.wyd-footer-widgets .widget-title,
.wyd-footer-brand h2 {
  color: #fff;
  font-family: var(--wyd-font-meta);
  font-size: var(--wyd-fs-kicker);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--wyd-space-3);
}
.wyd-footer-brand h2 { font-family: var(--wyd-font-display); font-size: var(--wyd-fs-h3); text-transform: none; letter-spacing: -0.01em; }
.wyd-footer-widgets ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wyd-space-2); }
.wyd-footer-bottom {
  border-top: 1px solid #33333a;
  padding-top: var(--wyd-space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--wyd-space-4);
  justify-content: space-between;
  color: #8a8a92;
  font-size: var(--wyd-fs-xs);
}
.wyd-footer-nav ul, .wyd-footer-menu { list-style: none; display: flex; flex-wrap: wrap; gap: var(--wyd-space-4); margin: 0; padding: 0; }
.wyd-footer-brand__desc { max-width: 42ch; color: #8a8a92; }

/* -------------------------------------------------------------------------
   12. Paginacja / archiwum / wyszukiwarka
   ------------------------------------------------------------------------- */
.wyd-pagination { margin-top: var(--wyd-space-7); }
.wyd-pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--wyd-space-1); }
.wyd-pagination .page-numbers {
  display: inline-block;
  padding: var(--wyd-space-2) var(--wyd-space-3);
  border: 1px solid var(--wyd-rule);
  border-radius: var(--wyd-radius);
  font-family: var(--wyd-font-meta);
  font-weight: 700;
}
.wyd-pagination .page-numbers:hover { border-color: var(--wyd-accent); color: var(--wyd-accent); text-decoration: none; }
.wyd-pagination .page-numbers.current { background: var(--wyd-accent); color: var(--wyd-accent-ink); border-color: var(--wyd-accent); }

.wyd-archive-header { margin-bottom: var(--wyd-space-6); border-bottom: 2px solid var(--wyd-rule-strong); padding-bottom: var(--wyd-space-3); }
.wyd-archive-title { font-size: var(--wyd-fs-h1); }
.wyd-archive-title .wyd-archive-kicker { display: block; font-family: var(--wyd-font-meta); font-size: var(--wyd-fs-kicker); color: var(--wyd-accent-text); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: var(--wyd-space-2); }
.wyd-archive-description { color: var(--wyd-ink-2); max-width: 60ch; }
.wyd-no-results { padding-block: var(--wyd-space-7); }

.wyd-search-form { display: flex; gap: var(--wyd-space-2); }
.wyd-search-form input[type="search"] {
  flex: 1;
  padding: var(--wyd-space-3);
  border: 1px solid var(--wyd-control-rule);   /* komponent UI, >=3:1 (WYD-153) */
  border-radius: var(--wyd-radius);
  font: inherit;
  background: #fff;
}
.wyd-search-form button {
  padding: var(--wyd-space-3) var(--wyd-space-4);
  background: var(--wyd-accent);
  color: var(--wyd-accent-ink);
  border: 0;
  border-radius: var(--wyd-radius);
  font-family: var(--wyd-font-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.wyd-search-form button:hover { background: var(--wyd-accent-strong); }

/* Surowe kontrolki formularzy w tresci wpisu (np. formularz wklejony recznie
   albo z innej wtyczki) — ten sam obrys co kontrolki motywu, zeby nie zostawic
   niespojnosci i pol ponizej 3:1 (WYD-153). Wylacznie kolor/grubosc obrysu:
   layout takich pol nalezy do ich wlasciciela. Umyslnie PRZED sekcja CF7 —
   przy remisie specyficznosci (0-2-1) wygrywaja pozniejsze reguly CF7. */
.wyd-article__body input[type="text"],
.wyd-article__body input[type="email"],
.wyd-article__body input[type="url"],
.wyd-article__body input[type="tel"],
.wyd-article__body input[type="number"],
.wyd-article__body input[type="date"],
.wyd-article__body input[type="password"],
.wyd-article__body input[type="search"],
.wyd-article__body textarea,
.wyd-article__body select {
  border: 1px solid var(--wyd-control-rule);
}

/* -------------------------------------------------------------------------
   12b. Formularz kontaktowy — Contact Form 7 (WYD-151)
   ------------------------------------------------------------------------- */
/* CF7 nie wnosi wlasnego layoutu pol, wiec bez motywu formularz zostaje na
   stylach przegladarki: waskie inputy (293px), Arial 13px, textarea z cols=40
   na sztywno szersza niz kolumna tresci (na 360px wychodzila poza kontener).
   Ta sekcja to naprawia. Nie jest zaleznoscia: bez wtyczki CF7 zadna z tych
   regul nie ma do czego sie przypiac.

   Granice, ktorych ta sekcja NIE przekracza:
   - selektory zaczynaja sie od .wpcf7, wiec wyszukiwarka, menu i pozostale
     kontrolki motywu sa nietkniete;
   - NIE ustawiamy `opacity` ani `pointer-events` na przycisku wysylki —
     integracja Turnstile blokuje submit wlasnie tymi wlasciwosciami
     (inline <style>), a nasz selektor jest bardziej specyficzny i cicho by
     ja zdjal;
   - komunikaty, status i spinner CF7 zostaja widoczne — tylko je ubieramy;
   - nie dotykamy backendu, tresci formularza, consentu ani Turnstile. */

.wpcf7 { margin-block: var(--wyd-space-5); }

/* Ukryte pola CF7 nie moga rysowac ramki fieldsetu. */
.wpcf7 fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

/* Kazde pole w osobnym akapicie (markup CF7) — rytm zamiast sklejonych linii. */
.wpcf7 .wpcf7-form > p { margin-block: var(--wyd-space-4); }

.wpcf7 label {
  display: block;
  font-family: var(--wyd-font-meta);
  font-size: var(--wyd-fs-sm);
  font-weight: 700;
  line-height: var(--wyd-lh-snug);
  color: var(--wyd-ink);
}

/* CF7 wstawia <br> miedzy etykieta a polem — odstep robimy marginesem. */
.wpcf7 label br { display: none; }
.wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: var(--wyd-space-2); }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 input[type="password"],
.wpcf7 input[type="search"],
.wpcf7 textarea,
.wpcf7 select {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 44px;                 /* wygodny cel dotykowy               */
  padding: var(--wyd-space-3);
  border: 1px solid var(--wyd-control-rule);   /* >=3:1 vs #fff i vs tlo strony */
  border-radius: var(--wyd-radius);
  background: #fff;
  color: var(--wyd-ink);
  font-family: var(--wyd-font-body);
  font-size: 1rem;                  /* >=16px: iOS nie zoomuje przy focusie */
  line-height: var(--wyd-lh-snug);
  font-weight: 400;
}

.wpcf7 textarea {
  min-height: 10rem;
  resize: vertical;                 /* pion tak, poziom nie — nie rozpycha kolumny */
}

.wpcf7 ::placeholder { color: var(--wyd-ink-3); opacity: 1; }

/* Podswietlenie obrysu pod kursorem. `:not(.wpcf7-not-valid)` — WYD-157, ZMIERZONE
   na prawdziwym CF7 realnym ruchem myszy: `.wpcf7 input[type="text"]:hover` ma
   specyficznosc 0-3-1, a regula stanu bledu `.wpcf7 input.wpcf7-not-valid` 0-2-1,
   wiec najechanie na pole z bledem podmienialo czerwony obrys na #556070. Obrysowy
   nosnik bledu znikal dokladnie w chwili, w ktorej uzytkownik siegal do pola.
   textarea i select wychodzily z tego obronna reka tylko dzieki kolejnosci regul
   w pliku — wykluczenie jest jawne dla wszystkich, by nie zalezec od kolejnosci. */
.wpcf7 input[type="text"]:hover:not(.wpcf7-not-valid),
.wpcf7 input[type="email"]:hover:not(.wpcf7-not-valid),
.wpcf7 input[type="url"]:hover:not(.wpcf7-not-valid),
.wpcf7 input[type="tel"]:hover:not(.wpcf7-not-valid),
.wpcf7 textarea:hover:not(.wpcf7-not-valid),
.wpcf7 select:hover:not(.wpcf7-not-valid) { border-color: var(--wyd-ink-3); }

.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible,
.wpcf7 select:focus-visible,
.wpcf7 button:focus-visible {
  outline: 2px solid var(--wyd-accent);
  outline-offset: 2px;
  border-color: var(--wyd-accent);
}

.wpcf7 input:disabled,
.wpcf7 textarea:disabled,
.wpcf7 select:disabled {
  background: var(--wyd-bg-2);
  color: var(--wyd-ink-3);
  cursor: not-allowed;
}

/* Checkbox/radio (zgody, listy wyboru) — bez width:100%, w linii z etykieta. */
.wpcf7 .wpcf7-list-item { display: block; margin: 0 0 var(--wyd-space-2); }
.wpcf7 .wpcf7-list-item-label { font-weight: 400; }
.wpcf7 .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: var(--wyd-space-2);
  min-height: 44px;
  font-weight: 400;
  font-size: var(--wyd-fs-sm);
  line-height: var(--wyd-line-h);
}
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;               /* wyrownanie do pierwszej linii tekstu */
  accent-color: var(--wyd-accent);
}

/* Przycisk wysylki — jak przyciski motywu. Bez opacity/pointer-events! */
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
  box-sizing: border-box;
  min-height: 44px;
  min-width: 10rem;
  padding: var(--wyd-space-3) var(--wyd-space-6);
  border: 0;
  border-radius: var(--wyd-radius);
  background: var(--wyd-accent);
  color: var(--wyd-accent-ink);
  font-family: var(--wyd-font-meta);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover { background: var(--wyd-accent-strong); }

/* Zablokowany przycisk — WYD-157, ZMIERZONE: `.wpcf7 input:disabled` (0-2-1) i
   `.wpcf7 input[type="submit"]` (0-2-1) maja rowna specyficznosc, a blok przycisku
   stoi w pliku pozniej, wiec `cursor: pointer` wygrywal i przycisk zablokowany
   udawal klikalny (`<button>` nie byl objety w ogole). Kwalifikacja typem plus
   `:disabled` (0-3-1) to domyka. Zostaje SAM kursor: `opacity` i `pointer-events`
   sa nietkniete, bo tym integracja Turnstile blokuje wysylke. */
.wpcf7 input[type="submit"]:disabled,
.wpcf7 button[type="submit"]:disabled,
.wpcf7 button:disabled { cursor: not-allowed; }

/* Stan wysylania: sygnal kursorem, spinner CF7 zostaje jak byl. Stoi PO regule
   disabled celowo — CF7 blokuje przycisk na czas wysylki, a wtedy wlasciwym
   sygnalem jest „trwa”, nie „nie wolno”. */
.wpcf7 form.submitting input[type="submit"],
.wpcf7 form.submitting button[type="submit"] { cursor: progress; }

/* Walidacja pojedynczego pola.
   Pulapka specyficznosci (defekt QA WYD-152, fix WYD-153): baza pola to
   `.wpcf7 input[type="text"]` (0-2-1), wiec samo `.wpcf7 .wpcf7-not-valid`
   (0-2-0) przegrywalo i pole z bledem NIE zmienialo obrysu. Kwalifikujemy
   selektor klasa CF7 `wpcf7-form-control` (0-3-0) oraz typem elementu — wygrywa
   specyficznoscia, bez `!important` (wtyczka moglaby odpowiedziec tym samym).
   Grubszy obrys jest dodatkowym, niekolorowym nosnikiem stanu; komunikat
   tekstowy CF7 i aria-invalid zostaja bez zmian.
   Kontrast --wyd-invalid: 6,54:1 (#fff), 6,26:1 (papier), 5,78:1 (bg-2). */
.wpcf7 .wpcf7-form-control.wpcf7-not-valid,
.wpcf7 input.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid {
  border-color: var(--wyd-invalid);
  border-width: 2px;
}
.wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--wyd-space-2);
  font-family: var(--wyd-font-meta);
  font-size: var(--wyd-fs-sm);
  font-weight: 700;
  color: var(--wyd-invalid);
}

/* Komunikat zbiorczy. Stylujemy TYLKO stany z trescia — stan `init` zostaje
   nietkniety, wiec pusta ramka nie pojawia sie przed wyslaniem. */
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  margin: var(--wyd-space-4) 0 0;
  padding: var(--wyd-space-3) var(--wyd-space-4);
  border: 1px solid var(--wyd-rule);
  border-left-width: 4px;
  background: var(--wyd-bg-2);
  font-size: var(--wyd-fs-sm);
  line-height: var(--wyd-line-h);
  color: var(--wyd-ink);
}
.wpcf7 form.sent .wpcf7-response-output { border-left-color: var(--wyd-fresh); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-left-color: var(--wyd-invalid); }

/* Widget Turnstile bywa szerszy niz waska kolumna na 320px — pozwalamy mu
   sie przewinac zamiast rozpychac strone. Sam widget zostaje nietkniety. */
.wpcf7 .cf7-cf-turnstile,
.wpcf7 .cf-turnstile { max-width: 100%; overflow-x: auto; }

/* -------------------------------------------------------------------------
   13. Responsywnosc — trzy szerokosci
   mobile: baza (powyzej)  |  tablet: >=640px  |  desktop: >=1024px
   ------------------------------------------------------------------------- */

/* Tablet */
@media (min-width: 640px) {
  /* Hero: duzy material PIONOWY (obraz 16/9 na gorze, pelen tytul pod nim) OBOK
     kolumny mniejszych kart po prawej (WYD-99). primary szerszy, secondary
     wezszy; secondary zostaje kolumna (bez zmian z bazy). */
  .wyd-lead__hero { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .wyd-grid { grid-template-columns: repeat(2, 1fr); }
  .wyd-section .wyd-grid--3 > * { flex-basis: calc((100% - var(--wyd-space-6)) / 2); }
  /* auto-fit: kolumny dopasowuja sie do liczby aktywnych widgetow (1–4).
     Gdy jest tylko blok marki (brak widgetow/danych wydawcy), grid nie zostawia
     pustych kolumn — stopka wyglada celowo, nie dziurawo (WYD-74 / WYD-36 pkt 8). */
  .wyd-footer-widgets { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  /* Placeholder-kwadrat zniknal w WYD-75 (tryb B tekstowy) — zostaje sama miniatura. */
  .wyd-river .wyd-card__media { flex-basis: 160px; }
}

/* Desktop */
@media (min-width: 1024px) {
  /* Hero (primary + kolumna mniejszych) obok raila; hero = 3,3fr, rail = 1fr.
     Uklad na desktopie ma 3 kolumny: duzy material | 2-3 mniejsze | rail
     "Najnowsze" (WYD-99). align-items: stretch -> rail (nizszy) rozciaga sie na
     wysokosc hero, wiec jego linia (border-left) siega pelnej wysokosci kolumny,
     a lista "Najnowsze" zostaje u gory. To dziala, DOPOKI hero jest wyzszy od
     raila — czyli gdy wiodacy material MA obraz wyroznajacy (build A). */
  .wyd-lead { grid-template-columns: 3.3fr 1fr; align-items: stretch; }
  .wyd-rail { border-top: 0; padding-top: 0; border-left: var(--wyd-hairline); padding-left: var(--wyd-space-5); }

  /* WYD-102: gdy WIODACY material leadu nie ma miniatury, kolumna hero zapada
     sie ponizej wysokosci raila (rail z 4 wielowierszowymi tytulami bywa wyzszy
     niz sam tekst) -> pod blokiem "1 duzy + 3 mniejsze" rosnie martwy bialy pas
     (uwaga zarzadu na WYD-36; wczesniejsze WYD-100/105 mierzyly PUDLO boksow,
     nie tresc, wiec przeoczyly wnetrze). Ponizsze reguly wlaczaja sie TYLKO w
     tym stanie (`:has()` na primary tekstowym), wiec build z obrazem wiodacym
     (A) pozostaje bez zmian pomiarowo:
       1. rail: tytuly do 2 linii -> rail nie przerasta zapadnietego hero;
       2. kolumna mniejszych kart wypelnia wysokosc (space-between) -> domyka sie
          do dolu razem z railem;
       3. wiodaca karta tekstowa centruje tresc w pionie -> resztkowy luz jest
          symetrycznym oddechem, nie dziura pod spodem. */
  .wyd-lead:has(.wyd-lead__primary .wyd-card--textonly) .wyd-ranklist__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .wyd-lead:has(.wyd-lead__primary .wyd-card--textonly) .wyd-lead__secondary {
    justify-content: space-between;
  }
  .wyd-lead__primary .wyd-card--textonly .wyd-card__body { justify-content: center; }
  .wyd-layout--with-sidebar { grid-template-columns: minmax(0, 1fr) 320px; }
  .wyd-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .wyd-section .wyd-grid--3 > * { flex-basis: calc((100% - 2 * var(--wyd-space-6)) / 3); }
}

/* Nawigacja: mobile chowa pod toggle, desktop pokazuje. */
@media (max-width: 899px) {
  .wyd-site-header { position: relative; }
  .wyd-primary-nav {
    display: none;
    width: 100%;
    order: 3;
  }
  /* Otwarty panel jako overlay: nie rozpycha flow dokumentu, scroll wewnatrz
     panelu zamiast spychania tresci (WYD-56). */
  .wyd-primary-nav.is-open {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 60;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--wyd-bg);
    border-top: 1px solid var(--wyd-rule);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
  }
  .wyd-primary-nav ul { flex-direction: column; gap: 0; padding-inline: var(--wyd-space-4); }
  .wyd-primary-nav li { border-top: 1px solid var(--wyd-rule); }
  .wyd-primary-nav a { display: block; padding-block: var(--wyd-space-3); border-bottom: 0; }
  /* "Wiecej" jest wzorcem desktopowym — na mobile chowamy przycisk. */
  .wyd-menu__more { display: none; }
  .wyd-header-main .wyd-container { flex-wrap: wrap; }
}
@media (min-width: 900px) {
  .wyd-nav-toggle { display: none; }
  /* Winieta i pasek sekcji w OSOBNYCH rzedach (klasyczny masthead gazetowy).
     Dwa skutki, oba naprawiaja defekty odbioru WYD-65:
     - D1 (CLS): wysokosc winiety nie zalezy juz od szerokosci nav, wiec
       zwezanie nav przez priority+ (JS) po paincie nie zmienia wysokosci
       masthead — tagline nie przeskakuje 2->1 linia. Twardy niezmiennik CLS 0.
     - D2 (nav do 1 kat.): nav dostaje PELNA szerokosc kontenera zamiast resztek
       po brandingu (~143 px), wiec priority+ miesci wiele sekcji, nie jedna. */
  .wyd-header-main .wyd-container { flex-wrap: wrap; }
  .wyd-branding { flex: 0 1 auto; min-width: 0; }
  .wyd-primary-nav {
    display: block !important;
    flex: 0 0 100%;
    min-width: 0;
    margin-top: var(--wyd-space-4);
    padding-top: var(--wyd-space-3);
    border-top: 1px solid var(--wyd-rule);
  }
  /* Nawigacja sekcji na desktopie zawsze w JEDNEJ linii — nadmiar kategorii
     chowa priority+ pod "Wiecej", nie zawija sie do kolejnych rzedow. */
  .wyd-primary-nav ul { flex-wrap: nowrap; gap: var(--wyd-space-4); }
  .wyd-primary-nav a { white-space: nowrap; }
}

/* Szanuj preferencje ruchu (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* -------------------------------------------------------------------------
   14. Elementy budujace zaufanie (C2 / WYD-16)
   Profile social (ikony inline SVG), karta kontaktowa/wydawca, CTA wspolpracy,
   szablony stron zaplecza. Wszystko na tokenach --wyd-* — spojne ze szkieletem.
   ------------------------------------------------------------------------- */

/* Profile spolecznosciowe — kwadratowe chipy (dyscyplina druku, radius 0). */
.wyd-social { list-style: none; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--wyd-space-2); margin: 0; padding: 0; }
.wyd-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--wyd-rule);
  border-radius: var(--wyd-radius);
  color: inherit;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.wyd-social__link:hover,
.wyd-social__link:focus-visible {
  color: var(--wyd-accent);
  border-color: var(--wyd-accent);
  text-decoration: none;
}
.wyd-social__icon { display: inline-flex; }
.wyd-social__icon svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* Udostepnianie wpisu (WYD-42): chipy jak social, na papierze artykulu. */
.wyd-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wyd-space-2);
  margin: var(--wyd-space-6) 0;
  padding-bottom: var(--wyd-space-5);
  border-bottom: var(--wyd-hairline);
}
.wyd-share__heading {
  font-family: var(--wyd-font-meta);
  font-size: var(--wyd-fs-kicker);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--wyd-ink-2);
  margin-right: var(--wyd-space-1);
}
.wyd-share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--wyd-rule);
  border-radius: var(--wyd-radius);
  color: var(--wyd-ink-2);
  background: none;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.wyd-share__link:hover,
.wyd-share__link:focus-visible {
  color: var(--wyd-accent);
  border-color: var(--wyd-accent);
  text-decoration: none;
}
.wyd-share__icon { display: inline-flex; }
.wyd-share__icon svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* Wariant w ciemnym pasku uzytkowym (header) — chipy nieco mniejsze. */
.wyd-social--topbar { gap: var(--wyd-space-1); }
.wyd-social--topbar .wyd-social__link { width: 30px; height: 30px; border-color: #4a4a52; color: #d8d6cf; }
.wyd-social--topbar .wyd-social__link svg { width: 15px; height: 15px; }
.wyd-social--topbar .wyd-social__link:hover,
.wyd-social--topbar .wyd-social__link:focus-visible { color: #fff; border-color: #fff; background: transparent; }

/* Wariant w ciemnej stopce. */
.wyd-social--footer .wyd-social__link { border-color: #3a3a42; color: #c9c7c0; }
.wyd-social--footer .wyd-social__link:hover,
.wyd-social--footer .wyd-social__link:focus-visible { color: #fff; border-color: #fff; }

/* Wariant "jasny" — karta kontaktowa na papierze. */
.wyd-social--light .wyd-social__link { border-color: var(--wyd-rule); color: var(--wyd-ink-2); }

/* Zaplecze zaufania w stopce (slot footer_trust): social + kontakt/wydawca. */
.wyd-footer-trust {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wyd-space-5);
  margin-bottom: var(--wyd-space-6);
  padding-top: var(--wyd-space-5);
  border-top: 1px solid #33333a;
}
.wyd-footer-trust__title {
  color: #fff;
  font-family: var(--wyd-font-meta);
  font-size: var(--wyd-fs-kicker);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--wyd-space-3);
}
.wyd-footer-trust .wyd-publisher { font-style: normal; color: #c9c7c0; line-height: var(--wyd-lh-snug); }
.wyd-footer-trust .wyd-publisher__name { color: #fff; font-weight: 700; }
.wyd-footer-trust .wyd-contact-list { list-style: none; margin: var(--wyd-space-3) 0 0; padding: 0; display: grid; gap: var(--wyd-space-1); }
.wyd-contact-list__label { color: #8a8a92; }

/* Uklad strony z kolumna boczna (Kontakt). */
.wyd-page-layout { display: grid; grid-template-columns: 1fr; gap: var(--wyd-space-6); }

/* Karta kontaktowa (aside strony Kontakt + reuzycie w stopce). */
.wyd-contact-card { align-self: start; }
.wyd-contact-card__title {
  font-family: var(--wyd-font-meta);
  font-size: var(--wyd-fs-kicker);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wyd-ink-3);
  margin-bottom: var(--wyd-space-3);
}
.wyd-page--contact .wyd-contact-card__inner {
  border: var(--wyd-hairline);
  border-top: 3px solid var(--wyd-accent);
  padding: var(--wyd-space-5);
  background: var(--wyd-bg-2);
}
.wyd-contact-card .wyd-publisher { font-style: normal; color: var(--wyd-ink-2); line-height: var(--wyd-lh-snug); margin-bottom: var(--wyd-space-4); }
.wyd-contact-card .wyd-publisher__name { color: var(--wyd-ink); font-weight: 700; }
.wyd-contact-card .wyd-contact-list { list-style: none; margin: 0 0 var(--wyd-space-4); padding: 0; display: grid; gap: var(--wyd-space-2); }
.wyd-contact-card .wyd-contact-list__label { color: var(--wyd-ink-3); font-weight: 700; }
.wyd-contact-card .wyd-contact-list a { color: var(--wyd-accent-strong); text-decoration: underline; text-underline-offset: 2px; }

/* Wezwanie do wspolpracy (szablon Wspolpraca / Reklama). */
.wyd-cta {
  max-width: var(--wyd-container-narrow);
  margin: var(--wyd-space-7) auto 0;
  border: var(--wyd-hairline);
  border-left: 4px solid var(--wyd-accent);
  background: var(--wyd-bg-2);
  padding: var(--wyd-space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wyd-space-4);
  justify-content: space-between;
}
.wyd-cta__lead { margin: 0; font-family: var(--wyd-font-head); font-size: var(--wyd-fs-h3); line-height: var(--wyd-lh-snug); }
.wyd-cta__button {
  display: inline-block;
  background: var(--wyd-accent);
  color: var(--wyd-accent-ink);
  padding: var(--wyd-space-3) var(--wyd-space-5);
  font-family: var(--wyd-font-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--wyd-fs-sm);
}
.wyd-cta__button:hover, .wyd-cta__button:focus-visible { background: var(--wyd-accent-strong); text-decoration: none; }

/* Strona prawna: wąska miara + data aktualizacji. */
.wyd-page--legal .wyd-legal-updated { font-family: var(--wyd-font-meta); font-size: var(--wyd-fs-meta); color: var(--wyd-ink-3); margin-top: var(--wyd-space-2); }
.wyd-page--legal .wyd-article__body { max-width: var(--wyd-measure, 68ch); }

/* Spojna typografia tresci na WSZYSTKICH stronach (nie tylko wpisach):
   listy, tabele, linie, podnaglowki. Ujednolica wpisy i strony zaplecza. */
.wyd-article__body ul,
.wyd-article__body ol { margin: 0 0 var(--wyd-space-4); padding-left: var(--wyd-space-5); }
.wyd-article__body li { margin-bottom: var(--wyd-space-2); }
.wyd-article__body li > ul,
.wyd-article__body li > ol { margin-top: var(--wyd-space-2); margin-bottom: 0; }
.wyd-article__body h4 { font-size: var(--wyd-fs-lg); margin-top: var(--wyd-space-5); }
.wyd-article__body hr { border: 0; border-top: 2px solid var(--wyd-rule-strong); margin: var(--wyd-space-6) 0; }
/* WYD-131: tabela scrolluje WEWNATRZ wlasnego pudla (display:block + overflow-x),
   a nie rozpycha strony w poziomie, gdy min-content kolumn > szerokosc kontenera
   (mobile). Na szerokich ekranach block+width:100% wyglada jak zwykla tabela. */
.wyd-article__body table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: var(--wyd-space-5) 0; font-size: var(--wyd-fs-base); }
.wyd-article__body th,
.wyd-article__body td { text-align: left; padding: var(--wyd-space-2) var(--wyd-space-3); border-bottom: var(--wyd-hairline); }
.wyd-article__body th { font-family: var(--wyd-font-meta); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--wyd-fs-sm); color: var(--wyd-ink-2); }
.wyd-article__body figure { margin: var(--wyd-space-5) 0; }
.wyd-article__body figcaption { font-family: var(--wyd-font-meta); font-size: var(--wyd-fs-meta); color: var(--wyd-ink-3); padding-top: var(--wyd-space-2); }
.wyd-article__body code { font-family: var(--wyd-font-mono); font-size: 0.9em; background: var(--wyd-bg-2); padding: 0.1em 0.35em; }
/* WYD-131: blok <pre> scrolluje dlugie linie kodu WEWNATRZ wlasnego pudla
   (overflow-x:auto), zamiast rozpychac strone w poziomie na mobile. */
.wyd-article__body pre { max-width: 100%; overflow-x: auto; background: var(--wyd-bg-2); padding: var(--wyd-space-3); margin: var(--wyd-space-5) 0; }
.wyd-article__body pre code { background: none; padding: 0; }

@media (min-width: 640px) {
  /* auto-fit: gdy jest tylko jeden blok zaufania (np. "Obserwuj nas" bez danych
     wydawcy), nie powstaje pusta druga kolumna (WYD-74). */
  .wyd-footer-trust { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}
@media (min-width: 900px) {
  .wyd-page--contact .wyd-page-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
}

/* -------------------------------------------------------------------------
   15. Spis tresci (ToC) na wpisie (G1 / WYD-52)
   Element natywny <details>: zwijanie i nawigacja kotwicami dzialaja bez JS
   (zero zadan zewnetrznych). Mobile/tablet: zwijana lista pod leadem.
   Desktop (>=1024): przypieta lewa kolumna (sticky), zawsze rozwinieta.
   Prog >= 3 naglowki wymusza PHP (wyd_build_toc) — CSS tylko prezentuje.
   ------------------------------------------------------------------------- */
.wyd-toc {
  margin: 0 0 var(--wyd-space-5);
  border: var(--wyd-hairline);
  border-left: 3px solid var(--wyd-rule-strong);
  background: var(--wyd-bg-2);
  font-family: var(--wyd-font-meta);
}
.wyd-toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wyd-space-3);
  padding: var(--wyd-space-3) var(--wyd-space-4);
  cursor: pointer;
  list-style: none; /* chowa domyslny trojkat (Firefox/std) */
  font-size: var(--wyd-fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wyd-ink);
}
.wyd-toc__summary::-webkit-details-marker { display: none; } /* Safari/Chrome */
.wyd-toc__summary:focus-visible { outline: 3px solid var(--wyd-accent); outline-offset: -3px; }
.wyd-toc__title { font-weight: 600; }
/* Strzalka zwijania — czysty CSS, bez obrazka. */
.wyd-toc__icon {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.wyd-toc[open] .wyd-toc__icon { transform: rotate(-135deg); }
.wyd-toc__panel { padding: 0 var(--wyd-space-4) var(--wyd-space-3); }
.wyd-toc__list { list-style: none; margin: 0; padding: 0; }
.wyd-toc__item { margin: 0; }
.wyd-toc__item--sub { padding-left: var(--wyd-space-4); }
.wyd-toc__link {
  display: block;
  padding: var(--wyd-space-1) 0;
  font-size: var(--wyd-fs-sm);
  line-height: var(--wyd-lh-snug);
  color: var(--wyd-ink-2);
  text-decoration: none;
}
.wyd-toc__link:hover,
.wyd-toc__link:focus-visible { color: var(--wyd-accent-text); text-decoration: underline; text-underline-offset: 2px; }
/* Offset dla kotwic (na wypadek przyszlego sticky-headera) — bez JS. */
.wyd-article__body h2[id],
.wyd-article__body h3[id] { scroll-margin-top: var(--wyd-space-6); }

@media (min-width: 1024px) {
  /* Uklad: kolumna tresci o szerokosci czytania WYSRODKOWANA na ekranie,
     ToC w lewej rynnie. Symetryczne kolumny brzegowe minmax(0,1fr) trzymaja
     srodkowa kolumne (720) dokladnie w tym samym miejscu co wpis bez ToC
     (720 wysrodkowane w kontenerze 1200) — prawa rynna pusta ".", lewa mie-
     sci ToC. Rynna = (1200-720)/2 - gap ~= 13rem, wystarcza na szyne. ToC
     nie rozjezdza srodka (WYD-73 / regresja z WYD-36 pkt 4). */
  .wyd-article--toc {
    max-width: var(--wyd-container);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--wyd-container-narrow)) minmax(0, 1fr);
    column-gap: var(--wyd-space-6);
    align-items: start;
    grid-template-areas:
      "toc header      ."
      "toc belowheader ."
      "toc figure      ."
      "toc body        ."
      "toc footer      .";
  }
  .wyd-article--toc > .wyd-article__header { grid-area: header; }
  .wyd-article--toc > .wyd-article__figure { grid-area: figure; }
  .wyd-article--toc > .wyd-article__body   { grid-area: body; }
  .wyd-article--toc > .wyd-article__footer { grid-area: footer; }
  /* Slot pod naglowkiem trafia do kolumny tresci; pusty (brak elementu)
     => wiersz o wysokosci 0, brak row-gap => uklad jak bez slotu. */
  .wyd-article--toc > .wyd-ad--below-header { grid-area: belowheader; }
  .wyd-article--toc > .wyd-toc {
    grid-area: toc;
    align-self: start;
    position: sticky;
    top: var(--wyd-space-6);
    max-height: calc(100vh - var(--wyd-space-7));
    overflow-y: auto;
    margin: 0;
  }
  /* Desktop: szyna zawsze rozwinieta — nadpisuje oba modele UA (starszy
     display:none na tresci oraz nowszy ::details-content/content-visibility). */
  .wyd-toc__panel { display: block; }
  .wyd-toc::details-content { content-visibility: visible; }
  /* Toggle na desktopie nieaktywny: podsumowanie jest naglowkiem szyny. */
  .wyd-toc__summary { cursor: default; }
  .wyd-toc__icon { display: none; }
}

/* =========================================================================
   Sloty reklamowe (G4 / WYD-53)

   Wylaczony/pusty slot NIE emituje markupu (decyzja w PHP), wiec nie ma tu
   nic do zarezerwowania — brak min-height, brak placeholderow poza podgladem
   Customizera. Dzieki temu uklad przy wylaczonych slotach = obecne demo, a
   CLS pozostaje zerowy (kreacje laduja w miejscu istniejacym od pierwszego
   malowania; za wymiary samej kreacji odpowiada jej kod).
   ========================================================================= */
.wyd-ad {
  margin: var(--wyd-space-5) 0;
}
.wyd-ad__mark {
  display: block;
  /* WYD-131: etykieta wyrownana jak kreacja pod nia (kreacje slotow sa
     wysrodkowane — placeholder flex-center, demo margin:0 auto). */
  text-align: center;
  font-family: var(--wyd-font-meta);
  font-size: var(--wyd-fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wyd-ink-3);
  margin-bottom: var(--wyd-space-1);
}
.wyd-ad__body {
  /* Kreacje same wyznaczaja wymiary; kontener ich nie ogranicza. */
  overflow: hidden;
}
.wyd-ad__body img { max-width: 100%; height: auto; }
/* Placeholder — widoczny tylko w podgladzie Customizera (slot wlaczony, bez kodu). */
.wyd-ad__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 6rem;
  padding: var(--wyd-space-4);
  text-align: center;
  border: 2px dashed var(--wyd-rule-strong);
  background: var(--wyd-bg-2);
  color: var(--wyd-ink-3);
  font-family: var(--wyd-font-meta);
  font-size: var(--wyd-fs-sm);
}
.wyd-ad__placeholder-id { color: var(--wyd-ink-2); }

/* Prawa szyna: na mobile/tablecie plynie w kolumnie (po tresci). */
.wyd-ad--rail { margin-top: var(--wyd-space-6); }

@media (min-width: 1024px) {
  /* ToC + prawa szyna: trzy kolumny (lewy ToC | tresc | reklama). */
  .wyd-article--toc.wyd-article--adrail {
    max-width: calc(var(--wyd-container-narrow) + 17rem + 21rem);
    grid-template-columns: 14rem minmax(0, var(--wyd-container-narrow)) 18rem;
    grid-template-areas:
      "toc header      rail"
      "toc belowheader rail"
      "toc figure      rail"
      "toc body        rail"
      "toc footer      rail";
  }

  /* Prawa szyna bez ToC: dwie kolumny (tresc | reklama). */
  .wyd-article--adrail:not(.wyd-article--toc) {
    max-width: calc(var(--wyd-container-narrow) + 21rem);
    display: grid;
    grid-template-columns: minmax(0, var(--wyd-container-narrow)) 18rem;
    column-gap: var(--wyd-space-7);
    align-items: start;
    grid-template-areas:
      "header      rail"
      "belowheader rail"
      "figure      rail"
      "body        rail"
      "footer      rail";
  }
  .wyd-article--adrail > .wyd-article__header { grid-area: header; }
  .wyd-article--adrail > .wyd-article__figure { grid-area: figure; }
  .wyd-article--adrail > .wyd-article__body   { grid-area: body; }
  .wyd-article--adrail > .wyd-article__footer { grid-area: footer; }
  .wyd-article--adrail > .wyd-ad--below-header { grid-area: belowheader; }
  .wyd-article--adrail > .wyd-ad--rail {
    grid-area: rail;
    align-self: start;
    position: sticky;
    top: var(--wyd-space-6);
    margin-top: 0;
  }
}