/**
 * Klub Bambule — vizuální téma 2026-09 sjednocené s klubhracek.cz
 *
 * Nahrazuje nicepage.css + nicepage-site.css + registration.css (~3,1 MB)
 * vlastní vrstvou nad components.css (vlastní, ne-Bootstrap základ grid/forms/
 * buttons/offcanvas, viz ./components.css a src/www/light.js).
 *
 * Zdroj hodnot: produkční klubhracek.cz (změřeno 2026-09-11) —
 *   - pozadí hlavičky/patičky      #e9f2fa (nicepage .u-palette-1-light-3)
 *   - primární modrá               #1e62ac (.u-custom-color-15)
 *   - magenta pilulky              #e50d5c (.u-custom-color-14)
 *   - žlutá hover                  #ffd504 (.u-custom-color-16)
 *   - šířka obsahu                 1400px  (--theme-sheet-width-xl)
 *   - breakpointy                  576 / 768 / 992 / 1200 / 1400 (shodné s Bootstrapem)
 *   - písma                        Plus Jakarta Sans (nadpisy, tlačítka),
 *                                  Open Sans (text), Roboto (navigace), Caveat (akcent)
 *
 * Písma jsou self-hostovaná (viz ../fonts/) — variabilní woff2, subsety
 * latin + latin-ext. Žádný požadavek na fonts.googleapis.com (GDPR, rychlost).
 */

/* ==========================================================================
   1. Písma
   ========================================================================== */

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('../fonts/open-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('../fonts/open-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/roboto-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/roboto-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/caveat-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/caveat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Tokeny
   ========================================================================== */

:root {
    /* barvy z klubhracek.cz */
    --brand-lightblue: #e9f2fa;
    --brand-blue: #1e62ac;
    --brand-blue-dark: #1b589b;
    --brand-blue-soft: #478ac9;
    --brand-magenta: #e50d5c;
    --brand-magenta-dark: #ce0c53;
    --brand-yellow: #ffd504;
    --brand-ink: #111111;

    /* barvy zděděné z návrhu 2026-09 */
    --brand-sand: #f3e7dd;
    --brand-red: #ea5644;
    --brand-scarlet: #e10012;
    --brand-navy: #2b2171;

    /* písma */
    --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-nav: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-accent: 'Caveat', cursive;

    /* rozměry */
    --container-max: 1400px;
    --container-gutter: 1.5rem;
    --radius-pill: 999px;
    --radius-field: 16px;
    --radius-card: 32px;

    /* hlavička — výška loga řídí i výšku pruhu (viz .kb-header__inner) */
    --header-logo-h: 4rem;
    --header-min-h: 5.5rem;
}

/* barevná témata hlavičky/patičky (?design= / presenter $theme) */
.theme-lightblue {
    --surface-chrome: var(--brand-lightblue);
}

.theme-sand {
    --surface-chrome: var(--brand-sand);
}

/* ==========================================================================
   3. Základ
   ========================================================================== */

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--brand-ink);
    background-color: #fff;
    /* zabraňuje vodorovnému posunu na mobilu kvůli dekoračnímu medvídkovi */
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    line-height: 1.15;
    color: var(--brand-ink);
}

.alert-heading {
    color: inherit;
}

h1, .h1 {
    font-weight: 800;
    font-size: clamp(1.75rem, 1.3rem + 2vw, 2.25rem);
    margin-bottom: 0.5rem;
}

h2, .h2 {
    font-weight: 700;
    font-size: clamp(1.5rem, 1.25rem + 1.2vw, 1.75rem);
    margin-bottom: 0.5rem;
}

h4, .h4 {
    font-weight: 500;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

a {
    color: var(--brand-blue);
}

a:hover {
    color: var(--brand-blue-dark);
}

img {
    max-width: 100%;
}

.kb-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-gutter);
}

/* Od chvíle, kdy container narazí na max-width, ho auto-margin už centruje
   uvnitř viewportu — přičítat k tomu ještě padding by ho podruhé zúžilo
   a obsah by seděl o --container-gutter víc doprostřed, než má klubhracek.cz
   (tam žádný takový padding není, jen centrovaný max-width box). */
@media (min-width: 1400px) {
    .kb-container {
        padding-inline: 0;
    }
}

/* viditelné jen pro odečítače obrazovky (přeskakovací odkaz) */
.kb-visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ==========================================================================
   4. Hlavička
   ========================================================================== */

.kb-header {
    background-color: var(--surface-chrome, var(--brand-lightblue));
}

.kb-header__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--header-min-h);
    padding-block: 0.75rem;
}

.kb-header__logo {
    display: block;
    flex: 0 0 auto;
    margin-right: auto;
    line-height: 0;
}

.kb-header__logo img {
    width: auto;
    height: var(--header-logo-h);
}

.kb-header__actions {
    display: flex;
    align-items: center;
    /* 25px, změřeno na klubhracek.cz (768px) — širší mezera (3.0625rem) patří
       jen k plnému desktop menu, viz @media (min-width: 1200px) níž */
    gap: 1.5625rem;
}

/* Pod 768px má hlavička klubhracek.cz dva řádky: logo nahoře uprostřed,
   CTA + burger pod ním (místo jednoho řádku logo vlevo / CTA+burger vpravo). */
@media (max-width: 767.98px) {
    .kb-header__inner {
        flex-direction: column;
        justify-content: center;
        gap: 1.25rem;
        padding-block: 1.5rem;
    }

    .kb-header__logo {
        margin-right: 0;
    }

    .kb-header__logo img {
        height: 6.25rem;
    }
}

.kb-nav {
    display: none;
}

.kb-nav__list {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* mezera mezi odkazy je vlastní padding každého odkazu (0px gap mezi
   krabicemi), stejně jako na klubhracek.cz — ne mezera na seznamu */
.kb-nav__link {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    font-family: var(--font-nav);
    font-weight: 500;
    font-size: 1.875rem;
    color: var(--brand-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease-in-out;
}

.kb-nav__link:hover,
.kb-nav__link:focus-visible {
    color: var(--brand-magenta);
}

/* CTA „Zaregistrovat“ — bílá pilulka s tmavým textem (klubhracek.cz) */
.kb-cta {
    flex: 0 0 auto;
    display: inline-block;
    font-family: var(--font-nav);
    font-weight: 700;
    font-size: 1.875rem;
    line-height: 1.2;
    color: var(--brand-ink);
    background-color: #fff;
    border-radius: var(--radius-pill);
    /* rozměry pilulky (62×267px při 30px písmu) dle klubhracek.cz —
       vertikální padding 0.4333em (ne 0.4em), jinak vyjde výška 60px
       místo 62px na 768px+ (ověřeno na 768 a 1024px) */
    padding: 0.4333em 1.43em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.kb-cta:hover,
.kb-cta:focus-visible {
    background-color: var(--brand-magenta);
    color: #fff;
}

/* klubhracek.cz nemá na mobilu fluidní škálování, na 25px písmu má jiný
   (relativně větší) padding než desktop — nejde to odvodit ze stejného
   em-vzorce, proto pevná hodnota jen pro tenhle rozsah. */
@media (max-width: 767.98px) {
    .kb-cta {
        font-size: 1.5625rem;
        /* na klubhracek.cz je tu (na rozdíl od desktopu) line-height ~1,
           ne zděděných 1.2 — jinak tlačítko o pár px zvětší hlavičku */
        line-height: 1;
        /* vertikální padding 0.86em (ne 0.84em), jinak vyjde výška 67px
           místo 68px (ověřeno na 425px) */
        padding: 0.86em 1.64em;
    }
}

/* hamburger */
/* na klubhracek.cz není burger čtverec — 65.97×62px, ne 68.8×68.8px, a to
   ve všech rozlišeních, kde je burger vidět (do 1199.98px) */
.kb-burger {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 65.97px;
    height: 62px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--brand-ink);
}

.kb-burger:hover {
    background-color: var(--brand-yellow);
}

.kb-burger svg {
    width: 1.75rem;
    height: 1.75rem;
}

/* Od 768px skáče klubhracek.cz rovnou na plnou (desktop) velikost loga —
   beze změny výš, žádné plynulé škálování. Výška hlavičky ale NENÍ jednotná
   od 768px nahoru: klubhracek.cz (.u-header .u-sheet-1) má vlastní tier
   768–991px vs. 992px+, ověřeno přímo z jejich CSS pravidel (cascade dle
   pořadí v souboru, ne jen podle max-width specificity). Jediné, co se mění
   na 1200px, je viditelnost menu (burger → plný seznam odkazů). */
@media (min-width: 768px) {
    :root {
        --header-logo-h: 9.3125rem;
    }
}

/* 205px, změřeno na klubhracek.cz (768px, .u-header .u-sheet-1 min-height
   pod @media max-width:991px v jejich CSS) */
@media (min-width: 768px) and (max-width: 991.98px) {
    :root {
        --header-min-h: 12.8125rem;
    }
}

/* 215px, klubhracek.cz base (bez media query) hodnota .u-header .u-sheet-1
   min-height — platí od 992px výš (dřívějších 234px bylo omylem přenesených
   z 768px tieru na celý rozsah 768px+) */
@media (min-width: 992px) {
    :root {
        --header-min-h: 13.4375rem;
    }
}

@media (min-width: 1200px) {
    .kb-nav {
        display: block;
    }

    .kb-burger {
        display: none;
    }

    .kb-header__inner {
        /* mezera mezi menu a CTA — 46.75px změřeno na klubhracek.cz */
        gap: 2.921875rem;
    }
}

/* ==========================================================================
   5. Mobilní menu (offcanvas — vlastní JS, viz assets/2026-9/js/offcanvas.js)
   ========================================================================== */

.kb-offcanvas {
    /* na klubhracek.cz překrývá panel celou šířku obrazovky, poloprůhledný
       modrý přes obsah pod ním, ne plný neprůhledný panel */
    width: 100%;
    max-width: none;
    background-color: rgba(30, 98, 172, 0.92);
    color: #fff;
    border-left: 0;
}

.kb-offcanvas .offcanvas-header {
    justify-content: flex-end;
    padding: 1rem 1.25rem;
}

.kb-offcanvas .btn-close {
    opacity: 1;
    filter: invert(1) grayscale(100%) brightness(200%);
}

.kb-offcanvas .btn-close:hover {
    opacity: 0.75;
}

.kb-offcanvas__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 1rem 0 2rem;
    list-style: none;
    text-align: center;
}

.kb-offcanvas__link {
    display: block;
    font-family: var(--font-nav);
    font-weight: 500;
    font-size: 2.25rem;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    padding: 1.875rem 0.25rem;
}

.kb-offcanvas__link:hover,
.kb-offcanvas__link:focus-visible {
    color: var(--brand-yellow);
}

/* ==========================================================================
   6. Hlavní obsah
   ========================================================================== */

.kb-main {
    background-color: #fff;
}

.kb-main__content {
    max-width: 900px;
    padding-block: 2.5rem 0rem;
}

/* Register a Account:cancel — formulář odsazený od hlavičky o 120px, jen na velkých obrazovkách */
@media (min-width: 992px) {
    .kb-main__content--offset-lg {
        padding-top: 7.5rem;
    }
}

/* Dekorační medvídek vpravo — jen tam, kde ho presenter povolí ($hasBgImage).
   Obrázek nese .kb-container, ne .kb-main: drží se tak pravého okraje obsahu
   (max 1400px), ne okraje okna — na širokém monitoru jinak odpluje pryč.
   padding-top je na .kb-main__content, ne na .kb-main, aby šlo pozadí
   medvídka odsadit od hlavičky nezávisle na paddingu textu (viz top 50px
   níže — cca 50px mezera pod hlavičkou). */
.kb-main--bear > .kb-container {
    background-image: url('/assets/2026-9/img/bear-crop-q70.webp');
    background-repeat: no-repeat;
    background-position: right -1rem top 50px;
    /* box je nižší než celý obrázek (přirozená výška 672px) — uřízne
       medvídka v pase, hned pod ním navazuje .app-promo-bar */
    min-height: 450px;
}

@media (max-width: 991.98px) {
    /* pod desktopem by medvídek lezl do formuláře — schovat, obsah přes celou šířku.
       min-height se musí zrušit taky, jinak zbyde ~601px prázdného místa nad obsahem. */
    .kb-main--bear > .kb-container {
        background-image: none;
        min-height: 0;
    }

    .kb-main__content {
        max-width: none;
        /* bez medvídka/promo baru pod obsahem by tlačítko formuláře
           bylo nalepené na app-promo-bar nebo rovnou na patičku */
        padding-bottom: 2.5rem;
    }
}

.kb-main .alert {
    border-radius: var(--radius-field);
}

/* ==========================================================================
   7. Formuláře a tlačítka (přepis Bootstrapu)
   ========================================================================== */

.form-control,
.form-select {
    border-width: 4px;
    border-color: var(--brand-ink);
    border-radius: var(--radius-field);
    height: 4.35rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.form-select {
    padding-top: 0.375rem;
}

.form-floating > .form-control,
.form-floating > .form-select {
    padding-left: 1rem;
    height: 4.35rem;
}

.form-floating > label {
    padding-left: 1.25rem;
}

/* Register/Cancel — jednopolní e-mailový formulář, jinak by pole na šířku
   celého .kb-main__content (900px) přesahovalo do medvídka v pozadí. */
.kb-email-field {
    max-width: 28rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 0.2rem rgba(30, 98, 172, 0.2);
}

.form-control:disabled {
    color: var(--brand-ink);
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    background-size: 2rem;
}

form h2 {
    font-size: 1.625rem;
    color: var(--brand-ink);
}

/* tvar tlačítek je společný; barvu dostávají všechna kromě outline a .btn-success
   (:where() nezvyšuje specificitu, takže tahle pravidla přebijí i .btn-primary) */
.btn {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.25rem;
    border-radius: 15px;
    padding: 20px 90px;
    margin: 0;
    transition-property: background-color, color, border-color;
}

.btn:where(:not([class*="btn-outline"]):not(.btn-success)) {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-red);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-navy);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-navy);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--brand-red);
    --bs-btn-disabled-border-color: transparent;
}

.btn-lg {
    padding: 1.25rem 8.5rem;
}

.btn:focus {
    box-shadow: none;
}

.btn:focus-visible {
    outline: 3px solid var(--brand-blue);
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    /* na mobilu se pevné vodorovné odsazení nevejde */
    .btn,
    .btn-lg {
        padding-inline: 1.5rem;
        width: 100%;
    }
}

/* ==========================================================================
   8. Promo blok aplikace
   ========================================================================== */

.app-promo-bar {
    height: 48px;
    background-color: var(--brand-scarlet);
}

.app-promo-section {
    background-color: #fff;
    padding-block: 3rem;
}

.app-promo-card {
    --promo-pad-x: 1.5rem;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
    overflow: visible;
    min-height: 352px;
    border-radius: 16px;
    padding: var(--promo-pad-x);
    /* Medvěd má na této úrovni vždy stejnou velikost (odvozenou z min-height
       karty, ne z viewportu) — odsazení textu proto musí být pevné, ne vw-fluidní,
       jinak se v mezikroku mezi 1200-1400px medvěd s textem překrývají. */
    padding-left: 21rem;
    background: linear-gradient(135deg, #fd9186 0%, #faa384 100%);
}

.app-promo-bear {
    position: absolute;
    left: -2.5rem;
    top: 50%;
    transform: translateY(-50%);
    /* Pevná výška, ne odvozená z karty (%) — karta může být vyšší, když se
       .app-promo-list zalomí pod text (viz min-height výše), a medvěd by se
       s ní roztahoval. */
    height: 26rem;
    width: auto;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.app-promo-left {
    flex: 1 1 420px;
    max-width: 29rem;
}

.app-promo-copy h2 {
    font-weight: 800;
    font-size: clamp(1.875rem, 1.4rem + 2.4vw, 2.75rem);
    line-height: 1.15;
    margin-bottom: 1rem;
}

.app-promo-subtitle {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
    color: var(--brand-magenta);
    margin-bottom: 1.5rem;
}

.app-promo-desc {
    max-width: 23rem;
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.app-promo-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.btn-pill-outline {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--brand-ink);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--brand-ink);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
}

.btn-pill-outline:hover,
.btn-pill-outline:focus-visible {
    background: var(--brand-ink);
    color: #fff;
}

.app-promo-list {
    flex: 0 0 336px;
    width: 336px;
    height: 280px;
    margin-top: 1rem;
    margin-left: auto;
    display: flex;
    align-items: center;
    margin-right: calc(-1 * var(--promo-pad-x));
    background: #fff;
    border-radius: 20px 0 0 20px;
    padding: 1.5rem 2rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.app-promo-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.app-promo-list li {
    font-size: 1.125rem;
    font-weight: 600;
    padding: 0.4rem 0;
}

.app-promo-list li::before {
    content: "•";
    color: var(--brand-ink);
    font-weight: 800;
    margin-right: 0.5rem;
}

@media (max-width: 575.98px) {
    .btn-pill-outline {
        width: 100%;
        text-align: center;
    }
}

/* Medvěd má vždy stejnou (fixní) velikost bez ohledu na viewport — odvozenou
   z min-height karty, ne z vw — takže desktopová flex struktura (obrázek
   mimo tok, .app-promo-left jako jeden kus textu, seznam s margin-left:auto)
   funguje beze změny až do 768px: .app-promo-left se při nedostatku místa
   normálně zmenší/zalomí jako celek, seznam spadne pod něj (min-height na
   kartě mu dovolí růst, takže nepřeteče do patičky). Rozpadat text na
   samostatné řádky (dřívější grid + display:contents pokus) dělalo přesně
   to, co vypadá jako "text obtéká obrázek" — .app-promo-left musí zůstat
   nedělitelný blok. */

/* Pod 768px není místo na obrázek + text vedle sebe vůbec — plné svislé
   řazení: obrázek (zmenšený), text, seznam, vše na střed. */
@media (max-width: 767.98px) {
    .app-promo-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 2rem 1.5rem;
    }

    .app-promo-bear {
        position: static;
        transform: none;
        width: min(180px, 60%);
        height: auto;
    }

    .app-promo-left {
        max-width: 26rem;
    }

    .app-promo-copy {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .app-promo-buttons {
        justify-content: center;
    }

    .app-promo-list {
        width: 100%;
        max-width: 26rem;
        height: auto;
        margin: 0 auto;
        border-radius: 20px;
        text-align: left;
    }
}

/* ==========================================================================
   9. Patička
   ========================================================================== */

.kb-footer {
    background-color: var(--surface-chrome, var(--brand-lightblue));
    padding-block: 2.5rem;
}

.kb-footer__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
}

/* 318px celkem (= 238px inner + 2×40px padding), změřeno na klubhracek.cz
   (.u-footer .u-sheet-1 min-height 992–1199px tier) — u nás delší texty
   odkazů (viz .kb-footer__links) samy o sobě na 238px nedosáhnou, proto
   explicitní podlaha, ne spoléhání na obsah */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .kb-footer__inner {
        min-height: 14.875rem;
    }
}

/* Střední blok (ikony + bambule.cz) není na klubhracek.cz vystředěný mezi
   sloupci — sedí 99px napravo od geometrického středu. Container má na
   téhle šířce vždy přesně 1400px (max-width), takže pevný posun sedí. */
@media (min-width: 1400px) {
    .kb-footer__middle {
        position: relative;
        left: 99px;
    }
}

.kb-footer__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.kb-footer__link {
    font-family: var(--font-nav);
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--brand-ink);
    text-decoration: underline;
}

.kb-footer__link:hover,
.kb-footer__link:focus-visible {
    color: var(--brand-magenta);
}

.kb-footer__middle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3.35rem;
}

/* Od 992px má klubhracek.cz ikony NAD tlačítkem bambule.cz (ne vedle sebe
   v jednom řádku, jak dřív předpokládal base pravidlo výš) — ověřeno na
   1024px, mezera mezi řádky 47px. Tier 768–991.98px má vlastní odlišný
   layout níž (display:contents), tenhle blok se ho netýká. */
@media (min-width: 992px) {
    .kb-footer__middle {
        flex-direction: column;
        gap: 2.9375rem;
    }
}

/* rozměry i barvy koleček dle klubhracek.cz (76px desktop / 60px níž) */
.kb-social {
    display: flex;
    align-items: center;
    gap: 2.25rem;
}

.kb-social a {
    display: block;
    line-height: 0;
}

.kb-social svg {
    display: block;
    width: 3.75rem;
    height: 3.75rem;
}

.kb-social__facebook {
    color: #3b5998;
}

.kb-social__instagram {
    color: #c536a4;
}

.kb-social__youtube {
    color: #d22215;
}

/* 76px ikony / 40px gap platí na klubhracek.cz už od 992px, ne až od 1200px
   (ověřeno na 1024px) — velikost se na 1200px dál nemění, jen viditelnost menu */
@media (min-width: 992px) {
    .kb-social {
        gap: 2.5rem;
    }

    .kb-social svg {
        width: 4.75rem;
        height: 4.75rem;
    }
}

.kb-footer__cta {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.625rem;
    line-height: 1;
    color: #fff;
    background-color: var(--brand-magenta);
    border-radius: var(--radius-pill);
    /* 25px/80px, ne em-based — klubhracek.cz má pevný padding, ne škálovaný
       podle písma (šířka 308px = stejná jako ikony vedle, výška 76px) */
    padding: 25px 80px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.kb-footer__cta:hover,
.kb-footer__cta:focus-visible {
    background-color: var(--brand-yellow);
    color: var(--brand-ink);
}

.kb-footer__logo {
    justify-self: end;
    line-height: 0;
}

.kb-footer__logo img {
    width: 234px;
    height: auto;
}

/* Skutečně mobilní tier (klubweb.vm/klubhracek.cz obojí pod 768px) — jeden
   sloupec, vše na střed: odkazy / logo / ikony / bambule.cz. */
@media (max-width: 767.98px) {
    /* 605px celkem, bez paddingu na <footer> u vzoru — dorovnáno přes
       padding-top/bottom (asymetricky, přesně dle klubhracek.cz, 425px) */
    .kb-footer {
        padding-top: 2.375rem;
        padding-bottom: 2.9469rem;
    }

    .kb-footer__inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        /* 40px mezi bloky (odkazy/logo/ikony), změřeno na klubhracek.cz (425px) */
        gap: 2.5rem;
    }

    /* pořadí na klubweb.vm: textové odkazy / logo / sociální ikony / bambule.cz
       (DOM pořadí zůstává kvůli desktop gridu, tady se jen přeskládá vizuálně) */
    .kb-footer__links {
        order: -2;
        align-items: center;
        /* mezera mezi jednotlivými odkazy tak, aby řádkový rozestup vyšel
           na 35.5px jako na klubhracek.cz (425px) */
        gap: 0.5rem;
    }

    /* 17.7778px = 1.1111rem, změřeno na klubweb.vm (425px) */
    .kb-footer__link {
        font-size: 1.1111rem;
    }

    .kb-footer__logo {
        order: -1;
        justify-self: center;
    }

    /* 197px, změřeno na klubhracek.cz (425px) */
    .kb-footer__logo img {
        width: 197px;
    }

    /* 23px, změřeno na klubhracek.cz (425px) */
    .kb-social {
        gap: 1.4375rem;
    }

    /* 40px mezi ikonami a bambule.cz, změřeno na klubhracek.cz (425px) —
       jiná (užší) hodnota než desktop flex-wrap gap (3.35rem) výš v souboru */
    .kb-footer__middle {
        gap: 2.5rem;
    }

    /* 22px písmo/line-height, padding 63/65px (~4rem) × 25px — měřeno na
       klubhracek.cz (425px), stejné písmo/výška jako tablet tier, jiný padding */
    .kb-footer__cta {
        font-size: 1.375rem;
        line-height: 1;
        padding: 1.5625rem 4rem;
    }
}

/* Tablet tier (768–991.98px) — na klubhracek.cz tu patička už není jednosloupcová,
   ale 2 sloupce: odkazy+ikony vlevo, logo+bambule.cz vpravo (měřeno na 768px). */
@media (min-width: 768px) and (max-width: 991.98px) {
    .kb-footer__inner {
        grid-template-columns: 1fr 1fr;
        justify-items: stretch;
        text-align: left;
        row-gap: 1.4766rem;
        column-gap: 0;
    }

    /* rozpojí vnitřní flex řádek ikony+cta, aby se každý dal umístit do jiné
       buňky gridu (ikony pod odkazy, cta pod logem) */
    .kb-footer__middle {
        display: contents;
    }

    .kb-footer__links {
        grid-column: 1;
        grid-row: 1;
    }

    .kb-footer__logo {
        grid-column: 2;
        grid-row: 1;
    }

    /* 37px, změřeno na klubhracek.cz (768px) */
    .kb-social {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        gap: 2.3125rem;
    }

    /* 22px písmo, 80px/25px padding — změřeno na klubhracek.cz (768px),
       jiné (menší) hodnoty než desktop tier výš v souboru */
    .kb-footer__cta {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        font-size: 1.375rem;
        line-height: 1;
        padding: 1.5625rem 5rem;
    }

    /* 283px, změřeno na klubhracek.cz (768px) */
    .kb-footer__logo img {
        width: 283px;
    }
}

/* ==========================================================================
   10. Cookie lišta
   Třídy .u-cookies-* a .show drží assets/2026/js/cookies-consent.js — neměnit.
   ========================================================================== */

.u-cookies-consent {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1080;
    display: none;
    background: #fff;
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.12);
    color: var(--brand-ink);
}

.u-cookies-consent.show {
    display: block;
}

.u-cookies-inner {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: var(--container-max);
    margin-inline: auto;
    padding: 1rem 1.5rem;
}

.u-cookies-text {
    font-size: 0.95rem;
    line-height: 1.4;
}

.u-cookies-text a {
    color: inherit;
    text-decoration: underline;
}

.u-cookies-options {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.9rem;
}

.u-cookies-option {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    margin: 0;
}

.u-cookies-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

/* v liště se tlačítka na plnou šířku a se 90px odsazením nevejdou */
.u-cookies-buttons .btn {
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
    width: auto;
}

@media (max-width: 767.98px) {
    .u-cookies-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .u-cookies-buttons {
        width: 100%;
    }

    .u-cookies-buttons .btn {
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   11. Tisk
   ========================================================================== */

@media print {
    .kb-header,
    .kb-footer,
    .app-promo-bar,
    .app-promo-section,
    .u-cookies-consent {
        display: none !important;
    }

    .kb-main--bear > .kb-container {
        background-image: none;
    }
}