/* ============================================================
   mikroregion-frenstatsko.cz — styl skeletonu na paletě webu
   Tokeny palety (:root) jsou tady, vizuál v4 (vlny, sekce) v site.css.
   Hlavička, menu a patička v4 jsou tady (sekce 4, 5, 8).
   ============================================================ */

/* ----------------------------------------
   0. Tokens (design tokens — jediné místo pro brand/theming)
   Konvence jmen zrcadlí admin.css (--c-*). Per-projekt rebrand
   = přepiš tenhle blok, zbytek souboru na barvy nesahá.
   ---------------------------------------- */
:root {
    /* --- Paleta webu (odvozeno z loga + návrhu v4, přehled na color.html) --- */
    /* Značková zeleň (logo kopec + vlny) */
    --brand-green: #1c7a4c;   /* zeleň z loga */
    --forest-900:  #12291f;   /* nejtmavší — horní lišta, patička */
    --forest-800:  #17402c;
    --forest-700:  #1a4d3a;   /* tmavé nadpisy */
    --forest-600:  #2d6e4e;   /* střední zeleň */
    --forest-500:  #3f8b63;
    --forest-400:  #4f9b71;   /* světlejší */
    --forest-300:  #7bb894;   /* haze */
    --forest-200:  #b9dcc7;
    --forest-100:  #dff0e6;   /* nejsvětlejší tón */

    /* Amber / CTA (východ slunce) */
    --amber-600:   #c97d10;   /* hover */
    --amber-500:   #e8951f;   /* hlavní CTA */
    --amber-400:   #f2a838;
    --amber-100:   #fbe6c4;   /* jemný podklad */

    /* Radhošťská červená (rozeta z loga) — akcent, střídmě */
    --red-600:     #c5280d;   /* hover */
    --red-500:     #e5310f;   /* akcent */
    --red-100:     #fbd8cf;   /* jemný tón */

    /* Neutrály & text */
    --cream-bg:    #faf6ee;   /* pozadí stránky */
    --cream:       #f5ede0;
    --sand:        #efe6d6;
    --hat-black:   #171717;   /* černá z loga */
    --ink:         #1a1a1a;   /* text */
    --ink-soft:    #5a5a5a;   /* tlumený text */
    --white:       #ffffff;
    --line:        rgba(26, 77, 58, .14);  /* linky / oddělovače */

    /* Sémantické aliasy (co k čemu použít) */
    --color-bg:        var(--cream-bg);
    --color-text:      var(--ink);
    --color-heading:   var(--forest-700);
    --color-cta:       var(--amber-500);
    --color-cta-hover: var(--amber-600);
    --color-accent:    var(--red-500);

    /* Typografie (self-hosted woff2, @font-face v site.css) */
    --font-serif: "Crimson Pro", Georgia, "Times New Roman", serif;
    --font-sans:  "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Layout */
    --container: 1450px;   /* hlavní šířka obsahu napříč webem */
    --container-pad: clamp(1rem, 4vw, 2rem);
    /* Výška hlavičky (mobil 72 px v sekci 8). Tady, ne v site.css: :root
       v později načteném souboru by přebil i media query. */
    --header-h: 88px;

    /* --- Tokeny skeletonu (--c-*) přemapované na paletu --- */
    --font: var(--font-sans);

    --c-bg: var(--cream-bg);
    --c-surface: #fff;
    --c-primary: var(--forest-600);
    --c-primary-dark: var(--forest-700);
    --c-on-primary: #fff;
    --c-ink: var(--ink);
    --c-text: var(--ink);
    --c-text-soft: var(--ink-soft);
    --c-muted: var(--ink-soft);
    --c-border: var(--sand);
    --c-border-soft: var(--cream);
    /* Rámeček inputu je jediná hranice pole (bg inputu = bg okolí) → WCAG 1.4.11
       žádá ≥ 3:1 vůči --c-surface. #8a8f88 na #fff = 3,3:1 (dřívější #c9cdc6
       jen 1,6:1). Hlídá tests/tap-targets.test.php výpočtem — při rebrandu
       drž poměr, ne odstín. (QA M20) */
    --c-input-border: #8a8f88;
    --c-inverse-bg: var(--forest-900);
    --c-inverse-text: var(--forest-100);

    --c-error: #b23b3b;
    --c-error-bg: #fbeaea;
    --c-error-text: #8a2b2b;
    --c-error-border: #e3b6b6;
    --c-success-bg: #e8f1ea;
    --c-success-text: #235636;
    --c-success-border: #b8d6c2;

    --radius: 6px;
    --radius-sm: 4px;

    /* Spacing scale (mirror admin.css --space-*). Pro nový kód — existující
       deklarace se migrují postupně, ať se nezmění vizuální baseline naráz. */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* Minimální tap target. 44px = Apple HIG / Material 48dp a MUST položka (i)
       02-AUDIT. (WCAG 2.2 AA 2.5.8 žádá jen 24×24 — tohle je přísnější záměrně.)
       Nesnižovat při rebrandu; inline odkazy uvnitř věty jsou z pravidla mimo. */
    --tap-min: 44px;
}

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

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--c-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-primary-dark); }

button { font: inherit; cursor: pointer; }

hr {
    border: 0;
    border-top: 1px solid var(--c-border);
    margin: 2rem 0;
}

/* ----------------------------------------
   2. Typography
   ---------------------------------------- */
h1, h2, h3, h4 {
    margin: 0 0 .6em;
    line-height: 1.2;
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--color-heading);
    /* Dlouhé nezalomitelné slovo (jméno klienta, URL v titulku) jinak @320
       přeteče viewport (h-scroll, WCAG 1.4.10) — QA L24 + M3. `hyphens` stojí
       na lang="cs" v head.php. Platí pro všechny nadpisy, ne jen `.hero h1`. */
    overflow-wrap: anywhere;
    hyphens: auto;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lead { font-size: 1.15rem; color: var(--c-text-soft); }

small, .muted { color: var(--c-muted); }

/* ----------------------------------------
   3. Layout (container, grid)
   ---------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* ----------------------------------------
   4. Header / nav
   ---------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 246, 238, .94);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--line);
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: 2rem;
    min-height: var(--header-h);
}

.site-header__logo {
    /* Tap target ≥ 44 px (QA M4) — logo má 68 px (mobil 52), min-height je pojistka. */
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    gap: 1rem;
    text-decoration: none;
    margin-right: auto;
}
.site-header__logo-img { width: auto; height: 68px; }   /* v hlavičce 88 px */
.site-header__tag {
    padding-left: 1rem;
    border-left: 1px solid var(--line);
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--forest-600);
}

.site-nav ul {
    display: flex;
    gap: clamp(1rem, 2vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-nav__link {
    /* inline-flex + min-height: tap target 44 px (MUST 02-AUDIT §0 i). */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-min);
    min-width: var(--tap-min);   /* „Domů" má jen 43,55 px na šířku (F-04) */
    padding: .5rem 0;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;   /* „Členské obce" / „O mikroregionu" se nesmí zalomit do dvou řádků */
    color: var(--forest-700);
    transition: color .2s;
}
/* Úzký desktop: tagline vedle loga by vytlačil menu na dva řádky. */
@media (min-width: 1101px) and (max-width: 1280px) {
    .site-header__tag { display: none; }
}
.site-nav__link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 18px;
    height: 2px;
    background: var(--red-500);
    transform: translateX(-50%) scaleX(0);
    transition: transform .2s;
}
.site-nav__link:hover { color: var(--brand-green); }
.site-nav__link:hover::after,
.site-nav__link.is-active::after { transform: translateX(-50%) scaleX(1); }

/* Mobilní menu — tlačítko (jen s JS, viz .js na <html> z js-flag.js) */
.nav-toggle {
    display: none;
    align-items: center;
    gap: .6rem;
    min-height: var(--tap-min);
    padding: .7rem 1rem;
    border: 0;
    border-radius: var(--radius-pill, 999px);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--line);
    font: 500 .75rem/1 var(--font-sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--forest-700);
    cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 18px; height: 12px; }
.nav-toggle__bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .25s, opacity .2s, top .25s;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); }

/* ----------------------------------------
   5. Footer — hlava = vlna se stuhou (edge-a), dole lišta
   ---------------------------------------- */
.site-footer {
    position: relative;
    margin-top: var(--edge-h);            /* místo pro vyčnívající hlavu */
    background: var(--forest-800);
    color: rgba(250, 246, 238, .78);
    font-size: .95rem;

    --edge-haze:   rgba(185, 220, 199, .28);
    --edge-mat:    transparent;
    --edge-ribbon: var(--brand-green);
    --edge-fill:   var(--forest-800);
}
.site-footer a {
    /* Tap target >= 44 px (MUST studia, 02-AUDIT §0 i) — samostatné odkazy
       v seznamech a liště by jinak měly jen výšku řádku (~20 px). */
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: clamp(2rem, 4vw, 4rem);
    padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem);
}
.site-footer__logo {
    padding: .75rem 1rem;
    border-radius: 12px;
    background: var(--cream-bg);
}
.site-footer__logo img { width: auto; height: 56px; }
.site-footer__brand p { max-width: 22rem; margin: 1.25rem 0 0; }
.site-footer__title {
    margin: 0 0 1.1rem;
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--forest-200);
}
.site-footer__col ul {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-footer a:not(.btn) {
    color: var(--cream-bg);
    text-decoration: none;
    transition: color .2s;
}
.site-footer a:not(.btn):hover { color: var(--amber-400); }
.site-footer address { margin: 0 0 .75rem; font-style: normal; }
.site-footer__col p { margin: 0 0 1.5rem; }

.site-footer__bar {
    background: var(--forest-900);
    font-size: .82rem;
    color: rgba(250, 246, 238, .55);
}
.site-footer__bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 2rem;
    padding-block: .5rem;
}
.site-footer__bar p { margin: 0; }
.site-footer__bar ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-footer__bar a:not(.btn) { color: rgba(250, 246, 238, .7); }

/* ----------------------------------------
   6. Components (card, button)
   ---------------------------------------- */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 1.25rem;
}
.card h3 { margin-top: 0; }

/* .button skeletonu (formulář, náhledový zámek, pager) = vzhled .btn.btn--green
   ze site.css. Fallback u --radius-pill: zámek načítá jen style.css. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    min-height: var(--tap-min);
    padding: .95rem 1.7rem;
    background: var(--forest-700);
    color: var(--white);
    font: 500 .8rem/1 var(--font-sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--radius-pill, 999px);
    border: 0;
    transition: background-color .2s, color .2s;
}
.button:hover { background: var(--brand-green); color: var(--white); }
.button--ghost {
    background: transparent;
    color: var(--forest-600);
    box-shadow: inset 0 0 0 1px var(--forest-600);
}
.button--ghost:hover { background: var(--forest-600); color: var(--white); }

/* ----------------------------------------
   7. Pages (home hero, articles grid)
   ---------------------------------------- */
/* padding-block (ne shorthand): .page sedí na stejném elementu jako
   .container — shorthand `padding` by vynuloval jeho boční gutter. */
.articles {
    padding: 1.5rem 0 2.5rem;
}
.articles__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
/* Samostatný odkaz (ne uvnitř věty) → plnohodnotný tap target. */
.articles__more {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    font-size: .95rem;
}
.articles__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
.article-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.article-card__media {
    background: var(--c-border-soft);
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.article-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-card__body {
    padding: 1rem 1.1rem 1.2rem;
}
.article-card__title {
    font-size: 1.1rem;
    margin: 0 0 .4rem;
}
.article-card__title a {
    color: var(--c-ink);
    text-decoration: none;
    /* Tap target ≥ 44 px (MUST 02-AUDIT §0 i, QA M15): u karty bez obrázku je
       titulek jediný proklik a měl jen výšku řádku (23 px). Padding zvětší
       hitbox, záporný margin ho vrátí do původního layoutu — vizuál karty se
       nemění. Ne overlay ::after přes celou kartu: excerpt může nést odkazy
       z editoru, které by overlay překryl. */
    display: inline-block;
    padding-block: calc((var(--tap-min) - 1.2em) / 2);
    margin-block: calc((1.2em - var(--tap-min)) / 2);
    /* Karta má overflow: hidden — dlouhé slovo by se oříznulo (QA M3). */
    overflow-wrap: anywhere;
    hyphens: auto;
}
.article-card__title a:hover { color: var(--c-primary); text-decoration: underline; }
.article-card__media a { display: block; height: 100%; }
.article-card__excerpt {
    color: var(--c-text-soft);
    font-size: .95rem;
}
.article-card__excerpt p:last-child { margin-bottom: 0; }

.articles__empty {
    color: var(--c-muted);
    font-style: italic;
    padding: 1rem 0;
}

.page {
    padding-block: 2rem 3rem;
}
.page > h1 { margin-bottom: 1rem; }

/* Detail aktuality (_pages/aktuality/detail.php) */
.article-detail__meta { margin-top: -.5rem; }
.article-detail__media {
    margin: 1.5rem 0;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16 / 9;   /* rezervuje výšku → žádný CLS (pipeline dává 1920×1080) */
}
.article-detail__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-detail__body { max-width: 70ch; }
.article-detail__back { margin-top: 2rem; }

/* Preview banner (tokenový náhled z adminu — detail.php) */
.preview-banner {
    padding: .6rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: var(--radius-sm);
    background: var(--c-error-bg);
    color: var(--c-error-text);
    border: 1px solid var(--c-error-border);
    font-weight: 600;
}

/* Stránkování archivu (_pages/aktuality.php) */
.pager {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.pager__info { color: var(--c-muted); font-size: .95rem; }

.breadcrumb {
    font-size: .9rem;
    color: var(--c-muted);
    margin-bottom: 1rem;
    /* Titulek článku v drobečcích @320 jinak přeteče (QA M3). */
    overflow-wrap: anywhere;
    hyphens: auto;
}
.breadcrumb a {
    color: var(--c-muted);
    /* Tap target ≥ 44 px (QA M15) — je to <nav>, ne věta; záporný margin drží
       řádek na původní výšce (line-height 1.6). */
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    min-width: var(--tap-min);   /* „Úvod" má jen 34 px na šířku */
    justify-content: center;     /* rozšíření symetricky — mezery kolem „›" stejné */
    margin-block: calc((1.6em - var(--tap-min)) / 2);
}
.breadcrumb a:hover { color: var(--c-ink); }
.breadcrumb [aria-current="page"] { color: var(--c-ink); }

/* ----------------------------------------
   7a. Error stránka (404 — _pages/404.php)
   ---------------------------------------- */
.error-page {
    padding-block: 6rem;
    text-align: center;
}
.error-page__code {
    margin: 0 0 .5rem;
    font-size: 4rem;
    font-weight: 600;
    line-height: 1;
    color: var(--c-muted);   /* ne --c-border (token pro rámečky, 1,24:1 na text) */
}

/* ----------------------------------------
   7b. Kontaktní formulář (opt-in modul)
   ---------------------------------------- */
/* Kontaktní údaje (manazer@mikroregion-frenstatsko.cz / doplnit / adresa) — viditelné i bez
   formuláře; odkazy drží tap target 44 px (MUST studia, 02-AUDIT §0 i). */
.contact-address {
    font-style: normal;
    line-height: 1.7;
    margin: 0 0 1.5rem;
}
.contact-address a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
}

.contact-form {
    max-width: 36rem;
    margin-top: 1.5rem;
}
.form-row {
    margin: 0 0 1rem;
}
.form-row label {
    display: block;
    font-weight: 600;
    margin-bottom: .35rem;
}
.form-row input,
.form-row textarea {
    width: 100%;
    min-height: var(--tap-min);
    padding: .6rem .7rem;
    font: inherit;
    color: var(--c-ink);
    background: var(--c-surface);
    border: 1px solid var(--c-input-border);
    border-radius: var(--radius-sm);
}
.form-row textarea { resize: vertical; }
.form-row input:focus,
.form-row textarea:focus {
    outline: 2px solid var(--c-primary);
    outline-offset: 1px;
    border-color: var(--c-primary);
}
.form-row.has-error input,
.form-row.has-error textarea {
    border-color: var(--c-error);
}
.form-row__error {
    display: block;
    margin-top: .3rem;
    font-size: .85rem;
    color: var(--c-error);
}
.form-error,
.form-success {
    padding: .8rem 1rem;
    border-radius: var(--radius-sm);
    margin: 1rem 0;
}
.form-error {
    background: var(--c-error-bg);
    color: var(--c-error-text);
    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: .85rem;
    color: var(--c-muted);
    margin: 1rem 0 0;
}
.form-actions { margin-top: 1.2rem; }

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

/* ----------------------------------------
   7c. Náhledový zámek (opt-in modul)
   ---------------------------------------- */
/* Přihlašovací stránka _lib/gate.php. Renderuje se mimo layout (bez hlavičky
   a patičky), takže si musí vycentrovat kartu sama — zbytek vzhledu nesou
   existující .card / .form-row / .form-error / .button a tokeny výš. */
.gate {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--space-6);
}

.gate__card {
    width: 100%;
    max-width: 26rem;
}

.gate__form {
    max-width: none;
}

.gate__foot {
    margin-bottom: 0;
    font-size: 0.875rem;
}

/* ----------------------------------------
   7d. Galerie v článku (_lib/gallery.php → .article-gallery)
   ---------------------------------------- */
.article-gallery {
    /* Bez `clear`: v šabloně nic neobtéká (cover je blok nad tělem) — mrtvé
       pravidlo (QA L32). Klon, který úvodní fotku floatne, si `clear: left`
       vrátí, jinak by se mřížka vedle floatu zúžila na proužek známek. */
    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: var(--space-3);
    margin: var(--space-6) 0;
}

.article-gallery__item { margin: 0; }

.article-gallery__item img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--c-border-soft);
    border-radius: var(--radius-sm);
}

/* Tři sloupce jsou mřížka pro plný řádek. Galerie o dvou fotkách by v nich
   stála na dvou třetinách a třetina by zela prázdnotou — u malých galerií se
   proto počet sloupců 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;
}

/* Pod 480 px dva sloupce místo tří: dlaždice 85×64 px @320 je nečitelná a
   figcaption láme po slovech (QA L25). data-count="1"/"2" mají vyšší
   specificitu a drží svůj počet. `sizes` v gallery_render_html() to zrcadlí. */
@media (max-width: 479px) {
    .article-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.article-gallery__item figcaption {
    font-size: .875rem;
    line-height: 1.5;
    color: var(--c-muted);
    padding-top: var(--space-2);
}

/* Fotka je odkaz sama na sebe (bez JS otevře plnou velikost).
 *
 * ⚠ Dvojitý selektor NENÍ omyl. Galerie leží uvnitř `.article-detail__body`,
 * kde odkaz ve větě dostává podtržení (specificita 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 v textu. */
.article-gallery .article-gallery__link {
    display: block;
    position: relative;
    cursor: zoom-in;
    border-bottom: 0;
    text-decoration: none;
}

.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;
    border-radius: var(--radius-sm);
    background: var(--c-primary);
    opacity: 0;
    transition: opacity .15s;
}

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

/* ----------------------------------------
   7e. 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 — po zavření se hodnota vrací sama. */
.lightbox-lock { overflow: hidden; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: clamp(12px, 4vw, 48px);
}

.lightbox[hidden] { display: none; }

.lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 22, 20, .94);
}

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

.lightbox__figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    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 .15s;
}

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

.lightbox__caption {
    font-size: .875rem;
    line-height: 1.5;
    color: #d6d8d4;
    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, .22);
    color: #fff;
    font-family: var(--font);
    line-height: 1;
    cursor: pointer;
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    display: grid;
    place-items: center;
    transition: background .15s, border-color .15s;
}

.lightbox__close:hover,
.lightbox__nav:hover {
    background: rgba(255, 255, 255, .1);
    border-color: #fff;
}

.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { outline: 2px solid #fff; 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-size: .875rem;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .62);
}

.lightbox__counter[hidden] { display: none; }

/* ----------------------------------------
   7f. 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á `tests/editor-format.test.php`
   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; }

/* ----------------------------------------
   8. Responsive (mobile-first media queries)
   ---------------------------------------- */
@media (min-width: 768px) {
    h1 { font-size: 2.4rem; }
    h2 { font-size: 1.75rem; }

    .articles__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .articles__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Hlavička, mobilní menu a patička v4 (desktop-first, max-width). Menu se
   sbalí jen s JS (.js z js-flag.js), bez JS zůstane rozbalené. Breakpoint
   1100 px zrcadlí matchMedia v js-flag.js. */
@media (max-width: 1100px) {
    :root { --header-h: 72px; }
    .site-header__inner { flex-wrap: wrap; gap: .75rem 1rem; padding-block: .5rem; }
    .site-header__logo-img { height: 52px; }   /* v hlavičce 72 px */
    .site-header__cta { order: 2; }
    .js .nav-toggle { display: inline-flex; order: 3; }
    .site-nav { order: 4; width: 100%; }
    .js .site-nav:not(.is-open) { display: none; }
    /* Hlavička je sticky — při 400% zoomu (320×256) by otevřené menu přeteklo
       viewport a spodní položky by nešly odscrollovat (WCAG 1.4.10). */
    .site-nav.is-open { max-height: calc(100dvh - var(--header-h)); overflow-y: auto; }
    .site-nav ul {
        flex-direction: column;
        gap: 0;
        padding: .25rem 0 .75rem;
        border-top: 1px solid var(--line);
    }
    .site-nav__link { display: flex; justify-content: flex-start; padding: .85rem 0; font-size: .85rem; }
    .site-nav__link::after { display: none; }
    /* Ukazatel ::after je skrytý → aktuální stránku nesmí nést jen barva (WCAG 1.4.1). */
    .site-nav__link.is-active { color: var(--brand-green); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

    .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
    .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .site-header__tag { display: none; }
    .site-header .site-header__cta { padding: .75rem 1rem; }
    .site-footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    /* jen ikona obálky; min. rozměr = tap target (v4 měl 42×41 px). Label
       vizuálně skrytý jako .sr-only (font-size: 0 by vrátila minimální velikost písma). */
    .site-header .site-header__cta { gap: 0; padding: .8rem; min-width: var(--tap-min); min-height: var(--tap-min); justify-content: center; }
    .site-header__cta-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .site-header__cta .btn__icon { width: 18px; height: 18px; }
}

/* ----------------------------------------
   9. A11y (skip-link, focus, sr-only)
   ---------------------------------------- */
/* Screen-reader-only utilita (vizuálně skryté, čtečka čte). */
.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 — mimo obraz, objeví se při fokusu (Tab z topu). Cíl <main id="main">. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: .6rem 1rem;
    background: var(--c-inverse-bg);
    color: var(--c-on-primary);
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* Viditelný klávesnicový focus — NEZRUŠIT bez náhrady (a11y). */
:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}
/* Tmavé sekce (patička, hero, zelený pás, page-hero): --c-primary outline na nich
   dává 1,6–2,5:1 (pod WCAG 1.4.11 hranicí 3:1). Světlý inverse-text = 9,8–10,3:1. */
.site-footer :focus-visible,
.v4-hero :focus-visible,
.v4-band :focus-visible,
.page-hero :focus-visible {
    outline-color: var(--c-inverse-text);
}