/*
 * Kariérní stránky klientů — jen to, co Bootstrap sám neumí.
 *
 * Barvy a rohy klienta nese blok :root v career/base.html jako
 * BOOTSTRAPOVÉ proměnné (--bs-primary, --bs-accent,
 * --bs-primary-text-emphasis, --bs-border-radius*), takže je komponenty
 * i utility čtou samy. Do 29. 9. 2026 vedle nich žily kopie pod vlastními
 * jmény (--brand, --cp, --cs, --accent, --text, --muted, --border);
 * rozvržení, pozice, pozadí sekcí a odsazení dnes nese markup utilitami.
 * Pravidla jsou mobile first.
 */

/* ============================================================
   NAVIGACE
   ============================================================ */
/* Rozvržení, rozbalování na mobilu i linka pod aktivním odkazem jsou
   bootstrapový `navbar` + `nav-underline`, bílé pozadí `bg-white`.
   Značku, najetí i aktivní odkaz barví navbar sám z
   `--bs-primary-text-emphasis`, kterou career/base.html nastaví na barvu
   klienta. Do 29. 9. 2026 tu stál přepis, který opakoval totéž. */
.c-nav__logo img {
    height: var(--nav-logo-h, 60px);
    max-width: min(360px, 60vw);
}

/* 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; }
/* Výška lišty; o ni musí níž povyskočit hlavička. */
.cbar { min-height: 46px; }

/* ============================================================
   HERO
   ============================================================ */
/* Flex, pozici a ořez nese markup (`d-flex position-relative
   overflow-hidden`), výšku volba klienta (`min-vh-*`). Zbývá odsazení
   pod pevnou hlavičku a „safe" vystředění: u vysokého obsahu (dlouhý
   nadpis + tlačítka + čísla) se obsah nesmí zasunout pod navbar — safe
   center pak zarovná odshora. Mobile first od 29. 9. 2026. */
.c-hero {
    align-items: center;
    align-items: safe center;
    padding: calc(var(--app-navbar-h, 72px) + 44px) 4vw 64px;
}
@media (min-width: 768px) {
    .c-hero { 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(--bs-primary)) 86%, transparent) 0%,
            color-mix(in srgb, var(--hero-grad-from, var(--bs-primary)) 58%, transparent) 50%,
            color-mix(in srgb, var(--hero-grad-to, var(--bs-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); }

/* 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ÁŘ, PATIČKA
   ============================================================ */
/* Pole bílá, aby byla vidět na světlém i šedém podkladu sekce (výchozí
   #f9f9f9 splývalo s pozadím stránky), a zaoblená podle volby klienta.
   Rámeček i barvu písma dává Bootstrap sám. */
.form-control, .form-select {
    background-color: var(--bs-white);
    border-radius: var(--btn-radius);
}
textarea.form-control { border-radius: var(--radius); }

/* 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. */
.c-footer {
    background: var(--footer-bg, #1a1a1a);
    color: var(--footer-ink, #f9f9f9);
    --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); }

/* ============================================================
   HLAVIČKA PODSTRÁNEK A PÁS S VÝZVOU
   ============================================================ */
/* Pozici, ořez, bílé písmo i svislé odsazení nese markup
   (career/base_podstranka.html, career/_cta_banner.html). Tady zůstává
   plocha v barvě klienta — bez fotky lehce ztmavená, aby bílý text zůstal
   čitelný i u světlých barev — a boční okraj v jednotkách okna. */
.jd-hero {
    background: color-mix(in srgb, var(--bs-primary) 75%, var(--bs-dark));
    padding-inline: 4vw;
}
.jd-hero--img { min-height: 380px; }
/* 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 {
    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);
}
.jd-cta-banner {
    background: color-mix(in srgb, var(--bs-primary) 75%, var(--bs-dark));
    padding-inline: 4vw;
}
.jd-cta-banner__overlay {
    background: color-mix(in srgb, var(--bs-primary) 78%, var(--bs-black));
    opacity: .72;
}

/* ============================================================
   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ě. Barvu písma i nadpisů dědí z Bootstrapu. */
.blog-content { font-size: 1.06rem; line-height: 1.85; }
.blog-content li { margin-bottom: .3rem; }
.blog-content img { max-width: 100%; height: auto; border-radius: 12px; margin: 1.5rem 0; }
.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; }
.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(--bs-primary); padding: .25rem 0 .25rem 1.2rem;
    color: var(--bs-secondary-color); font-style: italic; margin: 1.5rem 0;
}

/* ============================================================
   TOKENY A PERSONALIZACE (font nadpisů, rohy)
   ============================================================ */
: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;
}
/* Tokeny odvozené z volby rohů se musí vyhodnotit až na <body>, kde volba
   sedí (`corners-*`). Na :root se var(--radius) přeložila na výchozích
   20 px a dál se dědila hotová hodnota — od 8. 9. do 29. 9. 2026 proto
   karty a tlačítka volbu „jemné/ostré rohy" tiše ignorovaly. */
body {
    --bs-border-radius-xl: var(--radius);
    --bs-border-radius-xxl: var(--radius);
    --bs-border-radius-pill: var(--btn-radius);
}
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;
}

/* ============================================================
   MAPA ZÁVODŮ (career/tags/mapa_zavodu.html)
   ============================================================ */
/* Barvy nesou utility `fill-*` a `stroke-*` z flekni.scss (odstín z
   druhé barvy klienta), tučnost popisku `fw-medium` a schování popisků
   na úzkém displeji `d-none d-md-inline`. 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%); }
.mapa-zavodu__bod text {
    dominant-baseline: middle;
    font-size: 21px;
}

/* ============================================================
   POHYB — jen pro toho, kdo ho v systému nevypnul
   ============================================================ */
/* Do 29. 9. 2026 se animace psaly natvrdo a blok pro „omezit pohyb"
   je pak přebíjel čtyřmi !important. Obráceně to jde bez přebíjení: kdo
   pohyb nechce, tahle pravidla vůbec nedostane — obsah `.reveal` je vidět
   hned a hero stojí. Přechody komponent (karusel, modál, rozbalování)
   hlídá Bootstrap sám a video v heru zastaví karierka-animace.js. */
@media (prefers-reduced-motion: no-preference) {
    /* Scroll-reveal: blok je průhledný, dokud ho skript neodkryje. Třídu
       `js` dává na <html> career/base.html ještě před prvním snímkem. */
    .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é nic nerozlišoval. */
    .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; }

    /* 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; }

    /* Hlavní nadpis (volba klienta): 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. */
    .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 cardIn {
    from { opacity: 0; transform: translateY(22px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
@keyframes heroIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes nadpisNajezd {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}