/*
 * Kariérní stránka — startovací CSS
 * Kopíruj do static/career/<slug>/style.css
 *
 * Brandovací CSS proměnné jsou definované inline v base.html (hodnoty z DB):
 *   --brand, --brand-light, --cp, --accent, --text, --muted, --border
 */

/* ============================================================
   NAVIGACE
   ============================================================ */
/* Rozvržení, rozbalování na mobilu i linka pod aktivním odkazem jsou
   bootstrapový `navbar` + `nav-underline`. Zbývají jen barvy, které si
   volí klient — a ty se předávají bootstrapovými proměnnými, takže si je
   odkazy, značka i linka vezmou samy. */
.c-nav {
    background: #fff;
    --bs-navbar-brand-color: var(--brand);
    --bs-navbar-hover-color: var(--brand);
    --bs-navbar-active-color: var(--brand);
    /* `nav-underline` si přebíjí barvu odkazu vlastní proměnnou a v pořadí
       stylů vyhrává nad `navbar-nav` — vrátíme ji tedy zpátky k navbaru. */
    --bs-nav-link-color: var(--bs-navbar-color);
    --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
}
.c-nav__logo img {
    height: var(--nav-logo-h, 60px);
    max-width: min(360px, 60vw);
    object-fit: contain;
}

/* Tmavý navbar (volitelně). Pozadí dle volby (--nav-bg), texty a ikony
   čitelnou barvou (--nav-ink, dopočítanou z kontrastu na serveru). */
/* Dvě třídy schválně: bootstrapový tmavý navbar je `.navbar[data-bs-theme=dark]`,
   tedy stejná síla selektoru — a náš soubor se načítá až po něm. */
.c-nav.c-nav--dark {
    background: var(--nav-bg, #1a1a1a);
    --bs-border-color: color-mix(in srgb, var(--nav-ink, #fff) 16%, transparent);
    --bs-navbar-brand-color: var(--nav-ink, #fff);
    --bs-navbar-color: color-mix(in srgb, var(--nav-ink, #fff) 85%, transparent);
    --bs-navbar-hover-color: var(--nav-ink, #fff);
    --bs-navbar-active-color: var(--nav-ink, #fff);
}

/* Lišta „prohlížíte web jako…" hlavičku posune — na každé šířce. Do 16. 9.
   2026 měl mobil výjimku top: 0, jenže lišta je pevná a stejně vysoká, takže
   překrývala logo i navigaci; teď má vždy jeden řádek (career/base.html). */
body.has-cbar .c-nav { top: 46px; }

/* ============================================================
   HERO
   ============================================================ */
.c-hero {
    min-height: 100vh; display: flex; align-items: center;
    /* U vysokého obsahu (dlouhý nadpis + tlačítka + čísla) se obsah nesmí
       zasunout pod fixní navbar — safe center pak zarovná odshora a nechá
       horní padding jako odstup od navigace. */
    align-items: safe center;
    position: relative; overflow: hidden;
    padding: calc(var(--app-navbar-h, 72px) + 72px) 4vw 88px;
}
/* Barevný přechod přes úvodní foto (nastavení kariérní stránky). Krycí barva
   vlevo, doprava mizí do průhledna a prosvítá foto; spodní tmavá vrstva (taky
   zprava mizející) drží čitelnost bílého textu. Barvy z --hero-grad-from/to. */
.c-hero--gradient .c-hero__overlay {
    background:
        linear-gradient(100deg,
            color-mix(in srgb, var(--hero-grad-from, var(--brand)) 86%, transparent) 0%,
            color-mix(in srgb, var(--hero-grad-from, var(--brand)) 58%, transparent) 50%,
            color-mix(in srgb, var(--hero-grad-to, var(--accent)) 16%, transparent) 100%),
        linear-gradient(100deg,
            rgba(0,0,0,.42) 0%, rgba(0,0,0,.14) 58%, rgba(0,0,0,0) 100%);
}
.c-hero--gradient .c-hero__content { text-shadow: 0 1px 12px rgba(0,0,0,.35); }
#o-nas, #apply-form { scroll-margin-top: 90px; }


/* Hero video na pozadí (YouTube/Vimeo iframe — pokrytí celého hero) */
.c-hero__video-iframe {
    position: absolute; top: 50%; left: 50%;
    width: 100vw; height: 56.25vw;            /* 16:9 podle šířky */
    min-width: 177.78vh; min-height: 100vh;   /* pokrytí podle výšky */
    transform: translate(-50%, -50%);
    border: 0; pointer-events: none;
}



/* Formulářová pole (Django widgety s .form-control / .form-select).
   Bílé pozadí + jemný rámeček, aby pole byla vidět na světlém i šedém
   podkladu sekce (dřív #f9f9f9 bez rámečku splývalo s pozadím stránky). */
.form-control, .form-select {
    background-color: #ffffff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--btn-radius);
    color: var(--text);
}
textarea.form-control { border-radius: var(--radius); }

/* ============================================================
   SECTIONS — obecné
   ============================================================ */




/* ============================================================
   VÝPIS POZIC (home + jobs page)
   ============================================================ */

/* ============================================================
   FOOTER
   ============================================================ */
/* Barvy si volí klient, rozvržení dělají bootstrapové utility. Pozadí smí
   být i přechod, proto `background` a ne `.bg-*`. Zbytek jsou bootstrapové
   tokeny: text, nadpisy, linka i odkazy si je čtou samy, takže devatenáct
   pravidel s barvami zmizelo beze zbytku. */
.c-footer {
    background: var(--footer-bg, #1a1a1a);
    color: var(--footer-ink, #f9f9f9);
    position: relative;
    overflow: hidden;
    --bs-body-color: var(--footer-ink, #f9f9f9);
    --bs-emphasis-color: var(--footer-ink, #fff);
    --bs-heading-color: var(--footer-ink, #fff);
    --bs-border-color: color-mix(in srgb, var(--footer-ink, #fff) 16%, transparent);
    --bs-link-color-rgb: var(--footer-ink-rgb, 249, 249, 249);
    --bs-link-hover-color-rgb: var(--footer-ink-rgb, 249, 249, 249);
}
/* Logo v patičce má vlastní barvy, stejně jako v hlavičce — žádné
   „vylepšení" inverzí do běla. Výšku si klient nastavuje. */
.c-footer__logo { max-height: var(--nav-logo-h, 60px); }

/* ============================================================
   JOB DETAIL (job_detail.html)
   ============================================================ */
.jd-hero {
    /* Bez fotky: plná barva značky lehce ztmavená,
       aby bílý text zůstal čitelný i u světlých barev. */
    background: color-mix(in srgb, var(--cp) 75%, #1a1a1a);
    color: #fff; padding: calc(var(--app-navbar-h, 72px) + 2rem) 4vw 3rem;
}


/* ============================================================
   MODERN 2026 — finální vrstva (animace, gradient, detaily)
   ============================================================ */
:root {
    --radius: 20px;
    --btn-radius: 9999px;
    --heading-font: "Helvetica", Arial, sans-serif;
    --ease: cubic-bezier(.22,1,.36,1);
    /* Zaoblení řídí i Bootstrap: `rounded-*`, karty, tlačítka, pole
       i modály si berou tyhle tokeny, takže volba klienta platí
       na celé stránce, ne jen na prvcích s vlastním pravidlem. */
    --bs-border-radius: 12px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 16px;
    --bs-border-radius-xl: var(--radius);
    --bs-border-radius-xxl: var(--radius);
    --bs-border-radius-pill: var(--btn-radius);
}

/* ============================================================
   PERSONALIZACE KARIÉRKY (font nadpisů, rohy, zarovnání/výška hero)
   ============================================================ */
h1, h2, h3, h4, h5, h6 { font-family: var(--heading-font); }

/* Font nadpisů (volba náboráře) */
body.font-serif { --heading-font: Georgia, Cambria, 'Times New Roman', serif; }
body.font-condensed { --heading-font: 'Arial Narrow', 'Helvetica Neue', system-ui, sans-serif; }

/* Zaoblení rohů (volba náboráře) */
body.corners-soft {
    --radius: 14px; --btn-radius: 14px;
    --bs-border-radius: 10px; --bs-border-radius-sm: 6px; --bs-border-radius-lg: 14px;
}
body.corners-sharp {
    --radius: 4px; --btn-radius: 2px;
    --bs-border-radius: 4px; --bs-border-radius-sm: 2px; --bs-border-radius-lg: 4px;
}


body { scroll-padding-top: 90px; }

/* — Scroll-reveal (jen když běží JS; respektuje reduce-motion) — */
.js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }
/* Postupné nabíhání dlaždic v mřížkách.

   Prodleva sedí na SLOUPCI mřížky, ne na kartě: od 8. 9. 2026 je karta
   zabalená v bootstrapovém `.col`, takže `nth-child` na kartě samotné
   už nic nerozlišoval — každá karta je ve svém sloupci první. */
.js .reveal.is-visible .row > * > * { animation: cardIn .7s var(--ease) both; }
.js .reveal.is-visible .row > *:nth-child(2) > * { animation-delay: .07s; }
.js .reveal.is-visible .row > *:nth-child(3) > * { animation-delay: .14s; }
.js .reveal.is-visible .row > *:nth-child(4) > * { animation-delay: .21s; }
.js .reveal.is-visible .row > *:nth-child(5) > * { animation-delay: .28s; }
.js .reveal.is-visible .row > *:nth-child(6) > * { animation-delay: .35s; }
.js .reveal.is-visible .row > *:nth-child(n+7) > * { animation-delay: .42s; }
@keyframes cardIn {
    from { opacity: 0; transform: translateY(22px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* — Hero: plynulý nájezd — */
.c-hero__content > * { animation: heroIn .9s var(--ease) both; }
.c-hero__content > *:nth-child(2) { animation-delay: .08s; }
.c-hero__content > *:nth-child(3) { animation-delay: .16s; }
.c-hero__content > *:nth-child(4) { animation-delay: .24s; }
.c-hero__content > *:nth-child(5) { animation-delay: .32s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* — Detail pozice: hero banner s obrázkem (částečná výška) — */
.jd-hero { position: relative; overflow: hidden; }
.jd-hero--img { min-height: 380px; display: flex; align-items: flex-end; padding-bottom: 3rem; }
/* Zapnutý barevný přechod (nastavení) = stejný gradient přes foto jako na
   úvodu. Když je vypnutý, proměnné --hero-grad-* nejsou nastavené → barevná
   vrstva je průhledná a zůstane původní tmavý závoj. */
.jd-hero__overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(100deg,
            color-mix(in srgb, var(--hero-grad-from, transparent) 82%, transparent) 0%,
            color-mix(in srgb, var(--hero-grad-from, transparent) 50%, transparent) 55%,
            color-mix(in srgb, var(--hero-grad-to, transparent) 14%, transparent) 100%),
        rgba(0,0,0,.5);
}

/* — Detail pozice: kontaktní osoba v postranním sloupci — */
.jd-contact-person { font-weight: 700; margin-bottom: .6rem; }
.jd-contact-role { font-weight: 500; color: var(--muted); }

/* — Detail pozice: spodní CTA banner (Daimler-style) — */
.jd-cta-banner {
    position: relative; overflow: hidden; padding: 5rem 4vw;
    /* Bez fotky: plná barva značky lehce ztmavená pro čitelnost. */
    background: color-mix(in srgb, var(--cp) 75%, #1a1a1a);
    color: #fff; text-align: center;
}
.jd-cta-banner__overlay {
    position: absolute; inset: 0; z-index: 1;
    background: color-mix(in srgb, var(--brand) 78%, #000); opacity: .72;
}

/* — Benefity: karty (pozadí sekce řeší rytmus výše) — */

/* Strop galerie na úvodu: zobraz 9, zbytek skryj (lightbox proklikne vše) */
.gallery-grid--capped > *:nth-child(n+10) { display: none; }

/* Horní lišta „prohlížíte web jako…". Rozvržení i barvy nese markup;
   zbývá jen výška, protože o ni musí níž povyskočit hlavička i hero. */
.cbar { min-height: 46px; }
/* Výšku lišty si od 8. 9. 2026 hlídá měření v `vyska-hlavicky.js`: hlásí
   spodní hranu pevné hlavičky, takže hero i stránky bez něj odsazuje
   správně samo. Zbývá jen doskok kotvy — ten výšku hlavičky nezná. */
body.has-cbar .c-hero,
body.has-cbar .jd-hero { scroll-margin-top: 110px; }

/* Aktualita — detail */
.blog-hero-img {
    width: 100%; max-height: 460px; object-fit: cover;
    border-radius: var(--radius); margin-bottom: 2rem;
}
/* Text z editoru (článek, popis pozice, stránka). Třídu mu přidat nejde —
   je to hotové HTML z databáze —, takže tohle je jediné místo v souboru,
   kde jsou potomkové selektory na místě. Do 8. 9. 2026 tu byly dvě skoro
   totožné sady: `.blog-content` a `.jd-body__content`. */
.blog-content { font-size: 1.06rem; line-height: 1.85; color: #1a1a1a; }
.blog-content li { margin-bottom: .3rem; }
.blog-content img { max-width: 100%; height: auto; border-radius: 12px; margin: 1.5rem 0; }
.blog-content iframe.ql-video,
.blog-content iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: 12px; margin: 1.5rem 0; }
.blog-content h2, .blog-content h3 { margin-top: 2rem; margin-bottom: .6rem; font-weight: 800; color: var(--text); }
.blog-content p { margin-bottom: 1.1rem; }
.blog-content ul, .blog-content ol { padding-left: 1.4rem; margin-bottom: 1.1rem; }
.blog-content blockquote {
    border-left: 4px solid var(--brand); padding: .25rem 0 .25rem 1.2rem;
    color: var(--muted); font-style: italic; margin: 1.5rem 0;
}

/* — Klidnější pohyb na přání — */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js .reveal { opacity: 1 !important; transform: none !important; }
    html { scroll-behavior: auto; }
}

/* ── Kontakt — personální tým ── */
.people-section { background: #f9f9f9; }

/* ── /pozice/ — spontánní přihláška + průběh výběrka ── */
.spon-section { background: #f9f9f9; padding-top: 4rem; padding-bottom: 6.5rem; }

.process-section { background: #f9f9f9; }
@media (max-width: 600px) {
}

/* ============================================================
   RESPONZIVITA
   ============================================================ */
@media (max-width: 1024px) {
}

@media (max-width: 992px) {
}

@media (max-width: 768px) {
    .c-hero { padding: calc(var(--app-navbar-h, 72px) + 44px) 4vw 64px; min-height: auto; }
}

@media (max-width: 480px) {
}

/* ============================================================
   MŘÍŽKY — počet sloupců podle počtu položek
   ============================================================ */
/* auto-fit dá na širokém displeji vždycky maximum sloupců, takže šest
   položek spadne jako 4 + 2 a vpravo zeje díra. Pravidla níž se chytají
   atributu data-pocet, který šablona doplňuje z délky kolekce — proto se
   uplatní JEN tam, kde je záměrně uvedený (opt-in), ne plošně.
   Počty 5, 6 a 9 vyjdou na tři sloupce beze zbytku, 1 a 2 by se jinak
   roztáhly přes celou šířku. Menší displeje řeší dál auto-fit. */
@media (min-width: 992px) {
    [data-pocet="6"],
    [data-pocet="9"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    [data-pocet="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    [data-pocet="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [data-pocet="1"] {
        grid-template-columns: minmax(0, 460px);
        justify-content: center;
    }
}

/* Čtyři položky: až od 1200 px, aby se karty nezmáčkly pod čitelnou šířku. */
@media (min-width: 1200px) {
    [data-pocet="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Pět položek se nerozdělí beze zbytku do žádného rozumného počtu sloupců.
   Šestisloupcová mřížka s položkami přes dva sloupce dá 3 + 2, kde druhá
   řada sedí na střed — místo díry vpravo je odsazení symetrické. */
@media (min-width: 992px) {
    [data-pocet="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    [data-pocet="5"] > * { grid-column: span 2; }
    [data-pocet="5"] > :nth-child(4) { grid-column: 2 / span 2; }
}


/* Sedm položek na desktopu: tři sloupce dají 3 + 3 + 1 a poslední karta
   zůstane sama vlevo. Stejný trik jako u pětice — šest stop, karta přes
   dvě, osamocená poslední doprostřed. */
@media (min-width: 992px) {
    [data-pocet="7"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    [data-pocet="7"] > * { grid-column: span 2; }
    [data-pocet="7"] > :last-child { grid-column: 3 / span 2; }
}

/* Tablet (2 sloupce): lichý počet nechá poslední kartu samotnou vlevo.
   Čtyřsloupcová mřížka s kartami přes dva sloupce dá stejné dvě karty
   na řádek, ale osamocenou poslední posadí na střed. Pod 576 px je
   jeden sloupec, tam díra vzniknout nemůže. */
@media (min-width: 576px) and (max-width: 991.98px) {
    [data-pocet="3"],
    [data-pocet="5"],
    [data-pocet="7"],
    [data-pocet="9"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    [data-pocet="3"] > *,
    [data-pocet="5"] > *,
    [data-pocet="7"] > *,
    [data-pocet="9"] > * { grid-column: span 2; }

    [data-pocet="3"] > :last-child,
    [data-pocet="5"] > :last-child,
    [data-pocet="7"] > :last-child,
    [data-pocet="9"] > :last-child { grid-column: 2 / span 2; }
}

/* Čtyři položky na tabletu: mřížka s drobnými kartami (pruh s čísly) jich
   pojme tři, takže vyjde 3 + 1. Dva sloupce dají 2 + 2 bez zbytku. */
@media (min-width: 576px) and (max-width: 991.98px) {
    [data-pocet="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Čtyři položky mezi 992 a 1199 px: čtyři sloupce by karty zmáčkly pod
   čitelnou šířku, auto-fit by dal tři a zbyla by díra. Dva sloupce vyjdou. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    [data-pocet="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   HLAVNÍ NADPIS V HERO — velikost a jemné najetí
   ============================================================ */

/* Jemné najetí zdola. Jedna animace, 450 ms, bez opakování — nadpis je
   první, co má návštěvník přečíst, takže se nesmí odkrývat po písmenech.
   Globální blok prefers-reduced-motion níž animace vypíná úplně. */
.c-hero--nadpis-anim h1 {
    animation: nadpisNajezd .45s var(--ease) both;
}
.c-hero--nadpis-anim .c-hero__sub {
    animation: nadpisNajezd .45s var(--ease) .1s both;
}
@keyframes nadpisNajezd {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

/* ── Mapa závodů ─────────────────────────────────────────────────────
   Barvy jdou z --brand, kterou kariérní stránka nastavuje podle firmy
   (viz career/base.html). Bere se --cs, tedy SEKUNDÁRNÍ barva firmy —
   ta sama padá zpět na primární, když firma druhou nezadá.

   Mapa je ZÁMĚRNĚ jen světle šedá s příměsí té barvy: je to podklad, ne
   obrázek. Pozornost mají táhnout puntíky se závody, ne plocha státu.
   Když má firma zelenou, mapa je lehce šedozelená — nic víc. */
/* Když je mapa vypnutá (nebo žádná pobočka nemá obec), značka nevykreslí
   nic — a text by pak visel na 36 % šířky s dírou vedle. Bez mapy se
   proto sloupce ruší a odstavec se roztáhne. */
.branches-uvod:not(:has(.mapa-zavodu)) {
    display: block;
}

/* Barvy nesou utility `fill-*` a `stroke-*` z flekni.scss. Tady zůstává
   jen to, co utilita říct neumí. */

/* Posunutá kopie téže geometrie = vytažení do 3D. O odstín tmavší než
   plocha, jinak by to byl další barevný prvek navíc. */
.mapa-zavodu__hrana { transform: translateY(0.9%); }

/* Puntík nese plnou firemní barvu — na světlé mapě je to jediný sytý
   prvek, takže oko jde rovnou na něj. Bílý prstenec ho odděluje od
   podkladu i tam, kde leží na hranici kraje. */
.mapa-zavodu__bod circle { transition: fill .15s ease; }

.mapa-zavodu__bod text {
    dominant-baseline: middle;
    font-size: 21px;
    font-weight: 500;
}

.mapa-zavodu__bod:hover circle,
.mapa-zavodu__bod:focus-visible circle {
    fill: color-mix(in srgb, var(--cs) 60%, #000);
}

@media (max-width: 767.98px) {

    /* Na úzkém displeji se popisky slijí. Puntíky zůstanou, názvy si
       člověk přečte z karet pod mapou — ty tam jsou tak jako tak. */
    .mapa-zavodu__bod text,
    .mapa-zavodu__stitek {
        display: none;
    }
}