/* ============================================================================
   PAGE-BONUSES.CSS — /bonusy
   ----------------------------------------------------------------------------
   Načítá se jen na /bonusy (includes/header.php).

   Soubor byl fork RespinnersTV a nesl 811 řádků. Většina z nich patřila
   blokům, které na webu nejsou vůbec: jantarová paleta sekce CS2
   (.bp-cs2-*, 123 deklarací), editoriální průvodce (.bp-ed-*, .bp-intro-*,
   .bp-crit-rail, .bp-types-bento, .bp-safety-slab), slovník pojmů
   (.bp-glossary-*), mýty (.bp-myth-*), srovnávací tabulka (.ed-table
   tr.is-partner, .bp-promo-code, .bp-table-note), FAQ (.bp-editorial-faq),
   pilulkové filtry (.bp-filter-*), prázdný stav (.bp-no-results) a pás dvou
   hlavních karet (.bp-hero-row). Žádný z nich nemá markup — /cs2 i celý
   průvodce jsou pryč, /cs2 vrací 410. Jsou smazané celé, ne přebité vrstvou.

   Další várka odešla proto, že to samé už drží sdílená komponenta:
     obal stránky   .bonuses-page   → .jl-page        (core/shared.css)
     kontejner      .bp-container   → .jl-container   (core/shared.css)
     hlavička       .bp-section-label + h1 → .jl-pagehead + .jl-section-label
     počítadlo      .bp-count-pill  → .jl-count-pill  (core/shared.css)
     mřížka karet   .bp-bonuses-list / .bp-weekly-grid → .bonuses-list
     pás sekce      .bp-main        → .jl-band        (core/shared.css)
     limitovaná karta .bonus-card-h.bp-limited → core/shared.css (bylo dvakrát)

   Svislé odsazení sekcí a šířku kontejneru drží components/karty.css
   (s !important na `section` i `.jl-container`), takže `.bp-section`
   i `.bp-main` tady nic neřídily — jejich padding se nikdy nevykreslil.

   Zbyly dvě věci, které opravdu patří téhle stránce: odpočet do konce týdne
   a věta pod hlavičkou týdenního pásu. Třetí přibyla později: výklad čtyř
   parametrů mezi oběma soupisy (.bp-decoder). V souboru není ani jeden
   !important.
   ============================================================================ */

/* ─── Odpočet do konce týdne ───
   Sedí v hlavičce sekce hned za nadpisem, na stejném místě jako počítadlo
   nabídek o sekci níž — obě hlavičky tak vypadají jako sourozenci a stránka
   si nezakládá druhý rytmus. Sazba je odznak (pravidlo 7), ne pilulka:
   rádius drží token (pravidlo 1), místo 9999px, a plocha je --kt-el, protože
   čip leží NA pásu (pravidlo 3).

   Levá hrana nese stav (pravidlo 2): --kt-live, protože obsah pásu za pár dní
   zmizí. Je to táž barva, jakou má odznak „Jen tento týden" na kartách uvnitř.
   Číslice jsou tabular-nums, ať se řádek při každé minutě nepřeskládá. */
.bp-weekly-timer {
    display: inline-flex;
    align-items: center;
    gap: .6ch;
    padding: .3rem .65rem;
    background: var(--kt-el);
    border: 1px solid var(--kt-line);
    border-left: 3px solid var(--kt-live);
    border-radius: var(--kt-r-sm);
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
    color: var(--kt-ink);
}

/* Ciferník je jediné místo, kde smí být červená vidět jako plocha — je to
   ikona, ne čtený text, takže na ni kontrastní práh 4,5:1 nedopadá. */
.bp-weekly-timer svg {
    flex: none;
    color: var(--kt-live-2);
}

/* ─── Věta pod hlavičkou pásu ───
   Dřív 0.88rem v --alpha-white-35 (3,3:1, WCAG AA neprošlo) a se záporným
   horním okrajem, kterým se přisála k nadpisu. Teď --kt-ink-2 a šířka řádku
   jako všude jinde. */
.bp-weekly-hint {
    margin: 0 0 24px;
    max-width: 68ch;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--kt-ink-2);
}

/* ─── Jak číst mřížku parametrů ───
   Stránka byla dvě mřížky karet pod sebou a mezi nimi nic. Tenhle blok stojí
   mezi nimi a je schválně JINÁ konstrukce: dva nestejné sloupce, vlevo úzký
   text, vpravo širší panel. Nesymetrie je záměr, ne nedbalost, jinak by to
   byla třetí pravidelná mřížka na jedné stránce.

   Panel uvnitř mluví týmž jazykem jako parametry na kartě: mezera 1 px nad
   barvou linky, buňky na ploše panelu, strojopisný popisek. Rozdíl je v tom,
   že tam je jeden parametr sloupec a tady řádek, takže se dva bloky nepletou.
   Rádius je --r-card, protože je to plocha velikosti karty; buňky uvnitř
   žádný vlastní rádius nemají, ořezává je overflow. */
.bp-decoder-in {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 13fr);
    gap: 20px 48px;
    align-items: start;
}

.bp-decoder-lead h2 {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 900;
    line-height: 1.1;
    /* core/base.css sází nadpisy verzálkami, tenhle je věta. */
    text-transform: none;
    letter-spacing: var(--track-tight);
    color: var(--paper);
}
/* Zvýrazněné slovo je zelené písmo, stejně jako v hlavičce stránky a v nadpisu
   soupisu pod tímhle blokem. Dvě třídy v zápisu jsou nutné: obecné pravidlo
   v components/kick-skin.css nadpis podtrhává a načítá se později, takže by
   se tenhle jediný nadpis na stránce choval jinak než všechny ostatní. */
.bp-decoder .bp-decoder-lead h2 span {
    color: var(--go);
    text-decoration: none;
}

.bp-decoder-lead p {
    max-width: 36ch;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--paper-2);
}

.bp-decoder-list {
    display: grid;
    gap: 1px;
    margin: 0;
    background: var(--rail);
    border: 1px solid var(--rail);
    border-radius: var(--r-card);
    overflow: hidden;
}
.bp-decoder-list > div {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 5px 18px;
    padding: 14px 18px;
    background: var(--panel);
}
.bp-decoder-list dt {
    font-family: var(--font-code);
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--paper-3);
}
.bp-decoder-list dd {
    margin: 0;
    font-size: .93rem;
    line-height: 1.5;
    color: var(--paper);
}
/* Směr je údaj, ne věta, tak jede strojopisem a tlumeně. V řádku má vyhrát
   výklad, ne poznámka na jeho konci. */
.bp-decoder-dir {
    font-family: var(--font-code);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .06em;
    white-space: nowrap;
    color: var(--paper-3);
}

/* Poznámka patří k panelu, ne k nadpisu, tak stojí pod ním ve druhém sloupci. */
.bp-decoder-note {
    grid-column: 2;
    max-width: 68ch;
    font-size: .84rem;
    line-height: 1.6;
    color: var(--paper-3);
}
/* Kolik kasin uvádí všechny čtyři parametry je spočítaný údaj, ne důraz ve
   větě. Sází se proto strojopisem a v plné barvě textu, stejně jako hodnoty
   v mřížce na kartě, ke které se ta věta vztahuje. */
.bp-decoder-note b {
    font-family: var(--font-code);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--paper);
}

@media (max-width: 900px) {
    .bp-decoder-in { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .bp-decoder-note { grid-column: 1; }
    .bp-decoder-lead p { max-width: 62ch; }
}

@media (max-width: 560px) {
    /* Pojem se postaví nad výklad, ať zbyde míra na celou větu. */
    .bp-decoder-list > div {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 13px 15px;
    }
    .bp-decoder-list dt { grid-column: 1 / -1; }
}

/* ─── Neúplná mřížka parametrů na kartě ───
   Karta kreslí jen ty ze čtyř parametrů, které kasino opravdu zveřejňuje.
   Dřív byla mřížka vždycky plná, protože se do prázdné buňky sázel zástupný
   znak; ten je pryč a s ním i celý řádek „prázdno" pod každou nabídkou.

   Důsledek je, že buněk může být lichý počet. Pod 560 px stojí mřížka na dvou
   pevných sloupcích a v posledním řádku pak zbyde místo, kterým prosvítá
   barva linky, na níž mřížka leží — čte se to jako rozbitá buňka, ne jako
   konec výpisu. Poslední buňka proto lichý řádek dokončí sama.

   Nad 560 px si počet sloupců řídí auto-fit podle počtu buněk, takže tam
   žádné zbytkové místo nevzniká a pravidlo by naopak rozhodilo trojici
   parametrů do dvou řádků. Proto jen v tomhle jednom rozsahu.

   Pravidlo bydlí tady, protože neúplná data sází /bonusy; components/nabidka.css
   drží podobu karty pro celý web a tenhle případ tam zatím nenastává. */
@media (max-width: 560px) {
    .page-bonuses .nb-terms > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}