/* ============================================================
   AKTUALITY — výpis (`views/news/index.php`) a detail (`show.php`).

   Prefix `ak-`. Načítá se přes `$pageCss` AŽ ZA `site.css`, takže při
   stejné specificitě vyhrává — stejný postup jako `ai-profile.css`
   a `hero-rada.css`.
   ============================================================ */

/* ── Výpis ───────────────────────────────────────────────────────────── */

.ak-grid {
    display: grid;
    /* `minmax(0, …)`, nikdy holé `1fr` — jinak jediný široký obrázek
       roztáhne celou stránku do šířky. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: var(--sp-5);
}

.ak-karta {
    display: flex; flex-direction: column;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.ak-karta:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}
/* Nejnovější článek přes celou šířku — je jich zatím málo a tenhle má
   nejvíc co ukázat. Na úzkém displeji se srovná s ostatními. */
.ak-karta-velka { grid-column: 1 / -1; }
@media (min-width: 900px) {
    .ak-karta-velka { flex-direction: row; align-items: stretch; }
    .ak-karta-velka .ak-obal { flex: 0 0 54%; aspect-ratio: auto; }
    .ak-karta-velka .ak-telo { flex: 1 1 auto; justify-content: center; padding: var(--sp-6); }
    .ak-karta-velka .ak-nadpis { font-size: 1.7rem; }
    .ak-karta-velka .ak-perex { font-size: 1rem; -webkit-line-clamp: 4; line-clamp: 4; }
}

.ak-obal {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--bg-2);
    overflow: hidden;
}
.ak-obal img { width: 100%; height: 100%; object-fit: cover; }

.ak-znak-video {
    position: absolute; left: var(--sp-3); bottom: var(--sp-3);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    border-radius: var(--r-pill);
    background: rgba(10, 7, 34, .82);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    font-family: var(--font-head); font-weight: 700; font-size: .7rem;
    text-transform: uppercase; letter-spacing: .08em;
    line-height: 1;
}
/* Ikona vedle textu: `display:block` + `flex:none`, nikdy dorovnávání
   konstantou (skill web-ikony-zarovnani). */
.ak-znak-video svg { display: block; width: 13px; height: 13px; flex: none; }

.ak-telo { display: flex; flex-direction: column; gap: 8px; padding: var(--sp-4); min-width: 0; }

.ak-datum {
    font-family: var(--font-head); font-weight: 700;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--primary-2);
}
.ak-nadpis { margin: 0; font-size: 1.1rem; line-height: 1.22; }
.ak-perex {
    margin: 0; font-size: .88rem; line-height: 1.55; color: var(--text-dim);
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.ak-vic {
    margin-top: auto; padding-top: var(--sp-2);
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-head); font-weight: 700; font-size: .82rem;
    color: var(--primary-2);
}
.ak-vic svg { display: block; width: 15px; height: 15px; flex: none; }

/* ── Detail ──────────────────────────────────────────────────────────── */

.ak-clanek { padding: var(--sp-7) 0 var(--sp-8); }
/* Text článku se nesmí táhnout přes celý široký monitor — nad ~75 znaků
   na řádek se čtenář ztrácí při přechodu na další řádek. */
.container-uzky { max-width: 860px; }

.ak-drobky { margin-bottom: var(--sp-5); }
.ak-drobky a {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-head); font-weight: 700; font-size: .82rem;
    color: var(--text-dim);
    transition: color var(--t-fast);
}
.ak-drobky a:hover { color: var(--text); }
/* Šipka „zpět" míří doleva — je to tatáž ikona otočená, ne druhý soubor. */
.ak-drobky svg { display: block; width: 15px; height: 15px; flex: none; transform: rotate(180deg); }

.ak-hlava { margin-bottom: var(--sp-6); }
.ak-datum-velke { display: block; margin-bottom: var(--sp-3); font-size: .78rem; }
.ak-h1 {
    margin: 0 0 var(--sp-4);
    font-family: var(--font-display); font-weight: 400; font-synthesis: none;
    text-transform: uppercase; letter-spacing: .01em; line-height: 1.02;
    font-size: clamp(1.75rem, 4.6vw, 3rem);
    padding-top: .08em;
    text-wrap: balance;
}
.ak-perex-velky {
    margin: 0;
    font-size: clamp(1rem, 2.2vw, 1.2rem); line-height: 1.6;
    color: var(--text-dim);
}

/* ── Video se štítky ─────────────────────────────────────────────────── */

.ak-video { margin: 0 0 var(--sp-7); }

.ak-video-stitky {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.ak-stitek {
    display: inline-flex; align-items: center;
    padding: 6px 13px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px var(--border-strong);
    font-family: var(--font-head); font-weight: 800; font-size: .7rem;
    text-transform: uppercase; letter-spacing: .1em; line-height: 1;
    color: var(--text-dim);
}
/* Hlavní štítek nese název filmu — musí být vidět jako první. */
.ak-stitek-hlavni {
    background: var(--grad-primary);
    box-shadow: var(--glow-primary);
    color: #fff;
    letter-spacing: .12em;
}

.ak-prehravac {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #05040f;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.ak-prehravac video,
.ak-prehravac iframe {
    display: block;
    width: 100%; height: 100%;
    border: 0;
}

.ak-video-popis {
    margin-top: var(--sp-3);
    font-size: .82rem; line-height: 1.55; color: var(--text-mute);
}
.ak-video-pozn { display: block; margin-top: 4px; }

/* ── Text článku ─────────────────────────────────────────────────────── */

/* Rytmus textu dělá JEDINÉ pravidlo „každý blok kromě prvního má nahoře X".
   ⚠️ Nulovat se smí jen SPODNÍ okraj — `p { margin: 0 }` má vyšší specificitu
   a tohle pravidlo by tiše zabilo (past z ecorson.cz, 1. 9.). */
.ak-text > * + * { margin-top: var(--sp-4); }
.ak-text > :first-child { margin-top: 0; }
.ak-text p {
    margin-bottom: 0;
    font-size: 1.02rem; line-height: 1.75;
    color: var(--text-dim);
    overflow-wrap: anywhere;
}

.ak-mezinadpis {
    margin-bottom: 0;
    font-family: var(--font-head); font-weight: 900;
    font-size: clamp(1rem, 2.4vw, 1.22rem);
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--text);
}
/* Mezinadpis potřebuje nad sebou víc vzduchu než odstavec — proto přebíjí
   obecné `* + *`. Stojí ZA ním, takže při stejné specificitě vyhrává. */
.ak-text > .ak-mezinadpis + p { margin-top: var(--sp-3); }
.ak-text > * + .ak-mezinadpis { margin-top: var(--sp-6); }

/* ── Galerie ─────────────────────────────────────────────────────────── */

.ak-galerie { margin-top: var(--sp-8); }
.ak-galerie-lead { margin: var(--sp-2) 0 var(--sp-5); font-size: .88rem; color: var(--text-mute); }

.ak-fotky {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: var(--sp-4);
}
.ak-fotka { margin: 0; min-width: 0; }
.ak-fotka img {
    width: 100%; height: auto;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--bg-2);
}
.ak-fotka figcaption {
    margin-top: 9px;
    font-size: .78rem; line-height: 1.5; color: var(--text-mute);
}

/* ── Patička článku ──────────────────────────────────────────────────── */

.ak-pata {
    margin-top: var(--sp-8);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
    display: flex; flex-wrap: wrap; gap: var(--sp-3);
}

/* ── Responzivita ────────────────────────────────────────────────────── */

@media (max-width: 560px) {
    .ak-clanek { padding-top: var(--sp-5); }
    .ak-text p { font-size: .98rem; }
    .ak-fotky { grid-template-columns: minmax(0, 1fr); }
    /* Dotykový cíl 48 px pod 480 px a text tlačítka se smí zalomit —
       `.btn` má v `site.css` `white-space: nowrap`. */
    .ak-pata { flex-direction: column; align-items: stretch; }
    .ak-pata .btn { justify-content: center; text-align: center; white-space: normal; min-height: 48px; }
}

/* Štítek „vymyšlený příběh" — jediný, který varuje, takže má vlastní barvu.
   Musí být rozpoznatelný i pro toho, kdo barvy nerozliší, proto nese text,
   ne jen odstín (pravidlo „stav nikdy jen barvou"). */
.ak-stitek-fikce {
    background: rgba(251, 191, 36, .14);
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .5);
    color: #ffe9b0;
}

/* ============================================================
   SERIÁL AKTUALIT (10. 9. 2026, prefix `ak-serial`)

   ⚠️ Postup se neříká jen barvou — u aktivního dílu je i `aria-current`
      a `title` s názvem, takže odečítač i myš vědí, kde čtenář je.
   ============================================================ */
.ak-serial {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-5);
    margin: 0 0 var(--sp-6);
}
.ak-serial-hlava { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); }
.ak-serial-stitek {
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--primary-2); font-weight: 700;
}
.ak-serial-nazev { font-family: var(--font-head); font-weight: 700; color: var(--text); text-decoration: none; }
.ak-serial-nazev:hover { color: var(--primary-2); }
.ak-serial-pozice { margin-left: auto; color: var(--text-mute); font-size: .8rem; }

.ak-serial-kroky { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: var(--sp-3) 0 0; }
.ak-serial-kroky a {
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text-mute); font-size: .76rem; text-decoration: none;
    transition: background .18s, color .18s, border-color .18s;
}
.ak-serial-kroky a:hover { color: var(--text); border-color: var(--border-strong); }
.ak-serial-kroky a.je-tady { background: var(--grad-primary); border-color: transparent; color: #fff; font-weight: 700; }
/* Finále má jiný tvar, ne jen jinou barvu — poznatelné i bez barevného vidění. */
.ak-serial-kroky a.je-finale { border-radius: var(--r-sm); border-color: var(--primary); color: var(--primary-2); }

.ak-serial-sousedi {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
    margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border);
}
.ak-serial-soused {
    display: block; text-decoration: none; color: inherit;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
    transition: border-color .18s, background .18s;
}
.ak-serial-soused:hover { border-color: var(--border-strong); background: var(--surface-3); }
.ak-serial-soused span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-mute); margin-bottom: 4px; }
.ak-serial-soused strong { font-size: .9rem; line-height: 1.4; font-weight: 600; }
.ak-serial-dalsi { text-align: right; }

/* ── Rozcestník seriálu ─────────────────────────────────────── */
.ak-serial-hero { max-width: 68ch; margin-bottom: var(--sp-6); }
.ak-serial-hero h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 1.05; font-size: clamp(1.8rem, 5vw, 3.4rem); margin: var(--sp-2) 0 var(--sp-4); }
.ak-serial-perex { color: var(--text-dim); font-size: clamp(.98rem, 1.5vw, 1.14rem); line-height: 1.62; }
.ak-serial-uvod { max-width: 68ch; margin-bottom: var(--sp-7); }

.ak-serial-seznam { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
.ak-serial-dil {
    display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-4);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); overflow: hidden;
    text-decoration: none; color: inherit;
    transition: transform .18s, border-color .18s, background .18s;
}
.ak-serial-dil:hover { transform: translateY(-2px); background: var(--surface-2); border-color: var(--border-strong); }
.ak-serial-dil.je-finale { border-color: rgba(255, 46, 154, .45); }
.ak-serial-obal { display: block; aspect-ratio: 1200 / 630; background: var(--surface-2); }
.ak-serial-obal img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: 100%; }
.ak-serial-telo { display: block; padding: var(--sp-4) var(--sp-5) var(--sp-4) 0; }
.ak-serial-cislo {
    display: inline-block; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
    color: var(--primary-2); font-weight: 700; margin-bottom: 6px;
}
.ak-serial-dil.je-finale .ak-serial-cislo { background: var(--grad-primary); color: #fff; padding: 2px 9px; border-radius: var(--r-pill); }
.ak-serial-telo strong { display: block; font-family: var(--font-head); font-size: 1.04rem; line-height: 1.36; margin-bottom: 6px; }
.ak-serial-perex-dil { display: block; color: var(--text-dim); font-size: .87rem; line-height: 1.55; margin-bottom: 8px; }

@media (max-width: 700px) {
    .ak-serial-dil { grid-template-columns: 1fr; }
    .ak-serial-telo { padding: 0 var(--sp-4) var(--sp-4); }
    .ak-serial-sousedi { grid-template-columns: 1fr; }
    .ak-serial-dalsi { text-align: left; }
}

/* Náhrady inline stylů seriálu (10. 9. 2026) — projekt inline styly
   zakazuje, viz `web-css-konvence`. */
.ak-drobne   { font-size: .86rem; }
.ak-odsad-v  { margin-top: var(--sp-6); }