/* ==========================================================================
   Centrum asistované reprodukce FN Olomouc — dočasná onepage
   Zdroj tokenů: CAR-DESIGN.md. Žádný hex mimo tento blok :root.
   Breakpointy: 600px a 930px, mobile-first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonty — Fira Sans, self-hosted, řezy 400/500/700
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Fira Sans";
  src:url("../fonts/fira-sans-v18-latin-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Fira Sans";
  src:url("../fonts/fira-sans-v18-latin-500.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Fira Sans";
  src:url("../fonts/fira-sans-v18-latin-700.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* --------------------------------------------------------------------------
   Tokeny — mobilní hodnoty jako výchozí, desktop override níže (min-width:930px)
   -------------------------------------------------------------------------- */
:root{
  /* Barvy */
  --c-blue:#004AA4;
  --c-blue-btn:#244A90;
  --c-cyan:#17C3E5;
  --c-red:#CC1515;
  --c-ink:#313E59;
  --c-ink-70:rgba(49,62,89,.7);
  --c-ink-20:rgba(49,62,89,.2);
  --c-ink-10:rgba(49,62,89,.1);
  --c-surface:#FFFFFF;
  --c-surface-soft:#F7FAFC;
  --c-glow:#F3FAFE;
  --c-border:#EDF0F2;

  /* Typografie — rodina a řezy */
  --font-base:"Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-regular:400;
  --fw-medium:500;
  --fw-bold:700;

  /* Typografie — role (mobil) */
  --fs-h1:30px;      --lh-h1:1.2; --ls-h1:-0.6px;
  --fs-h2:24px;       --lh-h2:1.3; --ls-h2:-0.9px;
  --h2-max-w:960px;
  /* H3 musí na mobilu zůstat menší než H2 (24px) — týká se nadpisů karet,
     otázek v akordeonu i jmen v sekci Tým. Jediná proměnná, override níže. */
  --fs-h3:20px;       --lh-h3:1.4;
  /* Běžný text — jediná proměnná pro odstavce, perex, texty karet, výčty
     i texty kroků. Pod 600px 16px: pod tuto hranici iOS Safari při focusu
     na formulářové pole stránku přiblíží a čitelnost dlouhých odstavců na
     malém displeji klesá pod komfort pro WCAG AA. Od 600px (i na desktopu,
     ten se neliší) 17px, viz media query níže. */
  --fs-body:16px;     --lh-body:1.5;
  --fs-kicker:14px;   --lh-kicker:1.5; --ls-kicker:1.4px;

  /* Animace — sdílené hodnoty, viz CAR-DESIGN.md, „Animace". Všechno
     tady se vypíná při prefers-reduced-motion (viz jednotlivé komponenty
     níž), kromě barevných hoverů (--hover-transition) — ty nevadí. */
  --hover-transition:200ms ease-out;
  --reveal-duration:400ms;
  --reveal-offset:20px;
  --reveal-stagger:60ms;
  --zoom-duration:300ms;

  /* Tlačítka — společné */
  --btn-bg:rgba(255,255,255,.7);
  --btn-blur:5px;
  --btn-border-w:2px;

  /* Tlačítka — btn-big */
  --btn-big-h:60px;
  --btn-big-radius:30px;
  --btn-big-px:30px;
  --btn-big-fs:17px;
  --btn-big-ls:0.85px;

  /* Tlačítka — btn-basic */
  --btn-basic-h:40px;
  --btn-basic-radius:20px;
  --btn-basic-px:20px;
  --btn-basic-fs:15px;
  --btn-basic-ls:1.5px;

  /* Karty — společné. Šířka karet vychází z gridu (obsahový sloupec /
     počet sloupců), proto tu není jako pevný px token. */
  --card-radius:10px;
  --card-shadow:20px 20px 70px rgba(49,62,89,.05);
  --card-pad-inline:25px;
  --card-kicker-pt:20px;
  --card-kicker-pb:15px;
  --card-kicker-gap:5px;
  --card-content-gap:5px;

  /* Fotky — červený puntík v levém horním rohu, prvek z hlavního webu
     FNOL (viz CAR-DESIGN.md). Sdílené napříč komponentami s fotkou
     (sekce 6 i 8), ne jen karty. */
  --photo-dot-offset:10px;

  /* Karty — grid-karta-image. Výška karet vychází z obsahu (viz níže
     .car-cards align-items:stretch), 330 v CAR-DESIGN.md je jen
     informativní rozměr z Figmy, ne závazná výška. Fotka drží pevnou
     šířku a height:100% — roste s kartou (object-fit:cover). Padding
     a kicker offset jsou samostatné od grid-karta-noimage. */
  --card-image-photo:330px;
  --card-image-kicker-offset:40px;
  --card-image-pad-left:50px;
  --card-image-pad-right:200px;
  --card-list-top-gap:15px;
  --card-list-item-gap:10px;
  --card-image-title-w:300px;
  --card-image-title-shift:35px;

  --card-grid-gap:10px;

  /* Feature (obrázek + text) — sekce 6, Figma „imgleft-text-bg". Fotka a text
     drží stejný poměr stran napříč breakpointy (450×550 desktop, 320×391
     mobil — obojí ~0,82), mění se jen šířka sloupce. Stín je sytější než
     u karet (.1 místo .05), Figma ho takto odlišuje od --card-shadow. */
  --feature-shadow:20px 20px 70px rgba(49,62,89,.1);
  --feature-media-ratio:450/550;
  --feature-title-gap:20px;
  --feature-stack-gap:30px;
  --feature-kicker-gap:15px;

  /* FAQ — sekce 7. Bez obdoby ve Figmě, akordeon je nová komponenta
     (jako krokovník sekce 4). Otázka sdílí roli „H3" jako karty/kroky. */
  --faq-item-py:20px;
  --faq-icon-size:16px;
  --faq-icon-bar:2px;
  --faq-question-gap:20px;

  /* Tým — sekce 8. Bez obdoby ve Figmě. Portrét sám nese vizuální váhu,
     žádná karta/podklad/stín. Jméno a funkce mají pevnou (neresponzivní)
     velikost — na rozdíl od --fs-body se na mobilu nezmenšují. */
  --team-grid-gap:30px;
  --team-row-gap:40px;
  --team-photo-ratio:3/4;
  --team-photo-gap:20px;
  --team-role-fs:16px;
  --team-name-role-gap:4px;

  /* Pracoviště — sekce 9. Bez obdoby ve Figmě. Mozaika 3 fotek, všechny
     v poměru 4:3: jedna velká vlevo (výška = obě menší + mezera, přes
     grid-row:span 2 a výchozí align-items:stretch, žádný počítaný
     aspect-ratio), dvě menší vpravo nad sebou. Na mobilu velká nahoře
     přes celou šířku, menší dvě vedle sebe pod ní. */
  --gallery-gap:10px;
  --gallery-main-ratio:4/3;
  --gallery-item-ratio:4/3;

  /* Kontakt — sekce 10. Bez obdoby ve Figmě (ta má špatnou adresu i
     telefon, viz CAR-DESIGN.md). Tři čitelné skupiny (kontakty/ordinační
     hodiny/doprava), na desktopu vedle sebe, na mobilu pod sebou. */
  --contact-group-gap:40px;
  --contact-heading-gap:20px;
  --contact-item-gap:15px;
  --contact-icon-gap:15px;
  --contact-table-py:10px;
  /* Doprava — ikona nad nadpisem (jiné umístění než u telefonů, kde je
     ikona vedle čísla). Vlastní velikost ikony i mezery, ať se to nemíchá
     s .car-contact__icon (24px, vedle textu). */
  --contact-transport-icon-size:32px;
  --contact-transport-icon-gap:10px;
  --contact-transport-gap:30px;

  /* Cesta (krokovník) — sekce 4. Číslo kroku nese roli kickeru, který sekce
     jinak nemá (barva --c-red, váha --fw-medium, tracking --ls-kicker —
     sdílené s kickerem karet). Nadpis kroku sdílí generickou roli „H3"
     (--fs-h3/--lh-h3), text a mezera nadpis/text sdílí roli „body" a
     „karty" (--fs-body, --card-content-gap). */
  --journey-number-fs:20px;
  --journey-gap:30px;
  /* Mezera mezi číslem a nadpisem/textem — zúžená, ať číslo nepůsobí
     odděleně od kroku, ke kterému patří. */
  --journey-step-gap:10px;
  --journey-number-col-w:45px;
  /* Linka, která nese strukturu kroku (ne jen oddělení) — na mobilu nad
     krokem, na desktopu na levé hraně, viz .car-journey__step. Stejná
     barva a síla jako border-top u tabulek (CAR-DESIGN.md, „Layout"). */
  --journey-line-indent:20px;
  /* Mezera nadpis→text (a mezi řádky subgridu na desktopu). Vlastní token
     místo sdíleného --card-content-gap — ten je na desktopu 15px, což
     u jednořádkových nadpisů („Diagnostika", „Vyhodnocení") působilo
     jako zbytečná prázdná plocha. */
  --journey-content-gap:10px;

  /* Hero — rozměry a odsazení ověřené proti Figma node 4520:3739.
     Nadpis a tlačítka jsou v Figmě na absolutních y 340/690, hero frame
     ale sám začíná na y=180 — v CSS (.car-hero je position:relative,
     odsazení počítá od jeho vlastní horní hrany) proto platí rozdíl:
     340-180=160, 690-180=510. Od téhle Figmou dané hodnoty je ale obojí
     schválně posazené o 80px níž (160→240, 510→590) — čistě podle Figmy
     to bylo příliš vysoko, výsledný posun nahoru proti původnímu stavu
     (340/690) je tak ~100px, ne 180px. */
  --hero-photo-w:68vw;
  --hero-photo-h:700px;
  --hero-photo-pos-mobile:center top;
  /* Výřez dolazený proti Figma screenshotu (get_design_context na
     4520:3739): víc oříznuto zprava (hlava muže blíž pravému okraji)
     a shora (hlava dítěte blíž hornímu okraji rámu) než čistě
     "center top". */
  --hero-photo-pos-desktop:100% 32%;
  --hero-shadow-blur:20px;
  --hero-edge:20px;
  --hero-title-w:605px;
  --hero-btn-gap:10px;
  --hero-actions-mt:20px;
  --hero-block-h:750px;
  --hero-title-top:180px;
  --hero-actions-top:530px;
  --hero-gradient-mobile:
    linear-gradient(180deg, rgba(247,250,252,0) 20%, #f7fafc 90%);
  --hero-gradient:
    linear-gradient(90deg,  rgba(247,250,252,0) 40%, rgba(247,250,252,.5) 100%),
    linear-gradient(270deg, rgba(247,250,252,0) 60%, #f7fafc 100%),
    linear-gradient(180deg, rgba(247,250,252,0) 25%, #f7fafc 100%);

  /* Layout */
  --container-max:1440px;
  --container-content:1240px;
  --container-edge:20px;
  --grid-gap:30px;

  /* Sekce — společný rytmus */
  --section-py:56px;
  --h2-mb:12px;
  /* Mezera mezi perexem sekce a obsahem pod ním (mřížka karet, kroky...).
     Figma má 70px, ale u centrovaného perexu s nepravidelným posledním
     řádkem se to opticky ztrácí, proto 90/50. */
  --space-perex-obsah:50px;

  /* Navbar */
  --nav-secondary-h:50px;
  --nav-primary-h:70px;
  --nav-logo-w:74px;
  --nav-social-size:20px;
  --nav-social-gap:20px;
  --nav-title-fs:17px;      --nav-title-ls:-0.34px;
  --nav-subtitle-fs:13px;   --nav-subtitle-ls:-0.26px;
  --nav-link-gap:50px;
  --nav-toggle-size:30px;
  --nav-edge:20px;
  --contact-icon-size:24px;
  /* Přilepená primary lišta — poloprůhledné pozadí + blur (stejná
     hodnota jako --btn-blur), ať pod ní při scrollu neprosvítá text
     sekce. Jen tam, kde prohlížeč podporuje backdrop-filter (viz
     @supports u .car-navbar__primary), jinak zůstává plné --c-surface. */
  --nav-sticky-bg:rgba(255,255,255,.9);
  /* Vysouvací panel navigace (pod 930px, jen s JS — viz .car-navbar__nav).
     Overlay je odvozený z --c-ink, ne holá černá. */
  --nav-panel-w:min(85vw,360px);
  --nav-panel-edge:30px;
  --nav-panel-head-gap:15px;
  --nav-panel-brand-gap:10px;
  --nav-panel-item-py:18px;
  --nav-panel-close-size:24px;
  --nav-overlay-bg:rgba(49,62,89,.5);
  /* Odsazení kotev od horní hrany, ať cíl skoku nezaleze pod sticky
     lištu (--nav-primary-h) — počítá se z ní, takže se na 930px sama
     přepočítá na desktopovou výšku, žádný druhý zápis netřeba. Malá
     rezerva 20px navíc, ať nadpis sekce nelícuje s lištou natěsno. */
  --scroll-offset:calc(var(--nav-primary-h) + 20px);

  /* Patička — sekce 12. Přebírá se z hlavního webu FNOL beze změn (obecné
     kontakty nemocnice, ne CAR — ty jsou v sekci 10). Vlastní barevná
     dvojice, i když --c-footer-bg číselně vyjde stejně jako --c-ink —
     jiná role (podklad, ne text), proto samostatný token. Rozměry i barvy
     ověřené přes get_design_context na Figma frame „footer" (4520:3900
     desktop, 4524:5307 mobil), ne odhadnuté. Figma tu nepoužívá žádný
     šedý text — jen bílou a odstupňování přes opacity (loga institucí,
     copyright řádek), proto jediný --c-footer-text bez „muted" varianty. */
  --c-footer-bg:#313E59;
  --c-footer-text:#FFFFFF;
  --footer-py:60px;
  --footer-gap:40px;
  --footer-logo-w:140px;
  --footer-heading-mb:20px;
  /* Adresa je odsazená vůči logu (Figma: logo x=50/100, adresa x=82/177),
     ne zarovnaná na okraj sloupce. */
  --footer-address-indent:32px;
  /* Blok IČ/datová schránka lícuje s TEXTEM telefonů nad ním (x=504),
     ne s jejich ikonami (x=470) — odsazení o šířku ikony + mezeru. */
  --footer-ico-indent:34px;
  --footer-nav-col-gap:20px;
  --footer-nav-row-gap:12px;
  /* Mezera mezi „RYCHLÁ NAVIGACE" a prvním odkazem pod ní — samostatný
     token od --footer-heading-mb (ten řeší jinou mezeru, kontakty→IČ). */
  --footer-nav-heading-mb:28px;
  --footer-contact-gap:12px;
  --footer-contact-icon-gap:10px;
  /* Loga institucí — mobil: čapované na max. šířku, aby zalomila 2×2.
     Desktop (viz média výš) jedou v nativní velikosti SVG (viz below).
     Ztlumené přes opacity (Figma: .25, zadáno explicitně .4 — vyšší,
     ať jsou loga na pohled víc čitelná). Bez linky nad nimi, Figma ji
     nemá. */
  --footer-logos-gap:24px;
  --footer-logos-max-w:140px;
  --footer-logos-opacity:.4;
  /* Copyright řádek — Figma: bílý text @ opacity .3, ne šedý token. */
  --footer-copy-opacity:.3;
  --footer-copy-py:40px;

  /* Objednávkový formulář — popup, bez obdoby ve Figmě (viz
     get_design_context na hlavním webu jen pro pole/texty, ne vzhled).
     Výška pole podobná btn-basic — proto tu jen doplňkové tokeny, které
     nemá smysl duplikovat. Popisky mají napevno 16px na rozdíl od
     --fs-body, který na 600px roste na 17px. Poloměr pole je záměrně
     poloviční proti kartám (--card-radius) — s velkým poloměrem by pole
     působilo jako tlačítko, viz CAR-DESIGN.md. */
  --form-label-fs:16px;
  --form-input-px:15px;
  --form-gap:24px;
  --form-group-gap:8px;
  --form-hint-fs:14px;
  --form-radius:5px;

  /* Modal — overlay popupu. Vlastní token i s číselně stejnou hodnotou
     jako --nav-overlay-bg (jiná role, stejné zdůvodnění jako u
     --c-footer-bg vs. --c-ink výš). */
  --modal-overlay-bg:rgba(49,62,89,.5);
  --modal-max-w:600px;
  --modal-pad-mobile:20px;
  --modal-pad:40px;
  --modal-close-size:24px;

  /* Breakpointy (jen jako referenční hodnoty pro media query komentáře) */
  --bp-sm:600px;
  --bp-md:930px;
}

@media (min-width:600px){
  :root{
    --fs-body:17px;
  }
}

@media (min-width:930px){
  :root{
    --fs-h1:75px;      --lh-h1:1.0; --ls-h1:-1.5px;
    --fs-h2:45px;       --lh-h2:1.2;
    --fs-h3:25px;

    --container-edge:100px;

    --section-py:96px;
    --h2-mb:16px;
    --space-perex-obsah:90px;

    --nav-secondary-h:70px;
    --nav-primary-h:110px;
    --nav-logo-w:130px;
    --nav-social-gap:30px;
    --nav-title-fs:25px;    --nav-title-ls:-0.5px;
    --nav-subtitle-fs:17px; --nav-subtitle-ls:-0.34px;
    --nav-edge:40px;

    --hero-shadow-blur:30px;
    --hero-edge:150px;
    --hero-btn-gap:20px;

    --card-pad-inline:40px;
    --card-kicker-pt:30px;
    --card-kicker-pb:30px;
    --card-kicker-gap:10px;
    --card-content-gap:15px;
    --card-grid-gap:30px;

    --feature-media-w:450px;
    --feature-body-w:400px;
    --feature-col-gap:150px;
    --feature-media-inset:106px;

    --faq-item-py:28px;

    --gallery-gap:30px;

    --contact-col-gap:80px;

    --footer-py:80px;
    --footer-gap:60px;
    --footer-logo-w:160px;
    --footer-address-indent:77px;
    --footer-nav-col-gap:55px;
    --footer-copy-py:56px;
    /* Loga institucí v nativní velikosti SVG, žádné čapování šířky. */
    --footer-logos-max-w:none;
  }
}

/* --------------------------------------------------------------------------
   Reset a základní nastavení
   -------------------------------------------------------------------------- */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--font-base);
  font-weight:var(--fw-regular);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--c-ink);
  background:var(--c-surface);
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
}

/* Odkazy v textu (CAR-DESIGN.md, „Typografie") — tučné, --c-blue, bez
   trvalého podtržení. Cíleno na prvky prostého textu (odstavce, výčty,
   definiční seznamy, buňky tabulek), ne na navigaci a tlačítka — ty mají
   vlastní barvu/váhu přes silnější selektor (třídu), takže je tohle
   pravidlo nepřebije. */
p a,
li a,
dd a,
td a{
  font-weight:var(--fw-bold);
  color:var(--c-blue);
  text-decoration:none;
}

p a:hover, p a:focus-visible,
li a:hover, li a:focus-visible,
dd a:hover, dd a:focus-visible,
td a:hover, td a:focus-visible{
  text-decoration:underline;
}

:focus-visible{
  outline:2px solid var(--c-cyan);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }
}

/* Zalamování — CAR-DESIGN.md, „Typografie". Nadpisy a perexy vyvážené
   (poslední řádek nezůstává osamocený krátký zbytek), běžné odstavce
   „pretty" (nezalamuje jednotlivá slova na konci). Skryto za .car-page,
   ať to nekoliduje s okolní stránkou při případném vložení do composeru. */
.car-page h1,
.car-page h2,
.car-page h3,
.car-page .car-perex{
  text-wrap:balance;
}

.car-page p{
  text-wrap:pretty;
}

/* Skip link — skrytý dokud nedostane focus (transform, ne top, ať nezáleží
   na přesné výšce prvku a nic z něj neprosvítá) */
.car-skip-link{
  position:absolute;
  top:0;
  left:0;
  z-index:100;
  padding:10px 20px;
  background:var(--c-blue);
  color:var(--c-surface);
  text-decoration:none;
  transform:translateY(-100%);
  transition:transform .15s ease;
}

.car-skip-link:focus-visible{
  transform:translateY(0);
}

/* Skryje obsah vizuálně, zachová pro čtečky obrazovky */
.car-visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* --------------------------------------------------------------------------
   Animace — sdílené (viz CAR-DESIGN.md, „Animace")
   Vstupní animace (fade-in hero, scroll reveal karet) nesmí bez JS skrýt
   obsah — výchozí stav je vždy viditelný, skrytí zapíná až JS třídou na
   <html> (.js-anim, nastavuje main.js v <head>, stejný princip jako
   .js-nav u mobilní navigace). Všechno tu se navíc vypíná při
   prefers-reduced-motion, kromě barevných hoverů (ty řeší jednotlivé
   komponenty, ne tenhle blok).
   -------------------------------------------------------------------------- */
@keyframes car-fade-in{
  from{
    opacity:0;
    transform:translateY(var(--reveal-offset));
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Scroll reveal karet (sekce 3, 5, 8) — .car-reveal na kartě/portrétu.
   Bez .js-anim (JS neběží) zůstává vždy plně viditelný, JS teprve
   přidává skrytý počáteční stav a pak .is-visible přes IntersectionObserver
   (viz main.js, tam i odstup --reveal-stagger mezi kartami). */
html.js-anim .car-reveal{
  opacity:0;
  transform:translateY(var(--reveal-offset));
  transition:opacity var(--reveal-duration) ease-out,
             transform var(--reveal-duration) ease-out;
}

html.js-anim .car-reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion:reduce){
  .car-hero__title,
  .car-hero__actions{
    animation:none;
  }

  html.js-anim .car-reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* --------------------------------------------------------------------------
   Layout — sdílené prvky (obsahový sloupec)
   -------------------------------------------------------------------------- */
.car-container{
  width:100%;
  max-width:calc(var(--container-content) + 2 * var(--container-edge));
  margin-inline:auto;
  padding-inline:var(--container-edge);
}

/* --------------------------------------------------------------------------
   Typografie — sdílené role (H2, perex, kicker), použité napříč sekcemi
   -------------------------------------------------------------------------- */
.car-h2{
  max-width:var(--h2-max-w);
  margin:0 auto var(--h2-mb);
  font-weight:var(--fw-regular);
  font-size:var(--fs-h2);
  line-height:var(--lh-h2);
  letter-spacing:var(--ls-h2);
  color:var(--c-blue);
  text-align:center;
}

.car-perex{
  max-width:816px;
  margin:0 auto var(--space-perex-obsah);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--c-ink);
  text-align:center;
}

.car-perex strong{
  font-weight:var(--fw-bold);
}

.car-kicker{
  display:flex;
  align-items:center;
  gap:var(--card-kicker-gap);
  margin:0;
  max-width:100%;
  font-weight:var(--fw-medium);
  font-size:var(--fs-kicker);
  line-height:var(--lh-kicker);
  letter-spacing:var(--ls-kicker);
  text-transform:uppercase;
  color:var(--c-ink-70);
}

.car-kicker__dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--c-red);
  flex-shrink:0;
}

/* Puntík v rohu fotky — prvek z hlavního webu FNOL, ne kicker (viz
   CAR-DESIGN.md). Používá se i vedle vlastního kickeru sekce. Vztažený
   k obalu fotky (potřebuje position:relative na rodiči), ne k <img>
   samotnému, ať po výměně placeholderu zůstane na místě. */
.car-photo-dot{
  position:absolute;
  top:var(--photo-dot-offset);
  left:var(--photo-dot-offset);
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--c-red);
}

/* Puntík zůstává výchozí. Ikona (.car-kicker__icon) nahrazuje puntík jen
   tam, kde kickery tvoří dvojici nebo sadu, která se má vzájemně odlišit
   (viz CAR-DESIGN.md, „Tón a rétorika") — na align-items:center kickeru by
   seděla na střed, proto vlastní baseline zarovnání k textu labelu. */
.car-kicker__icon{
  align-self:baseline;
  flex-shrink:0;
}

.car-kicker__label{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* Modifikátor pro kicker nad centrovaným .car-h2 (sekce 8, 9) — sekce
   samy o sobě kicker nemají (CAR-DESIGN.md, „Frekvence kickerů"), tady
   je navíc, ať čtenář po skoku z kotvy pozná, že je na správném místě. */
.car-kicker--center{
  justify-content:center;
  margin:0 0 var(--feature-kicker-gap);
}

/* ==========================================================================
   Navbar — sekce 1
   Dvě samostatné lišty, oba přímí potomci <body>, bez společného obalu:
   secondary (logo + sociální sítě) odjede se scrollem pryč, primary
   (název + navigace) je position:sticky;top:0 a zůstává trvale přilepená
   k horní hraně — žádné skrývání při scrollu dolů, to by vyžadovalo JS.
   Logo zůstává v secondary liště, název pracoviště je v primary jen
   textově.
   Sticky prvek se drží jen v hranicích svého rodiče — dřív byly obě
   lišty v jednom <header>, vysokém přesně na jejich součet, takže
   sticky primary lištu neměl kam „posunout" a fungovalo to jen do
   chvíle, než odscrolluje spodní hrana toho obalu (prakticky ihned).
   Bez společného obalu je rodičem primary rovnou <body>, vysoké přes
   celou stránku, takže sticky funguje po celou dobu scrollu.
   Pozadí primary je vždy neprůhledné/dostatečně kryjící a z-index:20 nad
   obsahem sekcí, ať pod lištou nic neprosvítá — plné --c-surface jako
   fallback, přes @supports poloprůhledné --nav-sticky-bg + blur (stejná
   hodnota jako --btn-blur) tam, kde prohlížeč umí backdrop-filter. Blur
   je na ::before, ne na .car-navbar__primary samotném — jinak by prvek
   založil containing block pro position:fixed potomky a vysouvací panel
   navigace (viz níž) by se „přilepil" k rozměrům lišty místo k celé
   obrazovce (stejné pravidlo jako u filter/transform/perspective).
   Pod 930px se navigace mění na vysouvací panel zprava + tmavý overlay,
   stylem podle hlavního webu FNOL — ale JEN s JS (třída .js-nav na
   <html>, nastavuje ji main.js v <head>, viz komentář u .car-navbar__nav
   -head výš). Bez JS zůstává navigace prostý viditelný seznam odkazů pod
   lištou, hamburger i panel jsou schované — to je vědomý fallback, ne
   chyba, protože bez JS panel neumí ani otevřít, ani zavřít.
   ========================================================================== */
.car-navbar__secondary{
  background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
}

.car-navbar__secondary-inner{
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--nav-edge);
  height:var(--nav-secondary-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--grid-gap);
}

.car-navbar__logo{
  display:block;
  line-height:0;
  flex-shrink:0;
}

.car-navbar__logo img{
  width:var(--nav-logo-w);
  height:auto;
}

.car-navbar__social{
  display:flex;
  align-items:center;
  gap:var(--nav-social-gap);
  list-style:none;
  margin:0;
  padding:0;
}

/* Ikony sociálních sítí jako mask-image (ne <img>) — jediný způsob, jak
   jim jde na hover změnit barvu, aniž by šlo o druhou sadu souborů:
   mask použije alpha kanál SVG (funguje i pro obrysové ikony bez
   výplně), barvu nese background-color, který se dá plynule přebarvit. */
.car-navbar__social-icon{
  display:block;
  width:var(--nav-social-size);
  height:var(--nav-social-size);
  background-color:var(--c-cyan);
  transition:background-color var(--hover-transition);
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
}

.car-navbar__social-icon[data-icon="facebook"]{
  mask-image:url("../img/icon-facebook.svg");
  -webkit-mask-image:url("../img/icon-facebook.svg");
}

.car-navbar__social-icon[data-icon="x"]{
  mask-image:url("../img/icon-x.svg");
  -webkit-mask-image:url("../img/icon-x.svg");
}

.car-navbar__social-icon[data-icon="instagram"]{
  mask-image:url("../img/icon-instagram.svg");
  -webkit-mask-image:url("../img/icon-instagram.svg");
}

.car-navbar__social-icon[data-icon="youtube"]{
  mask-image:url("../img/icon-youtube.svg");
  -webkit-mask-image:url("../img/icon-youtube.svg");
}

.car-navbar__social a:hover .car-navbar__social-icon,
.car-navbar__social a:focus-visible .car-navbar__social-icon{
  background-color:var(--c-blue);
}

.car-navbar__primary{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--c-surface);
}

/* Blur je na ::before, ne přímo na .car-navbar__primary — filter i
   backdrop-filter na prvku samém by mu založily nový containing block
   pro position:fixed potomky (vysouvací panel navigace, viz níž), takže
   by se panel „přilepil" k rozměrům lišty místo k celé obrazovce. Na
   pseudoelement toto pravidlo nedosáhne, .car-navbar__primary-inner
   (position:relative) zůstává nad ním díky pořadí v DOM. */
.car-navbar__primary::before{
  content:"";
  position:absolute;
  inset:0;
}

@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .car-navbar__primary{
    background:none;
  }

  .car-navbar__primary::before{
    background:var(--nav-sticky-bg);
    backdrop-filter:blur(var(--btn-blur));
    -webkit-backdrop-filter:blur(var(--btn-blur));
  }
}

.car-navbar__primary-inner{
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--nav-edge);
  position:relative;
  min-height:var(--nav-primary-h);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--grid-gap);
}

/* Bez JS: navigace je plnou šířkou zalomená pod titulek (viz
   .car-navbar__primary-inner{flex-wrap:wrap}) — proto min-height výš
   místo pevné height, ať se lišta o řádek navigace přirozeně zvětší.
   S JS (viz média níž) nav opustí flex tok přes position:fixed, tohle
   pravidlo pak nemá na co působit. Na desktopu (viz média výš/níž)
   se zase vrací do jedné řady. */
.car-navbar__nav{
  flex:1 0 100%;
}

.car-navbar__title{
  margin:0;
}

/* Celý dvouřádkový blok jako kotva na vrchol stránky (#top) — název není
   navigační položka, proto jen decentní ztlumení při hoveru/focus, ne
   podtržení jako u ostatních odkazů (na dvou řádcích by se podtrhl
   každý zvlášť a vypadalo by to jako dva různé odkazy). Text-decoration
   se v hoveru/focus musí přebít výslovně — jinak by přebilo obecné
   „p a:hover" pravidlo výš, které má vyšší specificitu než samotný
   výchozí stav .car-navbar__title-link. */
.car-navbar__title-link{
  display:flex;
  flex-direction:column;
  gap:2px;
  text-decoration:none;
  color:inherit;
  transition:opacity var(--hover-transition);
}

.car-navbar__title-link:hover,
.car-navbar__title-link:focus-visible{
  opacity:.8;
  text-decoration:none;
}

.car-navbar__title-main{
  font-weight:var(--fw-medium);
  font-size:var(--nav-title-fs);
  letter-spacing:var(--nav-title-ls);
  line-height:1.2;
  color:var(--c-blue);
}

.car-navbar__title-sub{
  font-weight:var(--fw-regular);
  font-size:var(--nav-subtitle-fs);
  letter-spacing:var(--nav-subtitle-ls);
  line-height:1.2;
  text-transform:uppercase;
  color:var(--c-blue);
}

.car-navbar__toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:var(--nav-toggle-size);
  height:var(--nav-toggle-size);
  padding:0;
  border:0;
  background:none;
  flex-shrink:0;
  cursor:pointer;
}

/* Bez JS (výchozí stav): navigace je prostý seznam odkazů pod lištou —
   funkční fallback (zadání: „funguje bez JS s výjimkou mobilního menu").
   Hamburger, vysouvací panel a overlay aktivuje až .js-nav na <html>,
   kterou nastaví main.js hned v <head> — sama CSS bez ní nic neschovává,
   takže bez JS uživatel o nic nepřijde. */
.car-navbar__nav-head{
  display:none;
}

.car-navbar__overlay{
  display:none;
}

.car-navbar__nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
}

.car-navbar__nav a{
  display:block;
  padding:var(--nav-panel-item-py) var(--nav-edge);
  font-size:var(--fs-body);
  font-weight:var(--fw-medium);
  color:var(--c-blue);
  text-decoration:none;
}

.car-navbar__nav a:hover{
  text-decoration:underline;
}

.car-navbar__nav-brand{
  display:flex;
  align-items:center;
  gap:var(--nav-panel-brand-gap);
  margin:0;
  font-weight:var(--fw-medium);
  font-size:var(--nav-title-fs);
  color:var(--c-blue);
}

.car-navbar__nav-brand img{
  display:block;
  width:24px;
  height:auto;
}

.car-navbar__nav-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--nav-toggle-size);
  height:var(--nav-toggle-size);
  padding:0;
  border:0;
  background:none;
  flex-shrink:0;
  cursor:pointer;
}

.car-navbar__nav-close-icon{
  position:relative;
  width:var(--nav-panel-close-size);
  height:var(--nav-panel-close-size);
}

.car-navbar__nav-close-icon::before,
.car-navbar__nav-close-icon::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:var(--nav-panel-close-size);
  height:2px;
  background:var(--c-blue);
}

.car-navbar__nav-close-icon::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.car-navbar__nav-close-icon::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

@media (max-width:929.98px){
  /* Vysouvací panel zprava + tmavý overlay, jen s JS (.js-nav). Bez ní
     by hamburger byl vidět, ale klik by nešel — proto se sám hamburger
     zobrazí taky až s .js-nav.
     Overlay je v HTML schválně uvnitř .car-navbar__primary (sourozenec
     .car-navbar__primary-inner), ne až za ním na úrovni <body> — primary
     je position:sticky, což vždy založí nový stacking context bez ohledu
     na z-index. Panel (nav) je zanořený uvnitř primary-inner (kvůli
     desktopu, viz media výš/níž), takže jeho z-index:31 platí jen uvnitř
     tohohle stacking contextu. Kdyby byl overlay mimo něj jako přímý
     sourozenec primary na úrovni <body>, jeho z-index:30 by se srovnával
     až s primary jako celkem (z-index:20) — a protože 30 > 20, overlay
     by celou lištu i s panelem uvnitř přebil, ať je panel uvnitř
     nastavený na jakkoli vysoké číslo. Uvnitř společného contextu se
     31 vs. 30 srovná správně a panel zůstane nad overlayem. */
  html.js-nav .car-navbar__toggle{
    display:inline-flex;
  }

  html.js-nav .car-navbar__nav{
    position:fixed;
    inset-block:0;
    right:0;
    z-index:31;
    width:var(--nav-panel-w);
    background:var(--c-surface);
    box-shadow:var(--feature-shadow);
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .25s ease;
  }

  html.js-nav .car-navbar__nav.is-open{
    transform:translateX(0);
  }

  /* Linka mezi odkazy — stejná jako mezi položkami akordeonu FAQ. Platí
     jen pod 930px (vysouvací panel i no-JS fallback seznam) — nad touto
     šířkou je navigace vodorovná a linky by tam byly jen pozůstatkem. */
  .car-navbar__nav li{
    border-top:1px solid var(--c-ink-10);
  }

  .car-navbar__nav li:last-child{
    border-bottom:1px solid var(--c-ink-10);
  }

  html.js-nav .car-navbar__nav-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--nav-panel-head-gap);
    padding:var(--nav-panel-edge) var(--nav-edge);
    border-bottom:1px solid var(--c-ink-10);
  }

  html.js-nav .car-navbar__overlay{
    display:block;
    position:fixed;
    inset:0;
    z-index:30;
    background:var(--nav-overlay-bg);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
  }

  html.js-nav .car-navbar__overlay.is-open{
    opacity:1;
    pointer-events:auto;
  }

  @media (prefers-reduced-motion:reduce){
    html.js-nav .car-navbar__nav,
    html.js-nav .car-navbar__overlay{
      transition:none;
    }
  }
}

@media (min-width:930px){
  .car-navbar__primary-inner{
    flex-wrap:nowrap;
  }

  .car-navbar__nav{
    flex:none;
  }

  .car-navbar__nav ul{
    flex-direction:row;
    align-items:center;
    gap:var(--nav-link-gap);
    padding:0;
  }

  .car-navbar__nav a{
    padding:0;
  }
}

/* ==========================================================================
   Tlačítka — sdílená komponenta (btn-big, btn-basic)
   Obě varianty: poloprůhledné bílé pozadí s blur, obrys --c-cyan, žádná
   plná výplň. btn-big je pod 930px stejně velké jako btn-basic (viz
   CAR-DESIGN.md, „Na mobilu se i v hero používá btn-basic").
   ========================================================================== */
.car-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--btn-bg);
  backdrop-filter:blur(var(--btn-blur));
  -webkit-backdrop-filter:blur(var(--btn-blur));
  border:var(--btn-border-w) solid var(--c-cyan);
  text-decoration:none;
  text-transform:uppercase;
  font-family:inherit;
  font-weight:var(--fw-medium);
  white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--hover-transition), color var(--hover-transition), border-color var(--hover-transition);
}

/* Hover podle hlavního webu FNOL: plná --c-blue výplň, bílý text,
   obrys sjednocený s výplní (taky --c-blue, ať nezůstává světle
   modrý --c-cyan z výchozího stavu) — stejně pro obě varianty
   (primary/secondary) a pro btn-big i btn-basic. Stejný stav i pro
   :focus-visible, ať je focus viditelný (navíc k obecnému obrysu, viz
   :focus-visible výš). Specificita jedné třídy + pseudotřídy přebije
   .car-btn--primary/--secondary, které mají jen jednu třídu. */
.car-btn:hover,
.car-btn:focus-visible{
  background-color:var(--c-blue);
  border-color:var(--c-blue);
  color:var(--c-surface);
}

.car-btn--primary{
  color:var(--c-red);
}

.car-btn--secondary{
  color:var(--c-blue-btn);
}

.car-btn--basic,
.car-btn--big{
  height:var(--btn-basic-h);
  padding-inline:var(--btn-basic-px);
  border-radius:var(--btn-basic-radius);
  font-size:var(--btn-basic-fs);
  letter-spacing:var(--btn-basic-ls);
}

@media (min-width:930px){
  .car-btn--big{
    height:var(--btn-big-h);
    padding-inline:var(--btn-big-px);
    border-radius:var(--btn-big-radius);
    font-size:var(--btn-big-fs);
    letter-spacing:var(--btn-big-ls);
  }
}

/* ==========================================================================
   Hero — sekce 2
   Fotka ukotvená vpravo (desktop) / čtverec nahoře (mobil), tři vrstvené
   gradienty do --c-surface-soft. Nadpis + tlačítka, bez slideru a pageru.
   ========================================================================== */
.car-hero{
  position:relative;
  overflow:hidden;
  background:var(--c-surface-soft);
}

/* frame drží fotku a nadpis přes sebou (grid, obě děti ve stejné buňce) —
   na mobilu tak nadpis přesahuje přes spodní část čtvercové fotky */
.car-hero__frame{
  position:relative;
  display:grid;
}

.car-hero__media{
  grid-area:1/1;
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
}

.car-hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--hero-photo-pos-mobile);
}

.car-hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--hero-gradient-mobile);
}

.car-hero__title{
  grid-area:1/1;
  align-self:end;
  position:relative;
  z-index:1;
  margin:0;
  padding-inline:var(--hero-edge);
  font-weight:var(--fw-regular);
  font-size:var(--fs-h1);
  line-height:var(--lh-h1);
  letter-spacing:var(--ls-h1);
  color:var(--c-blue);
  text-align:center;
  text-shadow:0 0 var(--hero-shadow-blur) var(--c-glow);
  animation:car-fade-in var(--reveal-duration) ease-out both;
}

.car-hero__actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--hero-btn-gap);
  margin:var(--hero-actions-mt) var(--hero-edge) 0;
  animation:car-fade-in var(--reveal-duration) ease-out both;
}

@media (min-width:930px){
  .car-hero{
    min-height:var(--hero-block-h);
  }

  .car-hero__frame{
    display:block;
    position:static;
  }

  .car-hero__media{
    position:absolute;
    inset-block-start:0;
    inset-inline-end:0;
    width:var(--hero-photo-w);
    height:var(--hero-photo-h);
    aspect-ratio:auto;
  }

  .car-hero__media img{
    object-position:var(--hero-photo-pos-desktop);
  }

  .car-hero__media::after{
    background-image:var(--hero-gradient);
  }

  .car-hero__title{
    position:absolute;
    left:var(--hero-edge);
    top:var(--hero-title-top);
    width:var(--hero-title-w);
    padding-inline:0;
    text-align:left;
  }

  .car-hero__actions{
    position:absolute;
    left:var(--hero-edge);
    top:var(--hero-actions-top);
    flex-direction:row;
    align-items:center;
    margin:0;
  }
}

/* ==========================================================================
   Sekce — obecný rytmus (padding, střídání bílá / --c-surface-soft)
   ========================================================================== */
.car-section{
  padding-block:var(--section-py);
  /* Ať kotva (#sluzby, #cesta, #social, #faq, #tym, #pracoviste, #kontakt)
     po skoku nezaleze pod sticky navbar (viz --scroll-offset). Na sekcích
     bez kotvy (5, 11) neškodí, jen se nepoužije. */
  scroll-margin-top:var(--scroll-offset);
}

.car-section--soft{
  background:var(--c-surface-soft);
}

/* ==========================================================================
   Karty — sdílená komponenta (grid-karta-noimage, grid-karta-image)
   ========================================================================== */
.car-cards{
  display:grid;
  grid-template-columns:1fr;
  align-items:stretch;
  gap:var(--card-grid-gap);
}

.car-card{
  display:flex;
  flex-direction:column;
  background:var(--c-surface);
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  overflow:hidden;
}

.car-card--noimage{
  padding-inline:var(--card-pad-inline);
  padding-bottom:var(--card-pad-inline);
}

.car-card__kicker{
  padding-block:var(--card-kicker-pt) var(--card-kicker-pb);
}

.car-card__title{
  margin:0;
  font-weight:var(--fw-medium);
  font-size:var(--fs-h3);
  line-height:var(--lh-h3);
  color:var(--c-blue);
}

.car-card__text{
  margin:var(--card-content-gap) 0 0;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--c-ink);
}

@media (min-width:930px){
  .car-cards--noimage{
    grid-template-columns:repeat(3,1fr);
  }
}

/* ==========================================================================
   Cesta (krokovník) — sekce 4
   Mobil: kroky pod sebou, číslo v levém sloupci přes obě řádky (nadpis+text).
   Desktop: 5 sloupců, subgrid — číslo/nadpis/text drží společnou linku
   napříč sloupci i tam, kde se nadpis zalomí na dva řádky.
   Kroky nemají vlastní podklad, radius ani stín — nejde o karty.
   Linka 2px solid --c-cyan nese strukturu kroku (ne jen oddělení): na
   mobilu nad krokem (border-top), na desktopu na jeho levé hraně
   (border-left) — pět kroků tak vedle sebe vytvoří pět svislých pruhů.
   Obsah je od linky odsazený --journey-line-indent. Čistě dekorativní,
   proto border na položce, ne vlastní prvek v DOM. Obě varianty se
   navzájem vylučují, žádné kroužky ani jiné obalení čísel navíc.
   ========================================================================== */
.car-journey{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--journey-gap);
}

.car-journey__step{
  display:grid;
  grid-template-columns:var(--journey-number-col-w) 1fr;
  grid-template-rows:auto auto;
  column-gap:var(--journey-step-gap);
  row-gap:var(--journey-content-gap);
  border-top:2px solid var(--c-cyan);
  padding-top:var(--journey-line-indent);
}

.car-journey__number{
  grid-column:1;
  grid-row:1 / span 2;
  font-weight:var(--fw-medium);
  font-size:var(--journey-number-fs);
  letter-spacing:var(--ls-kicker);
  color:var(--c-red);
}

.car-journey__title{
  grid-column:2;
  grid-row:1;
  margin:0;
  font-weight:var(--fw-medium);
  font-size:var(--fs-h3);
  line-height:var(--lh-h3);
  color:var(--c-blue);
}

.car-journey__text{
  grid-column:2;
  grid-row:2;
  margin:0;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--c-ink);
}

@media (min-width:930px){
  .car-journey{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    grid-template-rows:auto auto auto;
    column-gap:var(--grid-gap);
    row-gap:var(--journey-content-gap);
  }

  .car-journey__step{
    display:grid;
    grid-template-columns:none;
    grid-row:span 3;
    grid-template-rows:subgrid;
    column-gap:0;
    border-top:none;
    padding-top:0;
    border-left:2px solid var(--c-cyan);
    padding-left:var(--journey-line-indent);
  }

  .car-journey__number,
  .car-journey__title,
  .car-journey__text{
    grid-column:auto;
    grid-row:auto;
  }
}

/* ==========================================================================
   Karty s fotkou (grid-karta-image) — sekce 5
   Mobil: fotka nahoře přes celou šířku (poměr 3:2), text a seznam pod ní.
   Desktop: fotka ukotvená vpravo, pevná šířka, height:100% — roste s kartou
   (viz CAR-DESIGN.md, „Text se neořezává"). .car-card, .car-card__kicker,
   .car-card__title a .car-card__text jsou sdílené s grid-karta-noimage,
   mění se jen kicker offset (viz níže) a padding, ten nese .car-card__body,
   ať fotka není padding stažená.
   Text leží nad fotkou (z-index) — fotka i gradient mají z-index:0,
   textový blok z-index:1, aby ho neschovala neprůhledná reálná fotka.
   ========================================================================== */
.car-cards--image{
  grid-template-columns:1fr;
}

.car-card--image{
  position:relative;
}

/* Mobil: frame drží fotku, kicker a nadpis přes sebe stejným principem
   jako .car-hero__frame — ale kicker a nadpis jsou ukotvené KAŽDÝ zvlášť
   (kicker nahoru, nadpis dolů), ne jako jeden společný blok. Se sdíleným
   blokem by kicker musel sedět hned nad nadpisem, a to buď posune celý
   blok pryč od 40px odsazení od horní hrany (viz CAR-DESIGN.md), nebo
   nadpis pryč od spodního okraje fotky — nejde splnit obojí zároveň.
   Nadpis navíc u některých fotek zasahoval do obličeje, když seděl
   nahoře. Perex a výčet jsou samostatný .car-card__body pod frame,
   na čisté ploše. Desktop frame rozloží zpátky do bloku (viz níže),
   fotka, kicker, nadpis a tělo pak tvoří jeden padded sloupec vedle
   sebe jako dřív. */
.car-card__frame{
  position:relative;
  display:grid;
}

.car-card__media{
  grid-area:1/1;
  position:relative;
  z-index:0;
  margin:0;
  width:100%;
  aspect-ratio:3/2;
  overflow:hidden;
}

.car-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:right top;
  opacity:.8;
  transition:transform var(--zoom-duration) ease-out;
}

/* Zoom fotky na hover — jen sekce 5 (.car-card--image), karty sekce 3
   fotku nemají. Karta i .car-card__media mají overflow:hidden (viz výš),
   fotka tak nikdy nepřeteče přes zaoblené rohy. */
.car-card--image:hover .car-card__media img{
  transform:scale(1.05);
}

@media (prefers-reduced-motion:reduce){
  .car-card__media img{
    transition:none;
  }

  .car-card--image:hover .car-card__media img{
    transform:none;
  }
}

.car-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}

.car-card--image .car-card__kicker{
  grid-area:1/1;
  align-self:start;
  position:relative;
  z-index:1;
  padding-inline:var(--card-pad-inline);
  padding-block:var(--card-image-kicker-offset);
}

.car-card--image .car-card__title{
  grid-area:1/1;
  align-self:end;
  position:relative;
  z-index:1;
  max-width:var(--card-image-title-w);
  margin-bottom:var(--card-image-title-shift);
  padding-inline:var(--card-pad-inline);
}

.car-card__body{
  position:relative;
  z-index:1;
  padding-inline:var(--card-pad-inline);
  padding-top:var(--card-list-top-gap);
  padding-bottom:var(--card-pad-inline);
  margin-top:calc(-1 * var(--card-image-title-shift));
}

.car-card__list{
  list-style:none;
  margin:var(--card-list-top-gap) 0 0;
  padding:0;
}

.car-card__list li{
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--c-ink-70);
}

.car-card__list li + li{
  position:relative;
  margin-top:var(--card-list-item-gap);
  padding-top:var(--card-list-item-gap);
}

.car-card__list li + li::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  border-top:1px solid var(--c-ink-10);
}

@media (min-width:930px){
  .car-cards--image{
    grid-template-columns:repeat(2,1fr);
  }

  /* Frame přestává být grid overlay — fotka se osamostatní (position
     bublá až na .car-card--image, roste height:100% s celou kartou),
     hlavička padá zpátky do normálního toku nad .car-card__body. */
  .car-card__frame{
    display:block;
    position:static;
  }

  .car-card__media{
    position:absolute;
    inset-block-start:0;
    inset-inline-end:0;
    width:var(--card-image-photo);
    height:100%;
    aspect-ratio:auto;
  }

  .car-card__media::after{
    background-image:linear-gradient(to right, #fff, rgba(255,255,255,0));
  }

  .car-card--image .car-card__kicker,
  .car-card--image .car-card__title{
    padding-inline:var(--card-image-pad-left) var(--card-image-pad-right);
  }

  .car-card--image .car-card__title{
    max-width:none;
    margin-bottom:0;
  }

  .car-card__body{
    padding-top:0;
    padding-left:var(--card-image-pad-left);
    padding-right:var(--card-image-pad-right);
    margin-top:0;
  }

}

/* ==========================================================================
   Feature (obrázek + text) — sekce 6, Social Freezing
   Mobil: nadpis a text nahoře, fotka pod nimi, přes celou šířku sloupce.
   Desktop: fotka vlevo pevné šířky, odsazená od okraje obsahového sloupce
   (--feature-media-inset, viz Figma node 4520:4963 — fotka na x=206 při
   sloupci od x=100), text vpravo, oba sloupce svisle na střed (CAR-DESIGN.md,
   Figma „imgleft-text-bg"). Zrcadlově platí pro případnou variantu s fotkou
   vpravo — odsazení by šlo na opačnou stranu (margin-inline-end u fotky).
   Puntík v rohu fotky — .car-photo-dot, sdílené se sekcí 8 (viz obecné
   pravidlo u .car-photo-dot výš).
   Šířky i mezera jsou pevné hodnoty z Figmy (450/150/400), ne rovnoměrné
   dělení prostoru — ale se zapnutým flex-shrink, ať se sloupce mají kam
   zúžit, když součet pevných šířek a odsazení nevejde do sloupce (mezi
   930 px a ~1300 px šířky okna). Bez toho přetéká přes okraj, prokazatelně
   i na 1024 px, jedné z povinných testovacích šířek.
   ========================================================================== */
.car-feature{
  display:flex;
  flex-direction:column;
  gap:var(--feature-stack-gap);
}

.car-feature__media{
  position:relative;
  order:1;
  margin:0;
  border-radius:var(--card-radius);
  box-shadow:var(--feature-shadow);
  overflow:hidden;
}

.car-feature__media img{
  width:100%;
  height:auto;
  aspect-ratio:var(--feature-media-ratio);
  object-fit:cover;
}

.car-feature__body{
  order:0;
}

.car-feature__kicker{
  margin:0 0 var(--feature-kicker-gap);
}

.car-feature__title{
  max-width:none;
  margin:0 0 var(--feature-title-gap);
  font-weight:var(--fw-regular);
  font-size:var(--fs-h2);
  line-height:var(--lh-h2);
  letter-spacing:var(--ls-h2);
  color:var(--c-blue);
  text-align:left;
}

.car-feature__text{
  margin:0;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--c-ink);
}

.car-feature__text strong{
  font-weight:var(--fw-bold);
}

@media (min-width:930px){
  .car-feature{
    flex-direction:row;
    align-items:center;
    gap:var(--feature-col-gap);
  }

  .car-feature__media{
    order:0;
    flex:0 1 var(--feature-media-w);
    min-width:0;
    margin-inline-start:var(--feature-media-inset);
  }

  .car-feature__body{
    order:1;
    flex:0 1 var(--feature-body-w);
    min-width:0;
  }
}

/* ==========================================================================
   FAQ (akordeon) — sekce 7
   Bez obdoby ve Figmě (jako krokovník sekce 4). Perex vlevo (sdílí
   .car-feature__kicker/__title/__text ze sekce 6 — stejná role, kicker
   + H2 + text vlevo), akordeon pod ním přes <details>/<summary>, bez JS.
   Stav nese samotný <details>, ukazatel (plus/minus) je čistě dekorativní
   (aria-hidden). Padding drží summary, ne obal <details>, ať je celá
   klikací/fokusovatelná plocha součástí viditelného focus stavu.
   Celý blok (kicker+nadpis+perex+akordeon) je vycentrovaný vůči obsahovému
   sloupci (margin-inline:auto) — jen texty uvnitř zůstávají zarovnané
   doleva. Nadpis sdílí šířku s akordeonem přes společného rodiče .car-faq,
   ne přes obecný .car-h2 (max-width 960), ať lícují na obou okrajích.
   ========================================================================== */
.car-faq{
  max-width:816px;
  margin-inline:auto;
}

.car-faq__intro{
  margin:0 0 var(--space-perex-obsah);
}

.car-faq__item{
  border-top:1px solid var(--c-ink-10);
}

.car-faq__item:last-child{
  border-bottom:1px solid var(--c-ink-10);
}

.car-faq__question{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--faq-question-gap);
  margin:0;
  padding-block:var(--faq-item-py);
  list-style:none;
  cursor:pointer;
  font-weight:var(--fw-medium);
  font-size:var(--fs-h3);
  line-height:var(--lh-h3);
  color:var(--c-blue);
}

.car-faq__question::-webkit-details-marker{
  display:none;
}

.car-faq__icon{
  position:relative;
  width:var(--faq-icon-size);
  height:var(--faq-icon-size);
  flex-shrink:0;
}

.car-faq__icon::before,
.car-faq__icon::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  background:var(--c-blue);
  transform:translate(-50%,-50%);
}

.car-faq__icon::before{
  width:var(--faq-icon-size);
  height:var(--faq-icon-bar);
}

.car-faq__icon::after{
  width:var(--faq-icon-bar);
  height:var(--faq-icon-size);
  transition:transform .2s ease-out;
}

/* Otočení svislého pruhu o 90° na vodorovný — plynulý přechod plus→minus
   rotací, ne mizením (opacity). */
.car-faq__item[open] .car-faq__icon::after{
  transform:translate(-50%,-50%) rotate(90deg);
}

@media (prefers-reduced-motion:reduce){
  .car-faq__icon::after{
    transition:none;
  }
}

.car-faq__answer{
  margin:0 0 var(--faq-item-py);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--c-ink);
}

/* ==========================================================================
   Tým — sekce 8
   Bez obdoby ve Figmě. Mřížka portrétů, ne karty — žádný podklad, radius
   ani stín na položce, jen na fotce (konzistentní se zbytkem webu).
   Kicker + nadpis centrované jako běžný .car-section__head (kicker přes
   sdílený modifikátor .car-kicker--center), ale bez perexu (koncept měl
   větu určenou klientovi, ne návštěvníkovi).
   4 sloupce jsou pevné (grid-template-columns:repeat(4,1fr)) — přibude-li
   pátý člen týmu, mřížka sama přejde na druhou řadu, žádná úprava CSS.
   ========================================================================== */

.car-team__head{
  margin:0 0 var(--space-perex-obsah);
}

.car-team__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(3,auto);
  column-gap:var(--team-grid-gap);
}

/* Subgrid jako u krokovníku (sekce 4) — sdílené řádky napříč sloupci
   (portrét/jméno/funkce), ať funkce začíná na stejné lince ve všech
   sloupcích i tehdy, když se jméno zalomí na jiný počet řádků než
   sousední položky. Mezery mezi portrétem/jménem/funkcí dál nesou
   jejich vlastní margin (viz níže) — liší se od sebe (20 vs. 4px),
   jednotný row-gap by je nemohl rozlišit. Ze stejného důvodu nejde
   svislou mezeru MEZI řádky mřížky (druhá dvojice portrétů na mobilu)
   řešit přes row-gap na .car-team__grid — přidal by se i uvnitř
   subgridu mezi portrét/jméno/funkci. Řešeno margin-top na položkách
   od třetí dál (:nth-child(n+3)) — v mobilní dvousloupcové mřížce je to
   spolehlivě každá položka v druhé a další řadě, funguje i při víc než
   čtyřech členech týmu. Na desktopu (4 sloupce, teď přesně 4 členové)
   se nezalamuje, proto se tam margin resetuje — přibude-li pátý člen,
   bude potřeba tohle pravidlo doplnit i pro desktop. */
.car-team__member{
  display:grid;
  grid-row:span 3;
  grid-template-rows:subgrid;
}

.car-team__member:nth-child(n+3){
  margin-top:var(--team-row-gap);
}

.car-team__photo{
  position:relative;
  margin:0 0 var(--team-photo-gap);
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  overflow:hidden;
}

.car-team__photo img{
  width:100%;
  height:auto;
  aspect-ratio:var(--team-photo-ratio);
  object-fit:cover;
}

.car-team__name{
  margin:0 0 var(--team-name-role-gap);
  font-weight:var(--fw-medium);
  font-size:var(--fs-h3);
  line-height:var(--lh-h3);
  color:var(--c-blue);
}

.car-team__role{
  margin:0;
  font-size:var(--team-role-fs);
  line-height:var(--lh-body);
  color:var(--c-ink);
}

@media (min-width:930px){
  .car-team__grid{
    grid-template-columns:repeat(4,1fr);
  }

  .car-team__member:nth-child(n+3){
    margin-top:0;
  }
}

/* ==========================================================================
   Pracoviště (fotogalerie) — sekce 9
   Bez obdoby ve Figmě. Mozaika v obsahovém sloupci, ne fullwidth (to je
   vyhrazené hero). Mobil: velká fotka nahoře přes celou šířku, dvě menší
   vedle sebe pod ní. Desktop: velká vlevo přes dva řádky, dvě menší
   vpravo nad sebou — výšku velké fotky určuje grid (grid-row:span 2 +
   výchozí align-items:stretch), ne počítaný aspect-ratio, ať sedí přesně
   na výšku obou menších fotek i s mezerou mezi nimi.
   ========================================================================== */
.car-gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--gallery-gap);
}

.car-gallery__main,
.car-gallery__item{
  position:relative;
  margin:0;
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  overflow:hidden;
}

.car-gallery__main{
  grid-column:1 / -1;
}

.car-gallery__main img{
  width:100%;
  height:auto;
  aspect-ratio:var(--gallery-main-ratio);
  object-fit:cover;
}

.car-gallery__item img{
  width:100%;
  height:auto;
  aspect-ratio:var(--gallery-item-ratio);
  object-fit:cover;
}

@media (min-width:930px){
  .car-gallery{
    grid-template-columns:2fr 1fr;
  }

  .car-gallery__main{
    grid-column:1;
    grid-row:1 / span 2;
  }

  .car-gallery__main img{
    height:100%;
    aspect-ratio:auto;
  }

  .car-gallery__item{
    grid-column:2;
  }

  .car-gallery__item:nth-of-type(2){
    grid-row:1;
  }

  .car-gallery__item:nth-of-type(3){
    grid-row:2;
  }
}

/* ==========================================================================
   Kontakt — sekce 10
   Bez obdoby ve Figmě (má chybná data, viz CAR-DESIGN.md). Tři skupiny
   (kontakty / ordinační hodiny / doprava), čitelné samostatně — na
   mobilu pod sebou s odřádkovací linkou, na desktopu vedle sebe (bez
   svislé linky, sloupce odliší jen nadpisy a mezera — doprava má nejméně
   obsahu, proto užší sloupec 0.8fr proti 1.2fr u ostatních dvou).
   Odsazení hlavičky od obsahu sdílí --space-perex-obsah s ostatními
   sekcemi, i když tahle nemá perex (h2 svůj vlastní spodní odstup
   nedostává, ať se nesčítá s hlavičkou).
   ========================================================================== */
#kontakt .car-section__head{
  margin-bottom:var(--space-perex-obsah);
}

#kontakt .car-h2{
  margin-bottom:0;
}

.car-contact{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--contact-group-gap);
}

.car-contact__group + .car-contact__group{
  padding-top:var(--contact-group-gap);
  border-top:1px solid var(--c-ink-10);
}

.car-contact__heading{
  margin:0 0 var(--contact-heading-gap);
  font-weight:var(--fw-medium);
  font-size:var(--fs-h3);
  line-height:var(--lh-h3);
  color:var(--c-blue);
}

.car-contact__name{
  margin:0;
  font-weight:var(--fw-bold);
}

.car-contact__address{
  margin:0 0 var(--contact-group-gap);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--c-ink);
}

.car-contact__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--contact-item-gap);
}

.car-contact__item{
  display:flex;
  align-items:flex-start;
  gap:var(--contact-icon-gap);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--c-ink);
}

.car-contact__icon{
  flex-shrink:0;
  width:var(--contact-icon-size);
  height:var(--contact-icon-size);
}

/* Telefon/e-mail nad popiskem — číslo jako odkaz (tučně, --c-blue, viz
   obecné pravidlo pro odkazy v textu), popisek pod ním běžným řezem.
   Fax je výjimka: číslo a „(fax)" na jednom řádku, ne pod sebou. */
.car-contact__detail{
  display:flex;
  flex-direction:column;
}

.car-contact__detail--inline{
  flex-direction:row;
  align-items:baseline;
  gap:5px;
}

.car-contact__desc{
  font-weight:var(--fw-regular);
  color:var(--c-ink);
}

.car-contact__table{
  width:100%;
  margin:0 0 var(--contact-heading-gap);
  border-collapse:collapse;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--c-ink);
}

.car-contact__table th,
.car-contact__table td{
  padding:var(--contact-table-py) 0;
  text-align:left;
  font-weight:var(--fw-regular);
  vertical-align:top;
  border-top:1px solid var(--c-ink-10);
}

/* První řádek tabulky — CAR-DESIGN.md, „Layout": převzato z hlavního webu. */
.car-contact__table tr:first-child th,
.car-contact__table tr:first-child td{
  border-top:2px solid var(--c-cyan);
}

.car-contact__table th{
  padding-right:var(--contact-icon-gap);
  color:var(--c-ink);
  font-weight:var(--fw-medium);
  white-space:nowrap;
}

.car-contact__note{
  margin:var(--contact-heading-gap) 0 0;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--c-ink);
}

.car-contact__transport{
  margin:0;
}

.car-contact__transport div{
  display:flex;
  flex-direction:column;
}

.car-contact__transport div + div{
  margin-top:var(--contact-transport-gap);
}

/* Ikona dopravy stojí samostatně nad nadpisem — jiné umístění než u
   .car-contact__icon, který sedí vedle textu na stejné lince. */
.car-contact__transport-icon{
  width:var(--contact-transport-icon-size);
  height:var(--contact-transport-icon-size);
  margin:0 0 var(--contact-transport-icon-gap);
}

.car-contact__transport dt{
  font-weight:var(--fw-medium);
  color:var(--c-blue);
}

.car-contact__transport dd{
  margin:0;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--c-ink);
}

@media (min-width:930px){
  .car-contact{
    grid-template-columns:1.2fr 1.2fr 0.8fr;
    gap:var(--contact-col-gap);
  }

  .car-contact__group + .car-contact__group{
    padding-top:0;
    border-top:none;
  }
}

/* ==========================================================================
   CTA — sekce 11
   Úzký pruh mezi kontakty a patičkou, jen dvojice tlačítek — odděluje
   ty dva bloky opticky, bez nadpisu a perexu. Stejné tlačítky i mezera
   jako v hero (--hero-btn-gap): na mobilu btn-big se chová jako
   btn-basic (viz komentář u .car-btn), pod sebou, na desktopu vedle sebe.
   ========================================================================== */
.car-cta__actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--hero-btn-gap);
}

@media (min-width:930px){
  .car-cta__actions{
    flex-direction:row;
    justify-content:center;
  }
}

/* ==========================================================================
   Patička — sekce 12
   Sdílená se všemi weby FNOL, přebírá se beze změn (obsah ověřený proti
   test.fnol.cz). Tmavě modrý blok mimo běžné bílé/--c-surface-soft
   střídání sekcí, proto vlastní barevná dvojice --c-footer-*.
   Tři sloupce na desktopu (identita+adresa / kontakty+IČ / navigace),
   na mobilu pod sebou. Pravidlo „p a / li a" pro modré odkazy v textu
   (viz reset výš) se tu přebíjí přes .car-footer a — na tmavém podkladu
   by modrá nebyla čitelná.
   ========================================================================== */
.car-footer{
  padding-block:var(--footer-py);
  background:var(--c-footer-bg);
  color:var(--c-footer-text);
}

.car-footer a{
  color:var(--c-footer-text);
  font-weight:var(--fw-regular);
}

.car-footer a:hover,
.car-footer a:focus-visible{
  text-decoration:underline;
}

.car-footer p{
  margin-block:0;
}

.car-footer__top{
  display:grid;
  gap:var(--footer-gap);
  margin-bottom:var(--footer-gap);
}

.car-footer__logo-link{
  display:inline-block;
  line-height:0;
  margin-bottom:20px;
}

.car-footer__logo{
  width:var(--footer-logo-w);
  height:auto;
}

.car-footer__address{
  margin-left:var(--footer-address-indent);
}

/* Jediný zvýrazněný odkaz v patičce — viz CAR-DESIGN.md, „Patička".
   Odstup od GPS o výšku jednoho řádku textu adresy — mezi nimi tak
   zůstává jeden prázdný řádek. Selektor musí mít dvě třídy
   (.car-footer__top .car-footer__fnol-link), jinak ho svou vyšší
   specificitou přebije obecné „.car-footer p{margin-block:0}" výš. */
.car-footer__fnol-link{
  margin-left:var(--footer-address-indent);
}

.car-footer__top .car-footer__fnol-link{
  margin-top:calc(var(--fs-body) * var(--lh-body));
}

.car-footer__fnol-link a{
  font-size:var(--fs-h3);
  color:var(--c-cyan);
  font-weight:var(--fw-bold);
}

.car-footer__gps{
  margin-top:10px;
  margin-left:var(--footer-address-indent);
}

.car-footer__contact-list{
  list-style:none;
  margin:0 0 var(--footer-heading-mb);
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--footer-contact-gap);
}

.car-footer__contact-list li{
  display:flex;
  align-items:center;
  gap:var(--footer-contact-icon-gap);
}

.car-footer__contact-list img{
  width:var(--contact-icon-size);
  height:var(--contact-icon-size);
  flex-shrink:0;
}

.car-footer__ico{
  margin-left:var(--footer-ico-indent);
}

/* Navigace — sbalená do <details>/<summary> na mobilu (odkazy vedou na
   fnol.cz, jiná sada než hamburger, který má kotvy onepage; navíc jde
   o povinný odkaz „Prohlášení o přístupnosti" u subjektu veřejného
   sektoru — proto se nesmí jen skrýt jako na hlavním webu). Nad 600px
   (viz média níž) se vynutí rozbalený stav bez akordeonového chování. */
.car-footer__nav-heading{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 var(--footer-nav-heading-mb);
  font-size:var(--fs-kicker);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-kicker);
  text-transform:uppercase;
  color:var(--c-cyan);
  cursor:pointer;
  list-style:none;
}

.car-footer__nav-heading::-webkit-details-marker{
  display:none;
}

.car-footer__nav-icon{
  position:relative;
  width:10px;
  height:10px;
  flex-shrink:0;
}

.car-footer__nav-icon::before,
.car-footer__nav-icon::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  background:var(--c-cyan);
  transform:translate(-50%,-50%);
}

.car-footer__nav-icon::before{
  width:10px;
  height:2px;
}

.car-footer__nav-icon::after{
  width:2px;
  height:10px;
  transition:transform .2s ease-out;
}

/* Stejné otočení jako u FAQ akordeonu (.car-faq__icon) — plus→minus
   rotací svislého pruhu, ne mizením. */
.car-footer__nav-details[open] .car-footer__nav-icon::after{
  transform:translate(-50%,-50%) rotate(90deg);
}

@media (prefers-reduced-motion:reduce){
  .car-footer__nav-icon::after{
    transition:none;
  }
}

.car-footer__nav-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--footer-nav-col-gap);
}

.car-footer__nav-cols ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--footer-nav-row-gap);
}

.car-footer__logos{
  list-style:none;
  margin:0;
  padding:var(--footer-gap) 0 0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:var(--footer-logos-gap);
  opacity:var(--footer-logos-opacity);
}

/* Mobil: čapováno na --footer-logos-max-w, ať zalomí do 2×2 mřížky.
   Desktop (viz média výš): --footer-logos-max-w:none — nativní velikost
   SVG podle Figmy. */
.car-footer__logos img{
  height:auto;
  width:auto;
  max-width:var(--footer-logos-max-w);
}

.car-footer__copy{
  display:flex;
  justify-content:center;
  padding-top:var(--footer-copy-py);
  font-size:var(--fs-kicker);
  opacity:var(--footer-copy-opacity);
}

.car-footer__copy p{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
}

.car-footer__heart{
  width:16px;
  height:14px;
}

@media (min-width:600px){
  /* Nad 600px navigace „jako teď" — rozbalená, bez akordeonového
     chování, i když <details> nemá atribut open. Zavřený obsah skrývá
     prohlížeč přes vnitřní ::details-content (content-visibility:hidden
     + height:0), ne přes display na samotném .car-footer__nav-cols —
     proto se přebíjí tenhle pseudoelement, ne display. Vlastní selektor
     je specifičtější než UA pravidlo (třída + pseudoelement), není
     potřeba !important. */
  .car-footer__nav-details::details-content{
    content-visibility:visible;
    height:auto;
    overflow:visible;
  }

  /* Fallback pro starší prohlížeče bez ::details-content, které obsah
     zavřeného <details> skrývají prostým display:none na dětech. */
  .car-footer__nav-details .car-footer__nav-cols{
    display:grid;
  }

  .car-footer__nav-heading{
    cursor:default;
    pointer-events:none;
  }

  .car-footer__nav-icon{
    display:none;
  }
}

@media (min-width:930px){
  .car-footer__top{
    /* Poměr sloupců podle Figmy: identita 0–370, kontakty 370–741,
       navigace 741–1240 (z 1240 obsahového sloupce) — mezery mezi
       bloky jsou tak už zahrnuté v šířce sloupců, žádný extra gap. */
    grid-template-columns:370fr 371fr 499fr;
    gap:0;
  }

  /* Loga v nativní velikosti (630px dohromady) se přes justify-content:
     space-between rozprostřou do šířky max. 1090px (Figma), vycentrované
     v obsahovém sloupci — při 1240px vyjde mezera přesně 150px jako ve
     Figmě, mezi 930 a 1240px se mezera sama zmenší, ať to na 1024px
     nepřeteče (na rozdíl od pevného gap:150px). */
  .car-footer__logos{
    justify-content:space-between;
    max-width:1090px;
    margin-inline:auto;
  }
}

/* ==========================================================================
   Objednávkový formulář — popup
   Otevírá se z [data-cta="objednani"] (hero i CTA sekce), viz main.js.
   Bez JS vedou tato tlačítka jako kotva na #kontakt (href v HTML) —
   popup zůstává trvale display:none-like (viz níž), tlačítko ale
   funguje dál, jen jinak. Statický, neodesílá nic — data-todo na <form>.
   Vzhled drží design systém (písmo, barvy, obrysová tlačítka, poloměry),
   screenshot z hlavního webu byl zdroj jen pro pole a texty.
   ========================================================================== */
.car-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-y:auto;
  background:var(--modal-overlay-bg);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--hover-transition), visibility 0s linear var(--hover-transition);
}

.car-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity var(--hover-transition);
}

@media (prefers-reduced-motion:reduce){
  .car-modal{
    transition:none;
  }
}

/* Zamyká scroll stránky pod popupem — zapíná/vypíná main.js přes
   .car-scroll-locked na <html>. */
html.car-scroll-locked{
  overflow:hidden;
}

/* Pod 600px fullscreen (dialog = celá výška viewportu, žádný odstup od
   okrajů), nad 600px vycentrované okno do --modal-max-w s odstupem od
   okrajů obrazovky. */
.car-modal__dialog{
  position:relative;
  width:100%;
  height:100%;
  overflow-y:auto;
  background:var(--c-surface);
  padding:var(--modal-pad-mobile);
}

@media (min-width:600px){
  .car-modal{
    padding:40px 20px;
  }

  .car-modal__dialog{
    width:auto;
    height:auto;
    max-width:var(--modal-max-w);
    max-height:100%;
    border-radius:var(--card-radius);
    box-shadow:var(--card-shadow);
    padding:var(--modal-pad);
  }
}

.car-modal__close{
  position:absolute;
  top:var(--modal-pad-mobile);
  right:var(--modal-pad-mobile);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--nav-toggle-size);
  height:var(--nav-toggle-size);
  padding:0;
  border:0;
  background:none;
  flex-shrink:0;
  cursor:pointer;
}

@media (min-width:600px){
  .car-modal__close{
    top:20px;
    right:20px;
  }
}

/* Stejná technika jako .car-navbar__nav-close-icon — kříž ze dvou
   otočených pruhů, ne SVG. */
.car-modal__close-icon{
  position:relative;
  width:var(--modal-close-size);
  height:var(--modal-close-size);
}

.car-modal__close-icon::before,
.car-modal__close-icon::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:var(--modal-close-size);
  height:2px;
  background:var(--c-ink);
}

.car-modal__close-icon::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.car-modal__close-icon::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

.car-modal__title{
  margin:0 0 var(--form-gap);
  padding-right:calc(var(--nav-toggle-size) + var(--form-group-gap));
  font-size:var(--fs-h3);
  line-height:var(--lh-h3);
  color:var(--c-blue);
}

/* Formulář — pole, výčet zájmu a souhlas */
.car-form{
  display:flex;
  flex-direction:column;
  gap:var(--form-gap);
}

.car-form__group{
  display:flex;
  flex-direction:column;
  gap:var(--form-group-gap);
}

/* Jméno a příjmení — pod sebou na mobilu, nad 600px vedle sebe ve dvou
   stejně širokých sloupcích (o řádek kratší formulář). Zůstávají dvě
   oddělená pole, ne jedno volnotextové — v systému se zapisují zvlášť. */
.car-form__row{
  display:flex;
  flex-direction:column;
  gap:var(--form-gap);
}

@media (min-width:600px){
  .car-form__row{
    flex-direction:row;
  }

  .car-form__row .car-form__group{
    flex:1;
    min-width:0;
  }
}

.car-form__label{
  display:block;
  margin:0;
  padding:0;
  border:0;
  font-size:var(--form-label-fs);
  font-weight:var(--fw-bold);
  color:var(--c-ink);
}

.car-form__required{
  color:var(--c-red);
}

.car-form__hint{
  margin:0;
  font-size:var(--form-hint-fs);
  color:var(--c-ink-70);
}

/* Výška podobná btn-basic, poloměr poloviční proti kartám (--form-radius,
   viz token a CAR-DESIGN.md — s poloměrem karet by pole působilo jako
   tlačítko). Font-size drží --fs-body (min. 16px, viz komentář u tokenu
   v :root) — pod 16px by iOS Safari při zaostření pole stránku přiblížil. */
.car-form__input,
.car-form__textarea{
  width:100%;
  background:var(--c-surface);
  border:1px solid var(--c-ink-20);
  border-radius:var(--form-radius);
  padding-inline:var(--form-input-px);
  font-family:inherit;
  font-size:var(--fs-body);
  color:var(--c-ink);
}

.car-form__input{
  height:var(--btn-basic-h);
}

.car-form__textarea{
  min-height:calc(var(--btn-basic-h) * 2);
  padding-block:10px;
  resize:vertical;
}

.car-form__fieldset{
  margin:0;
  padding:0;
  border:0;
}

.car-form__checkbox-group{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

.car-form__checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:var(--fs-body);
  color:var(--c-ink);
  cursor:pointer;
}

.car-form__checkbox input{
  flex-shrink:0;
  width:18px;
  height:18px;
  margin:2px 0 0;
  accent-color:var(--c-blue);
}

/* Souhlas — odkaz uprostřed věty stojí mimo p/li/dd/td, proto vlastní
   pravidlo se stejnou konvencí (tučně, --c-blue, podtržení až na hover/
   focus), ne holé zdědění z globálního „p a" pravidla výš. */
.car-form__consent a{
  font-weight:var(--fw-bold);
  color:var(--c-blue);
  text-decoration:none;
}

.car-form__consent a:hover,
.car-form__consent a:focus-visible{
  text-decoration:underline;
}

.car-form__submit{
  align-self:center;
}