/* Fleet showroom: only loaded by the opt-in page template. All brand values are inherited. */
/* Papír jako ostatní stránky (Kryštof 29. 9.: „moc bílá“). Vozy i stíny jsou průhledné RGBA,
   takže pod nimi žádný bílý obdélník nezůstane. */
.ndm-showroom-page { background: var(--list); }
.fs {
  --fs-ease: cubic-bezier(.22, 1, .36, 1);
  --fs-duration: 620ms;
  min-height: calc(100svh - var(--hlavicka));
  display: flex; flex-direction: column; isolation: isolate;
  background: var(--list); color: var(--text);
}
.admin-bar .fs { min-height: calc(100svh - var(--hlavicka) - 32px); }
.fs button { font-family: var(--f-text); -webkit-tap-highlight-color: transparent; }
.fs button, .fs a { touch-action: manipulation; }
.fs button { cursor: pointer; }
.fs button:disabled { opacity: .35; cursor: default; }
.fs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fs [hidden] { display: none !important; }
.fs :focus-visible { outline: 3px solid var(--akcent); outline-offset: 5px; }
.fs-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px var(--okraj) 0; min-height: 76px; }
.fs h1 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: -.024em; margin: 0; font-family: var(--f-display); font-weight: 700; }
.fs-back { border: 0; background: transparent; color: var(--text-2); display: inline-flex; align-items: center; gap: 8px; padding: 12px 0 12px 12px; font-size: 14px; min-height: 44px; }
.fs-back:hover { color: var(--akcent); }
.fs-selector { display: flex; gap: 26px; padding: 14px var(--okraj) 4px; overflow-x: auto; scrollbar-width: thin; }
.fs-selector button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 7px 0; text-align: left; font-size: 14px; line-height: 1.5; color: var(--text-2); white-space: nowrap; min-height: 44px; }
.fs-selector button span { margin-left: 5px; font-size: 12px; }
.fs-selector button[aria-pressed="true"] { color: var(--akcent); border-color: var(--akcent); }
.fs-selector button:hover { color: var(--akcent); }
.fs-scene { position: relative; flex: 1; min-height: 420px; margin: 0; }
.fs-ready .fs-scene { height: max(420px, calc(100svh - var(--hlavicka) - 340px)); overflow: clip; }
.ndm-js .fs:not(.fs-ready) .fs-scene { display: block; visibility: hidden; overflow: hidden; height: max(420px, calc(100svh - var(--hlavicka) - 340px)); padding: 0; }
.fs-card { margin: 0; }
.fs-ready .fs-card { position: absolute; inset: 0; pointer-events: none; }
.fs-ready [data-fs-part] { position: absolute; margin: 0; transform-origin: 0 0; }
.fs-ready .fs-vehicle, .fs-ready .fs-open, .fs-ready .fs-detail { pointer-events: auto; }
/* Panely, chyba obrázku a hover stránkování byly v barvě papíru — na papírové stránce by zmizely, proto --list-2. */
.fs-panel { background: var(--list-2); border-radius: var(--r-panel); }
.fs-card[data-selected="true"] .fs-panel { background: var(--akce); }
.fs-cardhead { z-index: 2; color: var(--text); }
.fs-cardhead h2 { margin: 0; font-size: clamp(23px, 2vw, 30px); line-height: 1.2; font-family: var(--f-display); font-weight: 700; letter-spacing: -.018em; }
.fs-cardhead p { margin-top: 5px; font-size: 15px; }
.fs-card[data-selected="true"] .fs-cardhead, .fs-card[data-selected="true"] .fs-summary { color: var(--bila); }
.fs-vehicle { z-index: 3; display: block; border: 0; padding: 0; background: transparent; color: var(--text); border-radius: var(--r-prvek); }
.fs-vehicle img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.fs-vehicle:focus-visible { outline-offset: -5px; }
.fs-image-error { display: flex; align-items: center; justify-content: center; min-height: 180px; background: var(--list-2); border-radius: var(--r-prvek); }
.fs-summary { z-index: 4; display: flex; align-items: baseline; color: var(--text-2); line-height: 1.2; }
.fs-open { z-index: 5; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: var(--r-prvek); background: var(--akce); color: var(--bila); transition: background-color 160ms, box-shadow 160ms; }
.fs-card[data-selected="true"] .fs-open { background: var(--bila); color: var(--akcent); }
.fs-open:hover { box-shadow: 0 5px 16px rgb(0 0 0 / .13); }
.fs-card[data-selected="true"] .fs-open:focus-visible { outline-color: var(--bila); }
/* --- Parametry vozu: čitelnost má přednost před jemností ---
   Sekci čtou i starší lidé na běžném displeji. Velikosti na desktopu 1440: nadpis ~52 px,
   popisky ~22 px, hodnoty ~37 px, jednotky ~19 px, poznámka ~17 px; na mobilu drží spodní mez.
   --fs-detail-r (rozestupy) a --fs-detail-k (písmo) nastavuje JS jen tehdy, když se detail
   nevejde nad náhledy vozů: nejdřív rozestupy (nejvýš na 70 %), potom písmo (nejvýš na 85 %).
   Drobné texty (popisky, jednotky, zdroj, poznámka) mají pevnou spodní mez a pod ni nejdou.
   Šedé texty jsou o stupeň tmavší než --text-2, aby „K ověření“ a popisky nebyly vybledlé. */
.fs-detail {
  z-index: 5; container-type: inline-size;
  --k: var(--fs-detail-k, 1); --r: var(--fs-detail-r, 1);
  --fs-citelna-seda: color-mix(in srgb, var(--text-2) 70%, var(--text));
}
.fs-detail h3 {
  margin: 0 0 calc(clamp(14px, 1.4vw, 22px) * var(--r));
  font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.08;
  font-size: calc(clamp(32px, 3.6vw, 54px) * var(--k));
}
.fs-detail dl { padding: 0; margin: 0; }
.fs-detail dl > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: calc(clamp(12px, 1.25vw, 18px) * var(--r)) 0; border-bottom: 1px solid var(--oddelovac);
}
.fs-detail dt { color: var(--fs-citelna-seda); line-height: 1.3; font-size: max(18px, calc(clamp(17px, 1.55vw, 23px) * var(--k))); }
.fs-detail dt small.fs-zdroj {
  display: block; margin-top: 2px; line-height: 1.3; color: var(--text-2); letter-spacing: .01em;
  font-size: max(14px, calc(clamp(14px, 1.05vw, 16px) * var(--k)));
}
.fs-detail dd {
  margin: 0; text-align: right; white-space: nowrap; color: var(--text);
  font-weight: 700; line-height: 1.12; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  font-size: calc(clamp(26px, 2.55vw, 38px) * var(--k));
}
.fs-detail dd small {
  margin-left: .12em; font-weight: 500; letter-spacing: 0; color: var(--fs-citelna-seda);
  font-size: max(15px, calc(clamp(15px, 1.3vw, 19px) * var(--k)));
}
/* Nedoložený údaj: menší a klidnější než skutečná hodnota, ale ne drobný ani vybledlý. */
.fs-detail .fs-overit dd {
  font-weight: 500; letter-spacing: 0; color: var(--fs-citelna-seda);
  font-size: max(18px, calc(clamp(17px, 1.55vw, 23px) * var(--k)));
}
.fs-pozn {
  margin: calc(clamp(12px, 1.25vw, 18px) * var(--r)) 0 0; max-width: 52ch;
  line-height: 1.5; color: var(--fs-citelna-seda);
  font-size: max(15px, calc(clamp(15px, 1.15vw, 17px) * var(--k)));
}
/* Úzký detail (no-JS mřížka, velmi úzké okno): popisek nad hodnotou, nic se neřízne. */
@container (max-width: 300px) {
  .fs-detail dl > div { flex-direction: column; align-items: flex-start; gap: 2px; }
  .fs-detail dd { text-align: left; }
}
.fs-bottom { min-height: 57px; display: flex; align-items: center; justify-content: flex-end; padding: 0 var(--okraj) 12px; gap: 16px; }
.fs-paging { display: flex; align-items: center; gap: 15px; }
.fs-paging button { background: none; border: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--akcent); }
.fs-paging button:hover { background: var(--list-2); }
.fs-paging span { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-2); }
.fs-ready[data-expanded="true"] .fs-card[data-selected="true"] .fs-panel { border-radius: var(--r-panel) var(--r-panel) 0 0; }
.fs-empty { padding: 48px var(--okraj); }
/* No-JS: all supplied facts are still present and reachable. */
.fs:not(.fs-ready) .fs-scene { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 36px; padding: 36px var(--okraj); }
.fs:not(.fs-ready) .fs-cardhead { margin-bottom: 14px; }
.fs:not(.fs-ready) .fs-detail { margin-top: 24px; }
.fs:not(.fs-ready) .fs-panel, .fs:not(.fs-ready) .fs-open,
.fs:not(.fs-ready) .fs-selector, .fs:not(.fs-ready) .fs-paging { display: none; }
.fs:not(.fs-ready) .fs-vehicle { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .fs-vehicle img { transition: translate 180ms var(--fs-ease); }
  .fs:not([data-expanded="true"]) .fs-vehicle:hover img { translate: 0 -4px; }
}
@media (max-width: 900px) {
  .fs-top { padding-top: 14px; min-height: 62px; }
  .fs-selector { gap: 22px; padding-top: 8px; }
  .fs-selector button span { display: block; margin-left: 0; }
  .fs-back { font-size: 12px; gap: 4px; }
  .fs-back svg { width: 18px; }
  .fs-ready .fs-scene, .ndm-js .fs:not(.fs-ready) .fs-scene { min-height: 510px; height: max(510px, calc(100svh - var(--hlavicka) - 244px)); width: min(100%, 560px); align-self: center; }
  .fs-ready[data-expanded="true"] .fs-scene { min-height: 615px; height: max(615px, calc(100svh - var(--hlavicka) - 198px)); }
  .fs-cardhead h2 { font-size: 25px; }
  .fs-cardhead p { font-size: 14px; }
  .fs-bottom { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .fs-ready[data-expanded="true"] .fs-card[data-selected="true"] .fs-panel { border-radius: var(--r-karta); }
  .admin-bar .fs { min-height: calc(100svh - var(--hlavicka) - 46px); }
}
@media (prefers-reduced-motion: reduce) {
  .fs *, .fs *::before, .fs *::after { animation: none !important; transition: none !important; }
}

/* --- Vodoznak: název modelu na vínové ploše, oříznutý panelem ---
   Jen v rozbaleném detailu. V přehledu nese název nadpis karty; dva prvky se stejnou rolí by byl jeden navíc.
   Velikost se počítá z délky slova, aby DUCATO i TRANSIT přetekly panel stejně. */
.fs-ready .fs-panel { container-type: size; overflow: clip; }
.fs-mark {
  --fs-mark-preteceni: 1.02;   /* kolik výšky panelu slovo zabere; > 1 = oříznuté */
  --fs-mark-sirka: .66;        /* průměrná šířka verzálky Ubuntu Bold v em */
  position: absolute; left: 7%; top: 21%;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--f-text); font-weight: 700; letter-spacing: -.02em;
  font-size: calc(var(--fs-mark-preteceni) * 100cqh / (var(--fs-mark-znaku) * var(--fs-mark-sirka)));
  line-height: 1; white-space: nowrap; user-select: none;
  color: color-mix(in oklab, var(--cerv-zar) 70%, var(--bila));   /* vodoznak modelu: světlejší tón téže rodiny než box */
  opacity: 0; transition: opacity 300ms ease;
}
.fs-ready .fs-card[data-selected="true"] .fs-mark { opacity: 1; transition-delay: 140ms; }
.fs-ready[data-expanded="true"] .fs-card[data-selected="true"] .fs-mark { transition-delay: var(--fs-duration); }
.fs:not(.fs-ready) .fs-mark { display: none; }
@media (prefers-reduced-motion: reduce) { .fs-mark { transition-duration: 1ms; transition-delay: 0s; } }
@media (max-width: 900px) {
  .fs-mark { left: 6%; top: 17%; --fs-mark-preteceni: .94; }
  .fs-pozn { max-width: none; }
}


/* --- Rozbalený detail: nadpis i přepínač ustoupí, aby vínová plocha mohla přes celou výšku ---
   Jako v referenci: jakmile se vůz rozklikne, „Folding Bikes“ zmizí a panel jde až nahoru. */
.fs-ready[data-expanded="true"] .fs-top { min-height: 44px; padding-top: 10px; justify-content: flex-end; }
.fs-ready[data-expanded="true"] .fs-scene { height: max(480px, calc(100svh - var(--hlavicka) - 102px)); }
@media (max-width: 900px) {
  .fs-ready[data-expanded="true"] .fs-top { min-height: 40px; padding-top: 8px; }
  .fs-ready[data-expanded="true"] .fs-scene { min-height: 615px; height: max(615px, calc(100svh - var(--hlavicka) - 132px)); }
}


/* --- Stín: vlastní vrstva pod vozem, škáluje se s ním a jde tlumit podle podkladu --- */
.fs-stin { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: center/contain no-repeat; transition: opacity 260ms var(--fs-ease); }
.fs-vehicle img { position: relative; }
/* Na vínové ploše je stín tlumenější — tmavý podklad ho v reálu spolkne. */
.fs-card[data-selected="true"] .fs-stin { opacity: .6; }
.fs:not(.fs-ready) .fs-stin { display: none; }
@media (prefers-reduced-motion: reduce) { .fs-stin { transition-duration: 1ms; } }

/* --- Kompozice má hranice ---
   Reference je mockup ~960 px široký; roztažená přes celý široký monitor se z ní stane pás
   s prázdnem nad a pod vozy. Scéna proto dostane strop na šířku i výšku a vycentruje se.
   Poměr stran scény se tím drží blízko referenci místo 3:1. */
.fs-top, .fs-selector-obal, .fs-bottom { width: 100%; max-width: var(--fs-max); margin-inline: auto; }
.fs { --fs-max: 1680px; }
.fs-ready .fs-scene {
  width: min(100%, var(--fs-max)); margin-inline: auto;
  flex: 0 1 auto; align-self: center;
  height: min(700px, max(420px, calc(100svh - var(--hlavicka) - 340px)));
}
.fs-ready[data-expanded="true"] .fs-scene { height: min(760px, max(480px, calc(100svh - var(--hlavicka) - 102px))); }
/* Na vysoké obrazovce ať zbytek výšky zůstane kolem scény, ne pod ní. */
.fs-ready { justify-content: center; }
@media (max-width: 900px) {
  .fs-ready .fs-scene, .fs-ready[data-expanded="true"] .fs-scene { height: auto; }
}


/* --- Nadpis Vozový park: dodaný identitní wordmark ---
   Hotový asset od Kryštofa (`assets/brand/wordmark/`). Zdroj měl tvrdé schodovité hrany,
   proto je 2x nadvzorkovaný a hrany vyhlazené (blur premultiplikovaně + zúžení přechodu):
   pak vytrasovaný do vektoru (tools/image-trace.py): SVG 40 kB, ostrý v každé velikosti.
   PNG a WebP ve stejné složce jsou rastrové zdroje, ze kterých vektor vznikl.
   Barvy z assetu se nechávají tak, jak jsou — vínová značky se možná bude měnit
   a wordmark na ní nemá viset. Text v H1 zůstává pro čtečku, vyhledávač i aria-labelledby;
   vidět je jen obrázek. Při rozkliknutí ustoupí stejně jako dřív textový nadpis. */
.fs-top { justify-content: center; position: relative; padding-top: 30px;
  transition: min-height 260ms var(--fs-ease), padding-top 260ms var(--fs-ease); }
.fs-back { position: absolute; right: var(--okraj); top: 50%; translate: 0 -50%; padding-right: 0; }
.fs h1.fs-nadpis {
  width: min(80%, 880px); aspect-ratio: 4148 / 773; margin: 0 auto;
  background: url("../brand/wordmark/ndm_wordmark_vozovy-park.svg") center/contain no-repeat;
}
.fs-ready[data-expanded="true"] .fs-top { justify-content: flex-end; padding-top: 10px; min-height: 44px; }
@media (max-width: 900px) {
  .fs h1.fs-nadpis { width: min(88%, 430px); }
  .fs-top { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .fs h1.fs-nadpis { transition-duration: 1ms; } }

/* Sesednutí nadpisu při rozkliknutí.
   `position: absolute` se nedá animovat — vytrhlo nadpis z toku v nultém okamžiku a horní
   pruh skokem sesedl. Obal se proto zavírá přes grid-template-rows 1fr → 0fr, což prohlížeč
   umí plynule dopočítat. Tlačítko „Všechny vozy“ je mimo obal, takže ho sesednutí neodřízne. */
.fs-nadpis-obal { display: grid; grid-template-rows: 1fr; width: 100%; overflow: clip;
  transition: grid-template-rows 260ms var(--fs-ease), opacity 180ms ease; }
.fs-nadpis-obal > * { min-height: 0; }
.fs-ready[data-expanded="true"] .fs-nadpis-obal { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .fs-nadpis-obal { transition-duration: 1ms; } }

/* Posuvník si drží místo trvale. Při rozbalení se scéna zvětší dřív, než nadpis sesedne,
   takže stránka na okamžik přeteče — bez rezervace by v tu chvíli naskočil posuvník
   a posunul celý obsah do strany. To je půlka toho škubnutí. */
html:has(.ndm-showroom-page), .ndm-showroom-page { scrollbar-gutter: stable; }


/* Přepínač vozů se zavírá stejnou technikou jako nadpis. Původní height: auto → 0
   se neanimuje (auto není interpolovatelná hodnota), takže mizel skokem o 62 px. */
.fs-selector-obal { display: grid; grid-template-rows: 1fr; overflow: clip;
  transition: grid-template-rows 260ms var(--fs-ease), opacity 180ms ease; }
.fs-selector-obal > * { min-height: 0; }
.fs-ready[data-expanded="true"] .fs-selector-obal { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .fs-selector-obal, .fs-selector, .fs-top { transition-duration: 1ms; }
}

/* Výšku scény nastavuje JS (viz layout()); tady se jen dopraví plynule, aby se horní pruh,
   scéna i spodní lišta hýbaly v jednom tempu. CSS hodnoty výš zůstávají jako záloha bez JS. */
/* Svislé rolování zůstává nativní (prohlížeč si nechá osu Y), vodorovný swipe si bere JS.
   Bez tohohle se scroll a swipe perou o stejný prst a gesto je nespolehlivé. */
.fs-scene { touch-action: pan-y pinch-zoom; }   /* pinch-zoom zpět: samotné pan-y by zakázalo přibližování */
.fs-ready .fs-scene { transition: height 260ms var(--fs-ease); }
@media (prefers-reduced-motion: reduce) { .fs-ready .fs-scene { transition-duration: 1ms; } }

/* Údaje na jednom řádku: číslo nese váhu, jednotka ustoupí, mezi buňkami tenký oddělovač.
   Oddělovač je pseudoprvek s krytím, ne border — na vínové kartě je text bílý a plná linka
   by praštila do očí. Řádek sedí na stejné ose jako tlačítko +. */
.fs-summary p { margin: 0; display: flex; align-items: baseline; gap: .34em; white-space: nowrap; font-size: 11px; }
.fs-summary p + p { margin-left: 9px; padding-left: 9px; position: relative; }
.fs-summary p + p::before { content: ""; position: absolute; left: 0; top: -.15em; bottom: -.05em;
  width: 1px; background: currentColor; opacity: .3; }
.fs-summary b { font-size: 15px; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }


/* ==========================================================================
   Aktivní box podle referenčního obrázku (16. 9. 2026)
   Referenci přenáší co nejvěrněji: velký skoro čtvercový box, název + nástavba
   vlevo nahoře, dominantní vůz přetékající přes pravou hranu, spodní řádek údajů
   s oddělovači a bílé kruhové +. Všechny míry jsou podíly šířky boxu (--fs-karta,
   nastavuje ji JS podle stavu), takže poměry drží v přehledu, na mobilu i v detailu.
   Vodoznak modelu (.fs-mark) zůstává beze změny — podle Kryštofa je lepší než v referenci.
   ========================================================================== */
.fs {
  /* Box jede na nové identitě (#FF2800 / #D40000, PREDANI-BARVY.md). Lak vozů je H≈0,
     tedy stejná rodina — siluetu odděluje rozdíl světlosti, ne odstín. Rozložení
     přechodu se u jednotlivých vozů dolaďuje níž, podle naměřené světlosti laku. */
  --fs-box-svetla: var(--cerv-zar);
  --fs-box: var(--cerv);
  --fs-box-tmava: var(--cerv-hloub);
}

/* Tvar: velký rádius s plynulým (squircle) náběhem, ne obyčejný zaoblený obdélník.
   Prohlížeč bez corner-shape dostane běžný rádius stejné vizuální velikosti. */
.fs-ready .fs-panel { border-radius: calc(var(--fs-karta, 440px) * .066); }
.fs-ready[data-expanded="true"] .fs-card[data-selected="true"] .fs-panel {
  border-radius: calc(var(--fs-karta, 440px) * .066) calc(var(--fs-karta, 440px) * .066) 0 0;
}
@supports (corner-shape: squircle) {
  .fs-ready .fs-panel { border-radius: calc(var(--fs-karta, 440px) * .1); corner-shape: squircle; }
  .fs-ready[data-expanded="true"] .fs-card[data-selected="true"] .fs-panel {
    border-radius: calc(var(--fs-karta, 440px) * .1) calc(var(--fs-karta, 440px) * .1) 0 0;
  }
}
@media (max-width: 900px) {
  .fs-ready[data-expanded="true"] .fs-card[data-selected="true"] .fs-panel { border-radius: calc(var(--fs-karta, 440px) * .066); }
  @supports (corner-shape: squircle) {
    .fs-ready[data-expanded="true"] .fs-card[data-selected="true"] .fs-panel { border-radius: calc(var(--fs-karta, 440px) * .1); }
  }
}

/* Povrch: bohatá červená s hloubkou jako jeden čistý přechod — světlejší vlevo nahoře,
   tmavší ke spodní hraně. Šikmé plochy z reference zamítnuté: působily jako tři vrstvy barev.
   Platí pro VŠECHNY panely, ne jen vybraný. Skrytý panel stejně vidět není, a když karta při
   přejetí myší zhasíná, nesmí cestou překlopit do béžové — to probliklo při rychlém přejíždění. */
.fs-ready .fs-panel,
.fs-ready .fs-card[data-selected="true"] .fs-panel {
  /* Hloubka jako v referenci, ale bez hran: stín se šikmo zvedá zleva zdola, světlo vpravo
     nahoře, podlaha pod vozem tmavne. Všechny přechody jsou dlouhé a měkké, aby se nečetly
     jako samostatné plochy (ostré šikmé plochy Kryštof zamítl). */
  background:
    linear-gradient(to top, color-mix(in srgb, var(--cerv-noc) 46%, transparent) 0%, color-mix(in srgb, var(--cerv-noc) 17%, transparent) 20%, transparent 40%),
    linear-gradient(28deg, color-mix(in srgb, var(--cerv-noc) 46%, transparent) 0%, color-mix(in srgb, var(--cerv-noc) 22%, transparent) 32%, transparent 58%),
    linear-gradient(28deg, rgb(255 255 255 / 0) 50%, rgb(255 255 255 / .08) 74%, rgb(255 255 255 / .16) 100%),
    linear-gradient(160deg, var(--fs-box-svetla) 0%, var(--fs-box) 52%, var(--fs-box-tmava) 100%) var(--fs-box);
}
/* Doladění pole podle konkrétního vozu (PREDANI-BARVY.md §2b).
   Naměřená světlost laku na cutoutech: Ducato plachta 36, Transit 38, Ducato skříň 38,
   Master skříň 45. Lak je H≈0, tedy stejná rodina jako pole.

   Samotná světlost ale nestačí — rozhoduje i to, jestli má vůz nečervenou hmotu, která
   siluetu rozbije. Ducato plachta má tmavou plachtovou skříň a Transit bílou kabinu,
   takže na světlém poli drží tvar. Obě SKŘÍNĚ jsou hladké červené krabice bez takového
   kontrastu a na světlém poli se jim slévá horní hrana (ověřeno pohledem, ne jen měřením).
   Dostávají proto pole posunuté o stupeň hlouběji; vůz je pak světlejší než podklad po
   celé ploše. Opačně to neplatí: tmavá plachta na hlubokém poli zezdola zamrzne.
   Mění se výhradně rozložení tónů — žádný outline, glow ani rim light. */
.fs-card[data-fs-card="ducato-skrin"],
.fs-card[data-fs-card="master-skrin"] {
  --fs-box-svetla: var(--cerv);
  --fs-box: var(--cerv-hloub);
  --fs-box-tmava: var(--cerv-noc);
}
/* Ze stejného důvodu je text i tlačítko + na kartě bílé trvale, ne až po výběru. */
.fs-ready .fs-cardhead, .fs-ready .fs-summary { color: var(--bila); }
.fs-ready .fs-summary p { color: rgb(255 255 255 / .9); }
.fs-ready .fs-summary b { color: var(--bila); }
.fs-ready .fs-open,
.fs-ready .fs-card[data-selected="true"] .fs-open { background: var(--bila); color: var(--fs-box); }
.fs-ready .fs-open:focus-visible { outline-color: var(--bila); }

/* Typografie vlevo nahoře: velký název, menší nástavba. Malá značka nad názvem z reference
   se nepřebírá (rozhodnutí Kryštofa) — horní hrana verzálek sedí na stejném odsazení jako levý okraj. */
.fs-ready .fs-cardhead h2 {
  font-size: calc(var(--fs-karta, 400px) * .09); line-height: 1.05; letter-spacing: -.02em; margin-top: 0;
}
.fs-ready .fs-cardhead p {
  font-size: calc(var(--fs-karta, 400px) * .042); line-height: 1.2; opacity: .9;
  margin-top: calc(var(--fs-karta, 400px) * .0094);
}

/* Spodní řádek: větší, čitelný, rozestavěný jako v referenci. Oddělovač zůstává
   pseudoprvkem s krytím; výšku i mezery bere z šířky boxu. */
.fs-ready .fs-summary { align-items: center; }
.fs-ready .fs-summary p { font-size: max(12px, calc(var(--fs-karta, 400px) * .036)); gap: .3em; }
.fs-ready .fs-summary b { font-size: max(13px, calc(var(--fs-karta, 400px) * .038)); font-weight: 500; }
.fs-ready .fs-summary p + p {
  margin-left: max(9px, calc(var(--fs-karta, 400px) * .047));
  padding-left: max(9px, calc(var(--fs-karta, 400px) * .047));
}
.fs-ready .fs-summary p + p::before {
  top: 50%; bottom: auto; height: calc(var(--fs-karta, 400px) * .063); translate: 0 -50%; opacity: .32;
}

/* Tlačítko +: bílý kruh vpravo dole na ose řádku, plus v červené boxu. Rozměr dává JS. */
.fs-ready .fs-open { border-radius: 50%; }
.fs-ready .fs-open:hover { box-shadow: 0 8px 22px color-mix(in srgb, var(--cerv-noc) 34%, transparent); }
.fs .fs-open svg { width: 46%; height: 46%; stroke-width: 2.6; }

/* Stín pod vozem: na plné červené se tlumený stín ztrácel a vůz plaval. V referenci stojí
   na podlaze boxu s jasným kontaktem pod koly. */
.fs-ready .fs-card[data-selected="true"] .fs-stin { opacity: .85; }
/* Větší měkký stín pod vozem v boxu: vůz jako by stál na podlaze a vrhal stín dopředu i dozadu.
   Je součástí vozu, takže jede a škáluje se s ním. Zem je ve 3/4 pohledu šikmá (zadní kolo výš),
   proto mírné pootočení. Neutrální černá: na červené prohloubí, na bílé je to obyčejný stín. */
.fs-ready .fs-vehicle::before {
  content: ""; position: absolute; left: 4%; right: 0; top: 83%; height: 16%; z-index: 0;
  background: radial-gradient(closest-side, rgb(0 0 0 / .5), rgb(0 0 0 / .22) 55%, rgb(0 0 0 / 0));
  rotate: -3deg; pointer-events: none; opacity: 0; transition: opacity 260ms var(--fs-ease);
}
.fs-ready .fs-card[data-selected="true"] .fs-vehicle::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fs-ready .fs-vehicle::before { transition-duration: 1ms; } }


/* ==========================================================================
   Přepínač vozů podle reference (16. 9. 2026)
   Pod wordmarkem na středu, větší a v řezu Medium. Míry jsou odměřené z reference poměrem
   k šířce wordmarku (tam 760 px): řádek ≈ 1,08 × wordmark, název 2,67 % (podle šířky slov),
   nástavba 2,2 %, mezera mezi vozy 5,7 %, mezi názvem a nástavbou 1,3 %. Wordmark je do ~1200 px okna ≈ 73 % šířky, pak strop 880 px —
   proto vw se stropem. Ubuntu Medium má stejný poměr šířky k výšce verzálek jako písmo
   reference, takže při správné velikosti a řezu přestane text působit úzce.
   ========================================================================== */
.fs-selector {
  gap: clamp(22px, 4.16vw, 50px);
  padding-top: clamp(8px, 1.55vw, 19px);
  /* overflow-x: auto automaticky zapne i overflow-y: auto. Když se přepínač po kliknutí na vůz
     sbaluje (260 ms), jeho obsah na chvíli přeteče dolů a na pravém kraji probliklo svislé
     posuvátko. Svisle se tu posouvat nemá co — vodorovné posouvání na mobilu zůstává. */
  overflow-y: hidden;
  transition: padding 260ms var(--fs-ease);
}
/* V detailu se přepínač sbalí (grid 1fr → 0fr), ale vnitřní odsazení by zůstalo — po zvětšení
   přepínače 23 px, o které stránka přetekla a šla posunout. Odsazení se proto sbalí taky. */
.fs-ready[data-expanded="true"] .fs-selector { padding-top: 0; padding-bottom: 0; }
/* Na střed, ale bezpečně: auto okraje se při přetečení (mobil) vynulují a řádek jde posouvat
   od začátku. justify-content: center by první vůz uřízl mimo posuvnou oblast. */
.fs-selector > :first-child { margin-left: auto; }
.fs-selector > :last-child { margin-right: auto; }
.fs-selector button {
  font-size: clamp(15px, 1.95vw, 23.5px); font-weight: 500; line-height: 1.5;
  padding: .3em 0 .47em; color: var(--text-2);
}
.fs-selector button span { margin-left: .3em; font-size: clamp(12px, 1.63vw, 19.6px); font-weight: 400; opacity: .85; }
/* Aktivní vůz v červené wordmarku a boxu, ne v laku — celá hlavička tak drží jednu červenou. */
.fs-selector button[aria-pressed="true"] { color: var(--fs-box); border-color: var(--fs-box); }
.fs-selector button[aria-pressed="true"] span { opacity: 1; }
.fs-selector button:hover { color: var(--fs-box); }
@media (max-width: 900px) {
  .fs-selector button span { margin-left: 0; }
}


/* ==========================================================================
   Stuhy v pozadí — vodoznak cesty (pokus, 16. 9. 2026)
   Asset: assets/brand/pozadi/ndm_pozadi_stuhy.svg — vektorizovaný tvar Kryštofa,
   tón po délce odebraný z jeho reference. Kompozice podle jeho náhledu: stuha vybíhá
   špičkou pod začátkem přepínače, rozšiřuje se za vozy a končí za pravým okrajem okna.
   Polohu a výšku dává JS (umistiStuhy) z rozvržení přehledu; SVG se do boxu roztáhne
   (preserveAspectRatio="none"). Krytí ~12 % odpovídá růžové z náhledu na bílé.
   Leží ve vlastní vrstvě pod vším obsahem sekce, na klikání nemá vliv.
   ========================================================================== */
.fs-ready { position: relative; }
.fs-ready::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: var(--fs-stuhy-x, 30%); right: 0;
  top: var(--fs-stuhy-y, 30%); height: var(--fs-stuhy-h, 45%);
  background: url("../brand/pozadi/ndm_pozadi_stuhy.svg") 0 0 / 100% 100% no-repeat;
  /* Špička se ztrácí do bílé: úzký konec nemá tvrdě začínat, plnou sílu stuha nabere až za třetinou. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .25) 16%, rgb(0 0 0 / .75) 34%, #000 50%);
  mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .25) 16%, rgb(0 0 0 / .75) 34%, #000 50%);
  opacity: .12;
  transition: opacity 260ms var(--fs-ease);
}
/* V detailu jde vpravo přes stuhu text parametrů — stuha ustoupí, ať nepřekáží čtení. */
.fs-ready[data-expanded="true"]::before { opacity: .05; }
@media (prefers-reduced-motion: reduce) { .fs-ready::before { transition-duration: 1ms; } }

/* Iveco 35S a Trafic: stín nese výhradně samostatná černá alfa vrstva.
   Vůz se při hoveru zvedá sám; kontaktní a ambientní složka zůstávají na zemi. */
.fs-ready .fs-card:is([data-fs-card="iveco-plachta"], [data-fs-card="trafic-furgon"]) .fs-vehicle::before {
  content: none;
}
.fs-ready:not([data-expanded="true"]) .fs-card:is([data-fs-card="iveco-plachta"], [data-fs-card="trafic-furgon"]) .fs-stin {
  opacity: .6;
}
.fs-ready[data-expanded="true"] .fs-card:is([data-fs-card="iveco-plachta"], [data-fs-card="trafic-furgon"]) .fs-stin {
  opacity: .85;
}