/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER.CSS: patička
   markup: includes/footer.php
   ───────────────────────────────────────────────────────────────────────────
   Patička je spodní půlka rámu: stejné patro jako lišta, oddělená od obsahu
   jednou vlásečnicí. Čte se shora dolů ve čtyřech pásech, značka a kanály,
   odkazy ve třech skupinách, povinné informace v ohraničeném panelu, provozní
   řádek.

   POZOR NA SÍLU SELEKTORŮ. Vlastní rozvržení pásů (.jf-*) drží
   components/karty-parts/40-footer.css, který se načítá o dvanáct souborů
   POZDĚJI než tenhle. Při shodné specificitě by tedy vždycky vyhrál on.
   Proto všechno, co odsud přeladí pás, jede přes `.footer.jf .jf-x` (0,3,0)
   proti jeho `.jf-x` / `.jf-x:first-child` (nejvýš 0,2,0). Není to nahodilé
   zesilování, je to jediný způsob, jak se sem dá psát bez !important.

   Vedlejší důsledek, se kterým se musí počítat: specificita přebíjí i media
   query. Každý mobilní přepis z 40-footer.css, který se týká pravidla odsud,
   se tu proto musí zopakovat ve vlastním @media, jinak by silnější
   desktopové pravidlo platilo i na telefonu.

   Co odsud zmizelo:
   • celý blok .cc-* pro lištu souhlasu s cookies (71 % souboru). Souhlas se
     řeší společně s 18+ bránou v components/age-verification.php a markup
     .cc-banner v projektu nezůstal ani jednou, byla to mrtvá kaskáda.
   • 2px zelená linka na horní hraně. Zelená nese akci, ne ozdobu, a pruh
     přes celou šířku obrazovky nikam nevede. Hranu značí vlásečnice, jako
     ji značí u lišty.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Plocha ────────────────────────────────────────────────────────────────
   Patička stojí na stejném patře jako lišta (--head), tedy o stupeň pod
   stránkou: rám webu je nahoře i dole z jedné plochy a obsah mezi nimi leží
   výš. Kdyby patička nesla --bg jako obsah, splynula by s poslední sekcí. */
.footer {
    position: relative;
    margin-top: auto;
    padding: 0;
    background: var(--head);
    border-top: 1px solid var(--rail-2);
    color: var(--paper-2);
    font-family: var(--font-text);
}
.footer > * { position: relative; }

/* ── Co je údaj, to je strojopis ───────────────────────────────────────────
   Popisky pásů, nadpisy skupin, značka platformy a štítek partnera jsou
   údaje, ne čtený text. Jedou tedy JetBrains Mono v drobných verzálkách -
   stejný tvar, jaký nese `dt` v mřížce parametrů u karty nabídky. Jména
   a nadpisy (značka, jméno kanálu, nadpis povinné informace) zůstávají
   nadpisovým Archivem, protože to jména a nadpisy jsou. */
.footer.jf .jf-kicker,
.footer.jf .jf-group-h {
    margin: 0 0 14px;
    /* Popisek sloupce je hlas, ne údaj; strojopis na webu nese jen to, co se
       měří. Tvar zůstává: drobné, prostrkané verzálky. */
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--paper-3);
}
.footer.jf .jf-ch-net,
.footer.jf .jf-tag {
    font-family: var(--font-code);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--paper-3);
}

/* Značka a jména: stažené Archivo, jako v liště. */
.footer.jf .jf-mark-txt {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: var(--track-tight);
    color: var(--paper);
}
.footer.jf .jf-ch-name {
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--paper);
}
.footer.jf .jf-ch-ico { color: var(--paper-3); }

/* ── Pás odkazů: tři stejné sloupce ────────────────────────────────────────
   Vzor má první sloupec širší proto, že v něm bydlí značka a odstavec o webu.
   Tady značka stojí v samostatném pásu nad tím, takže široký sloupec neměl
   co nést a zůstávalo v něm asi 330 px prázdna. Svislé vlásečnice mezi
   skupinami odcházejí s ním: sloupce drží mezera, ne mřížka. */
.footer.jf .jf-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 40px;
}
.footer.jf .jf-groups .jf-group {
    padding: 28px 0;
    border-left: 0;
}

/* ── Pás povinných informací ───────────────────────────────────────────────
   Jediná část patičky, kterou divák MUSÍ přečíst, dosud ležela volně mezi
   odkazy a právním řádkem a splývala s nimi. Dostává vlastní panel, plochu,
   vlasový rámeček a rádius karty, přesně jako `.disclosure` ve vzoru.
   Ohraničený blok si oko najde i při rychlém sjetí patičky. */
.footer.jf .jf-band--must {
    /* Boční okap drží pás, ne rail: rail je uvnitř panelu a bez okapu by
       rámeček panelu na úzké obrazovce dosedl na hranu displeje. */
    padding: 26px 30px 30px;
    border-top: 1px solid var(--rail);
    border-bottom: 0;
}
.footer.jf .jf-band--must > .jf-rail {
    padding: 22px 30px 24px;
    background: var(--panel);
    border: 1px solid var(--rail);
    border-radius: var(--r-card);
}
.footer.jf .jf-stmt { color: var(--paper-2); }
.footer.jf .jf-stmt b { color: var(--paper); }

/* Visutý sloupec musí být širší než 2.6ch, jinak se do něj kolečko 18+
   nevejde. Zarovnání na účaří nahradí zarovnání k hornímu okraji: odznak
   je grafika, ne řádek textu, a účaří by ho posadilo pod nadpis. */
.footer.jf .jf-musts .jf-must {
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
}
.footer.jf .jf-must-ico {
    margin-top: 1px;
    color: var(--paper-3);
}
.footer.jf .jf-must-ico svg { width: 20px; height: 20px; }
.footer.jf .jf-must-h {
    font-family: var(--font-display);
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--paper);
}
.footer.jf .jf-must-t { color: var(--paper-3); }

/* ── Odznak 18+ ────────────────────────────────────────────────────────────
   Kolečko s rámečkem a strojopisem uvnitř, jak ho má vzor. Oranžová odešla:
   18+ není poplach, je to podmínka, a oranžová byla čtvrtá sytá barva na
   stránce, která má mít tři. Kolečko samo nese víc než barva, je to
   piktogram, který se pozná i koutkem oka. */
.footer.jf .jf-age {
    display: inline-grid;
    place-items: center;
    width: 22px; height: 22px;
    margin-top: 1px;
    padding: 0;
    background: none;
    border: 1.5px solid var(--paper-3);
    border-radius: 50%;
    font-family: var(--font-code);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--paper-2);
    flex: none;
}

/* ── Provozní řádek ────────────────────────────────────────────────────────
   Věta o zodpovědném hraní s odznakem stojí přes celou šířku pod odkazy,
   stejně jako ve vzoru: je to poslední, co člověk v patičce uvidí. */
.footer.jf .jf-play {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--paper-3);
}
.footer.jf .jf-copy,
.footer.jf .jf-mini a { color: var(--paper-2); }
.footer.jf .jf-credit { color: var(--paper-3); }

/* ── Mobil ─────────────────────────────────────────────────────────────────
   Zopakované přepisy z 40-footer.css. Bez nich by je silnější selektor
   z tohohle souboru přebil i uvnitř jeho @media a patička by na telefonu
   zůstala ve třech sloupcích. */
@media (max-width: 1000px) {
    .footer.jf .jf-groups {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }
    .footer.jf .jf-groups .jf-group {
        padding: 20px 0;
        border-top: 1px solid var(--rail);
    }
    .footer.jf .jf-groups .jf-group:first-child { border-top: 0; padding-top: 24px; }
    .footer.jf .jf-groups .jf-group:last-child { padding-bottom: 24px; }
}

@media (max-width: 640px) {
    .footer.jf .jf-band--must { padding: 22px 18px 26px; }
    .footer.jf .jf-band--must > .jf-rail { padding: 18px 18px 20px; }
}