/*
   Sekce Elektromobilita: strana faktu ("pruvodce") pro stranky zakona
   (website/elektromobilita/zakon-360-2022.html cesky o zakone 360/2022 Sb.,
   zakon-360-2022-sk.html slovensky o zakone 214/2021 Z. z.).
   Revize designu 2. 11. 2026: marketingove stranky vedou pribehem, stranky
   zakona jsou zretelne oddelena, vecna vrstva faktu se stejnou identitou.

   Doplnuje static/css/emob.css (vizualni jazyk "Proud"): tokeny --em-*,
   typografie emob-h2 / emob-text / emob-note, komponenty emob-facts-hero,
   emob-facts-key, emob-score, emob-caveat a emob-sources se berou odtud,
   tady je jen to, co strana faktu ma navic:
   - obsah stranky: od 992 px lepivy levy sloupec (col-lg-3) nad celym
     obsahem, na uzsim displeji kompaktni seznam nad prvni sekci,
   - citelny sloupec vpravo (col-lg-9): data do sirky 720 px, souvisly
     text kolem 75 znaku na radek,
   - list faktu (dl), tabulky, cislovane body, radky "koho se to tyka",
     resene priklady a popisky Predmet / Vysledek u zakazek.
   Elektricka modra jen na carach a uzlech (aktivni polozka obsahu, obrys
   cisla bodu), nikdy na akci ani na drobnem textu. Bloky nemaji ramecek
   jen na jedne strane: bud vlasovy ramecek dokola, nebo tlumeny podklad.
   Vse scoped na body.home-new, na hero a obsah pres .emob-facts-*.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero: klicove odecty pod nadpisem (komponenta emob-facts-key z emob.css).
   Na sirce pod 992 px misto rozsypaneho radku mrizka 2 x 2.
   -------------------------------------------------------------------------- */
body.home-new .emob-facts-hero .emob-facts-key { margin-top: 32px; }
body.home-new .emob-facts-hero .emob-facts-key .emob-readout { white-space: nowrap; }
@media (max-width: 991.98px) {
    body.home-new .emob-facts-hero .emob-facts-key {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
    }
    body.home-new .emob-facts-hero .emob-facts-key > div { margin-right: 0; padding: 16px 0 20px; }
    body.home-new .emob-facts-hero .emob-facts-key > div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .1); }
}
@media (max-width: 575.98px) {
    body.home-new .emob-facts-hero .emob-facts-key { column-gap: 16px; margin-top: 28px; }
    /* nejdelsi odecet "1 kus = 1 kus" (13 znaku mono) se vejde do pulky i na 320 px */
    body.home-new .emob-facts-hero .emob-facts-key .emob-readout { font-size: clamp(1.0625rem, 5.4vw, 1.375rem); }
}

/* --------------------------------------------------------------------------
   Obsah stranky (nav[data-emob-toc])
   -------------------------------------------------------------------------- */
body.home-new .emob-facts-body { position: relative; }
body.home-new .emob-toc-label {
    margin: 0 0 12px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hn-slate-600);
}
body.home-new .emob-toc-list { list-style: none; margin: 0; padding: 0; }
/* Zadna linka vlevo (zakaz jednostranneho ramecku plati i pro navigaci,
   rozhodnuti majitele 2. 11. 2026): polozky jsou prosty seznam, aktivni
   sekce ma tucne pismo, barvu inkoustu a tlumeny podklad pres celou sirku. */
body.home-new .emob-toc-list a {
    display: block;
    padding: 7px 12px;
    margin: 0 -12px;
    border-radius: var(--hn-r-sm);
    color: var(--em-ink-soft);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    transition: color 180ms ease, background-color 180ms ease;
}
body.home-new .emob-toc-list a:hover {
    color: var(--hn-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
body.home-new .emob-toc-list a:focus-visible {
    outline: 2px solid var(--hn-brand);
    outline-offset: 2px;
}
/* Aktivni sekce: tucne pismo a podklad, ne jen barva */
body.home-new .emob-toc-list a[aria-current="true"] {
    color: var(--hn-ink);
    font-weight: 700;
    background: var(--em-volt-50);
}

/* Od 992 px: obsah je vrstva pres cely obsah stranky (absolutne), jeho
   levy sloupec je stejne vysoky jako vsechny sekce, takze nav v nem lepi
   pod fixnim navbarem az do konce posledni sekce a pak odjede s ni.
   Vrstva nechyta kliknuti (pointer-events), jen nav sam. */
@media (min-width: 992px) {
    body.home-new .emob-facts-rail {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
    }
    body.home-new .emob-facts-rail > .container,
    body.home-new .emob-facts-rail > .container > .row { height: 100%; }
    body.home-new .emob-facts-rail-col { height: 100%; padding-top: 64px; padding-bottom: 64px; }
    body.home-new .emob-toc {
        position: sticky;
        top: calc(var(--main-nav-height, 76px) + 24px);
        /* Bez vlastniho posuvu (nic v sekci neposouva): obsah ma 12 polozek,
           na nizkem okne se spodek obsahu ukaze az s koncem stranky. */
        padding: 2px 16px 4px 12px;
        margin-left: -12px;
        pointer-events: auto;
    }
}
/* Pod 992 px: kompaktni seznam nad prvni sekci (nesbaluje se) */
@media (max-width: 991.98px) {
    body.home-new .emob-facts-rail { padding: 32px 0; background: #fff; }
    body.home-new .emob-facts-rail--paper { background: var(--hn-paper); }
    body.home-new .emob-toc-list { column-count: 2; column-gap: 24px; }
    body.home-new .emob-toc-list li { break-inside: avoid; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    body.home-new .emob-toc-list { column-count: 3; }
}

/* --------------------------------------------------------------------------
   Sekce a citelny sloupec
   -------------------------------------------------------------------------- */
/* Skok z obsahu: nadpis sekce stoji 24 px pod navbarem, ve stejne vysce
   jako prilepeny obsah (sekce ma nahore 64 px, emob-section--tight). */
body.home-new .hn-anchor.emob-facts-sec { scroll-margin-top: calc(var(--main-nav-height, 76px) - 40px); }
/* Dve sirky: data (list faktu, tabulky, radky) do 720 px, souvisly text
   kolem 75 znaku na radek. DM Sans ma siroke cislice, takze 62ch
   z emob-text by tu bylo pres 90 znaku. */
body.home-new .emob-facts-main { max-width: 720px; }
body.home-new .emob-facts-main .emob-text,
body.home-new .emob-facts-main .emob-note,
body.home-new .emob-facts-main .emob-caveat,
body.home-new .emob-facts-main .emob-facts-example,
body.home-new .emob-facts-main .emob-facts-ol,
body.home-new .emob-facts-main .hn-lp-list { max-width: 38rem; }
body.home-new .emob-facts-main > .emob-h3 { margin-top: 40px; }

/* List faktu: pojem vlevo, hodnota vpravo, vlasove linky */
body.home-new .emob-facts-dl { margin: 32px 0 0; padding: 0; border-top: 1px solid var(--hn-slate-200); }
body.home-new .emob-facts-dl > div {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 2px 24px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hn-slate-200);
    font-size: .9688rem;
    line-height: 1.5;
}
body.home-new .emob-facts-dl dt { font-weight: 700; }
body.home-new .emob-facts-dl dd { margin: 0; color: var(--em-ink-soft); }
@media (max-width: 575.98px) {
    body.home-new .emob-facts-dl > div { grid-template-columns: 1fr; }
}

/* Tabulky: bez vlastniho podkladu (lezi i na paper), hlavicky jako popisky */
/* Tabulka nikdy neposouva (rozhodnuti majitele 2. 11. 2026): zadny
   .table-responsive, sloupce se zalamuji, na telefonu mensi pismo. */
body.home-new .emob-facts-table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--hn-slate-200);
    --bs-table-color: var(--hn-ink);
    margin: 0;
    font-size: .9375rem;
    line-height: 1.5;
}
body.home-new .emob-facts-table > :not(caption) > * > * {
    padding: 12px 20px 12px 0;
    border-bottom-color: var(--hn-slate-200);
}
body.home-new .emob-facts-table > :not(caption) > * > :last-child { padding-right: 0; }
body.home-new .emob-facts-table thead th {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hn-slate-600);
    vertical-align: bottom;
}
body.home-new .emob-facts-table tbody th,
body.home-new .emob-facts-table td { vertical-align: top; }
body.home-new .emob-facts-table tbody th { font-weight: 700; }
body.home-new .emob-facts-table .hn-num { font-size: .9375rem; }
body.home-new .emob-facts-table i.fa-solid { width: 1.1em; }
/* Telefon: srovnani pohonu (4 sloupce) se na 390 px vejde bez posuvu */
@media (max-width: 575.98px) {
    body.home-new .emob-facts-table { font-size: .875rem; }
    body.home-new .emob-facts-table > :not(caption) > * > * { padding-right: 12px; }
    body.home-new .emob-facts-table .hn-num { font-size: .875rem; }
}

/* Cislovane body (pravidla vypoctu, cesty do podilu, podminky ridicaku):
   cislo v uzlu s obrysem vodice, vlasove linky mezi body */
body.home-new .emob-facts-ol {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    counter-reset: emob-facts;
    border-top: 1px solid var(--hn-slate-200);
}
body.home-new .emob-facts-ol > li {
    position: relative;
    counter-increment: emob-facts;
    padding: 16px 0 16px 48px;
    border-bottom: 1px solid var(--hn-slate-200);
    font-size: 1rem;
    line-height: 1.55;
}
body.home-new .emob-facts-ol > li::before {
    content: counter(emob-facts);
    position: absolute;
    left: 0;
    top: 13px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1.5px solid var(--em-wire);
    background: #fff;
    font: 700 .8125rem/1 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--hn-ink);
}
body.home-new .emob-facts-ol .emob-h3 { font-size: 1.0625rem; }
body.home-new .emob-facts-ol .emob-h3 + p { margin-top: 6px; }
body.home-new .emob-facts-ol p { margin: 0; font-size: .9688rem; line-height: 1.55; color: var(--em-ink-soft); }
body.home-new .emob-facts-ol .badge { margin-top: 10px; font-weight: 600; white-space: normal; text-align: left; }

/* Resene priklady: vlasovy ramecek dokola. Jednostranny ramecek bloku
   (barevny prouzek vlevo) je zakazany (majitel 2. 11. 2026). */
body.home-new .emob-facts-example {
    margin: 36px 0 0;
    padding: 18px 22px 20px;
    border: 1px solid var(--hn-slate-200);
    border-radius: var(--hn-r-md);
}
body.home-new .emob-facts-example p { margin: 8px 0 0; font-size: 1rem; line-height: 1.6; }

/* Radky: nazev a stav vlevo, text a odkaz vpravo (koho se zakon tyka,
   slovenske zakazky) */
body.home-new .emob-facts-rows { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--hn-slate-200); }
body.home-new .emob-facts-rows > li {
    display: grid;
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: 8px 28px;
    padding: 20px 0;
    border-bottom: 1px solid var(--hn-slate-200);
}
body.home-new .emob-facts-rows .emob-h3 { font-size: 1.0625rem; }
body.home-new .emob-facts-rows .badge { margin-top: 8px; font-weight: 600; white-space: normal; text-align: left; }
body.home-new .emob-facts-rows p { margin: 0; font-size: .9688rem; line-height: 1.55; color: var(--em-ink-soft); }
body.home-new .emob-facts-rows .emob-link { display: inline-block; margin-top: 8px; }
body.home-new .emob-facts-rows .emob-facts-kv { margin-top: 0; }
@media (max-width: 767.98px) {
    body.home-new .emob-facts-rows > li { grid-template-columns: minmax(0, 1fr); }
}

/* Popisky Predmet / Vysledek u zakazek: popisek jako hlavicka tabulky */
body.home-new .emob-facts-kv {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 16px;
    margin: 8px 0 0;
    font-size: .9375rem;
    line-height: 1.5;
}
body.home-new .emob-facts-kv dt {
    padding-top: 3px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hn-slate-600);
}
body.home-new .emob-facts-kv dd { margin: 0; color: var(--em-ink-soft); }
body.home-new .emob-facts-kv .hn-num { font-size: .875rem; color: var(--hn-ink); }

/* Tabule nabidek (emob-score) na strane faktu: mensi cislo, delsi popis */
body.home-new .emob-facts-main .emob-score { margin-top: 32px; }
body.home-new .emob-facts-main .emob-score-n .emob-readout { font-size: clamp(2.5rem, 5vw, 3.5rem); }

/* Kus je kus (_equal.html) pod textem. Popisky obou vozu stejne vysoke,
   aby jednicky staly v jedne rovine i kdyz se popisek maleho vozu zalomi. */
body.home-new .emob-facts-equal { max-width: 600px; margin-top: 44px; }
body.home-new .emob-facts-equal figcaption { min-height: 2.8em; }
@media (max-width: 575.98px) {
    body.home-new .emob-facts-equal figcaption { min-height: 4.2em; }
}

/* Seznamy s vlasovymi linkami (hn-lp-list z landing-new.css) */
body.home-new .emob-facts-main .hn-lp-list { margin-top: 20px; }
body.home-new .emob-facts-main .hn-lp-list li { font-size: 1rem; line-height: 1.55; }

/* --------------------------------------------------------------------------
   Po konzultaci: otazky a zdroje ve stejne mrizce (nadpis vlevo v sirce
   obsahu stranky, obsah vpravo v .emob-facts-main)
   -------------------------------------------------------------------------- */
body.home-new .emob-facts-sources { padding-top: 56px; padding-bottom: 64px; }
body.home-new .emob-facts-sources ul { margin-top: 0; columns: 2 18rem; }