/* ═══════════════════════════════════════════════════════════════════════════
   30) SEO A OBSAHOVÉ BLOKY, průvodce jako čtený článek
   ───────────────────────────────────────────────────────────────────────────
   Načítá se až za karty.css, takže přebíjí i pravidla s !important odtamtud.
   Značka je v includes/seo-block-open.php a -close.php.

   PROČ tenhle soubor vznikl:
   Průvodce byl karta v kartě. Celý blok měl vlastní plochu a rámeček, nahoře
   gradientní ikonový čip s azurovým okrajem a nadpis s gradientním textem,
   pod ním mřížka stejně velkých dlaždic (typy, bezpečnost, mýty, slovník),
   tabulka v rámečku se zebrou a zeleně nasvícenou hlavičkou a FAQ jako
   harmonika s kolečkem, které se při otevření rozsvítilo. Mýtus měl magentu,
   fakt azurovou, pojem ve slovníku zelený čtvereček se září. Sedm oddílů,
   sedm ozdob, žádná hierarchie. Přesně tak vypadá zdrojový web.

   ČÍM JE NAHRAZENÝ:
   Text. Rám bloku zmizel, zůstala jedna vodorovná vlásečnice nad ním. Vlevo
   je lepivý soupis kapitol s číslem, vpravo souvislý sloupec s měřítkem řádku
   kolem 70 znaků. Kapitola začíná vlásečnicí, nad nadpisem drobné „Kapitola
   04". Mřížka dlaždic je pryč, místo ní řádkový soupis pojem | výklad
   oddělený linkou, takže se dá číst shora dolů a ne skákat po kachlích.
   Tabulka má linku jen pod řádkem. FAQ je prostý seznam otázek, odpověď se
   rozbalí pod otázkou, bez plochy a bez barvy. Barva je jedna, zelená, a nese
   jen čísla, aktivní kapitolu a odkazy.

   POZOR: editorial vrstva (.ed-*) sem NEPATŘÍ. Sedm oddílů, které tady
   přepisovaly .ed-card, .ed-table, .ed-faq, .ed-callout a spol. přes
   !important, je zrušeno; jejich pravidla jsou přepsaná přímo
   v components/editorial.css. Stránka nemá mít vlastní vzhled tabulky.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. RÁM ──────────────────────────────────────────────────────────────
   karty.css dává .seo-guide plochu karty (kt-sf + linka + 10px roh). Článek
   ale není karta, jinak vznikne rámeček kolem rámečku obsahu uvnitř. Zůstává
   jen horní vlásečnice jako předěl od zbytku stránky.
   Pořadí deklarací je záměrné: shorthand vynuluje všechny hrany, longhand
   za ním vrátí jen tu horní. */
.seo-guide.kt-art {
    display: block;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--kt-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.kt-art-rail {
    max-width: var(--kt-rail, 1280px);
    padding: 0 30px;
}

/* Obsah stránek je zabalený do vlastních <section> s vlastním svislým
   odsazením a linkou. Uvnitř článku by to byl druhý předěl hned pod prvním. */
.kt-art-body > section,
.kt-art-body section {
    display: block;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top: 0 !important;
}

/* Zděděné barevné varianty (--magenta / --purple / --warn) se tady dřív
   plošně přebarvovaly na zelenou přes --acc. Tím ale zezelenalo i varovné
   „MÝTUS" a každá neutrální karta, takže v jednom bloku byla zelená
   třikrát. Varianty jsou teď přepsané u zdroje v components/editorial.css:
   zelená patří hraně a stavu, varování má vlastní barvu. */

/* ── 2. HLAVIČKA ČLÁNKU ──────────────────────────────────────────────────
   Místo ikonového čipu a gradientního nadpisu: nadřazení, nadpis, podtitul,
   vlásečnice. Hierarchii dělá pořadí a velikost, ne ozdoba. */
.kt-art-head {
    padding-bottom: 22px;
    margin-bottom: 34px;
    border-bottom: 1px solid var(--kt-line);
}

.kt-art-kick {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kt-ink-3);
}

/* Krátká zelená ryska. Jediné místo, kde má hlavička barvu. */
.kt-art-kick::before {
    content: '';
    flex: none;
    width: 22px;
    height: 2px;
    background: var(--kt-green);
}

.kt-art-title {
    margin: 0;
    font-family: var(--font-display) !important;
    font-size: clamp(1.45rem, 2.4vw, 2rem) !important;
    font-weight: 800 !important;
    line-height: 1.18;
    letter-spacing: -0.015em;
    text-transform: none !important;
    color: var(--kt-ink) !important;
}

/* Zvýrazněné slovo je zelené, ne gradientní. -webkit-text-fill-color musí zpět
   na barvu, jinak zůstane text průhledný po zděděném background-clip pravidle. */
.kt-art-title span {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: var(--kt-green) !important;
    color: var(--kt-green) !important;
}

.kt-art-sub {
    max-width: 64ch;
    margin: 10px 0 0;
    font-family: var(--font-body, 'Montserrat', sans-serif);
    font-size: 0.96rem;
    line-height: 1.6;
    color: var(--kt-ink-2);
}

/* ── 3. DVA SLOUPCE ──────────────────────────────────────────────────────
   Pevné dva sloupce, žádné auto-fit. Zapíná je až JS, viz seo-block-close.php:
   bez soupisu kapitol by vlevo zbyl prázdný pruh. */
.kt-art-cols.is-toc {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 0 56px;
    align-items: start;
}

/* ── 4. SOUPIS KAPITOL ───────────────────────────────────────────────────
   Boční obsah místo mřížky dlaždic. Drží se u textu při scrollu, odsazení
   počítá s výškou horní lišty, jinak by se přilepil pod ni. */
.kt-art-side {
    position: sticky;
    top: calc(var(--kt-top-h, 70px) + 24px);
    max-height: calc(100vh - var(--kt-top-h, 70px) - 48px);
    overflow-y: auto;
}

.kt-art-side-lab {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kt-ink-3);
}

.kt-art-toc {
    counter-reset: kt-toc;
}

.kt-art-toc li {
    counter-increment: kt-toc;
    border-top: 1px solid var(--kt-line);
}

.kt-art-toc li:last-child {
    border-bottom: 1px solid var(--kt-line);
}

/* Číslo a název ve dvou sloupcích, aby se víceřádkový název nezalomil pod
   číslo. Levá linka je místo pro zvýraznění aktivní kapitoly. */
.kt-art-toc-a {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
    padding: 10px 0 10px 11px;
    margin-left: -12px;
    border-left: 1px solid transparent;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--kt-ink-2);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.kt-art-toc-a::before {
    content: counter(kt-toc, decimal-leading-zero);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--kt-ink-3);
}

.kt-art-toc-a:hover {
    color: var(--kt-ink);
    border-left-color: var(--kt-line-2);
}

.kt-art-toc-a.is-now {
    color: var(--kt-ink);
    border-left-color: var(--kt-green);
}

.kt-art-toc-a.is-now::before {
    color: var(--kt-green);
}

.kt-art-side-note {
    margin: 14px 0 0;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--kt-ink-3);
}

.kt-art-side-note:empty {
    display: none;
}

/* ── 5. KAPITOLA ─────────────────────────────────────────────────────────
   Nad nadpisem drobné pořadové „Kapitola 04". Zbytek sazby kapitoly řeší
   components/editorial.css — tenhle soubor ho nepřepisuje. */
.kt-art-body [data-kt-ch]::before {
    content: 'Kapitola ' attr(data-kt-ch);
    display: block;
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 10px;
    background: none;
    border-radius: 0;
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kt-ink-3);
}

/* Kotva nesmí skončit pod lepivou horní lištou. */
.kt-art-body h2 {
    scroll-margin-top: calc(var(--kt-top-h, 70px) + 24px);
}

/* Odkaz v textu je zelený a podtržený. Guard proti tlačítkům je povinný,
   jinak podtržení přebije vzhled affiliate CTA uvnitř odstavce. */
.kt-art-body a:not([class]),
.kt-art-body a[class=""],
.kt-art-body dd a:not([class*="btn"]):not([class*="cta"]):not([class*="card"]) {
    color: var(--kt-green);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(var(--go-rgb), 0.35);
    transition: text-decoration-color 0.15s ease;
}

.kt-art-body a:not([class]):hover,
.kt-art-body dd a:not([class*="btn"]):not([class*="cta"]):not([class*="card"]):hover {
    text-decoration-color: var(--kt-green);
}

/* ── 6. CIZÍ PRVKY UVNITŘ ČLÁNKU ─────────────────────────────────────────
   Tlačítka a pruhy, které si stránky nesou ve vlastním page-*.css. */

/* Tvar tlačítka drží components/buttons.css, tady zbývá jen srazit záři,
   kterou si některé page-*.css nesou samy: v článku nic nesvítí.
   Přejezd lesku na .btn-primary::after už neexistuje, takže se neruší. */
.kt-art-body :is(.btn,
.jl-btn,
[class*="btn"],
[class*="cta"]) {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Pruhy, které si stránky nesou ve vlastním page-*.css, měly uvnitř článku
   pořád fialovou plochu s gradientem a nasvícený horní okraj. Uvnitř článku
   je plocha vždycky neprůhledná a linka jedna. */
.kt-art-body .ca-choose-band {
    background: var(--kt-line) !important;
    border-color: var(--kt-line) !important;
    border-radius: var(--kt-r) !important;
}

.kt-art-body .ca-choose-cell {
    background: var(--kt-sf) !important;
}

/* ── 7. MOBIL, do 1000 px ───────────────────────────────────────────────
   Soupis kapitol se z bočního sloupce přesune nad text a rozloží se do dvou
   pevných sloupců. Řádek pojem | výklad se skládá pod sebe, protože popisek
   na 212px by na úzké obrazovce ukrojil polovinu šířky. */
@media (max-width: 1000px) {
    .kt-art-rail {
        padding: 0 24px;
    }

    .kt-art-cols.is-toc {
        display: block;
    }

    .kt-art-side {
        position: static;
        max-height: none;
        overflow: visible;
        margin: 0 0 32px;
    }

    .kt-art-toc {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 28px;
    }

    .kt-art-toc-a {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }

    .kt-art-toc-a:hover,
    .kt-art-toc-a.is-now {
        border-left: 0;
    }

    .kt-art-side-note {
        margin-top: 16px;
    }
}

/* ── 8. MOBIL, do 640 px ────────────────────────────────────────────────
   Jeden sloupec všude, menší sazba, tabulka se posouvá uvnitř sebe. */
@media (max-width: 640px) {
    .kt-art-rail {
        padding: 0 18px;
    }

    .kt-art-head {
        padding-bottom: 18px;
        margin-bottom: 26px;
    }

    .kt-art-sub {
        font-size: 0.92rem;
    }

    .kt-art-toc {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── 9. OMEZENÉ ANIMACE ─────────────────────────────────────────────────
   Kdo si vypnul pohyb, nedostane ani posun karty, ani otáčení šipky. */
@media (prefers-reduced-motion: reduce) {
    .kt-art-toc-a,
    .kt-art-body a {
        transition: none !important;
    }
}