/* ═══════════════════════════════════════════════════════════════════════════
   40-FOOTER, patička JLKasina
   ───────────────────────────────────────────────────────────────────────────
   Patička je spodní půlka rámu: stejné patro jako lišta, tedy --kt-head.
   Plochu drží components/footer.css, tady jde jen o rozvržení pásů. Uvnitř
   patičky není žádná druhá plocha, všechny čtyři pásy leží na téže barvě
   a dělí je vlásečnice 1px solid var(--kt-line).

     1) značka a živé kanály
     2) odkazy ve třech skupinách, mezi nimi svislá vlásečnice
     3) prohlášení „JLCasino není provozovatel hazardní hry" a povinné
        informace (18+, linka pomoci, licence, provize)
     4) provozní řádek s právními odkazy a kreditem

   Zelená padne v celé patičce právě jednou, na 2px linku na horní hraně.
   Hover odkazu ani druhá půlka značky ji nenesou: v celém webu je zelená
   výhradně výplň primárního tlačítka (DESIGN-JLCASINO.md, pravidlo 2).

   Co se proti minulé verzi ubralo:
   - rádiusy var(--kt-r-sm) na kanálech, ikonách sítí, štítku partnera
     a rámečcích ikon; rádius je nula (pravidlo 1);
   - background: var(--kt-sf) na kanálech a na celém pásu povinných
     informací; třetí odstín pozadí je chyba (pravidlo 3);
   - pilulkové odkazy: kanál i štítek partnera jsou teď sazba, ne tvar
     (pravidla 1 a 7);
   - dvě zelené v jednom pásu; zelená padne na pás nejvýš jednou
     (pravidlo 6): značka v pásu 1, hover odkazu v pásech 2 a 4;
   - !important na .footer.jf::before/::after; gradientní linku už nemá
     co srážet, footer.css ji nezakládá.

   Seznamy i povinné informace stojí ve visutém sloupci 2.6ch (pravidlo 4):
   odrážka, ikona i odznak 18+ jsou vlevo od textového sloupce, takže text
   začíná všude na stejné svislici.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Visutý sloupec, jediný tvar pro všechny seznamy v patičce. */
.jf-hang {
    display: grid;
    grid-template-columns: 2.6ch minmax(0, 1fr);
    column-gap: 0.9ch;
    align-items: baseline;
}

/* Společná osa obsahu, stejná jako zbytek webu i jako lišta. */
.jf-rail {
    max-width: var(--kt-rail, 1180px);
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
}

/* Popisek pásu. Jeden tvar pro oba nadpisy pásů.
   Velikosti v patičce jsou v px, ne v rem: root má pod 1440 px 14,5 px,
   takže 0,66rem renderovalo 9,6 px, hluboko pod 11,5px, což je spodní
   hranice čteného textu na celém webu. */
.jf-kicker {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kt-ink-2);
}

/* ─────────────────────────────────────────────────────────────────────────
   PÁS 1: značka a kanály
   Bez zelené: značku drží váha a řez, ne druhá barva.
   ───────────────────────────────────────────────────────────────────────── */
.jf-band--brand { padding: 32px 0 28px; }

.jf-brandbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px 48px;
    align-items: start;
}

.jf-mark {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
}
/* Logo bez záře: drop-shadow byl nejnápadnější zbytek po zdrojovém webu. */
.jf-mark-img {
    width: 38px;
    height: auto;
    flex: 0 0 auto;
    color: var(--go);
}
.jf-mark-txt {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: var(--kt-ink);
}
/* Značka byla dvoubarevná (JL bíle, KASINO zeleně), stejně jako v liště.
   Zelená má na webu jediný úkol: výplň primárního tlačítka. */
.jf-mark-txt b { color: inherit; font-weight: 900; }

.jf-claim {
    margin: 14px 0 0;
    max-width: 68ch;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--kt-ink-2);
}

.jf-channels { justify-self: end; text-align: left; }

.jf-ch-row { display: flex; gap: 22px; flex-wrap: wrap; }

/* Kanál je řádek nabídky, ne pilulka: hrana vlevo nese stav, uvnitř je
   jen sazba. Hover mění barvu hrany, nic se nehýbe ani nesvítí. */
.jf-ch {
    display: inline-flex;
    align-items: baseline;
    gap: 0.9ch;
    padding: 2px 0 2px 12px;
    background: none;
    border: 0;
    border-left: 3px solid var(--kt-line-2);
    border-radius: 0;
    text-decoration: none;
    color: var(--kt-ink);
    transition: border-color 0.18s ease;
}
.jf-ch:hover, .jf-ch:focus-visible { border-left-color: var(--kt-ink-2); }
.jf-ch-ico { align-self: center; display: flex; color: var(--kt-ink-2); }
.jf-ch-ico svg { display: block; }
.jf-ch-name {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.01em;
}
/* Značka platformy je odznak, tedy vysázené slovo, ne stužka s rámečkem. */
.jf-ch-net {
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kt-ink-2);
}

.jf-nets { display: flex; gap: 14px; margin-top: 12px; }
.jf-net {
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--kt-ink-2);
    text-decoration: none;
    transition: color 0.18s ease;
}
.jf-net:hover, .jf-net:focus-visible { color: var(--kt-ink); }
.jf-net svg { display: block; }

/* ─────────────────────────────────────────────────────────────────────────
   PÁS 2: odkazy ve třech skupinách
   Tři skupiny podle důvodu, proč na odkaz někdo klikne, dělí je svislá
   vlásečnice. Odkazy stojí ve visutém sloupci: odrážka vlevo, text na
   společné svislici.
   ───────────────────────────────────────────────────────────────────────── */
.jf-band--nav { border-top: 1px solid var(--kt-line); }

.jf-groups {
    display: grid;
    grid-template-columns: 1.75fr 1fr 1fr;
}
.jf-group {
    padding: 28px 34px;
    border-left: 1px solid var(--kt-line);
}
.jf-group:first-child { padding-left: 0; border-left: 0; }
.jf-group:last-child { padding-right: 0; }

/* Nadpis skupiny bez gradientního podtržítka, jen tichý popisek. */
/* O půl stupně nad popiskem pásu, aby byl poznat rozdíl mezi nadpisem
   skupiny a popiskem celého pásu. */
.jf-group-h {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kt-ink-2);
}

.jf-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
}
/* Devět odkazů: pět a čtyři pod sebou ve dvou sloupcích. Pevný počet řádků,
   ne auto-fit, takže se řazení nerozpadne podle šířky okna. */
.jf-list--two {
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: 26px;
}
/* Odkaz stojí sám. Odrážka tu byla vysázená pomlčka, tedy typografický znak
   jako dekorace, a pod sebou jich v patičce stálo čtrnáct. */
.jf-list li {
    margin: 0;
    min-width: 0;
}
.jf-list a {
    display: inline;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--kt-ink-2);
    text-decoration: none;
    transition: color 0.18s ease;
}
/* Původní odkaz se při hoveru posouval do strany, což je tik zdrojového
   webu. Mění se jen barva: z tlumené na hlavní. Zelená to není, ta je
   v celé patičce jen na 2px lince nahoře. */
.jf-list a:hover, .jf-list a:focus-visible { color: var(--kt-ink); }

/* Partner se pozná odznakem, tedy vysázeným slovem, ne štítkem s rámečkem. */
.jf-tag {
    margin-left: 0.8ch;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kt-ink-3);
}

/* ─────────────────────────────────────────────────────────────────────────
   PÁS 3: kdo je kdo, a povinné informace
   Nejdřív jedna věta o tom, čí je hra a čí je web, pak 18+, linka pomoci,
   licence a provize ve čtyřech sloupcích. Pás nemá vlastní plochu, jen
   vlásečnice nahoře a dole. Ikona i odznak 18+ stojí ve visutém sloupci,
   bez rámečku kolem.
   ───────────────────────────────────────────────────────────────────────── */
.jf-band--must {
    padding: 28px 0 30px;
    border-top: 1px solid var(--kt-line);
    border-bottom: 1px solid var(--kt-line);
}
.jf-must-kicker { margin-bottom: 10px; }

/* Prohlášení, kdo hru provozuje. Stojí nad výčtem, protože rámuje všechno
   pod sebou: divák musí vědět, že účet i vklad jde ke kasinu, ne sem.
   Nese ho běžná sazba, ne rámeček ani výstražná plocha, je to fakt, ne
   poplach. Věta samotná je tučně, aby se dala přečíst i letmo. */
.jf-stmt {
    margin: 0 0 20px;
    max-width: 78ch;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--kt-ink-2);
}
.jf-stmt b {
    color: var(--kt-ink);
    font-weight: 700;
}

.jf-musts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 30px;
}
.jf-must {
    display: grid;
    grid-template-columns: 2.6ch minmax(0, 1fr);
    column-gap: 0.9ch;
    align-items: baseline;
}

.jf-must-ico,
.jf-age {
    width: auto;
    height: auto;
    display: block;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--kt-ink-2);
}
.jf-must-ico svg { display: block; width: 18px; height: 18px; }
/* Oranžová jen tady: 18+ je varování, ne další akcentní barva webu. */
.jf-age {
    color: var(--kt-warn);
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 900;
    letter-spacing: 0;
}

.jf-must-h {
    margin: 0 0 5px;
    font-family: var(--font-display);
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.005em;
    color: var(--kt-ink);
}
.jf-must-t {
    margin: 0;
    max-width: 68ch;
    font-size: 12.5px;
    line-height: 1.62;
    color: var(--kt-ink-2);
}
.jf-must-t a {
    color: var(--kt-ink);
    text-decoration: underline;
    text-decoration-color: var(--kt-line-2);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.18s ease;
}
.jf-must-t a:hover, .jf-must-t a:focus-visible {
    text-decoration-color: var(--kt-ink);
}

/* ─────────────────────────────────────────────────────────────────────────
   PÁS 4: provozní řádek
   Copyright vlevo, právní odkazy vpravo, kredit autora pod vlásečnicí.
   ───────────────────────────────────────────────────────────────────────── */
.jf-band--base { padding: 20px 0 28px; }

.jf-base {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 24px;
    align-items: baseline;
}
.jf-copy { margin: 0; font-size: 12.5px; color: var(--kt-ink-2); }

.jf-mini {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 22px;
}
.jf-mini li { margin: 0; }
.jf-mini a {
    font-size: 12.5px;
    color: var(--kt-ink-2);
    text-decoration: none;
    transition: color 0.18s ease;
}
.jf-mini a:hover, .jf-mini a:focus-visible { color: var(--kt-ink); }

.jf-credit {
    grid-column: 1 / -1;
    margin: 6px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--kt-line);
    max-width: 68ch;
    font-size: 12px;
    line-height: 1.6;
    color: var(--kt-ink-2);
}
.jf-credit-name { color: var(--kt-ink); font-weight: 700; }
.jf-credit-mail {
    color: var(--kt-ink);
    text-decoration: underline;
    text-decoration-color: var(--kt-line-2);
    text-underline-offset: 2px;
    word-break: break-word;
    transition: text-decoration-color 0.18s ease;
}
.jf-credit-mail:hover, .jf-credit-mail:focus-visible {
    text-decoration-color: var(--kt-ink-2);
}

/* ─────────────────────────────────────────────────────────────────────────
   MOBIL
   ───────────────────────────────────────────────────────────────────────── */

/* Do 1000 px: skupiny odkazů se staví pod sebe a svislá vlásečnice se
   překlopí na vodorovnou, jinak by se tři sloupce zmáčkly na pár znaků. */
@media (max-width: 1000px) {
    .jf-brandbar { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .jf-channels { justify-self: start; }

    .jf-groups { grid-template-columns: minmax(0, 1fr); }
    .jf-group {
        padding: 20px 0;
        border-left: 0;
        border-top: 1px solid var(--kt-line);
    }
    .jf-group:first-child { border-top: 0; padding-top: 24px; }
    .jf-group:last-child { padding-bottom: 24px; }

    .jf-musts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .jf-base { grid-template-columns: minmax(0, 1fr); }
    .jf-mini { justify-content: flex-start; }
}

/* Do 640 px: všechno na jeden sloupec, včetně dvousloupcového seznamu
   bonusů a povinných informací. */
@media (max-width: 640px) {
    .jf-rail { padding: 0 18px; }
    .jf-band--brand { padding: 26px 0 24px; }

    .jf-ch-row { gap: 18px; }

    .jf-list--two {
        grid-template-rows: none;
        grid-auto-flow: row;
        grid-auto-columns: auto;
    }

    .jf-band--must { padding: 24px 0 26px; }
    .jf-musts { grid-template-columns: minmax(0, 1fr); gap: 20px; }

    .jf-band--base { padding: 18px 0 26px; }
    .jf-mini { gap: 6px 18px; }
}

/* Patička nic neanimuje sama od sebe, tohle jen vypne přechody na hoveru
   pro toho, kdo si pohyb v systému zakázal. */
@media (prefers-reduced-motion: reduce) {
    .jf-ch,
    .jf-net,
    .jf-list a,
    .jf-mini a,
    .jf-must-t a,
    .jf-credit-mail { transition: none; }
}

/* ── Tip redakce ──────────────────────────────────────────────────────────
   Odznak podle pravidla 7: prvni vysazeny radek obsahu, ne plovouci stuzka.
   Nese ho karta, ktera ma v datech featured. */
.bp-pick {
    display: block;
    order: -1;
    font-family: var(--font-accent);
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--kt-ink-2);
    margin-bottom: .35em;
}