/* ============================================================
   custom3.css — Non-color overrides pro Mizzle theme
   Barvy: viz color.css (jediný zdroj brand barev)
   ============================================================ */

:root {
    /* Navbar text — hnědá (zůstává pro brand kontinuitu) */
    --bs-navbar-color: #8B4513;
    --bs-navbar-active-color: #8B4513;
    --bs-nav-link-color: #8B4513;
}

/* === Headings — Roboto Condensed Bold hnědá (brand identita) === */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Condensed', sans-serif;
    color: #916422;
    font-weight: 900 !important;
}

/* === Mizzle icon-* helpery — vynutit centrování ikon přes flexbox ===
   Bootstrap Icons mají vertical-align: -0.125em + line-height: 1, což s parent
   line-height přes Mizzle default nefunguje konzistentně — ikona vychází vlevo
   nahoře místo centrovaně. Flexbox to vyřeší. */
.icon-md, .icon-lg, .icon-xl, .icon-xxl {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Schodovité karty referencí (instruktor-spiralni-stabilizace) — sudé karty posunuté níž
   "do kopečka". Přesunuto z per-stránka inline <style> do globálu (standard Mizzle). */
@media (min-width:992px){
    #psaneRefGrid > [class*="col-"]:nth-child(even){ margin-top:3rem; }
}

/* Světlá karta (data-bs-theme=light) uvnitř barevné sekce (bg-primary/bg-success/bg-dark)
   drží vlastní tmavý text — přebíjí globální hero override `section.bg-primary{color:#fff}`.
   Barvy z proměnných (standard Mizzle, žádné hex). */
section.bg-primary .card[data-bs-theme="light"],
section.bg-success .card[data-bs-theme="light"],
section.bg-dark .card[data-bs-theme="light"],
section.bg-primary .card[data-bs-theme="light"] :where(div,ul,ol,li,span,strong,p,h1,h2,h3,h4,h5,h6),
section.bg-success .card[data-bs-theme="light"] :where(div,ul,ol,li,span,strong,p,h1,h2,h3,h4,h5,h6),
section.bg-dark .card[data-bs-theme="light"] :where(div,ul,ol,li,span,strong,p,h1,h2,h3,h4,h5,h6){
    color: var(--bs-body-color) !important;
}
/* Akcenty v té kartě zůstávají brand zelené */
section.bg-primary .card[data-bs-theme="light"] .text-primary,
section.bg-primary .card[data-bs-theme="light"] .text-primary :where(i,span){
    color: var(--bs-primary) !important;
}

/* CLS fix: rezervace místa pro promo video obrázek (card-img 3:2), jinak posouvá text pod ním */
.card-img{aspect-ratio:3/2;height:auto}

/* CLS fix: karty galerie/referencí (card-img-top z DB obsahu bez rozměrů) — rezervuj místo 4:3,
   object-fit cover ořízne bez deformace (obrázky jsou 4:3 i 16:9). */
.card-img-top{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto}

/* CLS fix: hero obrázek (img-responsive z DB obsahu, 640×400 = 8:5, bez rozměrů) — rezervuj místo,
   ať se hero (a seznam vedle) nepřeskupí při načtení. object-fit cover = bez deformace. */
.img-responsive{aspect-ratio:8/5;width:100%;height:auto;object-fit:cover}

/* Video facade — náhled místo vloženého Vimeo (šetří 3rd-party cookies + ~0,8 MB).
   Tlačítko vyplní .ratio wrapper; klik teprve vloží iframe (viz functions.js initLazyMedia). */
.video-facade-btn {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0; padding: 0; margin: 0;
    cursor: pointer;
    background: var(--bs-dark, #1a1a1a);   /* neutrální tmavý podklad videa */
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-facade-btn::before {        /* zelený kruh */
    content: "";
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--sbz-green-cta);
    transition: background .2s, transform .2s;
}
.video-facade-btn::after {         /* bílý play trojúhelník */
    content: "";
    position: absolute;
    border-style: solid;
    border-width: 13px 0 13px 22px;
    border-color: transparent transparent transparent #fff;
    margin-left: 6px;
}
.video-facade-btn:hover::before,
.video-facade-btn:focus-visible::before {
    background: var(--sbz-green-dark);
    transform: scale(1.08);
}