/* ============================================================
   serve*Arch — hlavní styl webu

   Vznikl překlopením prototypu `_designsource/css/main.css` (2026-08-14).
   Prototyp řešil hlavičku, hero a homepage; výpisy, detail příspěvku
   a formuláře jsou dostavěné z týchž tokenů a komponent.

   Fonty jsou LOKÁLNÍ, ne z Google CDN — CSP ve `www/index.php` má
   `default-src 'self'` bez `font-src`, takže externí písmo by se ani
   nestáhlo. Prototypový odkaz na CDN se sem proto nepřeklápí (a domácí
   pravidlo říká totéž).

   ⚠ Adresu Google fontů sem NEPIŠ ani do komentáře:
   `tests/frontend-design.test.php` hledá její výskyt v celém souboru
   a nerozlišuje komentář od pravidla. Popisuj ji slovy.
   ============================================================ */

/* ----------------------------------------
   0. Fonty (self-hosted, subsety latin + latin-ext)

   Variabilní řezy — jeden soubor pokrývá celý rozsah vah, který web
   používá (200–400). `unicode-range` nechává prohlížeč stáhnout
   latin-ext jen tam, kde na stránce reálně jsou české znaky.
   ---------------------------------------- */
@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 200 400;
    font-display: swap;
    src: url('../fonts/work-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 200 400;
    font-display: swap;
    src: url('../fonts/work-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Work Sans';
    font-style: italic;
    font-weight: 200 300;
    font-display: swap;
    src: url('../fonts/work-sans-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Work Sans';
    font-style: italic;
    font-weight: 200 300;
    font-display: swap;
    src: url('../fonts/work-sans-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/space-mono-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/space-mono-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----------------------------------------
   1. Reset
   ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ----------------------------------------
   2. Tokeny
   ---------------------------------------- */
:root {
    --brand:        #27192a;
    --accent:       #c9a96e;
    --accent-pale:  #f0e8d8;
    --off-white:    #f7f5f1;
    /* Podklad lišt sekcí (pruh přes celé okno). Zadáno 2026-08-22 (#faf9f7 →
       #e7e1d8 → #fefdfc, tři kola během jednoho dne).
       ⚠ Text na něm: název sekce --brand, odkaz --text-muted (16,3:1).
       --warm-gray se sem NEVRACÍ ani na tomhle světlém odstínu — dává 3,4:1,
       pořád pod AA (4,5:1 u drobného písma). */
    --section-bg:   #fefdfc;
    /* Podklad karet, které nesmí splynout s bílým papírem stránky. */
    --card-bg:      #f1ede4;
    --card-bg-hover:#e9e4d8;
    /* Podklad kontejneru (.page). Hlavička i patička jsou full-bleed tmavé,
       mimo kontejner zůstává bílý papír body. */
    --page-bg:      #f9f7f2;

    /* --------------------------------------------------------------
       HLAVIČKA ČLÁNKU — čtyři pruhy přes celé okno.
       Přebarvuje se VÝHRADNĚ tady; v pravidlech níž není jediná hodnota.
       Ke každému pruhu patří pozadí a barvy textu na něm.

       ⚠ Po každé změně pozadí zkontroluj kontrast textu. WCAG AA chce
       u drobného písma 4,5:1. Čísla v závorkách platí pro hodnoty níž.
       -------------------------------------------------------------- */

    /* 1. drobečky — fialová z rodiny odznaku rubriky na homepage (#873089) */
    --crumb-bg:      #84548d;
    --crumb-text:    #ece5ee;                   /* odkazy        (4,7:1) */
    --crumb-current: #ffffff;                   /* aktuální      (5,8:1) */
    --crumb-sep:     rgba(255, 255, 255, 0.45); /* šipky, dekorace       */

    /* 2. rubrika — hluboká švestka, zlatý štítek */
    --kicker-bg:     #27192a;
    --kicker-text:   var(--accent);             /*               (7,5:1) */

    /* 3. titulek — teplý papír karet */
    --title-bg:      #f1ede4;
    --title-text:    var(--brand);              /*                (14:1) */

    /* 4. datum — o stupeň tmavší než titulek */
    --meta-bg:       #e9e4d8;
    --meta-text:     var(--text-muted);         /*               (6,6:1) */
    --meta-sep:      var(--brand);              /* tečka mezi autorem a datem */

    /* 5. počítadlo pod názvem rubriky — týž pruh, jaký nese datum u článku.
       Vlastní token, aby se dal odpojit, ale výchozí hodnota je sdílená. */
    --count-bg:      var(--meta-bg);
    --count-text:    var(--meta-text);

    /* --------------------------------------------------------------
       NÁDECH NA POZADÍ — jemná šeď s měkkými vlnami pod celým webem.
       Ladí se třemi hodnotami: odstín papíru, síla vln a to, jak moc
       je kontejner přebíjí závojem. Čím vyšší závoj, tím čistší text.
       -------------------------------------------------------------- */
    --paper:          #f2f1ed;                  /* jemná šeď pod vším   */
    --bg-veil:        0.4;                      /* síla vln             */
    --page-veil:      rgba(249, 247, 242, 0.82);/* závoj kontejneru     */

    /* Text příspěvku — klient si vyžádal výraznější (2026-08-19): o 2 px
       víc než `--fs-body` a o stupeň silnější řez. Vlastní tokeny, protože
       `--fs-body` nese i odstavce jinde na webu, políčka formulářů a karty
       v tmavém pásu rubriky; ty se zvětšovat neměly. */
    --article-text:   1.125rem;                 /* 18px (--fs-body je 16) */
    --article-weight: var(--fw-regular);        /* 400 místo 300          */

    /* Čtecí sloupec detailu. Zkouška pro klientku (2026-08-19): text je na
       plné šířce kontejneru (1420) na čtení široký. Pruhy hlavičky zatím
       zůstávají přes celou šířku — až se rozhodne, že se má zúžit i ona,
       stačí přepsat tuhle jednu hodnotu a přidat ji na `.article-detail`. */
    --article-col: 1100px;

    /* Perex na detailu příspěvku — má se číst jako uvedení do článku, ne jako
       první odstavec textu. Odlišuje ho řez, velikost a barva; linku ani
       podklad si dovolit nemůže (viz komentář u `.article-detail__perex`). */
    --perex-size:  1.25rem;                     /* 20px, tělo má 16 */
    --perex-text:  var(--brand);

    /* Text vedle kresby v heru. ⚠ NE --warm-gray: na papíru dává 3,4:1, tedy
       pod WCAG AA (4,5:1) — byla to skrytá vada od překlopení designu, ne
       důsledek přebarvování. --text-muted dává 7,9:1. */
    --hero-desc-text: var(--text-muted);

    /* ---- Barvy pro DROBNÝ TEXT na světlém podkladu (2026-08-24) ----------
       ⚠ Tyhle dvě existují proto, že brandové odstíny na papíru neprojdou
       WCAG AA: --accent dává 2,1:1 a --warm-gray 3,4:1, přitom se obojí
       používalo na 11px text (rubriky, „Redakce · datum", popisky fotek).
       Ověřeno měřením v prohlížeči, ne odhadem.

       Původní tokeny se NERUŠÍ — na tmavém podkladu jsou v pořádku a používá
       je patička, lightbox i pruh s rubrikou v hlavičce článku (7,5:1).
       Rozhoduje podklad: na papíru tyhle, na tmavém ty původní. */
    --accent-text: #7a5f2e;                     /* zlatá čitelně: 5,6:1 papír / 5,1:1 karta */
    --meta-text:   var(--text-muted);           /* drobná metadata:  7,9:1 / 7,3:1 */

    /* 6. podrubriky — čtvrtý pruh hlavičky rubriky. Nejsvětlejší z pásu:
       musí se lišit od titulku i počítadla nad sebou a zároveň od sloupce
       štítků pod sebou (`--aside-bg`), se kterým měl původně tutéž hodnotu
       a splýval s ním. Rozdíl je záměrně jen 4–5 bodů na kanál. */
    --subcat-bg:     #f4f0e7;

    /* --------------------------------------------------------------
       VÝPIS RUBRIKY — střídavé řádky karet a sloupec štítků.
       Tři odstíny téhož teplého papíru; sloupec štítků je z nich
       nejtmavší, aby vedle obsahu četl jako samostatný panel.
       -------------------------------------------------------------- */
    --row-bg-odd:    transparent;               /* 1., 3., 5. řádek     */
    --row-bg-even:   #f3efe6;                   /* 2., 4., 6. řádek     */
    --aside-bg:      #f0ece2;                   /* sloupec štítků       */
    /* Táž váha jako linky mezi kartami — svislá čára při dvojnásobné sytosti
       vystupovala z rastru a četla se jako rám, ne jako dělítko. */
    --aside-rule:    var(--border);

    --text:         #1a1218;
    --text-muted:   #534a52;
    --warm-gray:    #8c8480;
    --border:       rgba(39,25,42,0.08);
    --border-solid: #e6e1e4;
    --footer-bg:    #1a0f1d;

    /* navigace (hlavička) */
    --nav-link:         #ffe7ff;
    --nav-link-hover:   #ffffff;
    --nav-link-active:  #ca6ecc;
    --nav-active-bg:    #433442;

    /* stavové barvy (formuláře, náhledový banner) */
    --c-error:        #9d2f2f;
    --c-error-bg:     #f9ecec;
    --c-error-border: #e0bcbc;
    --c-success-bg:     #edf3ee;
    --c-success-text:   #245538;
    --c-success-border: #bcd6c4;

    /* layout grid */
    --page-max:     1460px;
    --grid-cols:    12;
    /* Boční odstup uvnitř .page; hlavička + .page-col-bleed ho zvenku zruší stejným vzorcem.
       Tahle hodnota platí pro okna užší než kontejner (tablet, notebook) — tam je
       jediným odstupem od hrany displeje. Na širokém monitoru klesá na 10px, protože
       vzduch kolem už dělá vycentrovaný kontejner; na mobilu na 5px. Viz media query níž. */
    --page-pad:     24px;
    --page-bleed-margin-inline: calc(-1 * var(--page-pad));
    --page-bleed-width: calc(100% + 2 * var(--page-pad));

    /* Hlavička: logo vyplní pruh až na tuhle vzduchovou mezeru nahoře i dole. */
    --nav-h:        80px;
    --nav-logo-pad: 5px;
    --nav-logo-max-w: 360px;
    /* …a spodní hranice, pod kterou je nápis nečitelný. Bez ní ho menu na tabletu
       zmáčkne na pár pixelů. Na úzkém displeji ustupuje hranice šířce okna. */
    --nav-logo-min-w: min(200px, 55vw);

    /* Jedna svislice pro celý web: logo, názvy sekcí, hero i obsah karet.
       Všechno, co v bleedu nese text, se od hrany odsazuje o tuhle hodnotu. */
    --card-pad: 20px;

    /* Minimální tap target — MUST položka 02-AUDIT (i). Nesnižovat při rebrandu;
       inline odkazy uvnitř věty jsou z pravidla mimo. */
    --tap-min: 44px;
    --radius-sm: 2px;

    /* typografie (html 16px; odstavce článků = --fs-body 16px, zbytek škálován) */
    --font-sans:    'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:    'Space Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

    --fs-body:  1rem;          /* 16px — hlavní text příspěvků / odstavce */
    --fs-7:     0.5625rem;     /* 9px — nejmenší mono */
    --fs-8:     0.625rem;      /* 10px */
    --fs-9:     0.6875rem;     /* 11px */
    --fs-12:    0.875rem;      /* 14px — drobný text, perexy v mřížce */
    --fs-13:    0.9375rem;     /* 15px — meta, sekundární */
    --fs-15:    1.125rem;      /* 18px — titulky karet, mini nadpisy */
    --fs-16:    1.25rem;       /* 20px — h3 */
    --fs-17:    1.0625rem;     /* 17px — h4 */
    --fs-18:    1.375rem;      /* 22px — logo patička, důraz */
    --fs-19:    1.3125rem;     /* 21px — titulek v hero panelu */
    --fs-22:    1.625rem;      /* 26px — statistiky */
    --fs-23:    1.75rem;       /* 28px — h2 článku */
    --fs-26:    2rem;          /* 32px — nadpis rubriky */
    --fs-52:    4rem;          /* 64px — dekorativní číslo */

    --fs-display-main:   clamp(3rem, 10vw, 5.5rem);
    --fs-display-accent: clamp(1.875rem, 5vw, 3.25rem);

    --lh-none:    1;
    --lh-tight:   1.05;
    --lh-snug:    1.25;
    --lh-normal:  1.3;
    --lh-body:    1.55;
    --lh-relaxed: 1.65;
    --lh-loose:   1.7;

    --fw-hair:    200;
    --fw-light:   300;
    --fw-regular: 400;

    --track-display: -0.055em;
    --track-tight:   -0.03em;
    --track-slight:  -0.015em;
    --track-label:   0.1em;
    --track-label-m: 0.12em;
    --track-label-w: 0.2em;
    --track-label-x: 0.22em;
}

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

/*
 * Vodorovný přetok nikdy netvoří lištu.
 * Pruh sekcí (.section-bar::before) je široký 100vw, jenže 100vw počítá i se
 * svislým posuvníkem — na Windows je to ~15 px, o které pruh přeteče a dole
 * naskočí vodorovná lišta. `clip` (ne `hidden`) přetok ořízne, aniž by udělal
 * z kořene scroll kontejner, takže sticky hlavička dál drží nahoře.
 * Musí být na obou elementech — na jednom se hodnota jen propaguje a nezabere.
 */
html,
body { overflow-x: clip; }

/*
 * Nádech na pozadí: jemná šeď rozbitá měkkými vlnami (zadáno 2026-08-19).
 * První pokus s rozmazanou fotkou klenby padl — dělal na sebe pozor a studená
 * modrošeď se rvala s teplým papírem webu.
 *
 * Vlny jsou SVG v `data:` URI, ne soubor: je to pár set bajtů přímo ve stylu,
 * takže nepřidávají request a nejde je vyčíst z cache ve staré verzi. Kreslí
 * se ve švestkové `--brand` na pár procentech krytí, takže drží teplou rodinu
 * palety a nezavádí novou barvu.
 *
 * `preserveAspectRatio='none'` + `background-size: 100% 100%` = vlny se
 * roztáhnou na okno v jakémkoli poměru. Křivky jsou dost mělké na to, aby
 * roztažení nebylo znát.
 *
 * ⚠ V `data:` URI nesmí zůstat `#` (rozdělil by URL na fragment) ani zalomený
 * řádek — barvy jsou proto `%23…` a celé SVG je na jednom řádku.
 *
 * Vrstva je `fixed`, takže při rolování stojí a obsah po ní klouže.
 * `z-index: -1` ji dá pod všechno: pozadí `body` se propaguje na plátno
 * a kreslí se dřív než potomci se zápornou vrstvou, takže ji nepřebije.
 */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cpath d='M0 250 C 260 170 460 330 760 268 S 1210 150 1440 220 L1440 900 L0 900 Z' fill='%2327192a' fill-opacity='.028'/%3E%3Cpath d='M0 470 C 300 400 500 560 820 500 S 1250 390 1440 450 L1440 900 L0 900 Z' fill='%2327192a' fill-opacity='.03'/%3E%3Cpath d='M0 700 C 340 630 560 780 880 720 S 1270 620 1440 676 L1440 900 L0 900 Z' fill='%2327192a' fill-opacity='.035'/%3E%3Cpath d='M0 360 C 280 290 480 440 800 380 S 1230 275 1440 335' fill='none' stroke='%2327192a' stroke-opacity='.05' stroke-width='1.5'/%3E%3Cpath d='M0 586 C 320 516 540 666 860 606 S 1260 500 1440 560' fill='none' stroke='%2327192a' stroke-opacity='.045' stroke-width='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    opacity: var(--bg-veil);
    pointer-events: none;
}

/*
 * Homepage zůstává bílá jako dřív (rozhodnuto 2026-08-19). Má hero i pás
 * rubriky tmavé přes celé okno, takže by z nádechu stejně zbyly jen okraje.
 *
 * `data-route` dává na `<body>` už `_includes/head.php`, takže se to obejde
 * bez zásahu do šablon: vlny se vypnou a papír s kontejnerem se vrátí na
 * neprůhledné hodnoty, které platily před zavedením vrstvy.
 */
body[data-route="home"]::before { display: none; }

body[data-route="home"] {
    --paper: #fff;
    --page-veil: var(--page-bg);
}

body {
    font-family: var(--font-sans);
    background: var(--paper);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    margin: 0;
    min-height: 100vh;
}

.mono { font-family: var(--font-mono); }

/* ----------------------------------------
   3. Základní texty: nadpisy + odstavce
   ---------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    margin: 0;
    color: var(--text);
}

h1 {
    font-weight: var(--fw-hair);
    color: var(--brand);
    font-size: var(--fs-26);
    line-height: var(--lh-snug);
    letter-spacing: var(--track-tight);
}

h2 {
    font-size: var(--fs-23);
    font-weight: var(--fw-light);
    line-height: var(--lh-snug);
    letter-spacing: var(--track-slight);
}

h3 {
    font-size: var(--fs-16);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    letter-spacing: -0.01em;
}

h4 {
    font-size: var(--fs-17);
    font-weight: var(--fw-light);
    line-height: 1.35;
}

h5 {
    font-size: var(--fs-13);
    font-weight: var(--fw-light);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}

h6 {
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    font-weight: 400;
    line-height: var(--lh-none);
    text-transform: uppercase;
    letter-spacing: var(--track-label-w);
    color: var(--accent-text);
}

p {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    line-height: var(--lh-relaxed);
    color: var(--text-muted);
    margin: 0;
}

small { font-size: var(--fs-12); line-height: var(--lh-body); }

strong { font-weight: var(--fw-regular); }

.muted { color: var(--meta-text); }

.lead {
    font-size: var(--fs-15);
    line-height: var(--lh-relaxed);
    color: var(--text-muted);
}

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

a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.nav-menu a:focus-visible,
.nav-logo:focus-visible { outline-offset: 2px; }

.footer a:focus-visible { outline-color: rgba(201, 169, 110, 0.85); }

a.skip-link:focus-visible { outline: none; }

/*
 * Obrázky se NEROZTAHUJÍ na výšku rodiče. Prototyp měl globální
 * `width/height: 100%; object-fit: cover` — fungovalo to, protože každý
 * jeho obrázek seděl v kontejneru s pevným poměrem. V těle příspěvku
 * žádný takový kontejner není a pravidlo by fotku zdeformovalo.
 * Komponenty, které výplň potřebují (.hero-latest-img, .feat-img-photo,
 * .g3-thumb-img), si ji předepisují samy.
 */
img,
picture { display: block; max-width: 100%; height: auto; }

button { font: inherit; cursor: pointer; }

/* ----------------------------------------
   4. Layout — kontejner, bleed, textový sloupec
   ---------------------------------------- */
/* hlavní 12sloupcový kontejner; sekce uvnitř zarovnáváme subgridem */
.page {
    box-sizing: border-box;
    max-width: var(--page-max);
    /* Závoj, ne krycí barva — pod kontejnerem má prosvítat nádech na pozadí.
       Neprůhledná hodnota `--page-bg` zůstává pro plochy, které prosvítat
       nesmí (světlý řádek ve výpisu rubriky ji dřív používal jako barvu). */
    background: var(--page-veil);
    margin: 0 auto;
    width: 100%;
    padding-inline: var(--page-pad);
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    column-gap: 0;
    row-gap: 0;
}

.page > * { grid-column: 1 / -1; }

/*
 * ⚠ `script` a `template` MUSÍ ze selektoru ven. Prohlížeč jim dává
 * `display: none` v user-agent stylu; `display: grid` odsud ho přebije
 * a JSON-LD se vysype na stránku jako viditelný text. Detail příspěvku
 * vypisuje `seo_jsonld_article()` přímo do `<main>`, takže na to narazí
 * hned. Sloučené `:not(a, b, c)` (ne řetězené) — bere specificitu
 * nejsilnějšího argumentu, takže se kaskáda nikam neposune.
 */
.page > *:not(.section-bar, script, template) {
    display: grid;
    grid-template-columns: subgrid;
}

.page > main > * { grid-column: 1 / -1; }

.page > main > *:not(.section-bar, script, template) {
    display: grid;
    grid-template-columns: subgrid;
}

.page-main { min-width: 0; }

/* Potomek .page mřížky přes celou šířku. Mimo mřížku (přihlašovací stránka
   náhledového zámku) se `grid-column` prostě neuplatní a nic nerozbije. */
.container { grid-column: 1 / -1; }

/*
 * Čtecí sloupec — detail příspěvku, textové stránky, 404.
 * Prototyp ho zavedl pro stránky, které nemají vlastní návrh; šířka 42rem
 * drží řádek kolem 70 znaků.
 */
.simple-main { border-bottom: 1px solid var(--border); }

.simple-inner {
    max-width: 42rem;
    margin: 0 auto;
    padding: 3rem var(--card-pad) 4rem;
}

.simple-inner > * + * { margin-top: 1rem; }
.simple-inner > h2 { margin-top: 2.25rem; color: var(--brand); }
.simple-inner > h3 { margin-top: 1.75rem; color: var(--brand); }

.simple-kicker {
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--accent-text);
}

.simple-inner code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--section-bg);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
}

/* ----------------------------------------
   5. Skip-link + sr-only
   ---------------------------------------- */
.skip-link,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus,
.skip-link:focus-visible {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    overflow: visible;
    z-index: 10001;
    padding: 0.5rem 1rem;
    background: var(--accent);
    color: var(--brand);
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* ============================================================
   NAV
============================================================ */
.nav {
    width: 100%;
    background: var(--brand);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

/*
 * Stejné boxy jako .page: padding zmenší obsahový sloupec na šířku <main> — pak .nav-inner
 * použije stejný bleed jako .page-col-bleed (100 % + 2×pad z *vnitřku* sloupce, ne z celé max šířky).
 */
.nav-page {
    box-sizing: border-box;
    max-width: var(--page-max);
    margin: 0 auto;
    width: 100%;
    padding-inline: var(--page-pad);
}

.nav-inner {
    /* Kotva pro rozbalený panel menu na úzkých displejích. */
    position: relative;
    display: flex;
    align-items: stretch;
    height: var(--nav-h);
    padding: 0;
    min-width: 0;
    margin-inline: var(--page-bleed-margin-inline);
    width: var(--page-bleed-width);
    box-sizing: border-box;
}

.nav-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    /* Logo drží svou velikost — místo ubírá posouvatelné menu, ne ono.
       Pod 640 px menu mizí a logo se zase smí přizpůsobit šířce okna. */
    flex: 0 0 auto;
    min-width: 0;
    /* Stejná svislice jako názvy sekcí a obsah karet — hlavička je v bleedu,
       takže bez odsazení by logo leželo na okraji displeje. */
    padding-left: var(--card-pad);
    padding-right: 28px;
    /* Čára uzavírá blok loga. Do 2026-08-21 na ni navazovala první položka menu
       a odsazení vpravo by mezi ni a podbarvení aktivní položky pustilo proužek
       pozadí; od zarovnání menu doprava mezi nimi mezera je záměrně. */
    border-right: 1px solid rgba(255,255,255,0.08);
    text-decoration: none;
    color: inherit;
}

.nav-logo-img {
    /* Pevná šířka, ne auto: jinak by flex-basis vycházel z plné velikosti
       obrázku a logo by na úzkém displeji vyjelo z pruhu. */
    width: var(--nav-logo-max-w);
    height: auto;
    min-width: var(--nav-logo-min-w);
    max-width: 100%;
    max-height: calc(var(--nav-h) - 2 * var(--nav-logo-pad));
    object-fit: contain;
}

.nav-menu {
    display: flex;
    align-items: stretch;
    list-style: none;
    flex: 1 1 auto;
    min-width: 0;
    /* Menu se rovná od PRAVA (zadáno 2026-08-21): poslední položka končí na
       pravé svislici kontejneru a volné místo zbývá mezi logem a menu.
       ⚠ V rozbalovacím panelu se to MUSÍ vrátit na flex-start — sloupec
       s `overflow-y: auto` zarovnaný na konec schová horní položky nad
       počátkem scrollu a nejde se k nim dorolovat. */
    justify-content: flex-end;
}

/* Tlačítko rozbalení — vidět je až pod prahem, kde se menu do pruhu nevejde. */
.nav-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding: 0 var(--card-pad);
    border: 0;
    border-left: 1px solid rgba(255,255,255,0.08);
    background: transparent;
    color: var(--nav-link);
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    cursor: pointer;
}

.nav-toggle:hover { color: var(--nav-link-hover); background-color: rgba(255, 231, 255, 0.08); }

.nav-toggle-bars {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 18px;
    height: 12px;
}

.nav-toggle-bars span {
    display: block;
    height: 1px;
    background: currentColor;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

/* Otevřeno → z proužků kříž. */
.nav[data-open] .nav-toggle-bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav[data-open] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav[data-open] .nav-toggle-bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav-menu li { display: flex; }

.nav-menu a {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--nav-link);
    padding: 0 20px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,0.08);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-menu a:hover {
    color: var(--nav-link-hover);
    background-color: rgba(255, 231, 255, 0.08);
}

.nav-menu a.active,
.nav-menu a.active:hover {
    color: var(--nav-link-active);
    background-color: var(--nav-active-bg);
}

.nav-menu-mark {
    font-size: 1.15em;
    line-height: 1;
    margin-right: 0.12em;
    font-weight: 300;
    flex-shrink: 0;
    align-self: center;
}

/*
 * Rozbalovací menu.
 *
 * Sbalený stav zapíná až `[data-js]`, které dopíše skript. Bez JS se menu
 * vykreslí rozbalené pod hlavičkou a odkazy fungují dál.
 */
@media (max-width: 1340px) {
    .nav-menu a { padding: 0 12px; }
}

@media (max-width: 1240px) {
    .nav-toggle { display: flex; }

    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 90;
        flex-direction: column;
        align-items: stretch;
        /* Viz poznámka u .nav-menu — zarovnání na konec platí jen pro vodorovný
           pruh, ve svislém panelu by odřízlo horní položky. */
        justify-content: flex-start;
        background: var(--brand);
        border-top: 1px solid rgba(255,255,255,0.08);
        border-bottom: 1px solid rgba(255,255,255,0.08);
        max-height: calc(100dvh - var(--nav-h));
        overflow-y: auto;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    }

    .nav[data-js] .nav-menu { display: none; }
    .nav[data-js][data-open] .nav-menu { display: flex; }

    .nav-menu li { display: block; }

    .nav-menu a {
        padding: 16px var(--card-pad);
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        font-size: var(--fs-12);
    }

    .nav-menu li:last-child a { border-bottom: 0; }
}

/* ============================================================
   HERO
============================================================ */
.hero {
    min-height: 380px;
    /* Bez spodní linky (2026-08-22) — pod herem hned navazuje lišta sekce
       a linka nad ní dělala zbytečný předěl. Táž úprava jako u `.featured`
       a u karet v `.grid3--home`. */
    align-items: stretch;
}

.hero-left {
    grid-column: span 6;
    /* Levý odstup není kosmetika: hero sedí v bleedu, takže bez něj by text
       ležel na hraně displeje všude, kde je okno užší než kontejner. */
    padding: 52px var(--card-pad) 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid var(--border);
    min-width: 0;
}

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
}

.hero-eyebrow-line {
    width: 28px;
    height: 1px;
    background: var(--accent);
    flex-shrink: 0;
}

/* Je to h1 (jediný nadpis první úrovně na homepage), ale vypadá jako kicker —
   proto se dědičné styly h1 přebíjejí. */
h1.hero-eyebrow-text,
.hero-eyebrow-text {
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    font-weight: var(--fw-regular);
    line-height: var(--lh-none);
    text-transform: uppercase;
    letter-spacing: var(--track-label-x);
    color: var(--accent-text);
}

/*
 * Kresba vlevo, text vpravo na její optické ose — a když je sloupec úzký, pod sebe.
 * `margin-block: auto` posadí celý blok doprostřed volného místa mezi kickerem
 * a spodní hranou sloupce.
 */
.hero-bottom {
    margin-block: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

p.hero-desc {
    /* Radši se zúží, než aby hned skočil pod kresbu — vedle sebe drží déle. */
    flex: 1 1 240px;
    max-width: 380px;
    color: var(--hero-desc-text);
}

/*
 * Ruční kresba — akcent, ne ilustrační výplň. `alt=""`, protože nenese
 * informaci navíc; obsah sekce říká text vedle ní.
 */
.hero-illu {
    width: auto;
    height: auto;
    max-width: min(280px, 45%);
    object-fit: contain;
    flex: 0 0 auto;
    mix-blend-mode: multiply;
}

.hero-right {
    grid-column: span 6;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Celá pravá polovina „na doraz“ — žádný padding (vně jen .page). */
    padding: 0;
}

/* Pevný poměr 16:9 — výšku určuje fotka, ne to, jak dlouhý je text vlevo. */
.hero-latest {
    flex: 0 0 auto;
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    /* Pojistka pro velmi úzké displeje; tam poměr ustoupí textu v překryvu. */
    min-height: 200px;
    background: var(--brand);
    text-decoration: none;
    color: inherit;
}

a.hero-latest:hover .hero-latest-cta {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.6);
}

.hero-latest-cat-badge {
    position: absolute;
    top: 15px;
    right: 0;
    z-index: 3;
    max-width: 85%;
    padding: 7px 12px 8px 14px;
    background: #873089;
    color: #fff;
    font-size: var(--fs-8);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1.15;
    pointer-events: none;
}

.hero-latest-media {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-latest-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-latest-fallback {
    position: absolute;
    inset: 0;
    background: var(--brand);
    pointer-events: none;
}

/*
 * Tmavý pruh pod fotkou je pozadím textu, ne plochou v obrázku. Dřív ho
 * kreslil překryv oříznutý na procenta výšky — ten se při každé změně poměru
 * karty rozešel s textem (na mobilu končil titulek na světlé fotce).
 * Takhle hranu určuje `padding-top`: kolik vzduchu nad textem, tolik pruhu.
 */
.hero-latest-body {
    position: relative;
    z-index: 2;
    padding: 18px var(--card-pad) 22px;
    margin-top: auto;
    background: rgba(39, 25, 42, 0.8);
}

.hero-latest-kicker {
    font-size: var(--fs-8);
    text-transform: uppercase;
    letter-spacing: var(--track-label-w);
    color: #fff;
    margin: 0 0 12px;
}

.hero-latest-title {
    font-family: var(--font-sans);
    font-size: var(--fs-19);
    font-weight: var(--fw-light);
    color: #fff;
    line-height: var(--lh-normal);
    letter-spacing: -0.01em;
    margin: 0 0 12px;
}

.hero-latest-excerpt {
    font-size: var(--fs-13);
    font-weight: var(--fw-light);
    line-height: var(--lh-relaxed);
    color: #fff;
    margin: 0 0 14px;
}

.hero-latest-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-latest-meta {
    font-size: var(--fs-9);
    color: #fff;
    letter-spacing: 0.05em;
}

.hero-latest-cta {
    font-size: var(--fs-9);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    padding-bottom: 2px;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.hero-latest--empty {
    justify-content: center;
    padding: 28px var(--card-pad);
    background: var(--section-bg);
    border: 1px dashed var(--border);
    min-height: 220px;
}

.hero-latest-empty-title {
    font-size: var(--fs-9);
    text-transform: uppercase;
    letter-spacing: var(--track-label-w);
    color: var(--brand);
    margin: 0 0 12px;
}

.hero-latest-empty-text {
    font-size: var(--fs-13);
    color: var(--text-muted);
    line-height: var(--lh-relaxed);
    margin: 0;
    max-width: 36em;
}

/* Dva články jen pod pravou polovinou hero (uvnitř .hero-right) */
.hero-sub {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    min-width: 0;
    flex-shrink: 0;
    margin-top: auto;
    border-top: 1px solid var(--border);
}

.hero-sub-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    text-decoration: none;
    color: inherit;
    padding: 20px var(--card-pad) 24px;
    min-height: 0;
    min-width: 0;
    transition: background-color 0.15s ease;
    border-right: 1px solid var(--border);
    /* Obě karty stejný podklad — dřív byla druhá bílá a splývala se stránkou. */
    background: var(--card-bg);
}

.hero-sub-card:nth-child(2) { border-right: none; }

a.hero-sub-card:hover { background: var(--card-bg-hover); }

.hero-sub-cat {
    font-size: var(--fs-8);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    /* ⚠ Bylo #a5793f natvrdo (3,3:1 na kartě). Barva patří do tokenu, ať se
       dá přebarvit s ostatními. */
    color: var(--accent-text);
    margin-bottom: 10px;
}

.hero-sub-title {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: 1.38;
    color: var(--text);
    margin: 0 0 10px;
}

.hero-sub-meta {
    font-size: var(--fs-9);
    color: var(--meta-text);
    letter-spacing: 0.04em;
    margin-top: auto;
}

.hero-sub-card--empty {
    cursor: default;
    pointer-events: none;
}

.hero-sub-card--empty .hero-sub-title {
    margin-bottom: 0;
    font-size: var(--fs-13);
    font-weight: var(--fw-light);
    color: var(--text-muted);
}

/* ============================================================
   SECTION BAR
============================================================ */
.section-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* Ne --page-pad: název sekce má stát na stejné svislici jako obsah karet
       pod ním, a ty jsou v bleedu odsazené o --card-pad. */
    padding: 0 var(--card-pad);
    min-height: 44px;
    background: transparent;
}

/* Pozadí přes celou šířku monitoru; název sekce zůstává v šířce .page.
   ⚠ Vodorovné 1px čáry nahoře i dole odebrány 2026-08-22 — pruh má oddělovat
   jen odstínem pozadí. Kdyby se sem někdy vrátily, jde o `border-top`
   / `border-bottom` TADY, ne na `.section-bar` (ta má vlastní rámeček nulový). */
.section-bar::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 100vw;
    transform: translateX(-50%);
    z-index: 0;
    background: var(--section-bg);
    pointer-events: none;
}

.section-bar > * {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.section-bar-title {
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    text-transform: uppercase;
    letter-spacing: var(--track-label-w);
    color: var(--brand);
}

.section-bar-link {
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    text-transform: uppercase;
    letter-spacing: var(--track-label-m);
    /* ⚠ NE --warm-gray: na podkladu lišty (--section-bg) dává 2,8:1, tedy hluboko
       pod AA. Už na světlejším původním odstínu byl na 3,5:1. --text-muted má
       6,5:1. Po každé změně --section-bg tenhle kontrast přepočítej. */
    color: var(--text-muted);
    transition: color 0.15s;
    white-space: nowrap;
}

.section-bar-link:hover { color: var(--brand); }

/* ============================================================
   FEATURED ARTICLE
============================================================ */
.featured {
    /* Bez spodní linky (2026-08-22) — viz `.hero`. */
    min-height: 280px;
}

/* Náhled ve stejném poměru jako hero fotka. `align-self: start` je nutné —
   jinak by strečování gridu výšku přebilo a poměr by se neuplatnil. */
.feat-img {
    grid-column: span 7;
    background: #e4ddd7;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    align-self: start;
    /* Bez explicitní šířky si prvek s poměrem odvodí šířku z výšky
       (min-height × 16/9) a přeroste sloupec — na mobilu i celé okno. */
    width: 100%;
    min-height: 0;
    min-width: 0;
}

/* Béžový podklad je pro kresbu; pod fotkou musí být bílý — stejný důvod
   jako u `.g3-thumb--photo` (průhledné skeny z importu). */
.feat-img:has(.feat-img-photo) { background: #fff; }

.feat-img-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.2;
}

.feat-img-photo {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feat-img-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 8px var(--card-pad);
    background: rgba(39,25,42,0.55);
    font-family: var(--font-mono);
    font-size: var(--fs-8);
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.06em;
}

.feat-body {
    grid-column: span 5;
    padding: 36px var(--card-pad);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* 50/50 jen u bloku „Hlavní téma“ (.featured--half na <article>) */
.featured.featured--half .feat-img,
.featured.featured--half .feat-body {
    grid-column: span 6;
}

.feat-num {
    font-family: var(--font-mono);
    font-size: var(--fs-52);
    color: rgba(39,25,42,0.05);
    line-height: var(--lh-none);
    letter-spacing: -0.05em;
    margin-bottom: 12px;
}

.feat-cat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    text-transform: uppercase;
    letter-spacing: var(--track-label-w);
    color: var(--accent-text);
    margin-bottom: 14px;
}

.feat-cat::before {
    content: '';
    width: 20px;
    height: 1px;
    background: var(--accent);
    flex-shrink: 0;
}

.feat-body h2 { margin-bottom: 12px; }
.feat-body p { margin-bottom: 24px; }

.feat-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
}

.art-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    color: var(--meta-text);
    letter-spacing: 0.05em;
}

.read-more {
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--brand);
    border-bottom: 1px solid var(--accent);
    padding-bottom: 2px;
    transition: opacity 0.15s;
}

.read-more:hover { opacity: 0.7; }

/* ============================================================
   PAGE COLUMN BLEED — jedna šířka sloupce přes celý vnitřek .page
   (negace paddingu .page + 12× subgrid). Hero, hlavní téma, mřížky,
   rubrika: stejná levá/pravá hrana obsahu.
============================================================ */
.page-col-bleed {
    grid-column: 1 / -1;
    margin-inline: var(--page-bleed-margin-inline);
    width: var(--page-bleed-width);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: subgrid;
}

/* Cokoli uvnitř bleedu jde přes celou šířku. Bez tohohle by subgrid každý
   blok nacpal do prvního z dvanácti sloupců — a to je chyba, která se pozná
   až v prohlížeči, ne v kódu. */
.page-col-bleed > * {
    grid-column: 1 / -1;
    min-width: 0;
}

/* …a komponenty, které samy dělí obsah do sloupců, si mřížku dědí dál. */
.page-col-bleed > .hero,
.page-col-bleed > .featured,
.page-col-bleed > .grid3 {
    display: grid;
    grid-template-columns: subgrid;
}

/* ============================================================
   MŘÍŽKA KARET (homepage i stránkované výpisy)
============================================================ */
.grid3 { border-bottom: 1px solid var(--border); }

.g3-card {
    grid-column: span 4;
    padding: var(--card-pad);
    border-right: 1px solid var(--border);
    transition: background 0.15s, box-shadow 0.15s;
    min-width: 0;
    /* Výpis má víc než jeden řádek karet — bez linky by řádky splynuly.
       Poslední řádek ji má taky, kryje se s rámem .grid3. */
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

a.g3-card {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.g3-card h3 { color: var(--text); }

.g3-card:nth-child(3n) { border-right: none; }

/*
 * Homepage: mřížka je vždy JEDEN řádek tří karet a hned pod ní navazuje lišta
 * další sekce nebo tmavý pás. Spodní linka karet se tam kryje s linkou mřížky
 * a dělá dvojitý předěl těsně nad pruhem (odebráno 2026-08-22).
 *
 * ⚠ Jen na homepage. Ve výpisech (archiv, rubrika, štítek) má mřížka víc řádků
 * a bez spodní linky by řádky splynuly — proto se `.grid3` neupravuje globálně.
 * Blok souvisejících pod článkem si linku zatím nechává.
 */
.grid3--home,
.grid3--home .g3-card { border-bottom: none; }

.g3-card:hover {
    background: var(--off-white);
    box-shadow: inset 0 0 0 1px rgba(39, 25, 42, 0.04);
}

.g3-thumb {
    width: 100%;
    aspect-ratio: 3/2;
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    background: #ede8e2;
}

.g3-thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.g3-card--empty {
    cursor: default;
    pointer-events: none;
    color: var(--text-muted);
}

.g3-card--empty .g3-thumb { opacity: 0.55; }

/* Tři podklady pro kresby, ať se v mřížce neopakuje jedna a táž barva.
   Fotky je NEDOSTÁVAJÍ (viz `_includes/article-card.php`) — část skenů má
   průhledné pozadí a barva by jim prosvítala skrz. */
.g3-thumb-1 { background: #ede8e2; }
.g3-thumb-2 { background: #e2e8ed; }
.g3-thumb-3 { background: #e5ede2; }
.g3-thumb--photo { background: #fff; }

.g3-thumb svg { opacity: 0.2; }

.g3-cat {
    font-family: var(--font-mono);
    font-size: var(--fs-8);
    text-transform: uppercase;
    letter-spacing: var(--track-label-w);
    color: var(--accent-text);
    margin-bottom: 9px;
}

.g3-card h2,
.g3-card h3 {
    font-size: var(--fs-15);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}

.g3-card p {
    font-size: var(--fs-13);
    line-height: var(--lh-body);
    margin-bottom: 12px;
}

/* Perex z Quillu je HTML — může nést víc odstavců. Poslední nesmí odtlačit
   patičku karty, tu drží `margin-top: auto` na .g3-meta. */
.g3-excerpt > p:last-child { margin-bottom: 0; }

.g3-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    color: var(--meta-text);
    margin-top: auto;
    padding-top: 12px;
}

/* ============================================================
   RUBRIKA BAND (tmavý pás na homepage)
============================================================ */
.rubrika {
    background: var(--brand);
    padding: 32px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.rub-head {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    /* Stejná svislice jako karty rubriky pod ní — proto --card-pad, ne --page-pad. */
    padding-inline: var(--card-pad);
    margin-bottom: 24px;
}

.rub-label {
    font-family: var(--font-mono);
    font-size: var(--fs-8);
    text-transform: uppercase;
    letter-spacing: var(--track-label-x);
    color: rgba(201,169,110,0.7);
    margin-bottom: 5px;
}

h2.rub-title {
    font-size: var(--fs-26);
    font-weight: var(--fw-hair);
    font-style: italic;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: var(--lh-none);
}

.rub-link {
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    text-transform: uppercase;
    letter-spacing: var(--track-label-m);
    color: rgba(255,255,255,0.55);
    transition: color 0.15s;
    white-space: nowrap;
}

.rub-link:hover { color: var(--accent-text); }

.rub-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    gap: 1px;
    background: rgba(255,255,255,0.06);
}

.rub-card {
    background: var(--brand);
    padding: var(--card-pad);
    transition: background 0.15s, box-shadow 0.15s;
    min-width: 0;
}

a.rub-card {
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}

.rub-card:nth-child(1) { grid-column: span 6; }
.rub-card:nth-child(2) { grid-column: span 3; }
.rub-card:nth-child(3) { grid-column: span 3; }

.rub-card:hover {
    background: #3d2641;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.rub-card-img {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    background: #3d2f42;
}

.rub-card-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rci-1 { background: #3d2f42; }
.rci-2 { background: #332538; }
.rci-3 { background: #3a2e3f; }

.rub-card-img svg { opacity: 0.3; }

.rub-card-cat {
    font-family: var(--font-mono);
    font-size: var(--fs-8);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(201,169,110,0.75);
    margin-bottom: 8px;
}

.rub-card h3 {
    font-size: var(--fs-16);
    font-weight: var(--fw-light);
    color: rgba(255,255,255,0.92);
    line-height: var(--lh-normal);
    margin-bottom: 8px;
}

.rub-card h4 {
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    color: rgba(255,255,255,0.85);
    line-height: 1.35;
    margin-bottom: 8px;
}

.rub-card-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    color: rgba(255,255,255,0.5);
}

/* ============================================================
   VÝPISY — archiv, rubrika, štítek
============================================================ */
/* Hlavička výpisu: kicker + nadpis + drobečky, ve stejné svislici jako karty. */
/* Nahoře nula: pruh drobečků uvnitř musí navazovat na hlavičku, ne se v ní
   vznášet. Vzduch, který tu dřív byl, dostává nadpis přes `.breadcrumb`
   margin-bottom (u výpisů bez drobečků ho vrací pravidlo pod tímhle). */
.listing-head {
    grid-column: 1 / -1;
    padding: 0 var(--card-pad) 28px;
    min-width: 0;
}

/* Výpis, který drobečky nemá (kdyby takový vznikl), by jinak začal těsně
   pod hlavičkou. */
.listing-head:not(:has(.breadcrumb)) { padding-top: 36px; }

/*
 * Hlavička zakončená pruhem (výpis rubriky) nemá dole vzduch: karty i sloupec
 * štítků mají navazovat přímo na pruh s počítadlem, ne se pod ním vznášet.
 * Archiv a štítek pruh nemají, těm 28 px zůstává.
 *
 * Specificita 0,2,0 — přebíjí i zkrácený `padding` v mobilním zlomu, který
 * stojí v souboru níž.
 */
.listing-head:has(.listing-desc.band) { padding-bottom: 0; }

/* Podrubriky jsou čtvrtý pruh pásu, ne řádek na papíru pod ním — proto
   nulová mezera na obou stranách a vzduch dělá jen vnitřní odsazení.
   Třída `band` je jen v šabloně rubriky; `.term-list` pod příspěvkem
   (rubriky a štítky článku) zůstává beze změny. */
.listing-head .term-list.band {
    --band-bg: var(--subcat-bg);
    padding: 14px 0;
    margin: 0;
}

/*
 * Nadpis výpisu jako pruh přes celé okno — týž mechanismus jako hlavička
 * detailu (`.band`, viz varování u něj). Kicker („Rubrika") je uvnitř
 * nadpisu, ne nad ním: skica má „● KATEGORIE NÁZEV" na jednom řádku.
 */
.listing-title {
    --band-bg: var(--title-bg);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 14px;
    /* Stejné písmo jako nadpis detailu (`.article-detail h1`) — obojí je
       titulek stránky v pruhu, nemá důvod se lišit. Když se mění tam,
       mění se i tady. */
    font-size: clamp(1.875rem, 4.2vw, 2.5rem);
    font-weight: var(--fw-light);
    line-height: 1.15;
    color: var(--title-text);
    padding: 18px 0 20px;
    /* Nula: pod titulkem navazuje pruh s počítadlem. Mezera by mezi nimi
       nechala prosvítat papír stránky a dva pruhy by se rozpadly na dva. */
    margin: 0;
}

.listing-title__kicker {
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    font-weight: var(--fw-regular);
    text-transform: uppercase;
    letter-spacing: var(--track-label-x);
    color: var(--accent-text);
    /* Nesmí se roztáhnout — jinak by název spadl na vlastní řádek. */
    flex: none;
}

/* ============================================================
   VÝPIS SE SLOUPCEM ŠTÍTKŮ (rubrika)
============================================================ */
/*
 * Poměr sloupců je **40 / 40 / 20** (dvě karty + štítky), zadáno 2026-08-19.
 *
 * ⚠ Tady se ZÁMĚRNĚ nejede na subgridu jako zbytek webu. Dvanáctisloupcová
 * mřížka umí 40/40/20 jen jako 4,8 + 4,8 + 2,4 sloupce, což celé číslo není.
 * `.listing-split` si proto zakládá vlastní rytmus přes `fr`. Vnější hrany
 * pořád sedí na kontejneru (blok je `1 / -1`), takže se svislice s logem
 * nerozejde — mění se jen to, kde uvnitř padnou linky mezi kartami.
 *
 * .page-col-bleed (12) → .listing-split (4fr 1fr) → .listing-main (1fr 1fr)
 */
.listing-split {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 4fr 1fr;   /* 80 % obsah + 20 % štítky */
}

.listing-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* 2 × 40 % kontejneru */
    align-content: start;
    min-width: 0;
}

.listing-main > * { grid-column: 1 / -1; min-width: 0; }

.listing-main > .grid3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Karta si nesmí nést `span 4` ze základní třísloupcové mřížky. */
.grid3--split .g3-card { grid-column: auto; }
.grid3--split .g3-card:nth-child(3n) { border-right: 1px solid var(--border); }
.grid3--split .g3-card:nth-child(2n) { border-right: none; }

/*
 * Střídavé pruhy řádků (zadáno 2026-08-19). Řádek jsou DVĚ karty, takže se
 * cyklus počítá po čtyřech, ne po dvou.
 *
 * ⚠ Karta nesmí dostat `background` přímo — pravidlo by muselo soupeřit
 * o specificitu s `:hover` a se zlomem na mobilu (kde je řádek jedna karta).
 * Mění se proto jen PROMĚNNÁ; `background` je zapsané na jednom místě a
 * `:hover` ho přebije bez ohledu na pořadí v souboru.
 */
.grid3--split .g3-card { background: var(--row-bg, var(--row-bg-odd)); }
.grid3--split .g3-card:nth-child(4n+3),
.grid3--split .g3-card:nth-child(4n+4) { --row-bg: var(--row-bg-even); }

/* Najetí musí být znát na OBOU odstínech — proto tmavší papír, ne světlejší
   `--off-white`, kterým se rozsvěcují karty v ostatních mřížkách. */
.grid3--split .g3-card:hover { background: var(--card-bg-hover); }

/* ---- vodorovná karta ---- */
.g3-card--row {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;

    /*
     * Horní hrana fotky patří na horní hranu VERZÁLEK titulku, ne na horní
     * hranu jeho řádkového boxu — ty se liší o půlku prokladu (2,7 px) plus
     * o to, co si font nechává nad verzálkami (5 px). Bez posunu vypadá
     * fotka vysazená nad text, i když měření hlásí shodné `top`.
     *
     * Hodnota platí pro Work Sans v 18px/1,3; při změně velikosti titulku
     * ve výpisu se přeměří (v prohlížeči: `fontBoundingBoxAscent`
     * mínus `actualBoundingBoxAscent` pro „H“ plus půlka prokladu).
     */
    --card-row-optical: 8px;
}

.g3-card__media {
    /* Pevná stopa, ať se karty v řádku nerozejdou podle délky titulku. */
    flex: 0 0 38%;
    margin-bottom: 0;
    aspect-ratio: 4 / 3;
}

.g3-card--row .g3-card__media { margin-top: var(--card-row-optical); }

.g3-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

/* Štítek a rubrika na jednom řádku pod nadpisem (pořadí ze skici:
   nadpis → termy → úryvek). */
.g3-card__terms {
    font-family: var(--font-mono);
    font-size: var(--fs-8);
    text-transform: uppercase;
    letter-spacing: var(--track-label-w);
    color: var(--accent-text);
    margin-bottom: 9px;
}

/* ---- sloupec se štítky ---- */
/*
 * Vlastní podklad a svislá linka, ať se sloupec nepřelévá do karet
 * (zadáno 2026-08-19). Linka má stejnou váhu jako linky mezi kartami —
 * oddělení nese podklad, čára jen dokresluje rastr.
 *
 * Bez `align-self: start`: sloupec se natahuje na výšku celého bloku, takže
 * podklad i linka jdou od první karty po poslední. Obsah v něm stejně stojí
 * nahoře.
 */
.tag-cloud {
    padding: var(--card-pad);
    background: var(--aside-bg);
    border-left: 1px solid var(--aside-rule);
    border-bottom: 1px solid var(--border);
    min-width: 0;
}

.tag-cloud__title {
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    font-weight: var(--fw-regular);
    text-transform: uppercase;
    letter-spacing: var(--track-label-x);
    color: var(--brand);
    margin: 0 0 14px;
}

.tag-cloud__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Nejdelší název má 28 znaků — pilulka musí umět zalomit, ne přetéct. */
.tag-cloud__items li { min-width: 0; }

.tag-cloud .term-list__link.is-active {
    border-color: var(--accent);
    background: var(--accent-pale);
    color: var(--brand);
}

/*
 * ⚠ Tenhle zlom MUSÍ stát ZA definicemi `.listing-main` a `.tag-cloud`, ne
 * v hromadném bloku `@media (max-width: 1240px)` nahoře u navigace: ten je
 * v souboru dřív a základní `grid-column` by ho přebilo. Chyceno měřením —
 * sidebar zůstal vedle karet, i když pravidlo „existovalo".
 *
 * Proč zrovna 1240: mezi 1025 a 1240 bere sloupec se štítky čtyři z dvanácti
 * sloupců, takže na kartu zbude 375 px a na fotku v ní 127 px. Z náhledu je
 * poštovní známka.
 */
@media (max-width: 1240px) {
    .listing-split { grid-template-columns: 1fr; }
    .grid3--split .g3-card:nth-child(2n) { border-right: none; }
    /* Sloupec je pod kartami, takže dělicí linka patří nahoru, ne doleva. */
    .tag-cloud {
        border-left: none;
        border-top: 1px solid var(--aside-rule);
    }
}
/* ⚠ Tohle pravidlo stojí v souboru ZA `.listing-title` a je specifičtější
   (0,1,1 proti 0,1,0), takže mu přebíjí `margin`. Nadpis v pruhu proto musí
   být vyňatý — jinak se pod ním otevře 8px mezera a pruh s počítadlem se od
   něj odtrhne. Chyceno měřením, v CSS to „vypadalo správně“. */
.listing-head h1:not(.band) { margin-bottom: 8px; }

.listing-kicker {
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    text-transform: uppercase;
    letter-spacing: var(--track-label-x);
    color: var(--accent-text);
    margin-bottom: 12px;
}

.listing-desc {
    max-width: 52ch;
    margin-top: 6px;
}

/*
 * Počítadlo příspěvků jako pruh přes celé okno — čtvrtý pruh hlavičky rubriky,
 * navazuje na titulek stejně jako datum na nadpis u detailu (zadáno 2026-08-19).
 * Nese ho jen výpis rubriky; archiv a štítky zůstávají bez pruhů.
 *
 * `max-width` z pravidla výš tu překáží: v pruhu je jedna krátká věta a
 * omezovat ji na 52 znaků nemá co řešit.
 */
.listing-desc.band {
    --band-bg: var(--count-bg);
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    letter-spacing: 0.05em;
    color: var(--count-text);
    max-width: none;
    padding: 14px 0;
    margin: 0;
}

.listing-head .term-list { margin-top: 14px; }

.articles__empty {
    color: var(--text-muted);
    font-style: italic;
    padding: 32px var(--card-pad);
}

/* Drobečková navigace */
/* ============================================================
   PRUHY HLAVIČKY ČLÁNKU
   Drobečky, rubrika, titulek a datum stojí každý ve vlastním pruhu přes
   celé okno. Barvu nese `--band-bg`, mechanismus je společný.
============================================================ */
/*
 * ⚠ Proč `isolation: isolate` a `z-index: -1`, a ne `z-index: 0`:
 *
 * Pozadí musí kreslit pseudoprvek, protože pruh potřebuje ven z kontejneru
 * na 100vw. Polohovaný pseudoprvek s `z-index: 0` se ale vykreslí NAD
 * nepolohovanými potomky — změřeno naostro: drobečky se vykreslily se
 * správnými barvami na správných místech a stejně nebyly vidět, protože je
 * pruh přemaloval. (`.section-bar` to řeší tím, že potomkům dává vlastní
 * vrstvu — jenže titulek je holý textový uzel, tomu se třída dát nedá.)
 *
 * `z-index: -1` samo by pruh zahnalo až za pozadí `.page`. Teprve
 * `isolation: isolate` na nosiči udělá vlastní stacking kontext, ve kterém
 * záporná vrstva zůstane — za obsahem pruhu, ale nad papírem stránky.
 */
.band {
    position: relative;
    isolation: isolate;
}

.band::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: -1;
    background: var(--band-bg, transparent);
    pointer-events: none;
}

.breadcrumb {
    --band-bg: var(--crumb-bg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 7px;
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    letter-spacing: 0.06em;
    padding: 12px 0;
    color: var(--crumb-text);
}

.breadcrumb a { color: var(--crumb-text); transition: color 0.15s; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb [aria-current="page"] { color: var(--crumb-current); }

/* Oddělovače jsou průsvitně bílé, ne zlaté — viz poznámka o kontrastu u tokenů. */
.breadcrumb [aria-hidden="true"] { color: var(--crumb-sep); }

/* Stránkování */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 24px var(--card-pad) 40px;
}

.pager__info {
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--meta-text);
    /* Uprostřed i když chybí jedno z tlačítek. */
    margin-inline: auto;
}

/* Seznam rubrik / štítků (podrubriky, terms u příspěvku) */
.term-list {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.term-list__label {
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--meta-text);
}

.term-list__items {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.term-list__link {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid var(--border-solid);
    background: #fff;
    font-size: var(--fs-12);
    font-weight: var(--fw-light);
    color: var(--text-muted);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.term-list__link:hover {
    border-color: var(--accent);
    color: var(--brand);
    background: var(--off-white);
}

.term-list__link--tag::before {
    content: "#";
    color: var(--accent-text);
    margin-right: 0.2em;
}

/* ============================================================
   DETAIL PŘÍSPĚVKU
============================================================ */
/* Šířka jako kontejner v hlavičce: `.page-col-bleed` zvenku ruší --page-pad,
   takže obsah stojí na téže svislici jako logo (--card-pad). Žádný max-width —
   sloupec jde na plnou šířku kontejneru (--page-max 1460px). */
/* Nahoře nulové odsazení: pruh drobečků má sedět na hlavičce. Vzduch nad
   textem dělá až `.article-detail__kicker`. */
.article-detail { padding: 0 var(--card-pad) 4rem; }

.article-detail__kicker {
    --band-bg: var(--kicker-bg);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 0;
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    text-transform: uppercase;
    letter-spacing: var(--track-label-x);
    color: var(--kicker-text);
}

/*
 * Čárka před rubrikou — táž figura, jakou má `.hero-eyebrow` na homepage.
 *
 * ⚠ `::after` s `order: -1`, ne `::before`: `::before` už kreslí pruh (viz
 * `.band`). Pseudoprvek je tu flex položka, takže ho `order` přesune před
 * text; pruh je `position: absolute`, ten se pořadím netrápí.
 */
.article-detail__kicker::after {
    content: '';
    order: -1;
    width: 34px;
    height: 1px;
    background: currentColor;
    flex: none;
}

.article-detail h1 {
    --band-bg: var(--title-bg);
    font-size: clamp(1.875rem, 4.2vw, 2.5rem);
    font-weight: var(--fw-light);
    line-height: 1.15;
    color: var(--title-text);
    padding: 20px 0 22px;
    margin: 0;
}

.article-detail__meta {
    --band-bg: var(--meta-bg);
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    letter-spacing: 0.05em;
    color: var(--meta-text);
    padding: 14px 0;
    margin: 0;
}

/* Tečka mezi autorem a datem — jediný barevný akcent v jinak klidném pruhu. */
.article-detail__meta .sep { color: var(--meta-sep); }

/*
 * Úvodní blok detailu: fotka vlevo, text ji OBTÉKÁ — jako klasický `<img>`
 * ve Wordpressu (zadáno 2026-08-19). Do té doby stála fotka a perex v mřížce
 * 50/50, jenže perexy jsou krátké (medián 67 znaků), takže pravá půlka
 * u většiny článků zela prázdnotou pod jednou řádkou textu.
 *
 * ⚠ Obtékání funguje **jen proto, že `.article-detail` je normální blok**, ne
 * mřížka: leží uvnitř `.page-col-bleed`, takže na něj subgrid kaskáda
 * `.page > main > *` nedosáhne. Kdyby se z něj mřížka stala, obtékání zmizí —
 * položka mřížky se kolem floatu neobtéká a float uvnitř ní zůstane uvnitř.
 *
 * Blok se záměrně nečistí (`clearfix`): float má přetéct z perexu do těla,
 * jinak by se text obtékal jen o perex a pod fotkou by zbyla díra jako dřív.
 */
/*
 * Čtecí sloupec: všechno POD pruhy hlavičky se zužuje na `--article-col`
 * a centruje. Pruhy (drobečky, rubrika, titulek, datum) zůstávají na plné
 * šířce kontejneru — zkouší se zatím jen obsah (zadáno 2026-08-19).
 *
 * ⚠ Šířku i centrování musí mít úvodní blok a tělo **shodné**. Float z fotky
 * přetéká z jednoho do druhého; kdyby se jejich levé hrany rozešly, text by
 * se obtékal kolem fotky, která leží jinde.
 */
.article-detail__lead,
.article-detail__body,
.article-detail__terms,
.article-related,
.article-detail__back {
    max-width: var(--article-col);
    margin-inline: auto;
}

.article-detail__lead { margin-top: 28px; }

.article-detail__media {
    float: left;
    width: 50%;
    /* Odstup textu vpravo a pod fotkou. Vlevo nic — fotka stojí na svislici,
       na které stojí zbytek stránky. */
    margin: 0 var(--card-pad) 14px 0;
    /* Rezervuje výšku → žádný CLS (pipeline dává 1920×1080). */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--card-bg);
}

/*
 * Perex se od těla odlišuje kurzívou, větším stupněm a tmavší barvou —
 * tedy jen typografií (zadáno 2026-08-19). Tělo je `--text-muted` 16px
 * stojatě, takže rozdíl je znát na první pohled i uprostřed obtékání.
 *
 * ⚠ Žádná linka ani podklad pod perexem. Blok vedle floatu má **plnou šířku
 * kontejneru** — zúží se jen jeho řádky, ne box. `border-bottom` by se proto
 * natáhl i pod fotku. Kdo to bude chtít zkusit, potřebuje na perexu vlastní
 * formátovací kontext (`overflow`), jenže ten zase zruší obtékání dlouhých
 * perexů pod fotku. Typografie je tu jediná cesta bez vedlejších účinků.
 */
.article-detail__perex {
    font-size: var(--perex-size);
    line-height: var(--lh-relaxed);
    font-style: italic;
    font-weight: var(--fw-light);
    color: var(--perex-text);
}

/* Perex je krátký (medián 67 znaků), takže odstavců bývá jeden — ale když
   jich je víc, nesmí se slít. */
.article-detail__perex > * + * { margin-top: 0.9em; }

/* ⚠ Barva se MUSÍ opakovat na `p`, nestačí ji zdědit z bloku výš. Globální
   `p { color: … }` míří na prvek přímo, kdežto dědění nemá specificitu žádnou
   — takže dokud tenhle řádek chyběl, `--perex-text` se vůbec neprojevil
   a perex jel na barvě těla. Táž past, kterou už jednou řešilo
   `.article-detail__body p`. (Kurzíva se dědí bez potíží, protože
   `font-style` globální `p` nenastavuje.) */
.article-detail__perex p { margin: 0; color: var(--perex-text); }

.article-detail__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tělo příspěvku — jediné místo na webu, kde se čte souvisle. */
.article-detail__body {
    font-size: var(--article-text);
    font-weight: var(--article-weight);
    line-height: var(--lh-loose);
    color: var(--text-muted);
}

/*
 * ⚠ Globální `p` si nese vlastní velikost, váhu i proklad a míří na prvek
 * PŘÍMO — dědění z bloku proti tomu prohraje bez ohledu na specificitu
 * (přímý zápis vždycky přebije hodnotu zděděnou od rodiče). Bez těchhle
 * tří řádků by se odstavce nezvětšily a vypadalo by to, že token neplatí.
 */
.article-detail__body p {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.article-detail__body > * + * { margin-top: 1.15em; }

.article-detail__body h2 {
    font-size: var(--fs-23);
    color: var(--brand);
    margin-top: 1.9em;
}

/*
 * Nadpisy musí zůstat nad textem, který uvádějí. Po zvětšení textu na 18 px
 * byl `h4` menší i lehčí než odstavce pod ním (dědil globálních 17 px a váhu
 * 300) a četl se jako oslabený text, ne jako nadpis. Ve 141 článcích z WP je
 * přitom `h4` v 53 z nich, `h3` v 51 — `h2` skoro nikde.
 *
 * ⚠ Silnějším řezem to nešlo: proměnný Work Sans je nasubsetovaný na
 * **200–400**, takže 400 je strop a cokoli víc by prohlížeč jen nasyntetizoval.
 * Hierarchii proto nese velikost a barva: h2 28 → h3 22 → h4 20 → text 18 px.
 */
.article-detail__body h3 {
    font-size: var(--fs-18);
    color: var(--brand);
    margin-top: 1.7em;
}

.article-detail__body h4 {
    font-size: var(--fs-16);
    font-weight: var(--fw-regular);
    color: var(--brand);
    margin-top: 1.5em;
}

.article-detail__body a {
    color: var(--brand);
    border-bottom: 1px solid var(--accent);
    transition: background 0.15s;
}

.article-detail__body a:hover { background: var(--accent-pale); }

/*
 * `max-width`, NE `width`. Dokud byl čtecí sloupec 42rem (672 px), `width: 100%`
 * obrázky z importu zmenšoval — jsou 595–900 px široké. Na plné šířce
 * kontejneru (1420 px) je začal natahovat, změřeno 1,58× až 2,39×, a skeny
 * viditelně změkly. `max-width` je zároveň to, co říká globální pravidlo pro
 * `img` — tenhle blok ho jen přebíjel.
 */
.article-detail__body img {
    max-width: 100%;
    height: auto;
}

/*
 * Odkaz kolem fotky, kterou lze zvětšit (`article_zoomable_images()` u fotek
 * v textu, šablona detailu u úvodní).
 *
 * ⚠ Selektor MUSÍ být vnořený. `.article-detail__body a` je 0,1,1 a prostý
 * `.article-zoom` (0,1,0) by proti němu prohrál — pod každou fotkou by se
 * táhlo zlaté podtržení jako pod odkazem ve větě a najetí by ji podbarvilo.
 * Táž past, kterou už jednou chytily galerie.
 */
.article-detail__body a.article-zoom,
.article-detail__media a.article-zoom {
    display: block;
    cursor: zoom-in;
    border-bottom: 0;
}

.article-detail__body a.article-zoom:hover,
.article-detail__body a.article-zoom:focus-visible { background: none; }

/* Úvodní fotka: bez rozměrů na odkazu nemá `height: 100%` na `<img>` čeho se
   chytit a fotka vypadne z poměru 16:9, který drží `.article-detail__media`. */
.article-detail__media a.article-zoom {
    width: 100%;
    height: 100%;
}

.article-detail__body ul,
.article-detail__body ol { padding-left: 1.3em; }

.article-detail__body li { margin-bottom: 0.4em; }

.article-detail__body blockquote {
    border-left: 2px solid var(--accent);
    padding-left: 1.1em;
    font-style: italic;
    color: var(--text);
}

.article-detail__body strong { color: var(--text); }

/* Patička článku musí být pod fotkou i u krátkého textu, který ji neobteče
   celou — jinak by se linka nad termy zařízla do poloviny fotky. */
.article-detail__terms,
.article-related,
.article-detail__back { clear: both; }

/* ---- související příspěvky pod článkem (2026-08-20) ---- */
/*
 * ⚠ Vlastní mřížka, ne `.grid3` z výpisů. Ta jede na subgridu zděděném
 * z `.page-col-bleed`, jenže `.article-detail` je normální blok (leží uvnitř
 * bleedu, viz komentář u úvodní fotky) — subgrid se sem nemá odkud propsat.
 */
.article-related {
    margin-top: 48px;
    padding-top: 26px;
    border-top: 1px solid var(--border);
}

.article-related__title {
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    font-weight: var(--fw-regular);
    text-transform: uppercase;
    letter-spacing: var(--track-label-x);
    color: var(--brand);
    margin: 0 0 18px;
}

.article-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Karta si nesmí přinést `span 4` ze základní třísloupcové mřížky — táž past
   jako u `.grid3--split` ve výpisu rubriky. */
.article-related__grid .g3-card {
    grid-column: auto;
    border-bottom: none;
}

.article-related__grid .g3-card:last-child { border-right: none; }

.article-detail__terms {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.article-detail__back { margin-top: 32px; }

/* Galerie v těle příspěvku (_lib/gallery.php → .article-gallery) */
/* ⚠ `clear: left` kvůli obtékané úvodní fotce: mřížka se kolem floatu
   neobtéká, jen se vedle něj zúží — tři fotky by se na půlce šířky srazily
   na proužek známek. Galerie proto vždycky začíná až pod fotkou. */
.article-gallery {
    clear: left;
    display: grid;
    /* Tři na řádek napevno — auto-fit dával na širokém sloupci až šest
       a galerie se rozpadla na proužek známek. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    /* Vystupovat není kam — sloupec má od 2026-08-18 plnou šířku kontejneru.
       Záporný margin by galerii shodil ze svislice, na které stojí logo. */
}

.article-gallery__item { margin: 0; }

.article-gallery__item img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--card-bg);
}

/* Tři sloupce jsou mřížka pro plný řádek. Galerie o dvou fotkách (19 z 54,
   nejčastější velikost vůbec) by v nich stála na dvou třetinách a třetina by
   zela prázdnotou — proto se počet sloupců u malých galerií srovná s počtem
   fotek. */
.article-gallery[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.article-gallery[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Jediná fotka nemá být oříznutá do dlaždice — ukáže se celá. */
.article-gallery[data-count="1"] .article-gallery__item img {
    aspect-ratio: auto;
    height: auto;
}

.article-gallery__item figcaption {
    font-family: var(--font-mono);
    font-size: var(--fs-8);
    line-height: var(--lh-body);
    color: var(--meta-text);
    padding: 6px 0 0;
    letter-spacing: 0.04em;
}

/* Fotka v galerii je odkaz sama na sebe (bez JS otevře plnou velikost).
 *
 * ⚠ Dvojitý selektor NENÍ omyl. Galerie leží uvnitř `.article-detail__body`,
 * kde `a` dostává zlatou linku pod textem a podbarvení při najetí (0,1,1).
 * Prosté `.article-gallery__link` (0,1,0) by prohrálo a pod každou fotkou by
 * se táhla linka jako pod odkazem ve větě. */
.article-gallery .article-gallery__link {
    display: block;
    position: relative;
    cursor: zoom-in;
    border-bottom: 0;
}

.article-gallery .article-gallery__link:hover,
.article-gallery .article-gallery__link:focus-visible { background: none; }

.article-gallery__link::after {
    /* Jemné ztmavení při najetí — jediný signál, že se dá kliknout. */
    content: "";
    position: absolute;
    inset: 0;
    background: var(--brand);
    opacity: 0;
    transition: opacity 0.15s;
}

.article-gallery__link:hover::after,
.article-gallery__link:focus-visible::after { opacity: 0.14; }

/* ============================================================
   FORMÁTOVÁNÍ Z EDITORU (Quill)
   Barva písma a zarovnání odstavce, které si redaktor nastaví v adminu.
============================================================ */
/* ⚠ Proč TŘÍDY a ne barva zapsaná u elementu: CSP ve `www/index.php` má
   `style-src 'self'`, takže prohlížeč zahodí každý atribut se stylem. Quill
   barvu takhle zapisuje ve výchozím stavu — v adminu by byla vidět, na webu
   ne. `www/admin/assets/js/admin.js` proto přeregistruje `formats/color` na
   class attributor (#e60000 → ql-color-e60000) a sanitizer pouští `span`
   s právě tímhle tvarem třídy.

   ⚠ Tatáž pravidla musí být i v `www/admin/assets/css/admin.css`, jinak barvu
   nevidí redaktor v editoru. Oba seznamy hlídá test frontend-design proti
   paletě zabudované v `quill.min.js` — po upgradu Quillu je potřeba je
   přegenerovat, ne dopisovat ručně.

   Zarovnání si Quill zapisuje třídou sám (`ql-align-*`), tam je to bez práce.
   `ql-align-left` neexistuje — vlevo je výchozí stav a nic se nezapisuje. */

.ql-align-center  { text-align: center; }
.ql-align-right   { text-align: right; }
/* Do bloku bez dělení slov trhá český text mezery na půl řádku, proto
   `hyphens`. Stojí to na `lang="cs"` v `_includes/head.php` — bez něj by
   prohlížeč dělil podle angličtiny. */
.ql-align-justify { text-align: justify; hyphens: auto; }

/* Paleta Quillu, 35 barev v pořadí, v jakém je redaktor vidí v editoru.
   ⚠ Bílá a světlé odstíny na papíru zmizí; je to volba redaktora, ne vada. */
.ql-color-000000 { color: #000000; } .ql-color-e60000 { color: #e60000; } .ql-color-ff9900 { color: #ff9900; } .ql-color-ffff00 { color: #ffff00; } .ql-color-008a00 { color: #008a00; } .ql-color-0066cc { color: #0066cc; } .ql-color-9933ff { color: #9933ff; }
.ql-color-ffffff { color: #ffffff; } .ql-color-facccc { color: #facccc; } .ql-color-ffebcc { color: #ffebcc; } .ql-color-ffffcc { color: #ffffcc; } .ql-color-cce8cc { color: #cce8cc; } .ql-color-cce0f5 { color: #cce0f5; } .ql-color-ebd6ff { color: #ebd6ff; }
.ql-color-bbbbbb { color: #bbbbbb; } .ql-color-f06666 { color: #f06666; } .ql-color-ffc266 { color: #ffc266; } .ql-color-ffff66 { color: #ffff66; } .ql-color-66b966 { color: #66b966; } .ql-color-66a3e0 { color: #66a3e0; } .ql-color-c285ff { color: #c285ff; }
.ql-color-888888 { color: #888888; } .ql-color-a10000 { color: #a10000; } .ql-color-b26b00 { color: #b26b00; } .ql-color-b2b200 { color: #b2b200; } .ql-color-006100 { color: #006100; } .ql-color-0047b2 { color: #0047b2; } .ql-color-6b24b2 { color: #6b24b2; }
.ql-color-444444 { color: #444444; } .ql-color-5c0000 { color: #5c0000; } .ql-color-663d00 { color: #663d00; } .ql-color-666600 { color: #666600; } .ql-color-003700 { color: #003700; } .ql-color-002966 { color: #002966; } .ql-color-3d1466 { color: #3d1466; }

/* ============================================================
   LIGHTBOX (assets/js/lightbox.js)
   Skript se načítá jen na stránce s galerií. Bez JS se sem nikdo nedostane.
============================================================ */
/* Zámek rolování pod překryvem. Třída přebíjí `overflow-x: clip` na html
   (specificita 0,1,0 > 0,0,1); po zavření se hodnota vrací sama. */
.lightbox-lock { overflow: hidden; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;          /* nad sticky hlavičkou (z-index 100) */
    display: grid;
    place-items: center;
    padding: clamp(12px, 4vw, 48px);
}

.lightbox[hidden] { display: none; }

.lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 15, 29, 0.94);
}

.lightbox__panel {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
}

.lightbox__figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.lightbox__img {
    /* Vejde se do okna v obou osách; odečteno místo na popisek a ovládání. */
    max-width: 100%;
    max-height: calc(100vh - 9rem);
    width: auto;
    height: auto;
    object-fit: contain;
    transition: opacity 0.15s;
}

.lightbox.is-loading .lightbox__img { opacity: 0.35; }

.lightbox__caption {
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    line-height: var(--lh-body);
    letter-spacing: 0.04em;
    color: #cfc7c9;
    text-align: center;
    margin: 0;
    max-width: 42rem;
    align-self: center;
}

.lightbox__caption[hidden] { display: none; }

.lightbox__close,
.lightbox__nav {
    position: absolute;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-family: var(--font-sans);
    line-height: 1;
    cursor: pointer;
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    display: grid;
    place-items: center;
    transition: background 0.15s, border-color 0.15s;
}

.lightbox__close:hover,
.lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent);
}

.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lightbox__close[hidden],
.lightbox__nav[hidden] { display: none; }

.lightbox__close {
    top: clamp(12px, 3vw, 28px);
    right: clamp(12px, 3vw, 28px);
    font-size: 1.75rem;
}

.lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    width: 3rem;
    height: 4rem;
}

.lightbox__nav--prev { left: clamp(6px, 2vw, 28px); }
.lightbox__nav--next { right: clamp(6px, 2vw, 28px); }

.lightbox__counter {
    position: absolute;
    bottom: clamp(10px, 2.5vw, 24px);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-8);
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.62);
}

.lightbox__counter[hidden] { display: none; }

/* Náhledový banner (token z adminu) */
.preview-banner {
    padding: 10px var(--card-pad);
    margin-bottom: 24px;
    background: var(--c-error-bg);
    color: var(--c-error);
    border: 1px solid var(--c-error-border);
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    line-height: var(--lh-body);
}

/* ============================================================
   TLAČÍTKA A FORMULÁŘE
============================================================ */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-min);
    padding: 0 22px;
    background: var(--brand);
    color: #fff;
    border: 1px solid var(--brand);
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.button:hover { background: #3d2641; border-color: #3d2641; color: #fff; }

.button--ghost {
    background: transparent;
    color: var(--brand);
    border-color: var(--border-solid);
}

.button--ghost:hover {
    background: var(--off-white);
    color: var(--brand);
    border-color: var(--accent);
}

.contact-form { max-width: 36rem; margin-top: 28px; }

.form-row { margin: 0 0 18px; }

.form-row label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-9);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--brand);
    margin-bottom: 7px;
}

.form-row input,
.form-row textarea {
    width: 100%;
    min-height: var(--tap-min);
    padding: 11px 12px;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border-solid);
    border-radius: var(--radius-sm);
}

.form-row textarea { resize: vertical; min-height: 9rem; }

.form-row input:focus,
.form-row textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.form-row.has-error input,
.form-row.has-error textarea { border-color: var(--c-error); }

.form-row__error {
    display: block;
    margin-top: 6px;
    font-size: var(--fs-12);
    color: var(--c-error);
}

.form-error,
.form-success {
    padding: 12px 14px;
    margin: 16px 0;
    font-size: var(--fs-13);
    line-height: var(--lh-body);
}

.form-error {
    background: var(--c-error-bg);
    color: var(--c-error);
    border: 1px solid var(--c-error-border);
}

.form-success {
    background: var(--c-success-bg);
    color: var(--c-success-text);
    border: 1px solid var(--c-success-border);
}

.form-note {
    font-size: var(--fs-12);
    color: var(--meta-text);
    margin: 16px 0 0;
}

.form-actions { margin-top: 22px; }

/* Honeypot (form.php::contact_honeypot_field) — vizuálně mimo obraz.
   Náhrada za inline style= (CSP style-src 'self' bez 'unsafe-inline'). */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ============================================================
   404
============================================================ */
.error-page {
    text-align: center;
    padding-block: 5rem;
}

.error-page__code {
    font-family: var(--font-mono);
    font-size: var(--fs-52);
    line-height: var(--lh-none);
    color: var(--accent-text);
    margin-bottom: 18px;
}

.error-page h1 { margin-bottom: 12px; }
.error-page p { margin-bottom: 20px; }

/* ============================================================
   NÁHLEDOVÝ ZÁMEK (_lib/gate.php — renderuje se MIMO layout)
============================================================ */
.gate {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Vlastní odstup: .gate stojí mimo .page, takže žádný gutter nedědí. */
    padding: 2rem var(--page-pad);
}

.gate__card {
    width: 100%;
    max-width: 26rem;
    background: #fff;
    border: 1px solid var(--border-solid);
    padding: 2rem var(--card-pad);
}

.gate__card h1 { margin-bottom: 10px; }
.gate__form { max-width: none; margin-top: 20px; }
.gate__foot { margin-top: 20px; margin-bottom: 0; font-size: var(--fs-12); }
.gate__foot a { border-bottom: 1px solid var(--accent); }

/* ============================================================
   FOOTER (mimo .page — jedna společná patička pro celý web)
============================================================ */
.footer {
    background: var(--footer-bg);
    padding: 44px 0 24px;
    border-top: 2px solid var(--accent);
}

/* Stejná šířka / 12 sloupců jako .page */
.footer-inner {
    box-sizing: border-box;
    max-width: var(--page-max);
    margin: 0 auto;
    width: 100%;
    padding-inline: var(--page-pad);
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    column-gap: 0;
    row-gap: 0;
}

.footer-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    column-gap: 40px;
    row-gap: 24px;
    padding-bottom: 32px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.footer-grid > div:nth-child(1) { grid-column: span 5; min-width: 0; }
.footer-grid > div:nth-child(2) { grid-column: span 3; min-width: 0; }
.footer-grid > div:nth-child(3) { grid-column: span 4; min-width: 0; }

/* Patička je jediné místo, kde --card-pad nesedí na svislici obsahu: sloupce
   jsou přímo v mřížce .footer-inner, ne v bleedu. Odsazení proto zvenku. */
.footer-grid > div { padding-inline: var(--card-pad); }

.footer-logo-text {
    font-size: var(--fs-18);
    font-weight: var(--fw-hair);
    color: #fff;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}

.footer-logo-text em { font-style: italic; color: var(--accent); }

.footer-desc {
    font-size: var(--fs-13);
    font-weight: var(--fw-light);
    color: rgba(255,255,255,0.55);
    line-height: var(--lh-loose);
}

.footer-col-title {
    font-family: var(--font-mono);
    font-size: var(--fs-8);
    text-transform: uppercase;
    letter-spacing: var(--track-label-w);
    color: rgba(201,169,110,0.75);
    margin-bottom: 14px;
}

.footer-links { list-style: none; }

.footer-links li { margin-bottom: 9px; }

.footer-links a {
    font-size: var(--fs-13);
    font-weight: var(--fw-light);
    color: rgba(255,255,255,0.62);
    transition: color 0.15s;
}

.footer-links a:hover { color: #fff; }

.footer-copy {
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    font-size: var(--fs-8);
    color: rgba(255,255,255,0.4);
    letter-spacing: var(--track-label);
    text-align: center;
    padding-top: 4px;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
    .hero-left {
        grid-column: 1 / -1;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 40px var(--card-pad) 36px;
    }
    /* Sloupec je přes celou šířku — kresba smí být větší, ať nevypadá zakrsle. */
    .hero-illu { max-width: min(300px, 40%); }
    .hero-right {
        grid-column: 1 / -1;
        padding: 0;
    }
    /* Selektory musí přebít `.featured.featured--half …` z desktopu, jinak
       zůstanou oba sloupce vedle sebe a na mobilu z nich jsou dva úzké pruhy. */
    .feat-img,
    .featured.featured--half .feat-img {
        grid-column: 1 / -1;
        /* Výšku určuje poměr, ne minimum — jinak by se s ním pral. */
        min-height: 0;
    }
    .feat-body,
    .featured.featured--half .feat-body {
        grid-column: 1 / -1;
        padding: 28px var(--card-pad) 36px;
    }
    /* Obtékání se vypíná na témže zlomu (1024), kde dřív perex padal pod
       fotku: na užším okně zbude vedle fotky proužek na čtyřicet znaků
       a text se láme po dvou slovech. Fotka jde nad text, přes celou šířku. */
    .article-detail__media {
        float: none;
        width: 100%;
        margin: 0 0 18px;
    }
    .g3-card {
        grid-column: span 6;
        border-right: 1px solid var(--border);
    }
    /* Dva sloupce → linku vpravo nemá každá druhá karta, ne každá třetí. */
    .g3-card:nth-child(3n) { border-right: 1px solid var(--border); }
    .g3-card:nth-child(2n) { border-right: none; }
    /* Homepage ukazuje jen jeden řádek karet, tak ať jsou plné dva sloupce.
       Ve stránkovaném výpisu se nic neskrývá — tam jsou karty obsah. */
    .grid3--home .g3-card:nth-child(3) { display: none; }
    .rub-card:nth-child(1) { grid-column: span 6; }
    .rub-card:nth-child(2) { grid-column: span 6; }
    .rub-card:nth-child(3) { display: none; }
    .footer-grid > div:nth-child(1),
    .footer-grid > div:nth-child(2) { grid-column: span 6; }
    .footer-grid > div:nth-child(3) { grid-column: 1 / -1; }
}

/* Od šířky kontejneru výš dělá odstup od hrany displeje samo vycentrování,
   tak ať se z obsahového sloupce neukrajuje víc, než je potřeba. */
@media (min-width: 1460px) {
    :root { --page-pad: 10px; }
}

@media (max-width: 640px) {
    /* Vedle tlačítka menu si logo bere, co zbyde. */
    .nav-logo { flex: 0 1 auto; }
    /* Procenta z úzkého sloupce by kresbu srazila na pár centimetrů. */
    .hero-illu { max-width: min(240px, 62%); }
    /* Na mobilu je každý pixel šířky znát — odstup na polovinu. */
    :root { --page-pad: 5px; }
    /* Na nejmenších displejích stačí ikona, slovo „Menu“ by ubíralo logu. */
    .nav-toggle-label { display: none; }
    /* Fotka vlevo a text vpravo dá na telefonu dva nečitelné proužky —
       karta se překlopí zpátky na svislou. */
    .g3-card--row {
        flex-direction: column;
        gap: 0;
    }
    .g3-card__media {
        flex: none;
        width: 100%;
        margin-bottom: 18px;
        aspect-ratio: 3 / 2;
    }
    /* Fotka je nad textem, ne vedle něj — optický posun nemá k čemu srovnávat. */
    .g3-card--row .g3-card__media { margin-top: 0; }
    .listing-main,
    .listing-main > .grid3 { grid-template-columns: 1fr; }
    /* Tři karty vedle sebe by na telefonu měly ~110 px — stejný důvod jako
       u galerie o pár řádků níž. */
    .article-related__grid { grid-template-columns: 1fr; }
    /* Jeden sloupec = řádek je jedna karta, takže se střídá po jedné.
       Přepisuje se PROMĚNNÁ, ne `background` — jinak by pravidlo přebilo
       `:hover`, který stojí v souboru výš. */
    .grid3--split .g3-card:nth-child(2n+1) { --row-bg: var(--row-bg-odd); }
    .grid3--split .g3-card:nth-child(2n)   { --row-bg: var(--row-bg-even); }

    .g3-card,
    .g3-card:nth-child(2n),
    .g3-card:nth-child(3n) {
        grid-column: 1 / -1;
        border-right: none;
    }
    .grid3--home .g3-card:nth-child(3) { display: flex; }
    .rub-card:nth-child(1),
    .rub-card:nth-child(2),
    .rub-card:nth-child(3) { grid-column: 1 / -1; }
    .rub-card:nth-child(3) { display: block; }
    .footer-grid > div:nth-child(1),
    .footer-grid > div:nth-child(2),
    .footer-grid > div:nth-child(3) { grid-column: 1 / -1; }
    /* Dřív tu .page přepisovala --page-pad na 20px, aby text na mobilu nelepil.
       Odstup dnes drží --card-pad přímo na komponentách a override škodil:
       vzorec bleedu se počítá z hodnoty v :root, takže se sekce rozešly
       s hlavičkou o 15 px. */
    .hero-left { padding: 36px var(--card-pad); }
    .hero-sub { grid-template-columns: 1fr; }
    .hero-sub-card {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .hero-sub-card:nth-child(2) { border-bottom: none; }
    .rubrika { padding: 24px 0; }
    .listing-head { padding: 0 var(--card-pad) 22px; }
    .listing-head:not(:has(.breadcrumb)) { padding-top: 28px; }
    /* Tři dlaždice vedle sebe by na telefonu měly ~110 px. */
    .article-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lightbox__nav { width: 2.5rem; height: 3.25rem; font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}