/* Karavany Humpolec — layout nad design systémem Modernist.
   Barvy, typografii a spacing bereme z _ds/.../styles.css (var(--*)). */

:root { --page: 1280px; --gut: var(--space-6); }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-size: 16px; }
main { display: block; }
img { max-width: 100%; height: auto; }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gut); }

/* ── typografie ─────────────────────────────────────────────── */
h1 { font-size: clamp(34px, 6vw, 64px); letter-spacing: -0.02em; }
h2 { font-size: clamp(26px, 3.6vw, 40px); }
h3 { font-size: clamp(20px, 2.4vw, 27px); }
.kicker {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-700); margin: 0 0 var(--space-3);
}
.lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; max-width: 62ch; }
.prose { max-width: 68ch; }
.prose p { margin-bottom: var(--space-4); text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums; }

/* ── sekce a linky ──────────────────────────────────────────── */
.sec { padding-block: clamp(40px, 6vw, 88px); border-top: 2px solid var(--color-divider); }
.sec-first { border-top: 0; }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-8); margin-bottom: var(--space-8); }
.sec-head h2 { margin: 0; }
.sec-head .sec-note { max-width: 46ch; font-size: 15px; margin: 0; }

/* ── grid ───────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--space-6); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: start; }

/* ── hlavička ───────────────────────────────────────────────── */
.topbar {
  background: var(--color-text); color: var(--color-bg);
  font-size: 13px; letter-spacing: 0.02em;
}
.topbar .wrap { display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: var(--space-2) var(--space-6); padding-top: 12px; padding-bottom: 2px; }
.topbar a { color: var(--color-bg); text-decoration: none; }
.topbar a:hover { color: var(--color-accent-400); }
.topbar .spacer { margin-left: auto; }
#aktuality { scroll-margin-top: 20px; }
.topbar-social {
  flex-basis: 100%; display: flex; justify-content: flex-end; align-items: center;
  gap: var(--space-3); margin-top: 2px;
}
.topbar-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
}
.topbar-social svg { width: 28px; height: 28px; transition: transform .15s ease; }
.topbar-social a:hover svg { transform: scale(1.12); }

.head { position: sticky; top: 0; z-index: 40; background: var(--color-bg); border-bottom: 2px solid var(--color-divider); }
.head .wrap { display: flex; align-items: center; gap: var(--space-6); min-height: 76px; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-decoration: none; color: inherit; margin-right: auto; }
.brand img { display: block; height: 46px; width: auto; max-width: none; flex: none; mix-blend-mode: multiply; }
.brand span { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.mainnav ul { display: flex; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.mainnav a {
  color: inherit; text-decoration: none; font-size: 14.5px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  padding: 4px 0; border-bottom: 2px solid transparent; display: block;
}
.mainnav a:hover { color: var(--color-accent); }
.mainnav a[aria-current="page"] { border-bottom-color: var(--color-accent); }
.head .btn-primary { flex: none; }

.navtoggle { display: none; }
.burger { display: none; }

/* ── hero ───────────────────────────────────────────────────── */
.hero { border-bottom: 2px solid var(--color-divider); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(36px, 5vw, 76px) 0; }
.hero h1 { margin-bottom: var(--space-4); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.btn { min-height: 46px; padding: var(--space-3) var(--space-4); font-size: 15px; justify-content: flex-start; }
.btn-lg { min-height: 54px; font-size: 16px; padding-inline: var(--space-6); }

/* ── obrázkové placeholdery ─────────────────────────────────── */
.ph {
  display: grid; place-items: center; text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  padding: var(--space-4);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  aspect-ratio: 4 / 3;
}
.ph-wide { aspect-ratio: 16 / 9; }
.ph-tall { aspect-ratio: 3 / 4; }
.ph-sq { aspect-ratio: 1 / 1; }
figure img { width: 100%; height: 100%; object-fit: cover; }

/* ── čísla / fakta ──────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--color-divider); }
.stats div { padding: var(--space-6) var(--space-4) var(--space-6) 0; border-right: 1px solid var(--color-divider); }
.stats div:last-child { border-right: 0; }
.stats dt { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-bottom: var(--space-2); }
.stats dd { margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(28px, 3.5vw, 44px); line-height: 1; }

/* ── karty ──────────────────────────────────────────────────── */
.card { padding: 0; background: transparent; gap: 0; }
.card .ph, .card figure { margin-bottom: var(--space-4); }
/* Dlazdice clanku se skutecnou fotkou (misto .ph placeholderu) - NE
   figure, protoze sitovy vzor 'figure img{width:100%;height:100%;
   object-fit:cover}' by obrazek orizl/deformoval. Width:100%+height:auto
   zachova presny puvodni pomer stran bez orezu. */
.card-tile-foto img { display: block; width: 100%; height: auto; margin-bottom: var(--space-4); }
.card-tile-link { display: block; text-decoration: none; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-tile-link:hover, .card-tile-link:focus-visible { transform: translateY(-4px) scale(1.015); box-shadow: var(--shadow-lg); }
.card-tile-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
/* Rady a tipy - dlazdice je ted primo soucasti .sec-first (misto vlastni
   druhe .sec sekce), aby zmizela sedа delici cara i zdvojene mezery.
   Mala kontrolovana mezera pod kickerem/oranzovou linkou misto toho. */
.rady-a-tipy-dlazdice { margin-top: clamp(25px, 3vw, 35px); }

/* Dlazdice Zazimovani - text ZAZIMOVANI uz neni soucasti fotky, ale
   samostatna HTML/CSS vrstva pres cistou fotografii (bez textu), aby
   sel text kdykoli snadno zmenit. Zaoblene rohy a jemne zesvetleni dole
   resi cistě CSS, puvodni fotka uz rohy ani gradient neobsahuje. */
.card-tile-foto--popisek { position: relative; overflow: hidden; border-radius: 16px; }
.card-tile-foto--popisek img { margin-bottom: 0; }
.card-tile-foto-stin {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.card-tile-foto-nadpis {
  position: absolute; left: 0; right: 0; bottom: clamp(8px, 2%, 14px);
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(22px, 3vw, 32px); letter-spacing: 0.02em; text-transform: uppercase;
  color: #000f3d; text-align: center; line-height: 1;
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.55);
}
.card-tile-foto-linka { display: block; width: 56px; height: 3px; background: #c84e00; margin-top: 10px; }

/* Clanek Zazimovani se na strance Rady a tipy nacita a zobrazuje primo
   v ramci teto stranky (JS fetch + vymena obsahu), misto otevirani nove
   zalozky - hlavicka a navigace zustavaji, puvodni prehled dlazdic se
   skryje. Viz rady-a-tipy-clanek.js. */
#clanek-obal { background: #fff; }
.clanek-zpet-obal { padding-top: clamp(20px, 3vw, 32px); }
.clanek-zpet {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; color: #000f3d; transition: color 0.2s ease;
}
.clanek-zpet:hover, .clanek-zpet:focus-visible { color: #c84e00; }

/* Clanek Zazimovani (samostatna stranka) - firemni tmavemodra/oranzova
   presne dle zadani (#000f3d/#c84e00), stejny odstin jako hero/CTA
   prvky na strankach Rimor/Eura Mobil/Masuria, misto obecnejsich
   sitovych promennych --navy/--orange (jine odstiny). Zbytek stranky
   (layout, .prose, .sec, hlavicka, paticka) je beze zmeny prevzat ze
   zbytku webu. */
.zazimovani-clanek h1, .zazimovani-clanek h2 { color: #000f3d; }
.zazimovani-clanek strong { color: #000f3d; }

/* Redesign clanku Zazimovani na magazinovy format - kompaktni uvod,
   velka fotografie, centralni sloupec ~960px, cislovane kroky s
   vyraznym oranzovym cislem, jeden zvyrazneny info box a mala
   orientacni lista. Zbytek webu (layout, .sec, hlavicka/paticka)
   beze zmeny. */
.zazimovani-intro { padding-bottom: clamp(18px, 3vw, 28px); }
.zazimovani-intro h1 { margin: 0 0 var(--space-4); max-width: 26ch; }
.zazimovani-intro-grid {
  display: grid; grid-template-columns: 1fr 390px;
  gap: clamp(24px, 4vw, 48px); align-items: center;
  margin-top: var(--space-5);
}
.zazimovani-intro-text .lead { margin: 0; color: color-mix(in srgb, #000f3d 78%, transparent); }
/* Obrazek nestretovan na celou sirku bunky (350px < 390px sloupce),
   takze zustava zarovnany vlevo bunky a vpravo od nej vznika prirozeny
   odstup od praveho okraje clanku. */
.zazimovani-intro-foto { width: 350px; }
.zazimovani-intro-foto img { display: block; width: 100%; height: auto; border-radius: 14px; }
@media (max-width: 760px) {
  .zazimovani-intro-grid { grid-template-columns: 1fr; }
  .zazimovani-intro-foto { width: 100%; }
}

.zazimovani-body { padding-top: 0; padding-bottom: clamp(4px, 1vw, 16px); }
.zazimovani-col { max-width: 960px; margin-inline: auto; }

.zazimovani-orientace { margin: 0 0 clamp(20px, 3vw, 32px); }
.zazimovani-orientace-nadpis {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #000f3d; margin: 0;
}
.zazimovani-orientace-nadpis::after {
  content: ""; display: block; width: 44px; height: 3px;
  background: #c84e00; margin-top: var(--space-2);
}
.zazimovani-orientace-seznam {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: var(--space-4) 0 0; padding: 0;
}
/* Dlazdice jsou zaroven kotva-odkazy na prislusny krok clanku (rychla
   navigace) - vizual zustava stejny jako predtim, styl jen presunut z li
   na vnitrni <a>, pridan cursor a jemne zvyrazneni hover/focus stavu. */
.zazimovani-orientace-seznam li a {
  position: relative; display: block;
  background: color-mix(in srgb, #000f3d 5%, #fff);
  color: #000f3d; font-size: 14px; font-weight: 600;
  padding: 7px 16px 7px 28px; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.zazimovani-orientace-seznam li a::before {
  content: ""; position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%); width: 6px; height: 6px;
  border-radius: 50%; background: #c84e00;
}
.zazimovani-orientace-seznam li a:hover,
.zazimovani-orientace-seznam li a:focus-visible {
  background: color-mix(in srgb, #000f3d 12%, #fff);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.zazimovani-orientace-seznam li a:focus-visible {
  outline: 2px solid #c84e00; outline-offset: 2px;
}

.zazimovani-krok {
  display: grid; grid-template-columns: 88px 1fr; gap: var(--space-5);
  padding: clamp(24px, 3vw, 32px) 0; border-top: 1px solid var(--color-divider);
  scroll-margin-top: 120px;
}
.zazimovani-krok:first-of-type { border-top: 0; padding-top: 0; }
.zazimovani-krok-cislo {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 4vw, 48px); line-height: 1; margin: 0; color: #c84e00;
}
.zazimovani-krok-obsah h2 { font-size: clamp(19px, 2.2vw, 24px); margin: 0 0 var(--space-3); }
.zazimovani-krok-obsah p { margin: 0 0 var(--space-3); font-size: 15.5px; line-height: 1.6; }
.zazimovani-krok-obsah p:last-child { margin-bottom: 0; }
.zazimovani-box {
  background: color-mix(in srgb, #000f3d 6%, #fff);
  border-left: 4px solid #c84e00;
  padding: var(--space-4); margin-top: var(--space-3);
  font-size: 15px; line-height: 1.55;
}
@media (max-width: 640px) {
  .zazimovani-krok { grid-template-columns: 52px 1fr; gap: var(--space-3); }
  .zazimovani-krok-cislo { font-size: 26px; }
}
.card-title { font-size: 21px; }
.katalog-karta-nazev-odkaz { color: inherit; text-decoration: none; cursor: pointer; }
.card-body { font-size: 15px; opacity: 0.85; }
.card-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; font-size: 14px; }
.card-list li { display: flex; justify-content: space-between; gap: var(--space-4); padding: 7px 0; border-top: 1px solid var(--color-divider); }
.card-list li b { font-weight: 600; }

/* Fotogalerie/slider v karte vozu (pujcovna.html, "Vozy k zapujceni") -
   jeden <img>, jehoz src prepina JS mezi sipkami. */
.card-galerie-ramec {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--color-divider); background: var(--color-surface);
  margin-bottom: var(--space-4);
}
/* object-fit:contain (misto cover), aby byl vzdy videt cely vuz beze
   zmeny pomeru stran - prioritou je zobrazit celou fotografii, ne
   vyplnit ramecek za cenu oriznuti. Sirsi pomer stran 16:9 (misto
   sdileneho 4:3 z .ph) lip sedi na siroke exterierove snimky obytnych
   vozu a snizuje prazdne pruhy nahore/dole; scopovano jen na tuto
   sekci (#vozy-k-zapujceni), aby se nedotklo .ph na jinych strankach. */
#vozy-k-zapujceni .ph, #vozy-k-zapujceni .card-galerie-ramec, #vozy-k-zapujceni .card-foto-ramec { aspect-ratio: 16 / 9; }
.card-galerie-obrazek { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center center; display: block; }
/* Jednoducha jedna fotka bez galerie/sipek (napr. Masuria 780 TL) - stejny
   ramecek jako .card-galerie-ramec, jen bez interaktivnich prvku. */
.card-foto-ramec {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--color-divider); background: var(--color-surface);
  margin-bottom: var(--space-4);
}
.card-foto-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }
/* Puvodni foto je siroky panoramaticky zaber (2,17:1) v uzsim 16:9 ramecku -
   cover tedy ořezává jen po stranach (vyska/strecha vozu zustava cela vzdy),
   vuz na snimku ale nesedi presne uprostred sirky, je posunuty vic doleva
   (vpravo je hlavne pozadi/dalsi vozy) - posunuta object-position tedy
   ubira orez hlavne z prave strany, aby zustal cely vuz vcetne zadi v zaberu. */
.card-foto-masuria { object-position: 42% center; }
/* Vyraznejsi VIP stitek v rohu fotky - oranzovy podklad, vetsi a citelnejsi
   text, porad ale bez gradientu/zare/stinu, aby nepusobil jako akcni sleva. */
.card-foto-stitek {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  background: #c84e00; color: #fff;
  padding: 6px 14px; border-radius: 5px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
}
.card-galerie-sipka {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: color-mix(in srgb, #000f3d 55%, transparent); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.15s ease;
}
.card-galerie-sipka:hover { background: var(--orange); }
.card-galerie-sipka svg { width: 18px; height: 18px; }
.card-galerie-sipka--vlevo { left: 8px; }
.card-galerie-sipka--vpravo { right: 8px; }
.card-galerie-pocet {
  position: absolute; right: 8px; bottom: 8px; z-index: 1;
  padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, #000f3d 55%, transparent); color: #fff;
  font-size: 11px; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
}
.card .btn { margin-top: var(--space-4); }

.tile { border-top: 2px solid var(--color-divider); padding-top: var(--space-4); }
.tile h3 { margin-bottom: var(--space-2); }
.tile p { font-size: 15px; margin-bottom: var(--space-3); }
.tile .more { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; text-decoration: none; }
.tile .more:hover { text-decoration: underline; }

/* ── poster (červená plocha) ────────────────────────────────── */
.poster { background: var(--color-accent); color: var(--color-bg); }
.poster .wrap { padding-block: clamp(44px, 6vw, 92px); }
.poster h2 { font-size: clamp(30px, 5vw, 58px); max-width: 24ch; margin-bottom: var(--space-4); }
.poster p { max-width: 52ch; font-size: 18px; }
.poster a.btn-primary { background: var(--color-text); color: var(--color-bg); }
.poster a.btn-primary:hover { background: var(--color-neutral-900); }
.poster a.btn-secondary { border-color: var(--color-bg); color: var(--color-bg); }
.poster a.btn-secondary:hover { background: color-mix(in srgb, #fff 16%, transparent); }

/* ── tabulky ────────────────────────────────────────────────── */
.table { font-size: 15px; }
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 560px; }
.spec { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec th, .spec td { text-align: left; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.spec th { width: 42%; font-weight: 400; color: color-mix(in srgb, var(--color-text) 60%, transparent); }

/* ── formulář ───────────────────────────────────────────────── */
form .grid { gap: var(--space-4); }
.field { margin-bottom: var(--space-4); }
.input { min-height: 46px; font-size: 15px; }
textarea.input { min-height: 130px; }
.consent { display: flex; gap: var(--space-3); font-size: 13.5px; align-items: flex-start; margin-bottom: var(--space-4); }
.consent input { margin-top: 3px; accent-color: var(--color-accent); width: 18px; height: 18px; }

/* ── FAQ ────────────────────────────────────────────────────── */
/* Poradna (faq.html) - otazky jsou trvale rozbalene (zadny accordion,
   zadne +/-), otazka a odpoved jsou vzdy videt spolecne, jen vizualne
   oddelene delici carou. Cislovani pres CSS counter zustava. */
.faq { counter-reset: faq-cislo; }
.faq-polozka { counter-increment: faq-cislo; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-divider); }
.faq-polozka:first-child { padding-top: 0; }
.faq-polozka:last-child { border-bottom: 0; }
.faq-polozka h3 {
  display: flex; align-items: center; gap: var(--space-4);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px;
  color: #000f3d; margin: 0 0 8px;
}
.faq-polozka h3::before {
  content: counter(faq-cislo); flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.faq-polozka p { margin: 0 0 0 46px; color: color-mix(in srgb, #000f3d 76%, transparent); line-height: 1.6; }
.poradna-uvod { padding-bottom: clamp(8px, 1.5vw, 16px); }
.poradna-otazky { border-top: 0; padding-top: 0; padding-bottom: clamp(16px, 2.5vw, 28px); }
main:has(#poptavka-poradna) + footer.foot { margin-top: 0; }

/* ── kontaktní osoby ────────────────────────────────────────── */
.person { border-top: 2px solid var(--color-divider); padding-top: var(--space-4); }
.person h3 { font-size: 20px; margin-bottom: 2px; }
.person .role { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: var(--space-3); }
.person a { display: block; text-decoration: none; font-size: 16px; color: inherit; }
.person a:hover { color: var(--color-accent); }

/* ── drobečky ───────────────────────────────────────────────── */
.crumbs { display: none; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.crumbs li::after { content: "/"; margin-left: var(--space-2); color: var(--color-divider); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--color-accent); }

/* ── patička ────────────────────────────────────────────────── */
.foot { background: var(--color-text); color: var(--color-bg); margin-top: clamp(48px, 6vw, 96px); }
.foot .wrap { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(20px, 3vw, 32px); }
.foot-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.foot h2, .foot h3 { color: var(--color-bg); }
.foot h3 { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, #fff 55%, transparent); margin-bottom: var(--space-4); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: var(--space-2); white-space: nowrap; }
.foot a { color: var(--color-bg); text-decoration: none; font-size: 14.5px; }
.foot a:hover { color: var(--color-accent-400); }
.foot .fine { border-top: 1px solid color-mix(in srgb, #fff 22%, transparent); margin-top: var(--space-8); padding-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: 12.5px; color: color-mix(in srgb, #fff 60%, transparent); }
.foot .brandline b { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 22px; display: block; margin-bottom: var(--space-2); }
.foot .brandline b i { font-style: normal; color: var(--color-accent-400); }
.foot .brandline p { font-size: 14px; color: color-mix(in srgb, #fff 70%, transparent); max-width: 34ch; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space-4); top: var(--space-4); z-index: 99; background: var(--color-accent); color: #fff; padding: var(--space-3); }

/* past na roboty ve formulářích — schované pro lidi, viditelné pro bota, co vyplní vše */
.past-bot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── slideshow akcí ─────────────────────────────────────────── */
.slideshow { position: relative; border-bottom: 2px solid var(--color-divider); }
.slides { display: grid; }
.slide {
  grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility .5s;
}
.slide.is-on { opacity: 1; visibility: visible; }
.slide-in {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(32px, 4.5vw, 68px) 0 clamp(56px, 6vw, 88px);
}
.slide h1, .slide h2 { margin-bottom: var(--space-4); }
.slide h2.slide-title { font-size: clamp(34px, 6vw, 64px); letter-spacing: -0.02em; }
.slide .tag { margin-bottom: var(--space-4); }
.slide-media { position: relative; }
.slide-media .ph { aspect-ratio: 16 / 10; }
.slide-stamp {
  position: absolute; left: 0; bottom: 0;
  background: var(--color-accent); color: var(--color-bg);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
}
.slide-controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  pointer-events: none;
}
.slide-controls .wrap {
  display: flex; align-items: center; gap: var(--space-4);
  padding-bottom: var(--space-4);
}
.slide-controls > .wrap > * { pointer-events: auto; }
.dots { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.dot-btn {
  width: 34px; height: 6px; padding: 0; cursor: pointer;
  background: var(--color-neutral-400); border: 0;
}
.dot-btn[aria-selected="true"] { background: var(--color-accent); }
.dot-btn:hover { background: var(--color-accent-400); }
.slide-count {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin-left: auto; font-variant-numeric: tabular-nums;
}
.arrow {
  width: 44px; height: 44px; flex: none; cursor: pointer;
  display: grid; place-items: center;
  background: var(--color-bg); border: 2px solid var(--color-divider);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px;
  color: var(--color-text);
}
.arrow:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }

/* ── značkový pás ───────────────────────────────────────────── */
.brandstrip { border-top: 2px solid var(--color-divider); }
.brandstrip .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) clamp(24px, 5vw, 64px); padding-block: var(--space-6); }
.brandstrip span:first-child { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.brandstrip a {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(17px, 2vw, 24px); letter-spacing: -0.01em;
  text-decoration: none; color: var(--color-text);
}
.brandstrip a:hover { color: var(--color-accent); }

/* ── číslované sekce a citace ───────────────────────────────── */
.sec-num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.14em; color: var(--color-accent);
  border-top: 2px solid var(--color-accent); padding-top: var(--space-2);
  display: inline-block; margin-bottom: var(--space-4);
}
.tile-num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 30px; line-height: 1; color: var(--color-neutral-400);
  margin-bottom: var(--space-3);
}
.band { border-top: 2px solid var(--color-divider); }
.band figure.ph { aspect-ratio: 21 / 8; border-left: 0; border-right: 0; }
.quote { border-top: 2px solid var(--color-divider); }
.quote .wrap { padding-block: clamp(40px, 6vw, 88px); }
.quote blockquote {
  margin: 0; max-width: 30ch;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(26px, 4vw, 46px); line-height: 1.1; letter-spacing: -0.02em;
}
.quote figcaption { font-size: 13px; margin-top: var(--space-6); letter-spacing: 0.06em; text-transform: uppercase; }

/* ── responzivita ───────────────────────────────────────────── */
@media (max-width: 1080px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 940px) {
  .burger {
    display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer;
    font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px;
    border: 1px solid var(--color-divider); padding: var(--space-3) var(--space-4); min-height: 46px;
  }
  .mainnav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--color-bg); border-bottom: 2px solid var(--color-divider);
    display: none; padding: var(--space-2) var(--gut) var(--space-6);
  }
  .navtoggle:checked ~ .mainnav { display: block; }
  .mainnav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .mainnav li { border-top: 1px solid var(--color-divider); }
  .mainnav a { padding: var(--space-4) 0; font-size: 17px; border-bottom: 0; }
  .mainnav a[aria-current="page"] { color: var(--color-accent); }
  .head .wrap { position: relative; }
  .head .btn-primary { display: none; }
  .hero-in, .split { grid-template-columns: minmax(0, 1fr); }
  .slide-in { grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(64px, 12vw, 96px); }
  .slide-media { order: -1; }
  .ph-tall { aspect-ratio: 4 / 3; }
  .ph { aspect-ratio: 16 / 10; }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats div:nth-child(2) { border-right: 0; }
  .stats div:nth-child(-n+2) { border-bottom: 1px solid var(--color-divider); }
}
@media (max-width: 640px) {
  :root { --gut: var(--space-4); }
  .brand img { height: 38px; }
  .brand span { display: none; }
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .topbar .spacer { margin-left: 0; }
  .topbar .hide-sm { display: none; }
  .actions .btn { width: 100%; }
  .slide-controls .wrap { gap: var(--space-3); }
  .arrow { width: 40px; height: 40px; }
  .dot-btn { width: 22px; }
  .band figure.ph { aspect-ratio: 4 / 3; }
}

@media print {
  .head, .topbar, .foot, .crumbs { display: none; }
  body { background: #fff; }
}

/* ══ Značková vrstva Karavany Humpolec ═══════════════════════════════════
   Navy + oranžová podle loga a stávajícího webu. Struktura (ploché plochy,
   2px linky, Archivo, nulový radius, modulární mřížka) zůstává z Modernistu. */
:root {
  --navy: #14225c;
  --navy-deep: #0d1740;
  --orange: #f7941e;

  --color-bg: #ffffff;
  --color-surface: #f2f4fa;
  --color-text: #14225c;
  --color-accent: #f7941e;
  --color-accent-2: #14225c;
  --color-divider: color-mix(in srgb, #14225c 30%, transparent);

  --color-accent-100: #fff6e8;
  --color-accent-200: #ffe7c2;
  --color-accent-300: #fdd193;
  --color-accent-400: #fbb457;
  --color-accent-500: #f7941e;
  --color-accent-600: #e07c07;
  --color-accent-700: #b35f00;
  --color-accent-800: #85470a;
  --color-accent-900: #55300c;
}
a { color: var(--color-accent-700); }
a:hover { color: var(--navy); }
.kicker { color: var(--color-accent-700); }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }

/* tlačítka v barvách značky */
.btn-primary { background: var(--orange); color: var(--navy); }
.btn-primary:hover { background: var(--color-accent-600); color: #fff; }
.btn-primary:active { background: var(--color-accent-700); color: #fff; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-deep); color: #fff; }
.btn-secondary { border: 2px solid var(--navy); }
.btn-secondary:hover { background: var(--color-surface); }

/* horní lišta a hlavička */
.topbar { background: var(--navy-deep); }
.topbar a:hover { color: var(--orange); }
.mainnav a { text-transform: uppercase; letter-spacing: 0.015em; font-size: 12.5px; }
.mainnav a[aria-current="page"] { border-bottom-color: var(--orange); color: var(--orange); }
.mainnav a:hover { color: var(--color-accent-700); }
.head { border-bottom: 2px solid var(--color-divider); }

/* mensi pocet polozek v menu (6) rozprostrit rovnomerne do volneho prostoru
   po logu, misto shluku u praveho okraje - jen na sirkach nad mobilnim menu */
@media (min-width: 941px) {
  .mainnav { flex: 1; min-width: 0; }
  .mainnav ul { justify-content: space-between; }
}
.brand img { mix-blend-mode: normal; }

/* bannerová slideshow */
.banners { position: relative; background: var(--navy-deep); overflow: hidden; }
.banners .slides { display: grid; }
.banner-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; }
.banner-slide.is-on { opacity: 1; visibility: visible; }
.banner-slide > a > img { display: block; }
.banner-slide .ph {
  aspect-ratio: 1920 / 620; border: 0; background: var(--color-surface);
  color: var(--navy); font-size: 12px; letter-spacing: 0.1em;
}
.banner-slide img { width: 100%; height: auto; }
.banners .arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border: 0; border-radius: 0;
  background: color-mix(in srgb, var(--navy) 72%, transparent); color: #fff;
  font-size: 20px; z-index: 3;
}
.banners .arrow:hover { background: var(--orange); color: var(--navy); }
.banners [data-prev] { left: 0; }
.banners [data-next] { right: 0; }
.banners .dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: var(--space-4); z-index: 3; }
.banners .dot-btn { width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, #fff 60%, transparent); }
.banners .dot-btn[aria-selected="true"] { background: var(--orange); }
.banners .slide-count {
  position: absolute; right: var(--space-4); bottom: var(--space-4); z-index: 3;
  color: #fff; font-size: 12px; background: color-mix(in srgb, var(--navy) 72%, transparent);
  padding: 4px 10px;
}

/* statický rozcestník — foto Rimoru + 5 klikacích karet, nad rotujícím sliderem.
   Výška fota je řízená pevně (clamp), NE aspect-ratio přepínaným v media
   dotazech — to dřív na tabletové šířce udělalo ze sekce vysoký sloupec.
   Karty jedou v normálním toku pod fotem, žádný záporný margin/překryv. */
.rozcestnik { background: var(--color-bg); }
.rozcestnik-foto {
  position: relative;
  height: clamp(240px, 34vw, 480px);
  overflow: hidden;
}
.rozcestnik-foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 78% 45%;
  display: block;
  opacity: 0; transition: opacity 2s ease;
}
.rozcestnik-foto img.je-aktivni { opacity: 1; }
/* Druhy hero snimek (nova auta) ma jinou kompozici nez puvodni fotka - vozy
   jsou vic vpravo/dole, vlevo je velka jednobarevna graficka plocha bez
   informacni hodnoty. Vlastni object-position, aby cover orez drzel vozy
   v zaberu jak na sirokem pomeru (desktop, oreze se hlavne vyska) tak na
   uzsim/nizsim pomeru (mobil, kde .rozcestnik-foto ma pevnou min-vysku
   240px a oreze se hlavne sirka). */
.rozcestnik-foto img.rozcestnik-foto-2 { object-position: 62% 58%; }
@media (max-width: 640px) {
  .rozcestnik-foto img.rozcestnik-foto-2 { object-position: 82% 52%; }
}
.rozcestnik-clona {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    var(--navy-deep) 0%,
    color-mix(in srgb, var(--navy-deep) 82%, transparent) 30%,
    color-mix(in srgb, var(--navy-deep) 20%, transparent) 54%,
    transparent 74%);
}
.rozcestnik-text { position: absolute; inset: 0; }
/* Zarovnani textu sjednoceno s .rimor-hero-obsah (odsazeni zleva, vertikalni
   umisteni, max-width nadpisu/odstavce) - zadano vyslovne. Kazdy slide je
   samostatny absolutne pozicovany blok pres cely rozcestnik-text, prekryvaji
   se stejne jako fotky v .rozcestnik-foto a prepinaji se soucasne s nimi
   (viz rozcestnik-slideshow.js), aby text a fotka tvorily jeden snimek. */
.rozcestnik-text-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: var(--space-2);
  padding-left: clamp(24px, 2.5vw, 48px);
  padding-top: clamp(10px, 3vw, 56px);
  opacity: 0; transition: opacity 2s ease;
}
.rozcestnik-text-slide.je-aktivni { opacity: 1; }
.rozcestnik-text-slide h1,
.rozcestnik-text-slide h2 {
  margin: 0; max-width: 44vw; width: fit-content;
  font-size: clamp(32px, 4.4vw, 68px);
  line-height: 1.08; letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
}
.rozcestnik-text-slide .or { color: var(--orange); }
/* Slide 1 (hlavni) - cely blok (nadpis+podnadpis, spolecny gap zachovan)
   vertikalne vycentrovan na vysku hero, zarovnani zleva zustava (zadny
   text-align zasah). Nastaveno samostatne od slide 2 - zmena jednoho
   neovlivni pozici druheho. */
.rozcestnik-text-slide-hlavni { justify-content: center; padding-top: 0; }
/* Slide 2 (Zanovni obytne vozy) - vertikalne vycentrovano (pozice bloku se
   dale nemeni) a s vetsim radkovanim mezi radky nadpisu. Radky nadpisu
   zarovnane na stred vuci nejsirsimu radku "OBYTNE VOZY" (h1/h2 ma
   width:fit-content, tedy sirku podle nejsirsiho radku - text-align:center
   pak kratsi radky opticky vycentruje vuci nemu, cely blok zustava
   ukotveny vlevo pres padding-left z .rozcestnik-text-slide). */
.rozcestnik-text-slide-zanovni { justify-content: center; padding-top: 0; }
.rozcestnik-text-slide-zanovni h2 { line-height: 1.35; text-align: center; }
.rozcestnik-text-slide p {
  margin: 0; max-width: min(480px, 27vw);
  font-size: clamp(16px, 1.5vw, 20px);
  color: color-mix(in srgb, #fff 88%, transparent);
}

.rozcestnik-karty {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4);
  padding-block: var(--space-6);
  position: relative;
  margin-top: -40px;
}
.rozcestnik-karta {
  display: flex; flex-direction: column; gap: var(--space-2);
  background: #fff; color: var(--navy);
  text-decoration: none;
  padding: var(--space-4);
  border: 1px solid var(--color-divider);
  border-top: 3px solid var(--orange);
  box-shadow: var(--shadow-md);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  min-width: 0;
}
.rozcestnik-karta--navy { border-top-color: var(--navy); }
.rozcestnik-karta:hover, .rozcestnik-karta:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.rozcestnik-ikona {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange); color: var(--navy);
  flex: none;
}
.rozcestnik-karta--navy .rozcestnik-ikona { background: var(--navy); color: #fff; }
.rozcestnik-ikona svg { width: 28px; height: 28px; }
.rozcestnik-nazev {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; text-transform: uppercase; letter-spacing: 0.02em;
}
.rozcestnik-popis {
  font-size: 13px; line-height: 1.4;
  color: color-mix(in srgb, var(--navy) 70%, transparent);
}
.rozcestnik-cta {
  margin-top: auto; padding-top: var(--space-2);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--color-accent-700);
}
.rozcestnik-karta:hover .rozcestnik-cta { color: var(--navy); }

@media (max-width: 860px) {
  .rozcestnik-karty { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .rozcestnik-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rozcestnik-text-slide h1,
  .rozcestnik-text-slide h2 { font-size: clamp(24px, 7vw, 36px); max-width: none; }
  .rozcestnik-text-slide p { max-width: none; font-size: 15px; }
}
@media (max-width: 380px) {
  .rozcestnik-karty { grid-template-columns: 1fr; }
}

/* trojice hlavních rozcestí */
.trio { background: var(--navy); color: #fff; }
.trio .wrap { padding: 0; max-width: var(--page); }
.trio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trio-cell {
  padding: clamp(28px, 3.5vw, 52px) clamp(20px, 2.5vw, 40px);
  border-right: 1px solid color-mix(in srgb, #fff 22%, transparent);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.trio-cell:last-child { border-right: 0; }
.trio-cell h2 { color: var(--orange); font-size: clamp(21px, 2.3vw, 30px); text-transform: uppercase; margin: 0; }
.trio-cell p { color: color-mix(in srgb, #fff 82%, transparent); margin: 0; font-size: 15.5px; }
.trio-cell .more { margin-top: auto; color: var(--orange); text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px; }
.trio-cell .more:hover { text-decoration: underline; }
.trio-cell.is-highlight { background: var(--orange); color: var(--navy); }
.trio-cell.is-highlight h2, .trio-cell.is-highlight .more { color: var(--navy); }
.trio-cell.is-highlight p { color: color-mix(in srgb, #14225c 85%, transparent); }

/* poster = oranžová plocha s navy textem */
.poster { background: var(--orange); color: var(--navy); }
.poster a.btn-primary { background: var(--navy); color: #fff; }
.poster a.btn-primary:hover { background: var(--navy-deep); }
.poster a.btn-secondary { border-color: var(--navy); color: var(--navy); }
.poster a.btn-secondary:hover { background: color-mix(in srgb, #fff 35%, transparent); }

/* číslované sekce a dlaždice */
.sec-num { color: var(--color-accent-700); border-top-color: var(--orange); }
.tile { border-top-color: var(--navy); }
.tile-num { color: var(--orange); }
.card-kicker { color: var(--color-accent-700); }
.brandstrip a:hover { color: var(--color-accent-700); }
.dot-btn { background: var(--color-neutral-300); }
.dot-btn[aria-selected="true"] { background: var(--orange); }
.foot { background: var(--navy-deep); }
.foot a:hover { color: var(--orange); }
.foot .brandline b i { color: var(--orange); }
.quote blockquote { color: var(--navy); }
.stats dd { color: var(--navy); }
.table th { color: color-mix(in srgb, var(--navy) 70%, transparent); }

@media (max-width: 940px) {
  .trio-grid { grid-template-columns: minmax(0, 1fr); }
  .trio-cell { border-right: 0; border-bottom: 1px solid color-mix(in srgb, #fff 22%, transparent); }
  .banner-slide .ph { aspect-ratio: 16 / 9; }
  .banners .arrow { width: 42px; height: 42px; }
}

/* deset položek v hlavní navigaci — uzsi rozestupy a drivejsi sbaleni do hamburgeru */
.mainnav ul { gap: var(--space-3); }
@media (max-width: 1140px) {
  .burger { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer;
    font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px;
    border: 2px solid var(--navy); padding: var(--space-3) var(--space-4); min-height: 46px; }
  .head .wrap { position: relative; }
  .mainnav { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-bg);
    border-bottom: 2px solid var(--color-divider); display: none; padding: var(--space-2) var(--gut) var(--space-6); z-index: 50; }
  .navtoggle:checked ~ .mainnav { display: block; }
  .mainnav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .mainnav li { border-top: 1px solid var(--color-divider); }
  .mainnav a { padding: var(--space-4) 0; font-size: 16px; border-bottom: 0; }
}

/* placeholdery nesmí být limitované výškou tam, kde mají držet celou šířku */
.ph { width: 100%; max-height: none; }
.banner-slide .ph { padding-inline: 64px; }

/* skutečné bannery */
.banner-slide > a > img { width: 100%; height: auto; }
.banners .slide-count { display: none; }
@media (max-width: 640px) { .banners .arrow { width: 36px; height: 36px; font-size: 16px; } }

/* ══ Typografické bannery akcí ══════════════════════════════════════════ */
.bnr {
  background: var(--navy-deep); color: #fff;
  display: grid; gap: clamp(20px, 2.4vw, 40px); align-content: center;
  min-height: clamp(330px, 25vw, 440px);
  padding: clamp(28px, 3vw, 52px) clamp(56px, 5vw, 88px) clamp(44px, 3.5vw, 60px);
}
.bnr-2col { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
.bnr-head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 56px); align-items: start; }
.bnr-flag {
  display: inline-block; background: var(--orange); color: var(--navy);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 14px; margin-bottom: var(--space-4);
}
.bnr-h {
  font-size: clamp(27px, 3.4vw, 52px); line-height: 1.04; letter-spacing: -0.02em;
  text-transform: uppercase; margin: 0 0 var(--space-3); max-width: 22ch; color: #fff;
}
.bnr-h .or { color: var(--orange); }
.bnr-sub { color: color-mix(in srgb, #fff 80%, transparent); font-size: clamp(15px, 1.2vw, 18px); margin: 0; max-width: 46ch; }
.bnr-note { color: color-mix(in srgb, #fff 60%, transparent); font-size: 13px; margin: 0 0 var(--space-4); }
.bnr .btn-primary { margin-top: var(--space-2); }

.bnr-usp { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.bnr-2col .bnr-usp { border-left: 2px solid var(--orange); padding-left: clamp(16px, 2vw, 32px); }
.bnr:not(.bnr-2col) .bnr-usp { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); border-top: 1px solid color-mix(in srgb, #fff 22%, transparent); padding-top: var(--space-4); }
.usp { display: flex; flex-direction: column; }
.usp b { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(15px, 1.3vw, 19px); text-transform: uppercase; color: var(--orange); letter-spacing: 0.02em; }
.usp span { font-size: 14px; color: color-mix(in srgb, #fff 78%, transparent); }

.bnr-contact { font-size: 14.5px; display: grid; gap: 3px; align-content: start; border-left: 2px solid var(--orange); padding-left: clamp(16px, 2vw, 28px); }
.bnr-contact p { margin: 0 0 var(--space-2); color: color-mix(in srgb, #fff 75%, transparent); }
.bnr-contact strong { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; }
.bnr-contact a { color: var(--orange); text-decoration: none; }
.bnr-contact a:hover { color: #fff; text-decoration: underline; }

.pcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.pcard { background: color-mix(in srgb, #fff 8%, transparent); border-top: 3px solid var(--orange); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.pcard h3 { font-size: 18px; margin: 0; color: #fff; }
.pcard-note { font-size: 13.5px; color: color-mix(in srgb, #fff 72%, transparent); margin: 0; flex: 1; }
.pcard .new { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(20px, 1.8vw, 26px); margin: 0; color: var(--orange); }
.pcard .new span { font-size: 12px; color: color-mix(in srgb, #fff 65%, transparent); }
.pcard-cta { display: grid; place-items: start; align-content: center; text-decoration: none; background: var(--orange); border-top-color: #fff; }
.pcard-cta span { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; color: var(--navy); text-transform: uppercase; line-height: 1.15; }
.pcard-cta:hover { background: #fff; }

.offers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.offer { background: color-mix(in srgb, #fff 8%, transparent); border-top: 3px solid var(--orange); padding: var(--space-3) var(--space-4) var(--space-4); display: grid; gap: 2px; }
.offer-tag { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); }
.offer-date { font-size: 13.5px; color: color-mix(in srgb, #fff 80%, transparent); margin-bottom: var(--space-2); }
.offer-old { font-size: 14px; color: color-mix(in srgb, #fff 55%, transparent); text-decoration: line-through; }
.offer-new { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(21px, 1.9vw, 28px); line-height: 1.1; }
.offer-new span { font-size: 12px; font-weight: 400; color: color-mix(in srgb, #fff 60%, transparent); }
.offer-save { margin-top: var(--space-2); font-size: 13px; color: var(--navy); background: var(--orange); padding: 3px 8px; justify-self: start; font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

@media (max-width: 940px) {
  .bnr { padding-inline: clamp(20px, 6vw, 56px); min-height: 0; }
  .bnr-2col, .bnr-head { grid-template-columns: minmax(0, 1fr); }
  .bnr-contact { border-left: 0; border-top: 1px solid color-mix(in srgb, #fff 22%, transparent); padding-left: 0; padding-top: var(--space-4); }
  .bnr-2col .bnr-usp { border-left: 0; border-top: 1px solid color-mix(in srgb, #fff 22%, transparent); padding-left: 0; padding-top: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .offers, .pcards { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

.bnr .btn { white-space: nowrap; }

/* fotografie vozů v bannerech */
.bnr-2col { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 0.85fr); }
.bnr-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.8fr); }
.bnr-media { align-self: center; }
.bnr-media .ph {
  aspect-ratio: 16 / 10; border: 1px dashed color-mix(in srgb, #fff 32%, transparent);
  background: color-mix(in srgb, #fff 7%, transparent);
  color: color-mix(in srgb, #fff 62%, transparent); max-height: none;
}
.bnr-media img { display: block; width: 100%; height: auto; }
@media (max-width: 1080px) {
  .bnr-2col, .bnr-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bnr-media { display: none; }
}
@media (max-width: 940px) {
  .bnr-2col, .bnr-head { grid-template-columns: minmax(0, 1fr); }
}

/* výšku banneru určuje jen právě zobrazený slide */
.banners .slides { position: relative; display: block; }
.banner-slide { position: absolute; inset: 0; }
.banner-slide.is-on { position: relative; inset: auto; }
.offers { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1080px) { .offers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* fotografie vozů v bannerech — reálné snímky */
.bnr-media img { width: 100%; height: auto; object-fit: cover; box-shadow: var(--shadow-lg); }

/* ══ Parallax pásy ═══════════════════════════════════════════════════════ */
.parallax {
  position: relative; overflow: hidden; background: var(--navy-deep); color: #fff;
  display: grid; align-content: center;
  min-height: clamp(340px, 40vw, 560px);
  border-top: 2px solid var(--color-divider);
}
.px-bg {
  position: absolute; left: 0; right: 0; top: -18%; bottom: -18%;
  background-size: cover; background-position: center;
  will-change: transform;
}
.parallax::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--navy-deep) 92%, transparent) 0%,
    color-mix(in srgb, var(--navy-deep) 72%, transparent) 46%,
    color-mix(in srgb, var(--navy-deep) 30%, transparent) 100%);
}
.parallax-right::after {
  background: linear-gradient(270deg,
    color-mix(in srgb, var(--navy-deep) 92%, transparent) 0%,
    color-mix(in srgb, var(--navy-deep) 72%, transparent) 46%,
    color-mix(in srgb, var(--navy-deep) 30%, transparent) 100%);
}
.px-in { position: relative; z-index: 2; padding-block: clamp(40px, 5vw, 72px); }
.parallax-right .px-in { display: grid; justify-items: end; text-align: right; }
.parallax-right .px-in > * { max-width: 44ch; }
.parallax blockquote {
  margin: 0; max-width: 26ch; color: #fff;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(27px, 3.6vw, 50px); line-height: 1.08; letter-spacing: -0.02em;
}
.px-cap { margin: var(--space-6) 0 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, #fff 70%, transparent); }
.parallax h2 { color: #fff; font-size: clamp(26px, 3.2vw, 44px); max-width: 26ch; }
.parallax p { color: color-mix(in srgb, #fff 82%, transparent); font-size: clamp(16px, 1.3vw, 19px); max-width: 46ch; }
.parallax .sec-num { color: var(--orange); border-top-color: var(--orange); }
.parallax .btn-secondary { border-color: #fff; color: #fff; }
.parallax .btn-secondary:hover { background: color-mix(in srgb, #fff 16%, transparent); }
@media (max-width: 640px) {
  .parallax { min-height: 300px; }
  .parallax-right .px-in { justify-items: start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .px-bg { transform: none !important; } }

/* servisní pás — foto v rámu vedle textu (renderuje se blízko 1:1) */
.px-split { display: grid; grid-template-columns: 311px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; justify-items: stretch; text-align: left; }
.px-figure { margin: 0; border: 2px solid color-mix(in srgb, #fff 55%, transparent); }
.px-figure img { display: block; width: 100%; height: auto; }
.parallax-right .px-split > div { justify-self: end; text-align: right; }
@media (max-width: 860px) {
  .px-split { grid-template-columns: minmax(0, 1fr); }
  .px-figure { display: none; }
  .parallax-right .px-split > div { justify-self: start; text-align: left; }
}

/* servisní pás bez fotopozadí — plochá navy plocha, foto je v rámu */
.parallax-right::after { display: none; }

/* logo bez podtitulku, větší */
.brand img { height: 72px; }
@media (max-width: 640px) { .brand img { height: 52px; } }
.head .wrap { min-height: 104px; }

/* dokud nejsou reálné fotografie: rám místo snímku */
.px-figure { border-style: dashed; }
.px-figure .ph { aspect-ratio: 3 / 4; border: 0; background: color-mix(in srgb, #fff 7%, transparent); color: color-mix(in srgb, #fff 62%, transparent); }
.parallax::after { display: none; }

/* ══ Rytmus ploch na podstránkách ════════════════════════════════════════
   Celoplošné podklady bez obalových divů: clip-path + rozlitý stín.      */
.bleed, .sec-first, .sec-alt, .crumbs {
  box-shadow: 0 0 0 100vmax var(--band, var(--color-surface));
  clip-path: inset(0 -100vmax);
}
.crumbs { --band: var(--color-surface); margin: 0; }
.sec-first {
  --band: var(--color-surface);
  border-top: 0; padding-top: clamp(28px, 3vw, 48px);
}
.sec-alt { --band: var(--color-surface); border-top: 0; }
.sec-alt + .sec { border-top: 0; }

/* hlavička podstránky: oranžová linka pod nadpisem, výraznější kicker */
.sec-first h1 { max-width: 24ch; }
.sec-first .kicker::after {
  content: ""; display: block; width: 56px; height: 3px;
  background: var(--orange); margin-top: var(--space-3);
}
.sec-first .lead { color: color-mix(in srgb, var(--navy) 82%, transparent); }

/* dlaždice a karty na světlém podkladu drží tvar */
.sec-alt .tile, .sec-first .tile { border-top-color: var(--navy); }
.tile { padding-bottom: var(--space-2); }
.sec-alt .card figure, .sec-alt .card .ph { background: var(--color-bg); }
.card-list li { border-top-color: color-mix(in srgb, var(--navy) 18%, transparent); }

/* tabulky: zebra a hlavička v navy */
.table thead th { background: var(--navy); color: #fff; padding: var(--space-3) var(--space-4); border-bottom: 0; }
.table td { padding: var(--space-3) var(--space-4); }
.table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--navy) 5%, transparent); }
.table-scroll { border-top: 2px solid var(--navy); }
.spec tr:nth-child(odd) th, .spec tr:nth-child(odd) td { background: color-mix(in srgb, var(--navy) 4%, transparent); }
.spec th, .spec td { padding: var(--space-3) var(--space-3); }

/* formuláře na světlém podkladu */
.input { background: var(--color-bg); border: 2px solid color-mix(in srgb, var(--navy) 22%, transparent); }
.input:focus { border-color: var(--orange); outline: 2px solid var(--orange); outline-offset: 1px; }
form { background: var(--color-bg); padding: clamp(20px, 2.5vw, 36px); border-top: 3px solid var(--orange); }
.sec-alt form { background: var(--color-bg); }

/* FAQ a osoby */
.person { border-top-color: var(--navy); }
.person .role { color: var(--color-accent-700); }

/* fakta v pásu navy */
.stats { border-top: 0; background: var(--navy); color: #fff; }
.stats div { border-right-color: color-mix(in srgb, #fff 22%, transparent); padding: var(--space-6) var(--space-6); }
.stats dt { color: color-mix(in srgb, #fff 65%, transparent); }
.stats dd { color: var(--orange); }
.wrap > .stats { box-shadow: 0 0 0 100vmax var(--navy); clip-path: inset(0 -100vmax); }

/* obrazové rámy: jemná linka a stín, ne holý bílý blok */
.ph { border: 1px dashed color-mix(in srgb, var(--navy) 30%, transparent); background: color-mix(in srgb, var(--navy) 5%, transparent); color: color-mix(in srgb, var(--navy) 55%, transparent); }
figure:not(.px-figure) img { box-shadow: var(--shadow-md); }

/* mezisekce s citací mezi bílými bloky */
.parallax { border-top: 0; }

/* === Katalog vozů (filtr + karty, auta-skladem.html#skladem) ===
   Filtr je od zakladu predelany na moderni "pills" styl s firemnimi
   barvami #000f3d / #c84e00 (misto starsi --navy/--orange palety pouzite
   jinde na webu) - stejna barevna volba jako u ostatnich nove predelanych
   casti webu (O nas apod.). Skupiny jsou oddelene jen velkorysou mezerou,
   zadne delici cary, aby to nepusobilo jako tabulka. Zadny velky box ani
   stin - jen jemne pozadi a tenky ramecek. */
/* Nadpis "Prodej obytnych vozu" pouziva mensi "kicker" styl (12px) misto
   beznych velkych h1 (34-64px) - obecne pravidlo .sec-first h1{max-width:24ch}
   je vsak navrzene pro ty velke h1 a pri 12px pismu se 24ch prepocita na
   pouhych ~180px, coz nadpis zbytecne lame na 2 radky. Cileny fix jen pro
   tuto sekci (#skladem), aby se nedotkl jinych stranek se stejnym vzorem
   h1.kicker (napr. rady-a-tipy.html), kde k lamani nedochazi. */
#skladem h1.kicker { max-width: none; }
/* Prodej - kompaktnejsi svisle mezery mezi #skladem (vypis vozu), "Znacky,
   ktere zastupujeme" a formularem #poptavka-prodej. Puvodni sitewide
   .sec{padding-block:clamp(40px,6vw,88px)} na obou stranach kazde hranice
   davalo soucet az 150+ px prazdneho prostoru - zadano vyslovne zmensit.
   Scoped jen na tuto stranku pres #skladem (unikatni ID), aby se nedotklo
   .sec/.sec-alt/.sec-head na jinych strankach, ktere tytez tridy pouzivaji. */
#skladem { padding-bottom: clamp(16px, 2vw, 24px); }
#skladem + .sec-alt { padding-top: clamp(16px, 2vw, 24px); padding-bottom: clamp(24px, 3vw, 40px); }
#skladem + .sec-alt .sec-head { margin-bottom: var(--space-4); }
/* Filtr jako levy postranni panel (sidebar) + obsah (razeni + karty) vpravo -
   zadano vyslovne. Karty jsou pak v uzsim sloupci nez cela stranka, proto
   .g3 (3 karty/radek) dostava vlastni zlom drive nez jeho sitewide 940px
   (viz media query nize), aby nebyly karty zbytecne male driv, nez sidebar
   zmizi do rozbalovaciho tlacitka. */
.katalog-layout {
  display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px); align-items: start;
  margin-bottom: var(--space-5);
}
.katalog-obsah { min-width: 0; }
.katalog-obsah-horni {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-4);
}
.katalog-obsah-horni .katalog-pocet { margin-bottom: 0; }
.katalog-razeni { display: flex; align-items: center; gap: 10px; }
.katalog-razeni .katalog-filtr-nazev { white-space: nowrap; }
/* Filtr jako sada samostatnych ramecku/karet - kazda skupina parametru
   (Stav vozu, Dostupnost, Karoserie...) ma vlastni bily box s nadpisem a
   checkboxy, jasne vizualne oddeleny od sousednich skupin - zadano
   vyslovne "cisty a vzdusny" vzhled podle referencniho obrazku. */
.katalog-filtr {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4);
}
.katalog-filtr-box {
  background: #fff;
  border: 1px solid color-mix(in srgb, #000f3d 12%, transparent);
  border-radius: 14px;
  padding: clamp(16px, 2vw, 20px);
}
.katalog-filtr-nazev {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, #000f3d 60%, transparent);
  margin: 0 0 var(--space-3);
}
.katalog-filtr-volby { display: flex; flex-direction: column; gap: 12px; }
.katalog-filtr-volba {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; font-size: 14px; color: #000f3d;
  transition: color 0.2s ease;
}
.katalog-filtr-volba:hover { color: #c84e00; }
.katalog-filtr-volba input[type="checkbox"] {
  width: 18px; height: 18px; flex: none; margin: 0;
  accent-color: #c84e00; cursor: pointer;
}

/* === Kontakt — hero, tři sloupce, informační lišta (kontakt.html) === */
/* Hero Kontakt pouziva stejnou sablonu jako hero Rimor (rozmery, typografie,
   odsazeni, tmavy prechod) - viz .rimor-hero* pro predlohu. Vlastni je jen
   fotka (object-position doladena na tento konkretni snimek) a radek
   rychlych odkazu Zavolejte/Napiste/Prijedte/Domluvte, ktery Rimor nema -
   ten je stylovany a ukotveny stejne jako .rimor-hero-btn. */
.kontakt-hero { position: relative; background: #000f3d; }
.kontakt-hero-ramec {
  position: relative; overflow: hidden; border-bottom: 2px solid var(--color-divider);
  aspect-ratio: 3 / 1;
}
.kontakt-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; display: block; }
.kontakt-hero-clona {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    #000f3d 0%,
    color-mix(in srgb, #000f3d 82%, transparent) 10%,
    color-mix(in srgb, #000f3d 35%, transparent) 20%,
    transparent 31%);
}
.kontakt-hero-obsah {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  padding-left: clamp(24px, 2.5vw, 48px);
  padding-top: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 3.5vw, 48px);
}
.kontakt-hero-kicker {
  color: #fff; margin: 0;
  font-size: clamp(12px, 0.9vw, 16px); font-weight: 700;
  letter-spacing: 1.8px; line-height: 1.15;
}
.kontakt-hero-kicker::after { content: ""; display: block; width: 48px; height: 3px; background: #c84e00; margin-top: clamp(4px, 0.6vw, 10px); }
.kontakt-hero-obsah h1 {
  color: #fff; margin: 0; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 1.2; width: fit-content; max-width: 50vw;
  font-size: clamp(30px, 2.9vw, 60px); font-weight: 800;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.kontakt-hero-obsah .lead {
  color: #fff; margin: 0; max-width: min(620px, 30vw);
  font-size: clamp(16px, 1.7vw, 23px); font-weight: 400; line-height: 1.6;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.kontakt-hero-vyhody {
  margin-top: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-3);
}
.kontakt-hero-vyhoda {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange); color: #000f3d; text-decoration: none; border-radius: 0;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(12.5px, 1vw, 14.5px); text-transform: uppercase; letter-spacing: 0.02em;
  padding: 13px 18px; min-height: 46px;
  box-shadow: var(--shadow-md);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.kontakt-hero-vyhoda:hover { background: var(--color-accent-600); color: #000f3d; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.kontakt-hero-vyhoda:focus-visible { outline: 2px solid #000f3d; outline-offset: 2px; }
.kontakt-hero-vyhoda:active { background: var(--color-accent-700); color: #000f3d; transform: translateY(0); box-shadow: var(--shadow-md); }
.kontakt-hero-ikona {
  width: 18px; height: 18px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #000f3d;
}
.kontakt-hero-ikona svg { width: 18px; height: 18px; }
@media (max-width: 900px) {
  .kontakt-hero-ramec { border-bottom: 0; }
  .kontakt-hero-clona { display: none; }
  .kontakt-hero-obsah {
    position: static; inset: auto; display: block;
    background: #000f3d;
    padding: clamp(20px, 5vw, 32px) var(--gut);
    border-bottom: 2px solid var(--color-divider);
  }
  .kontakt-hero-kicker { color: #fff; }
  .kontakt-hero-obsah h1 {
    color: #fff; max-width: none;
    font-size: clamp(30px, 8vw, 42px); text-shadow: none;
  }
  .kontakt-hero-obsah .lead {
    color: #fff; max-width: none;
    font-size: 18px; line-height: 1.6; text-shadow: none;
  }
  .kontakt-hero-vyhody { position: static; margin-top: 20px; }
}

.kontakt-mrizka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.5vw, 56px); align-items: start; }
.kontakt-sloupec-nadpis { font-size: clamp(19px, 2vw, 24px); margin-bottom: var(--space-5); }

.kontakt-karty { display: flex; flex-direction: column; gap: var(--space-4); }
.kontakt-karta {
  display: flex; gap: var(--space-4); align-items: flex-start;
  background: #fff; padding: var(--space-4);
  border: 1px solid var(--color-divider); border-top: 3px solid var(--orange);
  box-shadow: var(--shadow-md);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kontakt-karta:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.kontakt-karta-ikona {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff;
}
.kontakt-karta-ikona svg { width: 22px; height: 22px; }
.kontakt-karta-role { font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-accent-700); margin: 0 0 4px; }
.kontakt-karta-jmeno { margin: 0 0 var(--space-2); font-size: 17px; }
.kontakt-karta a { display: block; font-size: 14.5px; text-decoration: none; color: var(--navy); }
.kontakt-karta a:hover { color: var(--orange); text-decoration: underline; }
.kontakt-karta-poznamka { margin: var(--space-2) 0 0; font-size: 12.5px; color: color-mix(in srgb, var(--navy) 60%, transparent); }

.kontakt-adresa {
  background: #fff; border: 1px solid var(--color-divider); border-top: 3px solid var(--navy);
  padding: var(--space-4); box-shadow: var(--shadow-md); margin-bottom: var(--space-4);
}
.kontakt-adresa p { margin: 0; line-height: 1.5; }
.kontakt-adresa p + p { margin-top: var(--space-3); }
.kontakt-adresa-ico { font-size: 13px; color: color-mix(in srgb, var(--navy) 65%, transparent); }
.kontakt-mapa-ramec { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--color-divider); box-shadow: var(--shadow-md); overflow: hidden; }
.kontakt-mapa-ramec iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kontakt-trasa-btn { width: 100%; justify-content: center; margin-top: var(--space-4); }

.kontakt-sloupec-formular form { margin: 0; }

/* Pas Google recenzi - vlastni odstin navy/oranzove dle zadani (#000f3d / #c84e00),
   drzeny ve skalpovanych promennych at je snadne je pozdeji sladit se zbytkem webu. */
.kontakt-recenze, .kontakt-pas {
  box-shadow: 0 0 0 100vmax var(--color-surface);
  clip-path: inset(0 -100vmax);
}
.kontakt-recenze {
  --rec-navy: #000f3d;
  --rec-orange: #c84e00;
  padding-block: clamp(16px, 2.5vw, 32px);
}
.kontakt-recenze-hlavicka { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-8); margin-bottom: var(--space-6); }
.kontakt-recenze-popis { margin: var(--space-2) 0 0; font-size: 14.5px; color: color-mix(in srgb, var(--rec-navy) 65%, transparent); }
.kontakt-recenze-hodnoceni { display: flex; align-items: center; gap: var(--space-2); }
.kontakt-recenze-hodnoceni[hidden] { display: none; }
.kontakt-recenze-hodnoceni svg { width: 22px; height: 22px; flex: none; }
.kontakt-recenze-prumer { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; color: var(--rec-navy); }
.kontakt-recenze-pocet { font-size: 13.5px; color: color-mix(in srgb, var(--rec-navy) 60%, transparent); }

.kontakt-recenze-akce { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
.kontakt-recenze-tlacitka { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.kontakt-recenze-btn-google,
.kontakt-recenze-btn-napsat {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  background: var(--orange); color: #000f3d; border-radius: 0;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none;
  padding: var(--space-4) var(--space-6); min-height: 52px;
  box-shadow: var(--shadow-md);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.kontakt-recenze-btn-google:hover,
.kontakt-recenze-btn-napsat:hover,
.kontakt-recenze-btn-google:focus-visible,
.kontakt-recenze-btn-napsat:focus-visible {
  background: var(--color-accent-600); color: #000f3d;
  transform: translateY(-2px); box-shadow: var(--shadow-lg);
}
.kontakt-recenze-btn-google:focus-visible,
.kontakt-recenze-btn-napsat:focus-visible {
  outline: 2px solid #000f3d; outline-offset: 2px;
}
.kontakt-recenze-btn-google:active,
.kontakt-recenze-btn-napsat:active {
  background: var(--color-accent-700); color: #000f3d;
  transform: translateY(0); box-shadow: var(--shadow-md);
}

.kontakt-recenze-carousel { display: flex; align-items: center; gap: var(--space-3); }
.kontakt-recenze-sipka {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--rec-navy);
  background: #fff; color: var(--rec-navy);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.kontakt-recenze-sipka svg { width: 20px; height: 20px; }
.kontakt-recenze-sipka:hover { background: var(--rec-navy); color: #fff; }

.kontakt-recenze-viewport { flex: 1; min-width: 0; overflow: hidden; }
.kontakt-recenze-track {
  display: flex; gap: clamp(16px, 2vw, 24px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px 2px 8px;
  scrollbar-width: none;
}
.kontakt-recenze-track::-webkit-scrollbar { display: none; }
.kontakt-recenze-prazdno { flex: 1 0 auto; width: 100%; text-align: center; margin: 0; padding: var(--space-8) 0; color: color-mix(in srgb, var(--rec-navy) 55%, transparent); font-size: 14.5px; }

.kontakt-recenze-karta {
  scroll-snap-align: start; flex: 0 0 clamp(260px, 30%, 336px);
  display: flex; flex-direction: column; gap: var(--space-3);
  background: #fff; padding: var(--space-4);
  border: 1px solid var(--color-divider); border-top: 3px solid var(--rec-orange);
  box-shadow: var(--shadow-md);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kontakt-recenze-karta:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.kontakt-recenze-karta-hlavicka { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.kontakt-recenze-jmeno { margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14.5px; color: var(--rec-navy); }
.kontakt-recenze-hvezdy { margin: 0; color: var(--rec-orange); font-size: 14px; letter-spacing: 1px; }
.kontakt-recenze-text {
  margin: 0; font-size: 14.5px; line-height: 1.55; color: color-mix(in srgb, var(--rec-navy) 82%, transparent);
  white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.kontakt-recenze-text--rozbaleno { -webkit-line-clamp: unset; overflow: visible; }
.kontakt-recenze-vic {
  align-self: flex-start; border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 13px; color: var(--rec-orange);
}
.kontakt-recenze-vic:hover { text-decoration: underline; }
.kontakt-recenze-znacka { margin-top: auto; display: flex; align-items: center; gap: 6px; padding-top: var(--space-2); border-top: 1px solid var(--color-divider); }
.kontakt-recenze-znacka svg { width: 15px; height: 15px; flex: none; }
.kontakt-recenze-znacka span { font-size: 12px; font-family: var(--font-heading); font-weight: var(--font-heading-weight); color: color-mix(in srgb, var(--rec-navy) 60%, transparent); }
.kontakt-recenze-datum { margin-left: auto; font-size: 11.5px; font-family: inherit; font-weight: 400; color: color-mix(in srgb, var(--rec-navy) 45%, transparent); }

@media (max-width: 700px) {
  .kontakt-recenze-karta { flex-basis: 86%; }
  .kontakt-recenze-sipka { width: 38px; height: 38px; }
  .kontakt-recenze-akce { align-items: stretch; width: 100%; }
  .kontakt-recenze-tlacitka { width: 100%; }
  .kontakt-recenze-btn-google, .kontakt-recenze-btn-napsat { width: 100%; }
}

.kontakt-pas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: clamp(20px, 3vw, 40px); padding-top: clamp(16px, 2.5vw, 28px); padding-bottom: clamp(8px, 1.2vw, 16px); }
.foot--po-pasu { margin-top: 0; }
.foot--po-cta { margin-top: 0; }
.foot--po-poptavce { margin-top: 0; }
.kontakt-pas-box { border-top: 2px solid var(--navy); padding-top: var(--space-4); }
.kontakt-pas-ikona {
  width: 44px; height: 44px; border-radius: 50%; margin-bottom: var(--space-3);
  display: flex; align-items: center; justify-content: center;
  background: var(--orange); color: var(--navy);
}
.kontakt-pas-ikona svg { width: 22px; height: 22px; }
.kontakt-pas-ikona--pismeno { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; }
.kontakt-pas-box h3 { font-size: 16px; margin-bottom: var(--space-2); }
.kontakt-pas-box p { font-size: 14px; margin: 0; color: color-mix(in srgb, var(--navy) 75%, transparent); }
.kontakt-pas-box a { display: inline-block; margin-top: var(--space-2); font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 13.5px; text-decoration: none; color: var(--color-accent-700); }
.kontakt-pas-box a:hover { color: var(--navy); }

@media (max-width: 1080px) {
  .kontakt-mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kontakt-sloupec-karty { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .kontakt-pas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .kontakt-mrizka { grid-template-columns: minmax(0, 1fr); }
  .kontakt-hero-vyhody { gap: var(--space-3) var(--space-4); }
}
@media (max-width: 480px) {
  .kontakt-pas { grid-template-columns: minmax(0, 1fr); }
}

/* Modalni okna z hero CTA (vetsi mapa, formular) */
body.kontakt-modal-otevren { overflow: hidden; }
.kontakt-modal[hidden] { display: none; }
.kontakt-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.kontakt-modal-podklad {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--navy-deep) 70%, transparent);
}
.kontakt-modal-okno {
  position: relative; z-index: 1;
  background: #fff; width: 100%; max-width: 640px; max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  border-top: 4px solid var(--orange);
}
.kontakt-modal-okno--mapa { max-width: 900px; }
#modal-formular .kontakt-modal-okno { max-width: 560px; }
.kontakt-modal-hlavicka {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: clamp(20px, 3.5vw, 30px) clamp(28px, 6vw, 48px);
  background: #fff; border-bottom: 1px solid var(--color-divider);
}
#modal-formular .kontakt-modal-hlavicka { padding-top: clamp(12px, 2vw, 18px); padding-bottom: clamp(12px, 2vw, 18px); }
/* Formular Objednat servis ma o pole vic (fotografie navic) nez ostatni
   modaly, proto potrebuje jeste o neco tesnejsi odsazeni, aby se na
   bezne vysoke obrazovce vesel bez interniho scrollu (viz min-height
   0 na .kontakt-modal-okno pro tento konkretni modal nize). */
#modal-servis .kontakt-modal-hlavicka { padding-top: clamp(10px, 1.5vw, 14px); padding-bottom: clamp(10px, 1.5vw, 14px); }
#modal-servis .kontakt-modal-okno form { padding-top: clamp(10px, 1.5vw, 16px); padding-bottom: clamp(10px, 1.5vw, 16px); }
#modal-servis .field { margin-bottom: 6px; }
#modal-servis .field > label { margin-bottom: 1px; }
#modal-servis .input { min-height: 36px; }
#modal-servis textarea.input { height: 54px; min-height: 54px; }
#modal-servis .consent { margin-bottom: 6px; }
#modal-servis .kontakt-modal-formular-akce { margin-top: 2px; }
/* Rezervacni formular pujcovny (grid g2 + vyber vozu + interaktivni
   kalendar terminu + poznamka) - obsahove nejbohatsi modal na strance,
   potrebuje nejtesnejsi odsazeni ze vsech, aby se na beznou desktop/notebook
   vysku vesel bez scrollovani (kalendar sam o sobe je hlavni spotrebitel
   vysky, viz .card-kalendar--vyber nize). */
#modal-rezervace .kontakt-modal-hlavicka { padding-top: clamp(5px, 0.8vw, 8px); padding-bottom: clamp(5px, 0.8vw, 8px); }
#modal-rezervace .kontakt-modal-okno form { padding-top: clamp(4px, 0.6vw, 7px); padding-bottom: clamp(5px, 0.8vw, 8px); }
#modal-rezervace .grid.g2 { gap: 3px 12px; }
#modal-rezervace .field { margin-bottom: 2px; }
#modal-rezervace .field > label { margin-bottom: 1px; font-size: 12.5px; }
#modal-rezervace .input { min-height: 30px; font-size: 13.5px; }
#modal-rezervace textarea.input { height: 32px; min-height: 32px; }
#modal-rezervace .consent { margin-bottom: 3px; font-size: 11.5px; line-height: 1.3; }
#modal-rezervace .kontakt-modal-formular-akce { margin-top: 2px; }

/* Cenik pronajmu (pujcovna.html) - obsahove bohatsi modal (dve tabulky),
   proto sirsi okno nez bezne modaly, aby na desktopu vyuzil vetsi plochu
   obrazovky; svisly scroll uvnitr okna zajistuje uz sdilene pravidlo
   .kontakt-modal-okno (max-height:90vh; overflow-y:auto). */
#modal-cenik-pujcovna .kontakt-modal-okno { max-width: 960px; }
/* Kompaktni hlavicka bez delici cary pod nadpisem - viditelne oddeleni
   obsahu zajistuje uz samotny kontaktni blok o kousek nize. */
#modal-cenik-pujcovna .kontakt-modal-hlavicka {
  align-items: flex-start; border-bottom: 0;
  padding-top: clamp(14px, 2vw, 18px); padding-bottom: clamp(8px, 1.2vw, 12px);
}
.pujcovna-cenik-podtitul { margin: 2px 0 0; font-size: 14px; color: color-mix(in srgb, #000f3d 65%, transparent); }
.pujcovna-cenik-obsah { padding: clamp(6px, 1vw, 12px) clamp(24px, 5vw, 48px) clamp(24px, 3.5vw, 32px); }
.pujcovna-cenik-kontakty {
  display: flex; flex-wrap: wrap; gap: var(--space-3) clamp(20px, 4vw, 48px);
  padding: var(--space-4); margin-bottom: var(--space-4);
  background: color-mix(in srgb, #000f3d 4%, transparent);
  border: 1px solid var(--color-divider);
}
.pujcovna-cenik-kontakty div { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.pujcovna-cenik-kontakt-label {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #000f3d;
}
.pujcovna-cenik-kontakty a { color: #000f3d; text-decoration: none; }
.pujcovna-cenik-kontakty a:hover { color: #c84e00; text-decoration: underline; }

.pujcovna-cenik-skupina + .pujcovna-cenik-skupina { margin-top: clamp(28px, 4vw, 40px); }
.pujcovna-cenik-skupina-kategorie {
  margin: 0 0 2px; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #c84e00;
}
.pujcovna-cenik-skupina-nazev { margin: 0 0 8px; font-size: clamp(16px, 1.8vw, 19px); color: #000f3d; }

.pujcovna-cenik-tabulka { width: 100%; border-collapse: collapse; min-width: 560px; }
.pujcovna-cenik-tabulka th, .pujcovna-cenik-tabulka td { padding: 9px 11px; border: 1px solid var(--color-divider); font-size: 13.5px; text-align: center; vertical-align: middle; }
.pujcovna-cenik-tabulka thead th {
  background: #000f3d; color: #fff;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.45;
}
.pujcovna-cenik-obdobi, .pujcovna-cenik-datum { display: block; font-weight: 400; text-transform: none; }
.pujcovna-cenik-obdobi { opacity: 0.85; margin-top: 1px; }
.pujcovna-cenik-datum { font-size: 10.5px; opacity: 0.75; margin-top: 3px; }
.pujcovna-cenik-tabulka tbody th {
  text-align: left; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  color: #000f3d; background: color-mix(in srgb, #000f3d 4%, transparent);
}
.pujcovna-cenik-tabulka tbody tr:nth-child(even) td { background: color-mix(in srgb, #000f3d 3%, transparent); }
.pujcovna-cenik-tabulka tbody td { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.pujcovna-cenik-tabulka tbody tr:first-child td { color: color-mix(in srgb, #000f3d 78%, transparent); font-weight: 400; font-family: inherit; }
.pujcovna-cenik-tabulka tbody tr:not(:first-child) td { color: #c84e00; }

.pujcovna-cenik-poznamky {
  list-style: disc; margin: clamp(20px, 3vw, 28px) 0 0; padding-left: 20px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: color-mix(in srgb, #000f3d 75%, transparent);
}

@media (max-width: 640px) {
  .pujcovna-cenik-kontakty { flex-direction: column; gap: var(--space-3); }
}

/* Sekce "Cenik pronajmu" primo na strance pujcovna.html (#cenik) - dve
   samostatne tabulky (standardni vozy / VIP vozy). Vlastni sada trid
   (ne sdilene .pujcovna-cenik-tabulka z modalu Cenik), protoze tady ma
   tabulka navic radek "Obdobi" pred "Kilometry" (jiny pocet "necenovych"
   radku na zacatku tbody), takze barevne odliseni cena/nikoliv-cena
   potrebuje jine nth-child scopovani, aniz by se to dotklo tabulky v
   modalu. Vizualne stejny jazyk (tmave modra hlavicka, oranzove ceny). */
.pujcovna-cenik-sekce-skupina + .pujcovna-cenik-sekce-skupina { margin-top: clamp(32px, 4vw, 48px); }
.pujcovna-cenik-sekce-nazev {
  margin: 0 0 var(--space-4); font-size: clamp(17px, 2vw, 20px); color: #000f3d;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
}
.pujcovna-cenik-sekce-tabulka { width: 100%; border-collapse: collapse; min-width: 560px; }
.pujcovna-cenik-sekce-tabulka th, .pujcovna-cenik-sekce-tabulka td {
  padding: 11px 14px; border: 1px solid var(--color-divider); font-size: 14px;
  text-align: center; vertical-align: middle;
}
.pujcovna-cenik-sekce-tabulka thead th {
  background: #000f3d; color: #fff;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.4;
}
.pujcovna-cenik-sekce-obdobi { display: block; font-weight: 400; text-transform: none; opacity: 0.85; margin-top: 2px; }
.pujcovna-cenik-sekce-tabulka tbody th {
  text-align: left; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  color: #000f3d; background: color-mix(in srgb, #000f3d 4%, transparent);
}
.pujcovna-cenik-sekce-tabulka tbody tr:nth-child(even) td { background: color-mix(in srgb, #000f3d 3%, transparent); }
.pujcovna-cenik-sekce-tabulka tbody td { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
/* prvni dva radky (Obdobi, Kilometry) nejsou ceny - neutralni tmave modra */
.pujcovna-cenik-sekce-tabulka tbody tr:nth-child(-n+2) td { color: color-mix(in srgb, #000f3d 78%, transparent); font-weight: 400; font-family: inherit; }
/* zbyvajici radky (4 dny / 5-9 dni / 10-20 dni / nad 21 dni) jsou ceny - oranzova */
.pujcovna-cenik-sekce-tabulka tbody tr:nth-child(n+3) td { color: #c84e00; }

@media (max-width: 640px) {
  .pujcovna-cenik-sekce-tabulka th, .pujcovna-cenik-sekce-tabulka td { padding: 9px 11px; font-size: 13px; }
}

/* Sekce "Podminky pujceni" (pujcovna.html, #podminky) - kapitoly pod sebou
   na cele sirce obsahove casti webu (zadne sloupce/uzke karty). Kazda
   kapitola je oddelena jemnou linkou nahore, nadpis vyrazny, body pod nim
   vyuzivaji celou sirku, aby i delsi vety zabraly jen 1-2 radky. */
#podminky .sec-head { margin-bottom: clamp(14px, 2vw, 20px); }
.pujcovna-podminky-kapitoly {
  display: flex; flex-direction: column;
}
.pujcovna-podminky-blok {
  padding: clamp(18px, 2.5vw, 24px) 0; border-top: 1px solid var(--color-divider);
}
.pujcovna-podminky-blok:first-child { padding-top: 0; border-top: 0; }
.pujcovna-podminky-blok h3 {
  margin: 0 0 var(--space-4); font-size: clamp(19px, 2.3vw, 24px); color: #000f3d;
}
.pujcovna-podminky-blok ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pujcovna-podminky-blok ul li {
  position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.55;
  color: color-mix(in srgb, #000f3d 85%, transparent);
}
.pujcovna-podminky-blok ul li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 7px; height: 7px; border-radius: 50%; background: #c84e00;
}
.pujcovna-podminky-blok p { font-size: 15.5px; line-height: 1.55; color: color-mix(in srgb, #000f3d 85%, transparent); margin: 0 0 14px; }
.pujcovna-podminky-blok p:last-of-type { margin-bottom: var(--space-4); }
.pujcovna-podminky-blok ul + p, .pujcovna-podminky-blok p + ul { margin-top: 0; }

/* "V cene pronajmu" (posledni kapitola #podminky) - 19 polozek rozdelenych
   do 2-3 tematickych sloupcu s mezititulky, aby zakaznik rychle videl, co uz
   ma v cene, misto jedne dlouhe listiny. Desktop 3 sloupce, tablet 2, mobil 1 -
   stejne zlomy sirky (700/1080px) jako zbytek stranky. */
.pujcovna-cena-sloupce {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 32px) clamp(24px, 3vw, 40px);
  margin-top: var(--space-4);
}
@media (min-width: 700px) { .pujcovna-cena-sloupce { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .pujcovna-cena-sloupce { grid-template-columns: repeat(3, 1fr); } }
.pujcovna-cena-sloupec h4 {
  margin: 0 0 13px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #000f3d;
  padding-bottom: 8px; border-bottom: 2px solid var(--orange);
}
.pujcovna-cena-zvyrazneno {
  position: relative; margin: 4px -12px 0; padding: 8px 12px 8px 26px !important;
  font-weight: 700; color: #000f3d;
  background: color-mix(in srgb, #c84e00 10%, transparent);
  border-radius: 8px;
}
.pujcovna-cena-zvyrazneno::before { top: 50% !important; transform: translateY(-50%); left: 12px !important; }

/* Kapitoly stranky PUJCOVNA jsou oddeleny pouze bilym prostorem/odsazenim
   (zadna delici linka mezi nimi - drive zkousena oranzova linka byla na
   pozadavek znovu odstranena). Prvni kapitola "Vozy k zapujceni" by jinak
   po HERO bloku dostala vychozi tenkou navy caru z obecneho .sec pravidla -
   zde vyslovne potlacena, aby zustal jen vzdusny bily predel. */
.pujcovna-hero + section { border-top: 0; }

/* Poznamka pod vsemi 3 sloupci vybavy - decentni, mensi pismo nez bezny
   text seznamu. Hvezdicka u jednotlivych polozek (trida pripravena, zatim
   nikde neaplikovana - az bude jasne, u kterych konkretnich polozek vyjimka
   plati) pouziva stejnou oranzovou barvu jako poznamka pod seznamem. */
.pujcovna-podminky-blok p.pujcovna-cena-poznamka {
  margin: 14px 0 0; font-size: 12.5px; line-height: 1.5;
  color: color-mix(in srgb, #000f3d 60%, transparent);
}
.pujcovna-cena-poznamka-hvezdicka { color: #c84e00; font-weight: 700; }
.pujcovna-cena-sloupec li.pujcovna-cena-ma-hvezdicku::after {
  content: " *"; color: #c84e00; font-weight: 700;
}

.pujcovna-podminky-oznameni {
  display: flex; flex-direction: column; gap: clamp(16px, 2.5vw, 24px);
  margin-top: clamp(8px, 1.5vw, 16px); padding-top: clamp(18px, 2.5vw, 24px);
  border-top: 1px solid var(--color-divider);
}

/* Sbaleni/rozbaleni kapitoly "Podminky pujceni" - viditelna je vzdy jen
   prvni kapitola (nejdulezitejsi udaje), zbytek (kapitoly 2-6 + notice boxy)
   je schovany v teto obalce a plynule se rozbaluje tlacitkem "Zobrazit vice".
   Animace pres max-height (misto height:auto, ktere nejde animovat) -
   presnou hodnotu pocita JS podle skutecne vysky obsahu (scrollHeight).
   Ve sbalenem stavu neni max-height 0, ale "nahled" zacatku dalsi kapitoly
   (JS), ktery pres masku dole plynule mizi do prusvitna - napovida
   zakaznikovi, ze pod tlacitkem pokracuje dalsi obsah. */
.pujcovna-podminky-skryvatelne {
  overflow: hidden;
  transition: max-height .5s cubic-bezier(.4,0,.2,1);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
}
.pujcovna-podminky-skryvatelne.je-rozbaleno {
  overflow: visible;
  -webkit-mask-image: none; mask-image: none;
}
/* "Zakladni informace" je nyni prvni .-blok uvnitr teto vnorene obalky, takze
   by na ni bez tohoto pravidla omylem sedelo :first-child (zadna linka/mezera
   nahore) - vraceno zpet, aby navazovala na predchozi kapitolu stejne jako
   pred pridanim rozbalovani. */
.pujcovna-podminky-skryvatelne-vnitrek > .pujcovna-podminky-blok:first-child {
  border-top: 1px solid var(--color-divider); padding-top: clamp(18px, 2.5vw, 24px);
}

.pujcovna-podminky-prepinac {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 11px 22px;
  border: 2px solid #000f3d; border-radius: 999px; background: #fff;
  color: #000f3d; font-size: 14.5px; font-weight: 700; font-family: inherit;
  line-height: 1; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.pujcovna-podminky-prepinac:hover { background: #000f3d; color: #fff; }
.pujcovna-podminky-prepinac:focus-visible { outline: 2px solid #c84e00; outline-offset: 2px; }
.pujcovna-podminky-prepinac-sipka { width: 14px; height: 14px; flex: none; transition: transform .35s ease; }
.pujcovna-podminky-prepinac[aria-expanded="true"] .pujcovna-podminky-prepinac-sipka { transform: rotate(180deg); }
.pujcovna-podminky-notice-box {
  border-left: 4px solid #c84e00; border-radius: 4px;
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.5vw, 24px);
  background: color-mix(in srgb, #000f3d 3%, transparent);
}
.pujcovna-podminky-notice-box h3 {
  margin: 0 0 6px; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; color: #000f3d;
}
.pujcovna-podminky-notice-box p { margin: 0; font-size: 14.5px; line-height: 1.5; color: color-mix(in srgb, #000f3d 80%, transparent); }

/* Miniaturni kalendar obsazenosti primo v karte vozu (pod tlacitkem
   Poptat termin) - vizualni a funkcni zaklad bez realnych dat (viz
   pujcovna-kalendar.js), kazda karta ma vlastni nezavislou instanci.
   Zamerne velmi kompaktni a omezene sirky, aby nepusobil dominantneji
   nez samotna nabidka vozu a kartu zbytecne neprodlouzil. */
.card-kalendar {
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  max-width: 200px;
}
.card-kalendar-nadpis {
  margin: 0 0 6px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, #000f3d 65%, transparent);
}
.card-kalendar-hlavicka { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.card-kalendar-mesic {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 11.5px; color: #000f3d; text-transform: capitalize;
}
.card-kalendar-sipka {
  flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--color-divider);
  background: #fff; color: #000f3d; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.card-kalendar-sipka:hover { background: #c84e00; color: #fff; border-color: #c84e00; }
.card-kalendar-sipka svg { width: 10px; height: 10px; }

.card-kalendar-mrizka { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-bottom: 6px; }
.card-kalendar-den-nazev {
  text-align: center; font-size: 8px; letter-spacing: 0.02em; text-transform: uppercase;
  color: color-mix(in srgb, #000f3d 45%, transparent);
}
.card-kalendar-den {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  font-size: 9px; border-radius: 3px; line-height: 1;
  border: 0; margin: 0; padding: 0; font-family: inherit; background: none;
}
.card-kalendar-den--prazdny { visibility: hidden; }
.card-kalendar-den--volno { background: color-mix(in srgb, #000f3d 6%, transparent); color: #000f3d; }
/* Vikend/statni svatek - firma mimo provoz, nejde zvolit jako termin
   od/do (viz vykresliVyberKalendar v pujcovna-kalendar.js). Jemna seda,
   ne cervena/oranzova, aby se to vizualne neplietlo s "Obsazeno". */
.card-kalendar-den--nepracovni { background: var(--color-surface); color: color-mix(in srgb, var(--color-text) 45%, transparent); }
button.card-kalendar-den--nepracovni { cursor: not-allowed; }
button.card-kalendar-den--nepracovni:hover { background: var(--color-surface); }
.card-kalendar-den--obsazeno {
  background: #c84e00; color: #fff;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
}
/* Interaktivni vyberovy kalendar (formular Rezervovat termin) - volne dny
   jsou <button>, obsazene <button disabled> a nejdou vybrat. */
button.card-kalendar-den--volno { cursor: pointer; }
button.card-kalendar-den--volno:hover { background: color-mix(in srgb, #000f3d 16%, transparent); }
button.card-kalendar-den:disabled { cursor: not-allowed; }
.card-kalendar-den--v-rozsahu { background: color-mix(in srgb, #000f3d 18%, transparent); color: #000f3d; }
.card-kalendar-den--vybrano {
  background: #000f3d; color: #fff;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
}

.card-kalendar-legenda { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 9.5px; color: color-mix(in srgb, #000f3d 75%, transparent); }
.card-kalendar-legenda-polozka { display: flex; align-items: center; gap: 4px; }
.card-kalendar-znacka { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: none; }
.card-kalendar-znacka--volno { background: color-mix(in srgb, #000f3d 6%, transparent); border: 1px solid var(--color-divider); }
.card-kalendar-znacka--obsazeno { background: #c84e00; }

/* Mini kalendar v karte je cely klikaci - otevira zvetseny kalendar v
   modalu (viz #modal-kalendar-vuz nize a pujcovna-kalendar.js). Jemny
   hover/focus jako vizualni napoveda, ze jde kliknout. */
#vozy-k-zapujceni .card-kalendar {
  cursor: pointer; border-radius: 6px;
  transition: background 0.15s ease;
}
#vozy-k-zapujceni .card-kalendar:hover,
#vozy-k-zapujceni .card-kalendar:focus-visible {
  background: color-mix(in srgb, #000f3d 4%, transparent);
}
#vozy-k-zapujceni .card-kalendar:focus-visible { outline: 2px solid #c84e00; outline-offset: 2px; }

/* Zvetsena varianta stejneho kalendare uvnitr modalu #modal-kalendar-vuz -
   stejne tridy/barvy/logika volno-obsazeno, jen vetsi rozmery a bez
   klikaci/hover chovani mini verze. */
.card-kalendar--modal {
  margin-top: 0; border-top: 0; max-width: none; cursor: default;
  /* Stejne leve/prave odsazeni jako ma hlavicka modalu (.kontakt-modal-hlavicka),
     aby nadpis, sipky, dny i legenda byly zarovnane uvnitr stejne obsahove
     sirky a kalendar se nikde nedotykal hran okna. */
  padding: clamp(16px, 2.5vw, 24px) clamp(28px, 6vw, 48px) clamp(24px, 4vw, 32px);
}
.card-kalendar--modal .card-kalendar-hlavicka { margin-bottom: 16px; }
.card-kalendar--modal .card-kalendar-mesic { font-size: 19px; }
.card-kalendar--modal .card-kalendar-sipka { width: 38px; height: 38px; }
.card-kalendar--modal .card-kalendar-sipka svg { width: 17px; height: 17px; }
.card-kalendar--modal .card-kalendar-mrizka { gap: 6px; margin-bottom: 18px; }
.card-kalendar--modal .card-kalendar-den-nazev { font-size: 12px; padding-bottom: 4px; }
.card-kalendar--modal .card-kalendar-den { font-size: 15px; border-radius: 8px; }
.card-kalendar--modal .card-kalendar-legenda { font-size: 13px; gap: 8px 22px; }
.card-kalendar--modal .card-kalendar-znacka { width: 12px; height: 12px; border-radius: 3px; }
#modal-kalendar-vuz .kontakt-modal-okno { max-width: 420px; }

@media (max-width: 480px) {
  .card-kalendar--modal .card-kalendar-mesic { font-size: 16px; }
  .card-kalendar--modal .card-kalendar-den { font-size: 13px; }
}

/* Interaktivni vyberovy kalendar jako pole primo ve formulari Rezervovat
   termin (#modal-rezervace) - stejne velke citelne rozmery jako .card-kalendar--modal
   vyse, ale bez jejiho leveho/praveho paddingu (ten byl pro kalendar jako
   samostatny obsah celeho modalu; tady kalendar sedi uvnitr formulare,
   ktery uz svuj vlastni padding ma - dvojite odsazeni by pusobilo divne). */
.card-kalendar--vyber {
  margin-top: 2px; border: 1px solid var(--color-divider); border-radius: 8px; padding: 5px 8px;
}
/* Dny nejsou ctvercove (zadne aspect-ratio) - pevna, nizsi vyska radku
   drzi kalendar kompaktni i pri sirsim modalu; sirka bunky dal skaluje
   podle sirky pole (7 stejnych sloupcu), takze zustava dobre klikatelna. */
.card-kalendar--vyber .card-kalendar-hlavicka { margin-bottom: 3px; }
.card-kalendar--vyber .card-kalendar-den-nazev { font-size: 9px; padding-bottom: 1px; }
.card-kalendar--vyber .card-kalendar-mesic { font-size: 13px; }
.card-kalendar--vyber .card-kalendar-sipka { width: 22px; height: 22px; }
.card-kalendar--vyber .card-kalendar-sipka svg { width: 11px; height: 11px; }
.card-kalendar--vyber .card-kalendar-mrizka { gap: 1px; margin-bottom: 4px; }
.card-kalendar--vyber .card-kalendar-den { aspect-ratio: auto; height: 21px; font-size: 11px; border-radius: 4px; }
.card-kalendar--vyber .card-kalendar-legenda { font-size: 10px; gap: 3px 12px; }
.card-kalendar--vyber .card-kalendar-znacka { width: 8px; height: 8px; }

.pujcovna-rezervace-terminy {
  display: flex; flex-wrap: wrap; gap: 2px 20px; margin: 5px 0 0;
  font-size: 12px; color: #000f3d;
}
.pujcovna-rezervace-terminy b { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.pujcovna-rezervace-kalendar-chyba {
  margin: 4px 0 0; font-size: 11.5px; font-weight: 600; color: #b3261e;
}
.pujcovna-rezervace-kalendar-chyba[hidden] { display: none; }

.kontakt-modal-nadpis { margin: 0; font-size: clamp(22px, 2.6vw, 28px); color: #000f3d; }
.kontakt-modal-zavrit {
  flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: var(--color-surface); color: var(--navy);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.kontakt-modal-zavrit svg { width: 18px; height: 18px; }
.kontakt-modal-zavrit:hover { background: var(--orange); color: #fff; }
.kontakt-modal-okno form {
  padding: clamp(16px, 2.5vw, 24px) clamp(28px, 6vw, 48px);
  border-top: 0;
}
.kontakt-modal-okno .field > label, .kontakt-modal-okno .consent { color: #000f3d; }
.kontakt-modal-okno .field { margin-bottom: 8px; }
.kontakt-modal-okno .field > label { margin-bottom: 2px; }
.kontakt-modal-okno .input { min-height: 40px; }
.kontakt-modal-okno textarea.input { height: 76px; min-height: 76px; resize: vertical; }
.kontakt-modal-okno .consent { margin-bottom: 8px; }
.kontakt-modal-formular-akce { display: flex; justify-content: flex-end; margin-top: 4px; }
.kontakt-modal-okno .input.kontakt-modal-input--chyba { border-color: #b3261e; background: color-mix(in srgb, #b3261e 6%, #fff); }
.kontakt-modal-termin-chyba {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 6px 0 0; padding: 0; font-size: 12.5px; font-weight: 600; line-height: 1.4;
  color: #b3261e;
}
.kontakt-modal-termin-chyba[hidden] { display: none; }
.kontakt-modal-termin-chyba svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.kontakt-modal-okno .btn-primary { background: #c84e00; color: #fff; }
.kontakt-modal-okno .btn-primary:hover { background: color-mix(in srgb, #c84e00 88%, black); }
.kontakt-modal-mapa-ramec { position: relative; aspect-ratio: 16 / 10; }
.kontakt-modal-mapa-ramec iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 640px) {
  .kontakt-modal { padding: var(--space-3); }
  .kontakt-modal-okno, .kontakt-modal-okno--mapa, .kontakt-modal-okno--obrazek { max-width: 100%; max-height: 92vh; }
  .kontakt-modal-mapa-ramec { aspect-ratio: 4 / 5; }
}

/* === Sjednocene rozlozeni VSECH hero sekci na 3 zony (nazev nahore / nadpis
   +popis uprostred / CTA tlacitka dole) - zadano vyslovne obsluhou 2026-10-16
   "nepouzivej pevne absolutni pozice, ktere by zpusobovaly prekryvani na
   mensich obrazovkach". Spolecna trida .hero-stred-blok obaluje JEN h1+popis
   (kicker a CTA tlacitka/odkazy zustavaji jako primi sourozenci mimo ni) a
   pouziva flex:1 + justify-content:center, takze zabere presne prostor MEZI
   kickerem nahore a tlacitky dole a nadpis+popis v nem vycentruje - zadne
   pevne vypocitane px rezervy (na rozdil od drivejsiho reseni), funguje
   spolehlive na jakekoli vysce/sirce panelu i pri libovolne delce textu.
   Pouzita stejne ve vsech .XXX-hero-obsah nize (Servis/Kontakt/Eura/Masuria/
   Rimor/Pujcovna/Vozy pro vozickare/O nas/Akce a slevy). Kazdy .XXX-hero-obsah
   ma jen padding-top/padding-bottom pro dech od okraju panelu, zadne dalsi
   zarovnavaci triky. */
.hero-stred-blok {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center;
  gap: clamp(10px, 1.6vw, 22px);
  margin-top: clamp(8px, 1.5vw, 16px);
}

/* === Servis (servis.html) hero — sjednoceno na vzor .rimor-hero/.eura-hero
   (zadano vyslovne "rozmerove a vizualne pusobit jednotne s Rimor/Eura
   Mobil"): misto puvodniho vh-zavisleho min-height pevny panoramaticky
   pomer stran 3:1 a stejna sourozenecka struktura .servis-hero-ramec
   (foto+gradient) + .servis-hero-obsah (text, absolutne pres cely ramec).
   Zdrojova fotka img/rozcestnik-pozadi.jpg ma prirozeny pomer PRESNE 3:1
   (1920x640), takze object-fit:cover ji s pomerem 3:1 zobrazi celou bez
   jakehokoli orezu. Servis ma DVE tlacitka vedle sebe (.servis-hero-actions),
   v normalnim toku hned pod textem. Barva pozadi/gradientu zustava puvodni
   var(--navy-deep) #0d1740 (na rozdil od #000f3d u Rimor/Eura) - zmena
   layoutu/rozmeru, ne barevneho ladeni, ktere nebylo soucasti zadani.
   2026-10-16: na pokyn obsluhy zvetsen nadpis a cely textovy blok (vc.
   tlacitek) svisle vycentrovan jako jeden celek (justify-content:center
   misto flex-start + pevny padding-top). DULEZITE: puvodne mela tlacitka
   /odkazy u vsech hero sekci s JEDNIM CTA (Eura/Masuria/Rimor/Vozy) i tady
   u Pujcovny/Kontaktu vlastni absolutni pozici "bottom:44px" nezavislou na
   textu - se zvetsenym a vycentrovanym textem uz to ale spolehlive
   nefungovalo (zmereno CDP: text blok se v uzsich a strednich sirkach
   (900-1280px) s tlacitkem PREKRYVAL, zaporna mezera az -60px). Zkousene
   pevne padding-bottom rezervy nestacily/byly nespolehlive naprac sirkami.
   Spravna oprava: tlacitka/odkazy jsou soucasti STEJNEHO flex sloupce jako
   text (margin-top misto position:absolute+bottom), takze se vzdy drzi
   hned pod textem a centruji se spolu s nim jako jeden celek - kolize uz
   nemuze nastat pri zadne sirce obrazovky. Stejna zmena provedena u vsech
   hero sekci s tlacitkem nize v souboru (Kontakt/Eura/Masuria/Rimor/
   Pujcovna/Vozy pro vozickare). Puvodni "pinch" media dotazy pro uzky pas
   901-1010px (rucni doladeni odsazeni) uz touto zmenou nejsou potreba a
   byly odstraneny. === */
.servis-hero { position: relative; background: var(--navy-deep); }
.servis-hero-ramec {
  position: relative; overflow: hidden; border-bottom: 2px solid var(--color-divider);
  aspect-ratio: 3 / 1;
}
.servis-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.servis-hero-clona {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    var(--navy-deep) 0%,
    color-mix(in srgb, var(--navy-deep) 82%, transparent) 10%,
    color-mix(in srgb, var(--navy-deep) 35%, transparent) 20%,
    transparent 31%);
}
.servis-hero-obsah {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  padding-left: clamp(24px, 2.5vw, 48px);
  padding-top: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 3.5vw, 48px);
}
.servis-hero-kicker {
  color: #fff; margin: 0;
  font-size: clamp(12px, 0.9vw, 16px); font-weight: 700;
  letter-spacing: 1.8px; line-height: 1.15;
}
.servis-hero-kicker::after { content: ""; display: block; width: 48px; height: 3px; background: var(--orange); margin-top: clamp(4px, 0.6vw, 10px); }
.servis-hero-obsah h1 {
  color: #fff; margin: 0; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 1.08; width: fit-content; max-width: 50vw;
  font-size: clamp(32px, 3.2vw, 68px); font-weight: 800;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.servis-hero-text {
  color: #fff; margin: 0; max-width: min(620px, 30vw);
  font-size: clamp(16px, 1.3vw, 23px); font-weight: 400; line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.servis-hero-actions {
  margin-top: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-3);
}
.servis-hero .actions svg { width: 16px; height: 16px; flex: none; }
.servis-hero .btn-primary { background: #c84e00; color: #fff; }
.servis-hero .btn-primary:hover { background: color-mix(in srgb, #c84e00 88%, black); }
.servis-hero .btn-secondary { border-color: #fff; color: #fff; }
.servis-hero .btn-secondary:hover { background: color-mix(in srgb, #fff 16%, transparent); }
@media (max-width: 900px) {
  .servis-hero-ramec { border-bottom: 0; }
  .servis-hero-clona { display: none; }
  .servis-hero-obsah {
    position: static; inset: auto; display: block;
    background: var(--navy-deep);
    padding: clamp(20px, 5vw, 32px) var(--gut);
    border-bottom: 2px solid var(--color-divider);
  }
  .servis-hero-kicker { color: #fff; }
  .servis-hero-obsah h1 {
    color: #fff; max-width: none;
    font-size: clamp(30px, 8vw, 44px); text-shadow: none;
  }
  .servis-hero-text {
    color: #fff; max-width: none;
    font-size: 18px; line-height: 1.5; text-shadow: none;
  }
  .servis-hero-actions { position: static; left: auto; bottom: auto; margin-top: 20px; }
}

/* === Akce a slevy (akce-a-slevy.html) hero - presny vzor .servis-hero
   (zadano vyslovne "nevytvarej novy design, prevezmi existujici reseni
   hero sekci Prodej/Pujcovna/Servis"). Stejna sourozenecka struktura
   .akce-hero-ramec (foto+gradient) + .akce-hero-obsah (text), stejny
   aspect-ratio 3:1 a stejny gradient. Zadne tlacitko v hero (zadano jen
   nadpis + kratky popis, bez CTA). Nadpis "Akce"/"a slevy" dvoubarevne
   pres .or (stejna trida jako .rozcestnik-text-slide .or na uvodni
   strance) - scoped tady zvlast, protoze .or sama o sobe nema barvu mimo
   puvodni kontext.
   Zdrojova fotka img/akce-a-slevy/hero-akce-a-slevy.jpg (2026-10-16,
   nahrazena obsluhou za druhou verzi) ma pomer 2:1 (1774x887, JPEG q70 -
   WebP enkoder neni v tomto prostredi k dispozici, stejny ustupek jako u
   puvodni verze i Servis/Pujcovna). V panelu 3:1 to znamena orez cca 33 %
   vysky - vic, nez u puvodni fotky. Zmereno pixelove: cenovka "Speciální
   nabídky" (cely stitek vc. napisu) konci cca na 40 % vysky obrazku,
   obytny vuz sahá od cca 15 % do cca 82 % vysky. Pri strednem orezu
   (object-position 50% 50%) by se oriznul vrsek cenovky - proto
   object-position: 50% 24%, ktere oriznuti posouva tak, aby se vzala
   mensi cast shora (jen zavesny provazek nad cenovkou) a vetsi cast zdola
   (popredi se stesti/listim, nejmene dulezita cast zaberu) - cenovka i
   vuz tak zustavaji cele viditelne. Pri zmene zdrojove fotky v budoucnu
   zmer znovu, nekopiruj tuto hodnotu naslepo.
   2026-10-16 (2. uprava): nadpis zvetsen a textovy blok vycentrovan -
   .akce-hero-obsah tehdy dostalo justify-content:center na cely obsah.
   2026-10-16 (3. uprava, nahrazuje predchozi): na pokyn obsluhy sjednoceno
   na 3-zonove rozlozeni pouzite ve VSECH hero sekcich - viz spolecny
   komentar u .hero-stred-blok vyse. Kicker zustava jako prvni primy
   sourozenec (drzi se nahoru), h1+text jsou obalene v .hero-stred-blok
   (vycentruje se jen tento blok v prostoru mezi kickerem a dolnim
   okrajem panelu - tady zadne CTA tlacitko neni). Hero obrazek/orez
   (object-position) a vyska panelu (aspect-ratio 3:1) zustavaji presne
   stejne jako vyse. */
.akce-hero { position: relative; background: var(--navy-deep); }
.akce-hero-ramec {
  position: relative; overflow: hidden; border-bottom: 2px solid var(--color-divider);
  aspect-ratio: 3 / 1;
}
.akce-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; display: block; }
.akce-hero-clona {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    var(--navy-deep) 0%,
    color-mix(in srgb, var(--navy-deep) 82%, transparent) 10%,
    color-mix(in srgb, var(--navy-deep) 35%, transparent) 20%,
    transparent 31%);
}
.akce-hero-obsah {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  padding-left: clamp(24px, 2.5vw, 48px);
  padding-top: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 3.5vw, 48px);
}
.akce-hero-kicker {
  color: #fff; margin: 0;
  font-size: clamp(12px, 0.9vw, 16px); font-weight: 700;
  letter-spacing: 1.8px; line-height: 1.15;
}
.akce-hero-kicker::after { content: ""; display: block; width: 48px; height: 3px; background: var(--orange); margin-top: clamp(4px, 0.6vw, 10px); }
.akce-hero-obsah h1 {
  color: #fff; margin: 0; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 1.05; width: fit-content; max-width: 50vw;
  font-size: clamp(32px, 3.2vw, 68px); font-weight: 800;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.akce-hero-obsah h1 .or { color: var(--orange); }
.akce-hero-text {
  color: #fff; margin: 0; max-width: min(620px, 30vw);
  font-size: clamp(16px, 1.3vw, 23px); font-weight: 400; line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
@media (max-width: 900px) {
  .akce-hero-ramec { border-bottom: 0; }
  .akce-hero-clona { display: none; }
  .akce-hero-obsah {
    position: static; inset: auto; display: block;
    background: var(--navy-deep);
    padding: clamp(20px, 5vw, 32px) var(--gut);
    border-bottom: 2px solid var(--color-divider);
  }
  .akce-hero-kicker { color: #fff; }
  .akce-hero-obsah h1 {
    color: #fff; max-width: none;
    font-size: clamp(30px, 8vw, 44px); text-shadow: none;
  }
  .akce-hero-text {
    color: #fff; max-width: none;
    font-size: 18px; line-height: 1.5; text-shadow: none;
  }
}

/* Akce a slevy - obsahova sekce pod hero: na pokyn obsluhy nahrazen puvodni
   pripravny text (nadpis+odstavec) obrazkem pozvanky na otevreni showroomu
   (zadano "co nejvetsi, pres celou sirku obsahoveho kontejneru, bez
   deformace ani orezu"). .akce-obrazek jen resetuje vychozi margin <figure>
   elementu (jinak by vznikla neduci mezera nahore/dole) a obrazek uvnitr
   ma explicitni width:100%/height:auto (zadano doslovne), i kdyz by ho
   uz responzivne skaloval globalni img{max-width:100%}. Tlacitka pod
   obrazkem pouzivaji puvodni .actions (margin-top: var(--space-6)) -
   zadna dalsi uprava mezery nebyla potreba. */
.akce-obrazek { margin: 0; }
.akce-obrazek img { display: block; width: 100%; height: auto; }
/* 2026-10-17: obrazek na pokyn obsluhy klikatelny - zvetseni do modalu
   (znovupouzity existujici .kontakt-modal engine z kontakt-modaly.js,
   zadny novy JS). .akce-obrazek-btn jen resetuje vychozi vzhled <button>,
   aby vizualne vypadal presne jako puvodni samotny obrazek - zadny ramecek,
   zadne vlastni pozadi, jen kurzor a jemna indikace priblizitelnosti pri
   najeti mysi. */
.akce-obrazek-btn {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none;
  cursor: zoom-in; text-align: left;
}
.akce-obrazek-btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.akce-obrazek-btn img { transition: opacity 0.15s ease; }
.akce-obrazek-btn:hover img { opacity: 0.92; }
/* Modal se zvetsenym obrazkem - presne stejna sablona jako #modal-mapa
   (.kontakt-modal/.kontakt-modal-okno/-hlavicka/-zavrit z kontakt.html),
   jen sirsi varianta pro landscape fotografii misto mapy/formulare.
   max-width 1300px cca odpovida prirozene sirce zdrojoveho obrazku
   (1600px) pri typickem zoomu prohlizece, Obrazek uvnitr ma jen
   width:100%/height:auto - zadny orez, zadna deformace, cely pomer
   stran zachovan presne jako puvodni soubor. */
.kontakt-modal-okno--obrazek { max-width: 1300px; }
.kontakt-modal-obrazek-ramec { padding: clamp(16px, 2.5vw, 28px); }
.kontakt-modal-obrazek-ramec img { display: block; width: 100%; height: auto; }

/* === Eura Mobil (eura-mobil.html) hero - PANORAMATICKY pas s pevnym
   aspect-ratio 3:1 (stejny vzor jako .vozy-hero-ramec u Vozy pro
   vozickare), misto vh-zavisleho .servis-hero - zadano vyslovne
   "zachovej siroky panoramaticky pomer stran". Zdrojova fotka ma pomer
   4:3 (dva vozy + hodne oblohy/hor nahore a dole) - orez na 3:1 pri
   object-position 50% 55% drzi OBA vozy vzdy cele v zaberu (overeno
   vygenerovanymi nahledy pri pomerech 2.5-3.2:1, 3:1 zvoleno jako
   bezpecne s dostatecnou rezervou u strechy i kol). Pevny aspect-ratio
   funguje shodne na vsech sirkach (na rozdil od vh-pristupu), tedy
   spolehlive responzivni pro desktop/tablet/mobil.
   Struktura je STEJNA jako u .vozy-hero: vnejsi .eura-hero (bez pevne
   vysky) obsahuje DVA SOUROZENCE - .eura-hero-ramec (foto+gradient,
   pevny aspect-ratio, overflow:hidden) a .eura-hero-obsah (text). Duvod:
   kdyby byl text normalnim potomkem ramce s overflow:hidden, ve stacked
   (mobilnim) rezimu by se orizl/schoval, protoze by ho pevna vyska ramce
   (aspect-ratio) nedovolila zobrazit cely - overeno/opraveno behem
   nasazovani (na 900px sirce byl text neviditelny, nez byla struktura
   rozdelena na sourozence). */
.eura-hero { position: relative; background: #000f3d; }
.eura-hero-ramec {
  position: relative; overflow: hidden; border-bottom: 2px solid var(--color-divider);
  aspect-ratio: 3 / 1;
}
.eura-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.eura-hero-clona {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    #000f3d 0%,
    color-mix(in srgb, #000f3d 82%, transparent) 10%,
    color-mix(in srgb, #000f3d 35%, transparent) 20%,
    transparent 31%);
}
/* Text pres levou (ztmavenou) cast hero fotky - absolutne pozicovany
   overlay na sirokych sirkach (pevny aspect-ratio 3:1 ramce je na uzkych
   mobilech prilis nizky, ~130px pri 390px sirce, na overlay text by se
   tam uz nevesel), pod 900px se text presouva POD fotku (fotka sama
   zustava vzdy cela, panoramaticka, na vsech sirkach beze zmeny - meni
   se jen pozice textu). */
.eura-hero-obsah {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  padding-left: clamp(24px, 2.5vw, 48px);
  padding-top: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 3.5vw, 48px);
}
.eura-hero-kicker {
  color: #fff; margin: 0;
  font-size: clamp(12px, 0.9vw, 16px); font-weight: 700;
  letter-spacing: 1.8px; line-height: 1.15;
}
.eura-hero-kicker::after { content: ""; display: block; width: 48px; height: 3px; background: var(--orange); margin-top: clamp(4px, 0.6vw, 10px); }
.eura-hero-obsah h1 {
  color: #fff; margin: 0; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 1.08; width: fit-content; max-width: 50vw;
  font-size: clamp(32px, 3.2vw, 68px); font-weight: 800;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.eura-hero-text {
  color: #fff; margin: 0; max-width: min(620px, 30vw);
  font-size: clamp(16px, 1.3vw, 23px); font-weight: 400; line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.eura-hero-btn {
  margin-top: 0;
  width: fit-content;
  background: #c84e00; color: #fff; border-color: transparent;
  font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  transition: background-color 0.2s ease;
}
.eura-hero-btn span { transition: transform 0.2s ease; }
.eura-hero-btn:hover { background: color-mix(in srgb, #c84e00 85%, #000); }
.eura-hero-btn:hover span { transform: translateX(3px); }
@media (max-width: 900px) {
  .eura-hero-ramec { border-bottom: 0; }
  .eura-hero-clona { display: none; }
  .eura-hero-obsah {
    position: static; inset: auto; display: block;
    background: #000f3d;
    padding: clamp(20px, 5vw, 32px) var(--gut);
    border-bottom: 2px solid var(--color-divider);
  }
  .eura-hero-kicker { color: #fff; }
  .eura-hero-obsah h1 {
    color: #fff; max-width: none;
    font-size: clamp(30px, 8vw, 44px); text-shadow: none;
  }
  .eura-hero-text {
    color: #fff; max-width: none;
    font-size: 18px; line-height: 1.5; text-shadow: none;
  }
  .eura-hero-btn { position: static; left: auto; bottom: auto; width: auto; margin-top: 20px; }
}

/* Masuria hero - foto + gradient clona, zatim bez textu/CTA (pridano
   pozdeji), stejny vzor jako .rimor-hero/.eura-hero: pomer stran 3:1,
   object-fit:cover s object-position:50% 50%, tmavemodre pozadi a
   delici linka pod fotkou. Az pribude text, pouzije se stejny
   sourozenecky vzor .masuria-hero-ramec (foto) + .masuria-hero-obsah
   (text) jako u .rimor-hero/.eura-hero. */
.masuria-hero { position: relative; background: #000f3d; }
.masuria-hero-ramec {
  position: relative; overflow: hidden; border-bottom: 2px solid var(--color-divider);
  aspect-ratio: 3 / 1;
}
.masuria-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.masuria-hero-clona {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    #000f3d 0%,
    color-mix(in srgb, #000f3d 82%, transparent) 10%,
    color-mix(in srgb, #000f3d 35%, transparent) 20%,
    transparent 31%);
}
/* Text v hero Masuria - presna kopie .rimor-hero-obsah/h1/.rimor-hero-text
   (bez kickeru - nazev znacky uz je soucasti nadpisu, a zatim bez CTA
   tlacitka, pridano pozdeji). */
.masuria-hero-obsah {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  padding-left: clamp(24px, 2.5vw, 48px);
  padding-top: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 3.5vw, 48px);
}
.masuria-hero-kicker {
  color: #fff; margin: 0;
  font-size: clamp(12px, 0.9vw, 16px); font-weight: 700;
  letter-spacing: 1.8px; line-height: 1.15;
}
.masuria-hero-kicker::after { content: ""; display: block; width: 48px; height: 3px; background: var(--orange); margin-top: clamp(4px, 0.6vw, 10px); }
.masuria-hero-obsah h1 {
  color: #fff; margin: 0; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 1.08; width: fit-content; max-width: 50vw;
  font-size: clamp(32px, 3.2vw, 68px); font-weight: 800;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.masuria-hero-text {
  color: #fff; margin: 0; max-width: min(620px, 30vw);
  font-size: clamp(16px, 1.3vw, 23px); font-weight: 400; line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.masuria-hero-btn {
  margin-top: 0;
  width: fit-content;
  background: #c84e00; color: #fff; border-color: transparent;
  font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  transition: background-color 0.2s ease;
}
.masuria-hero-btn span { transition: transform 0.2s ease; }
.masuria-hero-btn:hover { background: color-mix(in srgb, #c84e00 85%, #000); }
.masuria-hero-btn:hover span { transform: translateX(3px); }
@media (max-width: 900px) {
  .masuria-hero-ramec { border-bottom: 0; }
  .masuria-hero-clona { display: none; }
  .masuria-hero-obsah {
    position: static; inset: auto; display: block;
    background: #000f3d;
    padding: clamp(20px, 5vw, 32px) var(--gut);
    border-bottom: 2px solid var(--color-divider);
  }
  .masuria-hero-kicker { color: #fff; }
  .masuria-hero-obsah h1 {
    color: #fff; max-width: none;
    font-size: clamp(30px, 8vw, 44px); text-shadow: none;
  }
  .masuria-hero-text {
    color: #fff; max-width: none;
    font-size: 18px; line-height: 1.5; text-shadow: none;
  }
  .masuria-hero-btn { position: static; left: auto; bottom: auto; width: auto; margin-top: 20px; }
}

/* Rimor hero - zatim jen foto bez textu/CTA (pridano pozdeji), vyskove i
   stylove sjednoceno s .eura-hero: stejny pomer stran 3:1, stejny
   object-fit:cover s object-position:50% 50%, stejne tmavemodre pozadi
   a delici linka pod fotkou. Az pribude text, pouzije se stejny
   sourozenecky vzor .rimor-hero-ramec (foto) + .rimor-hero-obsah (text)
   jako u .eura-hero/.eura-hero-ramec/.eura-hero-obsah. */
.rimor-hero { position: relative; background: #000f3d; }
.rimor-hero-ramec {
  position: relative; overflow: hidden; border-bottom: 2px solid var(--color-divider);
  aspect-ratio: 3 / 1;
}
.rimor-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.rimor-hero-clona {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    #000f3d 0%,
    color-mix(in srgb, #000f3d 82%, transparent) 10%,
    color-mix(in srgb, #000f3d 35%, transparent) 20%,
    transparent 31%);
}
.rimor-hero-obsah {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  padding-left: clamp(24px, 2.5vw, 48px);
  padding-top: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 3.5vw, 48px);
}
.rimor-hero-kicker {
  color: #fff; margin: 0;
  font-size: clamp(12px, 0.9vw, 16px); font-weight: 700;
  letter-spacing: 1.8px; line-height: 1.15;
}
.rimor-hero-kicker::after { content: ""; display: block; width: 48px; height: 3px; background: var(--orange); margin-top: clamp(4px, 0.6vw, 10px); }
.rimor-hero-obsah h1 {
  color: #fff; margin: 0; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 1.08; width: fit-content; max-width: 50vw;
  font-size: clamp(32px, 3.2vw, 68px); font-weight: 800;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.rimor-hero-text {
  color: #fff; margin: 0; max-width: min(620px, 30vw);
  font-size: clamp(16px, 1.3vw, 23px); font-weight: 400; line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.rimor-hero-btn {
  margin-top: 0;
  width: fit-content;
  background: #c84e00; color: #fff; border-color: transparent;
  font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  transition: background-color 0.2s ease;
}
.rimor-hero-btn span { transition: transform 0.2s ease; }
.rimor-hero-btn:hover { background: color-mix(in srgb, #c84e00 85%, #000); }
.rimor-hero-btn:hover span { transform: translateX(3px); }
@media (max-width: 900px) {
  .rimor-hero-ramec { border-bottom: 0; }
  .rimor-hero-clona { display: none; }
  .rimor-hero-obsah {
    position: static; inset: auto; display: block;
    background: #000f3d;
    padding: clamp(20px, 5vw, 32px) var(--gut);
    border-bottom: 2px solid var(--color-divider);
  }
  .rimor-hero-kicker { color: #fff; }
  .rimor-hero-obsah h1 {
    color: #fff; max-width: none;
    font-size: clamp(30px, 8vw, 44px); text-shadow: none;
  }
  .rimor-hero-text {
    color: #fff; max-width: none;
    font-size: 18px; line-height: 1.5; text-shadow: none;
  }
  .rimor-hero-btn { position: static; left: auto; bottom: auto; width: auto; margin-top: 20px; }
}

/* === Pujcovna (pujcovna.html) hero — sjednoceno na vzor .rimor-hero/
   .eura-hero/.servis-hero (zadano vyslovne "hero sekce Rimor, Eura Mobil,
   Servis a Pujcovna budou mit jednotnou vysku, proporce, zarovnani a
   vizualni styl"): misto puvodniho vh-zavisleho min-height pevny
   panoramaticky pomer stran 3:1 a stejna sourozenecka struktura
   .pujcovna-hero-ramec (foto+gradient) + .pujcovna-hero-obsah (text,
   absolutne pres cely ramec, stejny padding-left/padding-top jako
   Rimor/Eura/Servis). Zdrojova fotka img/inspirace2.jpg ma prirozeny
   pomer PRESNE 3:1 (1920x640), takze object-fit:cover ji zobrazi celou
   bez jakehokoli orezu. Vnitrni .pujcovna-hero-text (kicker/h1/seznam/
   tlacitka) si ponechava vlastni flex sloupec s gap - jen jeho max-width
   hodnoty (h1, seznam) sjednoceny na stejnou sirku jako .rimor-hero-obsah
   h1/.rimor-hero-text. Barva pozadi/gradientu zustava puvodni
   var(--navy-deep) #0d1740 - zmena layoutu/rozmeru, ne barevneho ladeni,
   ktere nebylo soucasti zadani. === */
.pujcovna-hero { position: relative; background: var(--navy-deep); }
.pujcovna-hero-ramec {
  position: relative; overflow: hidden; border-bottom: 2px solid var(--color-divider);
  aspect-ratio: 3 / 1;
}
.pujcovna-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.pujcovna-hero-clona {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    var(--navy-deep) 0%,
    color-mix(in srgb, var(--navy-deep) 82%, transparent) 10%,
    color-mix(in srgb, var(--navy-deep) 35%, transparent) 20%,
    transparent 31%);
}
.pujcovna-hero-obsah {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  padding-left: clamp(24px, 2.5vw, 48px);
  padding-top: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 3.5vw, 48px);
}
.pujcovna-hero-kicker {
  color: #fff; margin: 0;
  font-size: clamp(12px, 0.9vw, 16px); font-weight: 700;
  letter-spacing: 1.8px; line-height: 1.15;
}
.pujcovna-hero-kicker::after { content: ""; display: block; width: 48px; height: 3px; background: var(--orange); margin-top: clamp(4px, 0.6vw, 10px); }
.pujcovna-hero-obsah h1 {
  color: #fff; margin: 0; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 1.08; width: fit-content; max-width: 50vw;
  font-size: clamp(32px, 3.2vw, 68px); font-weight: 800;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.pujcovna-hero-popis {
  margin: 0; max-width: min(620px, 30vw);
  color: color-mix(in srgb, #fff 88%, transparent);
  font-size: clamp(16px, 1.3vw, 23px); line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.pujcovna-hero-popis strong { color: inherit; font-weight: var(--font-heading-weight); }
.pujcovna-hero-actions { margin-top: 0; }
.pujcovna-hero .actions svg { width: 16px; height: 16px; flex: none; }
.pujcovna-hero .btn-primary { background: #c84e00; color: #fff; }
.pujcovna-hero .btn-primary:hover { background: color-mix(in srgb, #c84e00 88%, black); }
.pujcovna-hero .btn-secondary { border-color: #fff; color: #fff; }
.pujcovna-hero .btn-secondary:hover { background: color-mix(in srgb, #fff 16%, transparent); }
@media (max-width: 900px) {
  .pujcovna-hero-ramec { border-bottom: 0; }
  .pujcovna-hero-clona { display: none; }
  .pujcovna-hero-obsah {
    position: static; inset: auto; display: block;
    background: var(--navy-deep);
    padding: clamp(20px, 5vw, 32px) var(--gut);
    border-bottom: 2px solid var(--color-divider);
  }
  .pujcovna-hero-kicker { color: #fff; }
  .pujcovna-hero-obsah h1 {
    color: #fff; max-width: none;
    font-size: clamp(30px, 8vw, 44px); text-shadow: none;
  }
  .pujcovna-hero-popis {
    color: #fff; max-width: none;
    font-size: 18px; line-height: 1.5; text-shadow: none;
  }
  .pujcovna-hero-actions { position: static; left: auto; bottom: auto; margin-top: 20px; }
}

/* === "Vozy pro vozickare" (sky-free.html) hero - vzor .servis-hero (kicker s
   oranzovou carkou, tucny bily text, plynuly gradient bez ostre hrany),
   firemni barva #000f3d (zadano konkretne misto var(--navy-deep)).
   .vozy-hero-ramec ma PEVNY aspect-ratio presne 3:1 = stejny pomer jako
   zdrojova fotka (2172x724) -> object-fit:cover NEOREZAVA vubec, cela
   panoramaticka fotka (krajina, jezero, hory, zena na voziku, rampa, cele
   auto) je vzdy videt cela, jen zvetsena/zmensena podle sirky. Auto tak
   pusobi mensi a je dal od leveho okraje presne jako ve zdrojove fotce
   (misto drivejsiho orezu zleva, ktery auto opticky zvetsoval a tlacil
   text do uzkeho sloupce).
   Diky nulovemu orezu zustava zena na voziku presne na sve puvodni pozici
   ~25,8-36,6 % sirky snimku (561-796 px z 2172 px) - text/gradient proto
   muze byt sirsi nez v predchozi verzi a presto pred ni bezpecne konci.
   Misto min-height:100vh jako u Servisu pouzivame pevny aspect-ratio na
   vsech sirkach - u fotky se 2 objekty daleko od sebe by min-height:100vh
   na uzkych/vysokych mobilech oriznul jednoho z nich.
   Pod 1080px uz je bezpecny sloupec na text prilis uzky pro citelnost -
   text se tam presouva pod fotku (cela fotka bez prekryvu).
   2026-10-16: nadpis zvetsen a cely blok svisle vycentrovan (stejny
   princip jako u ostatnich hero sekci - viz komentar u .servis-hero).
   NA ROZDIL od ostatnich hero sekci ale h1 max-width ZUSTAVA 44vw (ne
   50vw) - je to zamerne, kvuli zene na voziku ve fotce ~25,8-36,6 %
   sirky zminovane vyse; sirsi box by s vetsim pismem mohl zasahovat do
   jejiho prostoru. */
.vozy-hero { position: relative; background: #000f3d; }
.vozy-hero-ramec {
  position: relative; overflow: hidden;
  border-bottom: 2px solid var(--color-divider);
  aspect-ratio: 3 / 1;
}
.vozy-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }
.vozy-hero-clona {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    #000f3d 0%,
    color-mix(in srgb, #000f3d 82%, transparent) 10%,
    color-mix(in srgb, #000f3d 35%, transparent) 20%,
    transparent 31%);
}
.vozy-hero-obsah {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  padding-left: clamp(24px, 2.5vw, 48px);
  padding-top: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 3.5vw, 48px);
}
.vozy-hero-kicker {
  color: #fff; margin: 0;
  font-size: clamp(14px, 1vw, 16px); font-weight: 700;
  letter-spacing: 1.8px; line-height: 1.2;
}
.vozy-hero-kicker::after { content: ""; display: block; width: 48px; height: 3px; background: var(--orange); margin-top: 10px; }
.vozy-hero-obsah h1 {
  color: #fff; margin: 0; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 1.08; width: fit-content; max-width: 44vw;
  font-size: clamp(32px, 3.2vw, 68px); font-weight: 800;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.vozy-hero-text {
  color: #fff; margin: 0; max-width: min(560px, 27vw);
  font-size: clamp(16px, 1.3vw, 23px); font-weight: 400; line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.vozy-hero-btn {
  margin-top: 0;
  width: fit-content;
  background: #c84e00; color: #fff; border-color: transparent;
  font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  transition: background-color 0.2s ease;
}
.vozy-hero-btn span { transition: transform 0.2s ease; }
.vozy-hero-btn:hover { background: color-mix(in srgb, #c84e00 85%, #000); }
.vozy-hero-btn:hover span { transform: translateX(3px); }
@media (max-width: 1080px) {
  .vozy-hero-ramec { border-bottom: 0; }
  .vozy-hero-clona { display: none; }
  .vozy-hero-obsah {
    position: static; inset: auto; display: block;
    padding: clamp(18px, 5vw, 26px) var(--gut);
    border-bottom: 2px solid var(--color-divider);
  }
  .vozy-hero-kicker { color: #fff; }
  .vozy-hero-obsah h1 {
    color: #fff; max-width: none;
    font-size: clamp(30px, 8vw, 44px); text-shadow: none;
  }
  .vozy-hero-text {
    color: #fff; max-width: none;
    font-size: 18px; line-height: 1.5; text-shadow: none;
  }
  .vozy-hero-btn { position: static; left: auto; bottom: auto; width: auto; margin-top: 20px; }
}

/* Vodorovny pas 6 vyhod pod HERO - lehky/kompaktni, bez karet/ramecku,
   jen jemne sedive vertikalni linky mezi polozkami (vzor: svetle modry
   kruh s linearni ikonou, tucny tmavemodry nadpis, sedy popis). Firemni
   tmavemodra #000f3d (stejna jako HERO), oranzova #c84e00 jen jako velmi
   jemny hover detail - presne dle zadani. */
.vozy-vyhody { padding-top: clamp(8px, 1.5vw, 16px); padding-bottom: clamp(28px, 4vw, 44px); background: #fff; }
.vozy-vyhody-pas {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut);
}
.vozy-vyhody-item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 clamp(6px, 1.4vw, 18px);
  border-left: 1px solid var(--color-divider);
}
.vozy-vyhody-item:first-child { border-left: 0; }
.vozy-vyhody-ikona {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, #000f3d 8%, #fff);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
  transition: background-color 0.2s ease;
}
.vozy-vyhody-ikona svg { width: 26px; height: 26px; color: #000f3d; }
.vozy-vyhody-item h3 { font-size: 15px; font-weight: 700; color: #000f3d; margin: 0 0 4px; line-height: 1.3; }
.vozy-vyhody-item p { font-size: 13px; line-height: 1.45; margin: 0; color: color-mix(in srgb, #000f3d 55%, transparent); max-width: 22ch; }
.vozy-vyhody-item:hover .vozy-vyhody-ikona { background: color-mix(in srgb, #c84e00 12%, #fff); }
.vozy-vyhody-item:hover h3 { color: #c84e00; }
@media (max-width: 860px) {
  .vozy-vyhody-pas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vozy-vyhody-item { border-left: 0; padding: 0 12px; }
  .vozy-vyhody-item:nth-child(2n) { border-left: 1px solid var(--color-divider); }
  .vozy-vyhody-item:nth-child(n+3) { margin-top: clamp(20px, 4vw, 32px); padding-top: clamp(20px, 4vw, 32px); border-top: 1px solid var(--color-divider); }
}

/* Zaverecny pas "Reseni, ktera davaji smysl" - fotka (leva pulka) + svetly
   textovy panel (prava pulka) jako JEDEN celistvy blok pres celou sirku
   obrazovky (bez .wrap na sekci), zadne ramecky/karty. Fotka pouzita
   znovu z HERO (jina, hlubsi zaostrena pozice), textovy panel s jemnym
   modravym odstinem --color-surface. */
.vozy-reseni-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.vozy-reseni-foto { position: relative; min-height: 460px; overflow: hidden; }
.vozy-reseni-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 35% 50%; }
/* Automaticky prolinaci slideshow (viz vozy-reseni-slideshow.js) - vsechny
   snimky lezi pres sebe na stejnem miste (position:absolute), plynule
   krizovy prechod pres opacity, aby nedochazelo k zadnemu poskakovani
   rozmeru sekce (vyska/sirka leve poloviny je uz dana .vozy-reseni-foto). */
.vozy-reseni-slideshow img {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 0.9s ease;
}
.vozy-reseni-slideshow img.je-aktivni { opacity: 1; }
.vozy-reseni-obsah { display: flex; align-items: center; background: var(--color-surface); padding: clamp(40px, 6vw, 88px) var(--gut); }
.vozy-reseni-text { max-width: 540px; margin-inline: auto; }
.vozy-reseni-kicker { margin: 0; }
.vozy-reseni-kicker::after { content: ""; display: block; width: 48px; height: 3px; background: var(--orange); margin-top: var(--space-3); }
.vozy-reseni-text h2 { color: #000f3d; margin: var(--space-4) 0 var(--space-4); line-height: 1.12; }
.vozy-reseni-text .lead { color: color-mix(in srgb, #000f3d 78%, transparent); margin-bottom: var(--space-6); }
.vozy-reseni-btn {
  background: #c84e00; color: #fff; border-color: transparent;
  font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; font-size: 14px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.vozy-reseni-btn span { transition: transform 0.2s ease; }
.vozy-reseni-btn:hover { background: color-mix(in srgb, #c84e00 85%, #000); }
.vozy-reseni-btn:hover span { transform: translateX(3px); }
@media (max-width: 860px) {
  .vozy-reseni-grid { grid-template-columns: minmax(0, 1fr); }
  .vozy-reseni-foto { min-height: 0; aspect-ratio: 4 / 3; }
  .vozy-reseni-text { max-width: none; }
}

/* Stranka O nas - kompletni redesign. HERO pouziva stejny vzor jako
   .rimor-hero/.masuria-hero (foto+clona+kicker+h1+lead), stejny pomer
   stran 3:1 jako ostatni hlavni sekce webu (Rimor/Eura Mobil/Masuria).
   Dvousloupcove pasy Pribeh/Areal primo znovu pouzivaji
   .vozy-reseni-grid/-foto/-obsah/-text ze sky-free.html (foto+text pas),
   jen v HTML prohozene poradi foto/text pro strideni stran. Znacky
   pouziva .vozy-znacky-* ze sky-free.html. Sluzby pouziva .vozy-vyhody-*
   ze sky-free.html (lehky pas bez karet), rozsireny na 4 polozky a jako
   odkazy <a> mimsto <li>. */
.onas-hero { position: relative; background: #000f3d; }
.onas-hero-ramec { position: relative; overflow: hidden; border-bottom: 2px solid var(--color-divider); aspect-ratio: 3 / 1; }
.onas-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.onas-hero-clona {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    #000f3d 0%,
    color-mix(in srgb, #000f3d 82%, transparent) 10%,
    color-mix(in srgb, #000f3d 35%, transparent) 20%,
    transparent 31%);
}
/* Jedna animovana fotografie (crossfade) v prave casti hero, nad fotkou
   vozu, uvnitr .onas-hero-ramec. Vyska je dana primo top/bottom odsazenim
   od okraju ramce (temer cela vyska hero), sirka se dopocita z pomeru
   fotek 4:3 pres aspect-ratio - diky tomu je sirka vzdy o dost mensi nez
   prostor do textu (vyska ramce je limitujici, ne text), takze nikdy
   nezasahuje do textu vlevo. Snimky lezi pres sebe (position:absolute),
   strida je onas-hero-slideshow.js prekladanim tridy je-aktivni - stejny
   vzor jako .vozy-reseni-slideshow. Kontejner sam (velikost/pozice) se
   pri strideni nikdy nemeni, meni se jen ktery <img> uvnitr je viditelny. */
.onas-hero-slideshow {
  position: absolute; z-index: 1;
  top: clamp(8px, 1vw, 14px); bottom: clamp(8px, 1vw, 14px);
  right: clamp(24px, 2.5vw, 48px);
  aspect-ratio: 4 / 3; width: auto;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.2);
  pointer-events: none;
}
.onas-hero-slideshow img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
  opacity: 0; transition: opacity 0.9s ease;
}
.onas-hero-slideshow img.je-aktivni { opacity: 1; }
@media (max-width: 900px) {
  .onas-hero-slideshow { right: var(--gut); box-shadow: 0 5px 14px rgba(0,0,0,.2); }
}
@media (max-width: 560px) {
  .onas-hero-slideshow { display: none; }
}

.onas-hero-obsah {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  padding-left: clamp(24px, 2.5vw, 48px);
  padding-top: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(28px, 3.5vw, 48px);
}
.onas-hero-kicker { color: #fff; margin: 0; font-size: clamp(12px, 0.9vw, 16px); font-weight: 700; letter-spacing: 1.8px; line-height: 1.15; }
.onas-hero-kicker::after { content: ""; display: block; width: 48px; height: 3px; background: var(--orange); margin-top: clamp(4px, 0.6vw, 10px); }
.onas-hero-obsah h1 {
  color: #fff; margin: 0;
  letter-spacing: -0.01em; line-height: 1.08; width: fit-content; max-width: 44vw;
  font-size: clamp(32px, 3.2vw, 68px); font-weight: 800;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.onas-hero-text {
  color: #fff; margin: 0; max-width: min(560px, 27vw);
  font-size: clamp(16px, 1.3vw, 23px); font-weight: 400; line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
@media (max-width: 900px) {
  .onas-hero-ramec { border-bottom: 0; }
  .onas-hero-clona { display: none; }
  .onas-hero-obsah {
    position: static; inset: auto; display: block;
    background: #000f3d;
    padding: clamp(20px, 5vw, 32px) var(--gut);
    border-bottom: 2px solid var(--color-divider);
  }
  .onas-hero-kicker { color: #fff; }
  .onas-hero-obsah h1 {
    color: #fff; max-width: none;
    font-size: clamp(30px, 8vw, 44px); text-shadow: none;
  }
  .onas-hero-text {
    color: #fff; max-width: none;
    font-size: 18px; line-height: 1.5; text-shadow: none;
  }
}

.onas-pribeh { padding-block: clamp(40px, 6vw, 88px); }
.onas-pribeh .vozy-reseni-foto,
.onas-areal .vozy-reseni-foto { border-radius: 16px; overflow: hidden; }
/* Pas "Najdete nas kousek od D1" ma vpravo misto fotky vlozenou stejnou
   interaktivni mapu jako sekce Kontakt (.kontakt-mapa-ramec) - iframe
   vyplnuje cely prostor .vozy-reseni-foto stejnym zpusobem jako predtim
   img (position:absolute + 100%/100%), zadny padding navic. */
.onas-areal .vozy-reseni-foto iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
.onas-pribeh .vozy-reseni-obsah,
.onas-areal .vozy-reseni-obsah { background: transparent; padding: clamp(24px, 4vw, 40px) 0; }
.onas-pribeh .vozy-reseni-text p,
.onas-areal .vozy-reseni-text p {
  margin: 0 0 var(--space-4); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5;
  color: color-mix(in srgb, #000f3d 82%, transparent);
}
.onas-pribeh .vozy-reseni-text p:last-child,
.onas-areal .vozy-reseni-text p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .onas-pribeh .vozy-reseni-foto,
  .onas-areal .vozy-reseni-foto { aspect-ratio: 4 / 3; }
  /* Pas Areal ma nyni vpravo mapu (drive fotku) - na mobilu se nadale
     zobrazuje nejdriv text a mapa az pod nim (DOM poradi text->foto se
     jiz nepřehazuje přes order, jak tomu bylo drive u fotografie). */
}

/* Casova osa - jednoduche tecky na lince, zadne karty/stiny, jen tmave
   modra + oranzova akcentova tecka, presne dle zadani. 11 milniku v
   JEDNOM nepretrzitem vodorovnem posuvnem pasu (misto driveijsich dvou
   rad) - .onas-osa-track je nativne posuvny kontejner (overflow-x:auto,
   scroll-behavior:smooth, funguje primo pro mys/trackpad/swipe na
   mobilu), .onas-osa uvnitr je siroky presne podle souctu vsech polozek
   (pevna sirka kazde), takze linka (::before, sirka 100% .onas-osa)
   pokracuje souvisle pres uplne vsechny polozky vc. tech mimo viditelnou
   oblast. Sipky (.onas-osa-sipka) posouvaji track o jednu polozku -
   logika v onas-osa-carousel.js. */
.onas-osa-sekce { padding-block: clamp(16px, 2.2vw, 28px); border-top: 0; }
/* Sedy oddelovac (.sec border-top) nad casovou osou je uz odstranen vyse.
   Ten pod casovou osou je ve skutecnosti horni okraj nasledujici sekce
   .onas-sluzby (take .sec) - odstranen tady, standardni odstup mezi bloky
   zajisti jeji vlastni (nezmenene) padding-block. */
.onas-sluzby { border-top: 0; }
.onas-osa-carousel { display: flex; align-items: center; gap: clamp(8px, 1.5vw, 16px); }
.onas-osa-track {
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.onas-osa-track::-webkit-scrollbar { display: none; }
.onas-osa {
  list-style: none; margin: 0; padding: 6px 2px 4px;
  position: relative;
  display: flex; gap: clamp(24px, 3vw, 36px);
  width: max-content;
}
.onas-osa::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--color-divider); }
.onas-osa-bod { position: relative; flex: none; width: 200px; padding-top: 28px; }
.onas-osa-bod::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: #c84e00; border: 3px solid #fff;
}
.onas-osa-rok {
  display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 21px; color: #000f3d; margin-bottom: 6px;
}
.onas-osa-bod--dnes .onas-osa-rok { color: #c84e00; }
.onas-osa-text { display: block; font-size: 14.5px; line-height: 1.45; color: color-mix(in srgb, #000f3d 65%, transparent); }
.onas-osa-sipka {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  border: 1px solid var(--color-divider); background: #fff; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: #000f3d; cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.onas-osa-sipka svg { width: 18px; height: 18px; }
.onas-osa-sipka:hover { background: color-mix(in srgb, #c84e00 10%, #fff); border-color: #c84e00; color: #c84e00; }
.onas-osa-sipka:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 760px) {
  .onas-osa-bod { width: 168px; }
  .onas-osa { gap: 24px; }
}
@media (max-width: 480px) {
  .onas-osa-carousel { gap: 6px; }
  .onas-osa-sipka { width: 32px; height: 32px; }
  .onas-osa-sipka svg { width: 15px; height: 15px; }
  .onas-osa-bod { width: 148px; }
}

/* Sluzby - znovu pouzity .vozy-vyhody-* ze sky-free.html, rozsireno na 4
   sloupce a polozky jsou klikaci odkazy (misto proste vypisu vlastnosti).
   Horni cast pasu (nadpis+text / 360 prohlidka) je dvousloupcove
   rozlozeni 45/55 - viz .onas-sluzby-horni. */
.onas-sluzby-horni {
  display: grid; grid-template-columns: 45fr 55fr;
  gap: clamp(32px, 5vw, 64px); align-items: start;
  margin-bottom: clamp(40px, 6vw, 64px);
}
.onas-sluzby-text { margin: 0; }
.onas-sluzby-text h2 { color: #000f3d; margin: 0 0 var(--space-4); }
.onas-sluzby-text .lead { color: color-mix(in srgb, #000f3d 78%, transparent); max-width: none; }
.onas-sluzby-tour-ramec {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: 16px; overflow: hidden;
}
.onas-sluzby-tour-ramec iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.onas-sluzby-pas { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-inline: 0; }
a.vozy-vyhody-item { text-decoration: none; color: inherit; cursor: pointer; }
/* Pas 4 ikon sluzeb na O nas zvetsen cca 1.5x oproti sdilenemu zakladu
   .vozy-vyhody-* (ten pouziva i sky-free.html, proto se meni jen tady,
   naskalovano primo z puvodnich hodnot: kruh 56->84px, svg 26->39px,
   mezera pod kruhem 12->18px, h3 15->22.5px/4->6px, p 13->19.5px,
   vnitrni padding clamp(6,1.4vw,18)->clamp(9,2.1vw,27). */
.onas-sluzby-pas .vozy-vyhody-item { padding: 0 clamp(8px, 1.9vw, 24px); }
.onas-sluzby-pas .vozy-vyhody-ikona { width: 76px; height: 76px; margin-bottom: 16px; }
.onas-sluzby-pas .vozy-vyhody-ikona svg { width: 35px; height: 35px; }
.onas-sluzby-pas .vozy-vyhody-item h3 { font-size: 19px; margin: 0 0 6px; }
.onas-sluzby-pas .vozy-vyhody-item p { font-size: 15.5px; }
/* Prazdna plocha pod pasem byla dana hlavne velkym padding-bottom sdilene
   .sec tridy (84px) - zmenseno na standardni prirozeny odstup, padding-top
   (nahore, pred textem/mapou) zustava beze zmeny. */
.onas-sluzby { padding-bottom: clamp(30px, 4vw, 50px); }
@media (max-width: 860px) {
  .onas-sluzby-horni { grid-template-columns: minmax(0, 1fr); }
  .onas-sluzby-pas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Znacky - stejny vzor .vozy-znacky-* jako sky-free.html, 4 sloupce
   (Rimor, Eura Mobil, Masuria, Across Car) a jednotna vyska dlazdic
   (aspect-ratio + object-fit:contain), protoze zdrojova loga maji ruzny
   pomer stran. Vyska obrazku je omezena na 72% (misto 100%) box-u -
   ostatni tri loga jsou uz pod touto hranici a chovani se nemeni, ale
   ctvercovejsi znacka Across Car by jinak pri "contain" vyplnila celou
   vysku a opticky pusobila vyrazne vetsi nez protahle wordmarky ostatnich
   znacek - spolecny strop vyska sjednoti opticky rozmer vsech ctyr log. */
.onas-znacky-text {
  max-width: 640px; margin: 0 auto clamp(28px, 4vw, 40px);
  text-align: center; color: color-mix(in srgb, #000f3d 78%, transparent);
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5;
}
.vozy-znacky-grid.onas-znacky-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.onas-znacky-grid .vozy-znacky-btn {
  background: #fff; aspect-ratio: 16 / 7;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 2.2vw, 20px);
  border: 1px solid var(--color-divider);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}
.onas-znacky-grid .vozy-znacky-btn:hover, .onas-znacky-grid .vozy-znacky-btn:focus-visible {
  border-color: #c84e00;
}
.onas-znacky-grid .vozy-znacky-btn img { width: 100%; object-fit: contain; border-radius: 0; }
/* Rimor je vizualni reference (beze zmeny, 72% jako drive). Ostatni tri
   loga maji ruzne proporce a hlavne ruzne "opticke" vyplneni vlastniho
   ramecku (Eura Mobil ma napr. velkou prazdnou plochu nad wordmarkem pro
   maly cerveny symbol), takze pouhe srovnani na stejnou vysku ramecku by
   je opticky porad nechalo pusobit mensi - kazde je proto doladeno
   samostatne dle skutecneho vizualniho dojmu, ne jen matematicky stejne. */
.onas-znacky-grid .vozy-znacky-btn:nth-child(1) img { height: 72%; }
.onas-znacky-grid .vozy-znacky-btn:nth-child(2) img { height: 85%; }
.onas-znacky-grid .vozy-znacky-btn:nth-child(3) img { height: 95%; }
.onas-znacky-grid .vozy-znacky-btn:nth-child(4) img { height: 80%; }
@media (max-width: 900px) {
  .vozy-znacky-grid.onas-znacky-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .vozy-znacky-grid.onas-znacky-grid { grid-template-columns: minmax(0, 1fr); }
}

.onas-areal { padding-block: clamp(40px, 6vw, 88px); background: var(--color-surface); }
main:has(.onas-areal) + footer.foot { margin-top: 0; }

/* CTA "Vyberte si znacku" pod HERO - cele obrazky ikon (uz maji vlastni
   design karty vc. stinu) fungujici jako klikatelna tlacitka, bez dalsi
   karty/ramecku okolo (zadano vyslovne). */
.vozy-znacky { padding-top: clamp(48px, 4vw, 60px); padding-bottom: clamp(16px, 2vw, 24px); }
/* O nas: sekce Znacky pusobila prilis vzdusne (56px nahore + 24px dole,
   navazujici na uz vlastni padding sousednich pasu) - zkompaktneno na
   standardni odstup shodny s ostatnimi bloky stranky. */
.vozy-znacky.onas-znacky { padding-top: clamp(20px, 2.5vw, 32px); padding-bottom: clamp(20px, 2.5vw, 32px); }
.vozy-znacky-nadpis { text-align: center; margin: 0 0 var(--space-6); }
.vozy-znacky-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
}
.vozy-znacky-btn {
  display: block; padding: 0; margin: 0; border: 0; background: none;
  border-radius: 16px; overflow: hidden; cursor: pointer;
  line-height: 0; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vozy-znacky-btn img { display: block; width: 100%; height: auto; border-radius: 16px; }
.vozy-znacky-btn:hover, .vozy-znacky-btn:focus-visible {
  transform: translateY(-4px) scale(1.015);
  box-shadow: var(--shadow-lg);
}
.vozy-znacky-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
@media (max-width: 640px) {
  .vozy-znacky-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Pas 8 dlazdic modelovych rad (Eura Mobil) - stejny "premiovy" design
   jazyk jako .vozy-znacky-btn (zaobleni 16px, stin, hover zvednuti+zvetseni).
   Bile pozadi + stin nesou primo tyto tridy. Nad nazvem rady je fotka vozu
   (jednotna vyska boxu, object-fit:contain - cele auto vzdy viditelne, bez
   deformace, vycentrovane), pod fotkou tucny nazev rady s oranzovou linkou.
   Kazda dlazdice je odkaz (#kotva) na prislusnou tabulku nize na strance -
   plynule scrollovani zajistuje sitewide html{scroll-behavior:smooth} +
   scroll-margin-top na .eura-tabulka. Grid 4 sloupce na desktopu (4+4 pres
   2 rady dle zadani, poradi dlazdic odpovida poradi tabulek), zalamuje na 3
   (tablet) a 2 (mobil). */
.eura-modely { padding-block: clamp(32px, 4vw, 56px); }
.eura-modely-nadpis { text-align: center; margin: 0 0 var(--space-6); }
.eura-modely-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.eura-modely-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center;
  padding: clamp(12px, 1.4vw, 16px) clamp(10px, 1.4vw, 18px) clamp(14px, 1.8vw, 18px);
  border: 0; border-radius: 16px; background: #fff; cursor: pointer;
  box-shadow: var(--shadow-md); text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.eura-modely-btn img {
  display: block; width: 100%; height: clamp(92px, 9.5vw, 150px);
  object-fit: contain; object-position: center;
  margin-bottom: clamp(8px, 1.2vw, 12px);
}
.eura-modely-btn span {
  display: inline-block; color: #000f3d;
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(13px, 1.05vw, 16px); letter-spacing: 0.04em; text-transform: uppercase;
  line-height: 1.3;
  border-bottom: 2px solid #c84e00; padding-bottom: 6px;
}
.eura-modely-btn:hover, .eura-modely-btn:focus-visible {
  transform: translateY(-4px) scale(1.015);
  box-shadow: var(--shadow-lg);
}
.eura-modely-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
@media (max-width: 900px) {
  .eura-modely-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .eura-modely-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Pas dlazdic modelovych rad (Rimor) - presna kopie designu .eura-modely
   (stejne zaobleni, stin, typografie, oranzove podtrzeni, hover efekt),
   jen vlastni trida kvuli konvenci projektu (prefix rimor- vs eura-).
   Zatim bez odkazu na tabulky (button type=button, pridame pozdeji stejne
   jako u Eura Mobil). Grid 4 sloupce na desktopu, zalamuje na 3 (tablet)
   a 2 (mobil). */
.rimor-modely { padding-block: clamp(32px, 4vw, 56px); }
.rimor-modely-nadpis { text-align: center; margin: 0 0 var(--space-6); }
.rimor-modely-grid {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.rimor-modely-btn { grid-column: span 2; }
/* 8 dlazdic = presne 4 v 1. rade + 4 ve 2. rade, mrizka o 8 "pul-sloupcich"
   (kazda dlazdice span 2) se tak zaplni rovnomerne bez nutnosti rucniho
   centrovani posledni radky. */
.rimor-modely-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center;
  padding: clamp(12px, 1.4vw, 16px) clamp(10px, 1.4vw, 18px) clamp(14px, 1.8vw, 18px);
  border: 0; border-radius: 16px; background: #fff; cursor: pointer;
  box-shadow: var(--shadow-md); text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rimor-modely-btn img {
  display: block; width: 100%; height: clamp(92px, 9.5vw, 150px);
  object-fit: contain; object-position: center;
  margin-bottom: clamp(8px, 1.2vw, 12px);
}
.rimor-modely-btn span {
  display: inline-block; color: #000f3d;
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(13px, 1.05vw, 16px); letter-spacing: 0.04em; text-transform: uppercase;
  line-height: 1.3;
  border-bottom: 2px solid #c84e00; padding-bottom: 6px;
}
.rimor-modely-btn:hover, .rimor-modely-btn:focus-visible {
  transform: translateY(-4px) scale(1.015);
  box-shadow: var(--shadow-lg);
}
.rimor-modely-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
@media (max-width: 900px) {
  .rimor-modely-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rimor-modely-btn { grid-column: auto; }
}
@media (max-width: 560px) {
  .rimor-modely-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Masuria ma jen 3 dlazdice modelu (na rozdil od 8 u Rimor) - staci
   proste 3sloupcova mrizka bez 8sloupcoveho centrovaciho triku, ktery
   je specificky pro rozlozeni 4+3 pres dva rady u Rimor. Vzhled
   samotnych dlazdic (.rimor-modely-btn) je beze zmeny prevzaty. */
.masuria-modely-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.masuria-modely-grid .rimor-modely-btn { grid-column: auto; }
@media (max-width: 560px) {
  .masuria-modely-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Pas 5 hlavnich predností znacky Eura Mobil - stejny princip jako
   .vozy-vyhody u Vozy pro vozickare (jednoducha linearni ikona v jemne
   kruhove plose, pod ni tucny nazev + kratky text, svisle oddelovace
   mezi polozkami), jen 5 sloupcu misto 6 a premiovejsi velky uppercase
   nazev at odpovida charakteru znacky Eura Mobil. */
.eura-vyhody { padding-top: clamp(56px, 6vw, 76px); padding-bottom: clamp(32px, 5vw, 56px); background: #fff; }
.eura-vyhody-pas {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut);
}
.eura-vyhody-item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 clamp(8px, 1.6vw, 20px);
  border-left: 1px solid var(--color-divider);
}
.eura-vyhody-item:first-child { border-left: 0; }
.eura-vyhody-ikona {
  width: 60px; height: 60px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, #000f3d 6%, #fff);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
  transition: background-color 0.2s ease;
}
.eura-vyhody-ikona svg { width: 28px; height: 28px; color: #000f3d; }
.eura-vyhody-item h3 {
  font-size: 13px; font-weight: 700; color: #000f3d; letter-spacing: 0.04em;
  text-transform: uppercase; margin: 0 0 6px; line-height: 1.3;
}
.eura-vyhody-item p { font-size: 13px; line-height: 1.5; margin: 0; color: color-mix(in srgb, #000f3d 55%, transparent); max-width: 20ch; }
.eura-vyhody-item:hover .eura-vyhody-ikona { background: color-mix(in srgb, #c84e00 12%, #fff); }
.eura-vyhody-item:hover h3 { color: #c84e00; }
@media (max-width: 900px) {
  .eura-vyhody-pas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(24px, 4vw, 32px); }
  .eura-vyhody-item { border-left: 0; padding: 0 12px; }
  .eura-vyhody-item:nth-child(2n) { border-left: 1px solid var(--color-divider); }
  .eura-vyhody-item:nth-child(n+3) { margin-top: clamp(20px, 4vw, 32px); padding-top: clamp(20px, 4vw, 32px); border-top: 1px solid var(--color-divider); }
  .eura-vyhody-item:last-child { grid-column: 1 / -1; border-left: 0; }
}
@media (max-width: 480px) {
  .eura-vyhody-pas { grid-template-columns: minmax(0, 1fr); }
  .eura-vyhody-item { border-left: 0 !important; }
  .eura-vyhody-item:nth-child(n+2) { margin-top: clamp(20px, 5vw, 28px); padding-top: clamp(20px, 5vw, 28px); border-top: 1px solid var(--color-divider); }
}

/* Pas 5 pilizu znacky (Rimor) - presna kopie designu .eura-vyhody, jen
   vlastni trida dle konvence projektu (prefix rimor- vs eura-). */
.rimor-vyhody { padding-top: clamp(56px, 6vw, 76px); padding-bottom: clamp(32px, 5vw, 56px); background: #fff; }
.rimor-vyhody-pas {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut);
}
.rimor-vyhody-item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 clamp(8px, 1.6vw, 20px);
  border-left: 1px solid var(--color-divider);
}
.rimor-vyhody-item:first-child { border-left: 0; }
.rimor-vyhody-ikona {
  width: 60px; height: 60px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, #000f3d 6%, #fff);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
  transition: background-color 0.2s ease;
}
.rimor-vyhody-ikona svg { width: 28px; height: 28px; color: #000f3d; }
.rimor-vyhody-item h3 {
  font-size: 13px; font-weight: 700; color: #000f3d; letter-spacing: 0.04em;
  text-transform: uppercase; margin: 0 0 6px; line-height: 1.3;
}
.rimor-vyhody-item p { font-size: 13px; line-height: 1.5; margin: 0; color: color-mix(in srgb, #000f3d 55%, transparent); max-width: 20ch; }
.rimor-vyhody-item:hover .rimor-vyhody-ikona { background: color-mix(in srgb, #c84e00 12%, #fff); }
.rimor-vyhody-item:hover h3 { color: #c84e00; }
@media (max-width: 900px) {
  .rimor-vyhody-pas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(24px, 4vw, 32px); }
  .rimor-vyhody-item { border-left: 0; padding: 0 12px; }
  .rimor-vyhody-item:nth-child(2n) { border-left: 1px solid var(--color-divider); }
  .rimor-vyhody-item:nth-child(n+3) { margin-top: clamp(20px, 4vw, 32px); padding-top: clamp(20px, 4vw, 32px); border-top: 1px solid var(--color-divider); }
  .rimor-vyhody-item:last-child { grid-column: 1 / -1; border-left: 0; }
}
@media (max-width: 480px) {
  .rimor-vyhody-pas { grid-template-columns: minmax(0, 1fr); }
  .rimor-vyhody-item { border-left: 0 !important; }
  .rimor-vyhody-item:nth-child(n+2) { margin-top: clamp(20px, 5vw, 28px); padding-top: clamp(20px, 5vw, 28px); border-top: 1px solid var(--color-divider); }
}

/* Pas "Interier a hlavni prednosti" (Eura Mobil) - prekresleno na vzor
   .vozy-reseni ("Reseni, ktera davaji smysl" na sky-free.html), stejne
   jako .rimor-interier: zadna karta/zaobleni/stin, foto tvori celou
   levou polovinu, prava polovina ma svetle plosne pozadi
   (var(--color-surface)) a obsah je vertikalne vycentrovany. Fotka i
   text zustavaji "stacknute" pres sebe (crossfade, viz
   eura-interier-slideshow.js) - jen novy vnejsi vzhled. */
.eura-interier-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.eura-interier-foto { position: relative; min-height: 460px; overflow: hidden; }
.eura-interier-slides { position: relative; width: 100%; height: 100%; }
.eura-interier-slides img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  opacity: 0; transition: opacity 0.9s ease;
}
.eura-interier-slides img.je-aktivni { opacity: 1; }
.eura-interier-sipka {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, #fff 88%, transparent); color: #000f3d;
  cursor: pointer; backdrop-filter: blur(2px);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.eura-interier-sipka svg { width: 20px; height: 20px; }
.eura-interier-sipka-prev { left: 14px; }
.eura-interier-sipka-next { right: 14px; }
.eura-interier-sipka:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.eura-interier-tecky {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2;
  display: flex; justify-content: center; gap: 8px;
}
.eura-interier-tecky button {
  width: 8px; height: 8px; border-radius: 50%; padding: 0; border: 0;
  background: color-mix(in srgb, #fff 55%, transparent); cursor: pointer;
  transition: background-color 0.2s ease, width 0.2s ease;
}
.eura-interier-tecky button.je-aktivni { width: 22px; border-radius: 4px; background: #c84e00; }
.eura-interier-obsah { display: flex; align-items: center; background: var(--color-surface); padding: clamp(40px, 6vw, 88px) var(--gut); }
.eura-interier-obsah-text { max-width: 540px; margin-inline: auto; }
.eura-interier-kicker { margin: 0; }
.eura-interier-kicker::after { content: ""; display: block; width: 48px; height: 3px; background: var(--orange); margin-top: var(--space-3); }
.eura-interier-text { display: grid; margin-top: var(--space-4); }
.eura-interier-slide-text {
  grid-area: 1 / 1; opacity: 0; pointer-events: none;
  transition: opacity 0.7s ease;
}
.eura-interier-slide-text.je-aktivni { opacity: 1; pointer-events: auto; }
.eura-interier-slide-text h2 { color: #000f3d; margin: 0 0 var(--space-4); line-height: 1.15; }
.eura-interier-slide-text p { color: color-mix(in srgb, #000f3d 68%, transparent); margin: 0; max-width: 46ch; }
.eura-interier-btn {
  width: fit-content; margin-top: var(--space-6);
  background: #c84e00; color: #fff; border-color: transparent;
  font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; font-size: 14px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.eura-interier-btn span { transition: transform 0.2s ease; }
.eura-interier-btn:hover { background: color-mix(in srgb, #c84e00 85%, #000); }
.eura-interier-btn:hover span { transform: translateX(3px); }
@media (max-width: 860px) {
  .eura-interier-grid { grid-template-columns: minmax(0, 1fr); }
  .eura-interier-foto { min-height: 0; aspect-ratio: 4 / 3; }
  .eura-interier-obsah-text { max-width: none; }
}

/* Pas "Interier" (Masuria) - presna kopie .rimor-interier (viz komentar
   nize), jen s prefixem masuria a vlastnim obsahem/poctem snimku (12
   misto 9) - slideshow s crossfade viz masuria-interier-slideshow.js. */
.masuria-interier-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.masuria-interier-foto { position: relative; min-height: 460px; overflow: hidden; }
.masuria-interier-slides { position: relative; width: 100%; height: 100%; }
.masuria-interier-slides img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  opacity: 0; transition: opacity 0.9s ease;
}
.masuria-interier-slides img.je-aktivni { opacity: 1; }
.masuria-interier-sipka {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, #fff 88%, transparent); color: #000f3d;
  cursor: pointer; backdrop-filter: blur(2px);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.masuria-interier-sipka svg { width: 20px; height: 20px; }
.masuria-interier-sipka-prev { left: 14px; }
.masuria-interier-sipka-next { right: 14px; }
.masuria-interier-sipka:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.masuria-interier-tecky {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2;
  display: flex; justify-content: center; gap: 8px;
}
.masuria-interier-tecky button {
  width: 8px; height: 8px; border-radius: 50%; padding: 0; border: 0;
  background: color-mix(in srgb, #fff 55%, transparent); cursor: pointer;
  transition: background-color 0.2s ease, width 0.2s ease;
}
.masuria-interier-tecky button.je-aktivni { width: 22px; border-radius: 4px; background: #c84e00; }
.masuria-interier-obsah { display: flex; align-items: center; background: var(--color-surface); padding: clamp(40px, 6vw, 88px) var(--gut); }
.masuria-interier-obsah-text { max-width: 540px; margin-inline: auto; }
.masuria-interier-kicker { margin: 0; }
.masuria-interier-kicker::after { content: ""; display: block; width: 48px; height: 3px; background: var(--orange); margin-top: var(--space-3); }
.masuria-interier-text { display: grid; margin-top: var(--space-4); }
.masuria-interier-slide-text {
  grid-area: 1 / 1; opacity: 0; pointer-events: none;
  transition: opacity 0.7s ease;
}
.masuria-interier-slide-text.je-aktivni { opacity: 1; pointer-events: auto; }
.masuria-interier-slide-text h2 { color: #000f3d; margin: 0 0 var(--space-4); line-height: 1.15; }
.masuria-interier-slide-text p { color: color-mix(in srgb, #000f3d 68%, transparent); margin: 0; max-width: 46ch; }
@media (max-width: 860px) {
  .masuria-interier-grid { grid-template-columns: minmax(0, 1fr); }
  .masuria-interier-foto { min-height: 0; aspect-ratio: 4 / 3; }
  .masuria-interier-obsah-text { max-width: none; }
}
/* Vetsi odstup mezi pasem Interier Masuria a navazujicim poptavkovym
   formularem (.vozy-formular je sdilena komponenta pouzita na 5 strankach,
   proto cileno jen na tento konkretni prechod pres sourozenecky selektor). */
.masuria-interier + .vozy-formular { padding-top: clamp(40px, 4vw, 50px); }
@media (max-width: 640px) {
  .masuria-interier + .vozy-formular { padding-top: clamp(25px, 5vw, 30px); }
}

/* Pas "Interier" (Rimor) - prekresleno na vzor .vozy-reseni ("Reseni,
   ktera davaji smysl" na sky-free.html): zadna karta/zaobleni/stin, foto
   tvori celou levou polovinu bez zaobleni, prava polovina ma svetle
   plosne pozadi (var(--color-surface)) a obsah je vertikalne vycentrovany
   (stejny sourozenecky vzor foto+obsah, jen misto staticke fotky
   slideshow s crossfade - viz rimor-interier-slideshow.js). */
.rimor-interier-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.rimor-interier-foto { position: relative; min-height: 460px; overflow: hidden; }
.rimor-interier-slides { position: relative; width: 100%; height: 100%; }
.rimor-interier-slides img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  opacity: 0; transition: opacity 0.9s ease;
}
.rimor-interier-slides img.je-aktivni { opacity: 1; }
.rimor-interier-sipka {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, #fff 88%, transparent); color: #000f3d;
  cursor: pointer; backdrop-filter: blur(2px);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.rimor-interier-sipka svg { width: 20px; height: 20px; }
.rimor-interier-sipka-prev { left: 14px; }
.rimor-interier-sipka-next { right: 14px; }
.rimor-interier-sipka:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.rimor-interier-tecky {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2;
  display: flex; justify-content: center; gap: 8px;
}
.rimor-interier-tecky button {
  width: 8px; height: 8px; border-radius: 50%; padding: 0; border: 0;
  background: color-mix(in srgb, #fff 55%, transparent); cursor: pointer;
  transition: background-color 0.2s ease, width 0.2s ease;
}
.rimor-interier-tecky button.je-aktivni { width: 22px; border-radius: 4px; background: #c84e00; }
.rimor-interier-obsah { display: flex; align-items: center; background: var(--color-surface); padding: clamp(40px, 6vw, 88px) var(--gut); }
.rimor-interier-obsah-text { max-width: 540px; margin-inline: auto; }
.rimor-interier-kicker { margin: 0; }
.rimor-interier-kicker::after { content: ""; display: block; width: 48px; height: 3px; background: var(--orange); margin-top: var(--space-3); }
.rimor-interier-text { display: grid; margin-top: var(--space-4); }
.rimor-interier-slide-text {
  grid-area: 1 / 1; opacity: 0; pointer-events: none;
  transition: opacity 0.7s ease;
}
.rimor-interier-slide-text.je-aktivni { opacity: 1; pointer-events: auto; }
.rimor-interier-slide-text h2 { color: #000f3d; margin: 0 0 var(--space-4); line-height: 1.15; }
.rimor-interier-slide-text p { color: color-mix(in srgb, #000f3d 68%, transparent); margin: 0; max-width: 46ch; }
@media (max-width: 860px) {
  .rimor-interier-grid { grid-template-columns: minmax(0, 1fr); }
  .rimor-interier-foto { min-height: 0; aspect-ratio: 4 / 3; }
  .rimor-interier-obsah-text { max-width: none; }
}


/* Prehledova tabulka modelove rady Activa One (Eura Mobil) - stejny
   komponent jako .vozy-modely-tabulka u BluCamp/Across Car na Vozy pro
   vozickare (stejne rozestupy, tucny nadpis sloupce s podtrzenim,
   oranzovy odkaz nazvu modelu, hover-zoom pudorysu - viz pudorys-zoom.js,
   ktery ted obsluhuje obe stranky). Sloupec pudorysu je sirsi nez u
   vozy-modely, protoze pudorys Activa One ma mnohem sirsi pomer stran
   (cca 2.4:1 misto skoro ctvercoveho/sirokeho BluCamp/Across pudorysu). */
.eura-tabulka { padding-top: clamp(20px, 2.5vw, 32px); padding-bottom: clamp(20px, 2.5vw, 32px); scroll-margin-top: 120px; }
/* Prvni tabulka RIMOR (#kilig) navazuje primo na pas .rimor-interier bez
   vlastniho odstupu - samotne padding-top vyse pusobilo na vetsich
   sirkach prilis stisnute. Pridan extra margin-top jen pro tento jeden
   prechod (pas -> prvni tabulka), ostatni tabulky RIMOR mezi sebou a
   tabulky Eura Mobil zustavaji beze zmeny. */
#kilig { margin-top: clamp(32px, 5vw, 48px); }
/* Sekce Eura Mobil ma za sebou hodne tabulek modelovych rad - vychozi
   velky .foot margin-top by mezi poslední tabulkou a paticku pusobil
   nepomerne velky proti kompaktnim mezerám mezi tabulkami samotnymi,
   proto zde nulovan - odstup uz dava padding-bottom posledni tabulky. */
main:has(.eura-tabulka) + footer.foot { margin-top: 0; }
/* Clanek Zazimovani - posledni krok uz ma vlastni padding-bottom
   (viz .zazimovani-krok), takze vychozi velky .foot margin-top (az
   96px) navrch pusobil jako zbytecne velka prazdna plocha pred patickou
   - stejny pripad a stejne reseni jako u .eura-tabulka vyse. Plati pro
   samostatnou stranku zazimovani.html i pro vlozeny clanek na
   rady-a-tipy.html (main:has funguje i pro dynamicky vlozeny obsah). */
main:has(.zazimovani-body) + footer.foot { margin-top: 0; }
.eura-tabulka-nadpis { color: #000f3d; text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 var(--space-6); }
/* Oznaceni typu vozu (polointegral/alkovna) u nekterych tabulek RIMOR ma
   byt v zavorce viditelne malymi pismeny, na rozdil od zbytku nadpisu -
   trida pouzita jen v par nadpisech na strance rimor.html, jinde na webu
   se neuplatni. */
.eura-tabulka-nadpis-typ { text-transform: none; }
.eura-tabulka-scroll { overflow-x: auto; }
.eura-tabulka-tabulka { width: 100%; min-width: 640px; border-collapse: collapse; background: #fff; table-layout: fixed; }
/* Kazda tabulka je samostatny <table> element a bez table-layout:fixed by
   si prohlizec sirku sloupcu pocital zvlast pro kazdou (dle nejdelsiho
   obsahu v danem sloupci konkretni tabulky) - proto sloupce napric ruznymi
   tabulkami (ruzne dlouhe nazvy modelu/podvozku) nebyly zarovnane. Presne
   sirky nize odpovidaji referencni tabulce Profila T Mercedes (procenta
   dopoctena z jejich aktualnich pixelovych sirek pri sirce obsahu
   1232px), Pudorys zustava fixni 260px jako doposud. */
.eura-tabulka-tabulka th:nth-child(1) { width: 23.94%; }
.eura-tabulka-tabulka th:nth-child(2) { width: 260px; }
.eura-tabulka-tabulka th:nth-child(3) { width: 20.86%; }
.eura-tabulka-tabulka th:nth-child(4) { width: 21.51%; }
.eura-tabulka-tabulka th:nth-child(5) { width: 12.58%; }
.eura-tabulka-tabulka th {
  text-align: center; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #000f3d;
  padding: var(--space-3) var(--space-4); border-bottom: 2px solid #000f3d;
}
.eura-tabulka-tabulka td {
  padding: var(--space-4); vertical-align: middle; text-align: center;
  border-bottom: 1px solid var(--color-divider);
  font-size: 15px; color: color-mix(in srgb, #000f3d 82%, transparent);
}
.eura-tabulka-tabulka tr:last-child td { border-bottom: 0; }
.eura-tabulka-nazev { display: inline-block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 16px; color: #000f3d; text-decoration: none; border-bottom: 2px solid #c84e00; padding-bottom: 2px; transition: color 0.2s ease; }
.eura-tabulka-nazev:hover { color: #c84e00; }
.eura-tabulka-poznamka { display: inline-block; margin-top: 4px; font-size: 12px; color: color-mix(in srgb, #000f3d 60%, transparent); }
.eura-tabulka-pudorys { width: 260px; }
.eura-tabulka-pudorys img { display: block; width: 220px; height: auto; max-width: 100%; margin-inline: auto; }
@media (max-width: 640px) {
  .eura-tabulka-pudorys img { width: 160px; }
}
@media (hover: hover) and (pointer: fine) {
  .eura-tabulka-pudorys img { cursor: zoom-in; }
}

/* Prehledova tabulka modelu (BluCamp) - moderni, cisty vzhled: bile pozadi,
   jemne sede delici linky mezi bunkami, dostatek prostoru, tmavemodre
   nadpisy sloupcu (misto plne navy vyplne hlavicky jako u obecne .table). */
.vozy-modely { padding-top: clamp(40px, 8vw, 80px); padding-bottom: clamp(40px, 6vw, 72px); scroll-margin-top: 120px; }
/* Mezi tabulkami BluCamp a Across Car (obe sdileji .vozy-modely) zmensen
   rozestup - BluCamp ma mensi padding-bottom, Across mensi padding-top,
   dohromady ~40-50px mezi koncem tabulky a nadpisem dalsi znacky. Horni
   okraj BluCamp (od predchozi sekce) a spodni okraj Across (pred
   formularem) zustavaji puvodni. */
#blucamp { padding-bottom: clamp(20px, 2vw, 28px); }
#across-car { padding-top: clamp(20px, 2vw, 24px); padding-bottom: clamp(20px, 2vw, 28px); }
.vozy-modely-nadpis { color: #000f3d; text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 var(--space-6); }
.vozy-modely-scroll { overflow-x: auto; }
.vozy-modely-tabulka { width: 100%; min-width: 640px; border-collapse: collapse; background: #fff; }
.vozy-modely-tabulka th {
  text-align: center; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #000f3d;
  padding: var(--space-3) var(--space-4); border-bottom: 2px solid #000f3d;
}
.vozy-modely-tabulka td {
  padding: var(--space-4); vertical-align: middle; text-align: center;
  border-bottom: 1px solid var(--color-divider);
  font-size: 15px; color: color-mix(in srgb, #000f3d 82%, transparent);
}
.vozy-modely-tabulka tr:last-child td { border-bottom: 0; }
.vozy-modely-nazev { display: inline-block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 16px; color: #000f3d; text-decoration: none; border-bottom: 2px solid #c84e00; padding-bottom: 2px; transition: color 0.2s ease; }
.vozy-modely-nazev:hover { color: #c84e00; }
.vozy-modely-pudorys { width: 260px; }
.vozy-modely-pudorys img { display: block; width: 220px; height: auto; max-width: 100%; margin-inline: auto; }
@media (max-width: 640px) {
  .vozy-modely-pudorys img { width: 160px; }
}
@media (hover: hover) and (pointer: fine) {
  .vozy-modely-pudorys img { cursor: zoom-in; }
}
/* Zvetseny nahled pudorysu (viz pudorys-zoom.js) - fixed pozice pripojena
   primo do <body>, aby ji neorizl overflow-x:auto na .vozy-modely-scroll
   ani zadny jiny rodicovsky kontejner tabulky. */
.pudorys-zoom-overlay {
  position: fixed; z-index: 200; display: none;
  background: #fff; border-radius: 10px; box-shadow: var(--shadow-lg);
  padding: 10px; box-sizing: border-box; pointer-events: none;
}
.pudorys-zoom-overlay.je-aktivni { display: block; }
.pudorys-zoom-overlay img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Kontaktni formular na konci stranky - stejne .field/.input/.consent
   tridy jako formular na kontakt.html, jen vlastni nadpis/CTA barva
   (firemni oranzova #c84e00 teto stranky) tak, aby pusobil jako soucast
   stejneho designoveho systemu, ne jako novy/odlisny prvek. */
.vozy-formular { padding-top: clamp(20px, 2vw, 28px); padding-bottom: clamp(24px, 2.5vw, 32px); scroll-margin-top: 120px; }
/* Paticka ma sitove (.foot) velky margin-top, ktery je na vetsine stranek
   zadouci - na teto strance ale ma formular navazovat na paticku bez
   velke bile mezery, proto zde primo prilehajici paticka (jen na teto
   strance sky-free.html, kde po formulari hned nasleduje) prebita na 0. */
main:has(#poptavka-vozickare) + footer.foot { margin-top: 0; }
/* Stejny duvod jako u #poptavka-vozickare vyse - formular na konci
   stranky RIMOR ma take navazovat na paticku bez velke bile mezery. */
main:has(#poptavka-rimor) + footer.foot { margin-top: 0; }
/* Stejny duvod jako vyse - formular na konci stranky MASURIA ma take
   navazovat na paticku bez velke bile mezery. */
main:has(#poptavka-masuria) + footer.foot { margin-top: 0; }
/* Stejny duvod jako vyse - poptavkovy formular na konci detailu vozu
   Rimor Sarus 95 (znovupouzity formular ze stranky RIMOR) ma take
   navazovat na paticku bez velke bile mezery. */
main:has(#poptavka-sarus95) + footer.foot { margin-top: 0; }
/* Stejny duvod jako vyse - poptavkovy formular na konci detailu vozu
   Rimor Kilig 79 (znovupouzity formular ze sablony Sarus 95) ma take
   navazovat na paticku bez velke bile mezery. */
main:has(#poptavka-kilig79) + footer.foot { margin-top: 0; }
/* Stejny duvod jako vyse - poptavkovy formular na konci detailu vozu
   Rimor Horus 95 (znovupouzity formular ze sablony Sarus 95) ma take
   navazovat na paticku bez velke bile mezery. */
main:has(#poptavka-horus95) + footer.foot { margin-top: 0; }
/* Stejny duvod jako vyse - poptavkovy formular na konci detailu vozu
   Rimor Kilig 695 (znovupouzity formular ze sablony Sarus 95) ma take
   navazovat na paticku bez velke bile mezery - chybelo od zacatku, na
   rozdil od Sarus95/Kilig79/Horus95 vyse. */
main:has(#poptavka-kilig695) + footer.foot { margin-top: 0; }
/* Stejny duvod jako vyse - poptavkovy formular na konci detailu vozu
   Rimor Kilig 55 (znovupouzity formular ze sablony Sarus 95) ma take
   navazovat na paticku bez velke bile mezery. */
main:has(#poptavka-kilig55) + footer.foot { margin-top: 0; }
/* Stejny duvod jako vyse - poptavkovy formular na konci detailu druheho
   konkretniho vozu Rimor Sarus 95 (96924) ma take navazovat na paticku
   bez velke bile mezery. */
main:has(#poptavka-sarus95-96924) + footer.foot { margin-top: 0; }
/* Stejny duvod jako vyse - poptavkovy formular na konci detailu tretiho
   konkretniho vozu Rimor Sarus 5 (29364) ma take navazovat na paticku
   bez velke bile mezery. */
main:has(#poptavka-sarus5-29364) + footer.foot { margin-top: 0; }
/* Stejny duvod jako vyse - poptavkovy formular na konci detailu ctvrteho
   konkretniho vozu Rimor Sarus 9 (05684) ma take navazovat na paticku
   bez velke bile mezery. */
main:has(#poptavka-sarus9-05684) + footer.foot { margin-top: 0; }
main:has(#poptavka-integra660-45299) + footer.foot { margin-top: 0; }
main:has(#poptavka-masuria780tl-kobjednani) + footer.foot { margin-top: 0; }
main:has(#poptavka-masuria780tl-07793) + footer.foot { margin-top: 0; }
main:has(#poptavka-laser540-72981) + footer.foot { margin-top: 0; }
main:has(#poptavka-profilat696) + footer.foot { margin-top: 0; }
/* Stejny duvod jako vyse - poptavkovy formular na konci detailu druheho
   konkretniho vozu Rimor Sarus 5 (26811, odlisny fyzicky vuz od 29364 vyse)
   ma take navazovat na paticku bez velke bile mezery. Doplneno rovnou pri
   vytvoreni stranky, ne az dodatecne. */
main:has(#poptavka-sarus5-26811) + footer.foot { margin-top: 0; }
/* Stejny duvod jako vyse - poptavkovy formular na konci detailu noveho
   vozu Rimor Sarus 695 (40627) ma take navazovat na paticku bez velke
   bile mezery. Doplneno rovnou pri vytvoreni stranky. */
main:has(#poptavka-sarus695) + footer.foot { margin-top: 0; }
/* Stejny duvod jako vyse - poptavkovy formular na konci detailu noveho
   vozu Rimor Sarus 8 (37200) ma take navazovat na paticku bez velke
   bile mezery. Doplneno rovnou pri vytvoreni stranky. */
main:has(#poptavka-sarus8) + footer.foot { margin-top: 0; }
/* Stejny duvod jako vyse - poptavkovy formular na konci stranky PRODEJ
   (nahradil odstranenou sekci "Jak nakup probiha" + oranzovy pas) ma take
   navazovat na paticku bez velke bile mezery. */
main:has(#poptavka-prodej) + footer.foot { margin-top: 0; }
.vozy-formular-inner { text-align: left; }
.vozy-formular-inner h2 { color: #000f3d; margin: 0 0 var(--space-4); }
.vozy-formular-inner > .lead { color: color-mix(in srgb, #000f3d 78%, transparent); margin: 0 0 var(--space-8); max-width: 68ch; }
.vozy-formular-inner form { text-align: left; border-top-color: #c84e00; }
.vozy-formular-radek { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-6); }
.vozy-formular-btn {
  width: fit-content; margin-top: var(--space-2);
  background: #c84e00; color: #fff; border-color: transparent;
  font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  transition: background-color 0.2s ease;
}
.vozy-formular-btn:hover { background: color-mix(in srgb, #c84e00 85%, #000); }
@media (max-width: 640px) {
  .vozy-formular-radek { grid-template-columns: 1fr; }
}

.servis-sluzby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.servis-karta {
  background: #fff; padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--color-divider); border-top: 3px solid var(--orange);
  box-shadow: var(--shadow-md);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.servis-karta:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.servis-karta-ikona {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
}
.servis-karta-ikona svg { width: 24px; height: 24px; }
.servis-karta h3 { font-size: 17px; margin-bottom: var(--space-2); }
.servis-karta p { font-size: 14px; line-height: 1.5; margin: 0; color: color-mix(in srgb, var(--navy) 75%, transparent); }

.servis-prislusenstvi-foto { box-shadow: var(--shadow-lg); overflow: hidden; }
.servis-prislusenstvi-foto img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 62% 42%; }
.servis-chipy { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0; padding: 0; }
.servis-chipy li {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 13.5px;
  padding: 7px 14px; border: 2px solid var(--navy); color: var(--navy);
}

.servis-proces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.servis-krok { border-top: 3px solid var(--orange); padding-top: var(--space-4); }
.servis-krok-cislo {
  display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 3vw, 40px); line-height: 1; color: var(--orange); margin-bottom: var(--space-3);
}
.servis-krok h3 { font-size: 17px; margin-bottom: var(--space-2); }
.servis-krok p { font-size: 14px; margin: 0; line-height: 1.5; color: color-mix(in srgb, var(--navy) 75%, transparent); }

/* "Jak probiha pronajem" (pujcovna.html) - stejny vizualni styl jako
   "Jak probiha servis" (servis.html, .servis-krok*), jen vlastni trida
   (10 kroku misto 4, proto jiny pocet sloupcu) - hodnoty pisma/mezer/barev
   schvalne 1:1 zkopirovany, aby obe kapitoly pusobily stejne. */
.pujcovna-proces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.pujcovna-krok { border-top: 3px solid var(--orange); padding-top: var(--space-4); }
.pujcovna-krok-cislo {
  display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 3vw, 40px); line-height: 1; color: var(--orange); margin-bottom: var(--space-3);
}
.pujcovna-krok h3 { font-size: 17px; margin-bottom: var(--space-2); }
.pujcovna-krok p { font-size: 14px; margin: 0; line-height: 1.5; color: color-mix(in srgb, var(--navy) 75%, transparent); }
@media (max-width: 900px) { .pujcovna-proces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pujcovna-proces { grid-template-columns: minmax(0, 1fr); } }

.servis-kontakt { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.servis-kontakt-karty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 24px); align-items: stretch; }
.servis-kontakt-karta, .servis-cenik-karta { margin: 0; }
.servis-cenik-odkaz {
  display: inline-flex; margin-top: var(--space-2);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13.5px; color: var(--navy); text-decoration: none;
}
.servis-cenik-odkaz:hover { color: var(--orange); text-decoration: underline; }
.servis-kontakt-cta h2 { margin-bottom: var(--space-3); }
.servis-cenik-karta { cursor: pointer; }
.servis-cenik-karta:hover .servis-cenik-odkaz { color: var(--orange); text-decoration: underline; }
.servis-cenik-karta:focus-visible { outline: 2px solid #c84e00; outline-offset: 3px; }

.servis-cenik-obsah { padding: clamp(20px, 3vw, 32px) clamp(20px, 4vw, 40px) clamp(28px, 4vw, 40px); }
.servis-cenik-podnadpis { margin: 0 0 var(--space-4); font-size: 14px; color: color-mix(in srgb, #000f3d 68%, transparent); }
.servis-cenik-tabulka { width: 100%; border-collapse: collapse; }
.servis-cenik-tabulka th {
  text-align: left; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: #000f3d;
  padding: 10px 14px;
}
.servis-cenik-tabulka th:last-child { text-align: right; }
.servis-cenik-tabulka td { padding: 12px 14px; border-bottom: 1px solid var(--color-divider); font-size: 14.5px; color: #000f3d; vertical-align: top; }
.servis-cenik-tabulka td:last-child { text-align: right; }
.servis-cenik-tabulka tbody tr:last-child td { border-bottom: 0; }
.servis-cenik-tabulka tbody tr:nth-child(even) { background: color-mix(in srgb, #000f3d 4%, transparent); }
.servis-cenik-cena { font-family: var(--font-heading); font-weight: var(--font-heading-weight); color: #c84e00; white-space: nowrap; }

.servis-znacky { padding-block: clamp(32px, 5vw, 56px); border-top: 2px solid var(--color-divider); text-align: center; }
.servis-znacky-nadpis { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(16px, 2vw, 20px); color: var(--navy); margin: 0 0 var(--space-6); }
.servis-znacky-loga { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(28px, 5vw, 56px); }
.servis-znacky-loga img { height: clamp(48px, 6vw, 64px); width: auto; }

.servis-nepovinne { font-weight: 400; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.servis-input-soubor { padding: 8px 10px; }

@media (max-width: 900px) {
  .servis-sluzby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servis-proces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .servis-kontakt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .servis-sluzby { grid-template-columns: minmax(0, 1fr); }
  .servis-kontakt-karty { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .servis-proces { grid-template-columns: minmax(0, 1fr); }
}

.katalog-select {
  min-height: 40px; padding: 8px 14px; font-size: 14px; min-width: 210px;
  border-radius: 10px; border: 1px solid color-mix(in srgb, #000f3d 18%, transparent);
  background: #fff; color: #000f3d;
}
.katalog-select:focus { border-color: #c84e00; outline: 2px solid #c84e00; outline-offset: 1px; }
.katalog-filtr-vymazat {
  appearance: none; cursor: pointer; width: 100%; text-align: center;
  background: transparent;
  border: 1px solid color-mix(in srgb, #000f3d 30%, transparent);
  color: #000f3d; font-family: var(--font-heading); font-weight: 600; font-size: 13.5px;
  padding: 10px 16px; border-radius: 10px; white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.katalog-filtr-vymazat:hover {
  background: color-mix(in srgb, #000f3d 6%, #fff);
  border-color: color-mix(in srgb, #000f3d 45%, transparent);
}
/* Mobilni prepinac "Filtrovat vozy" - na desktopu skryty (panel je rovnou
   videt), na mobilu nahrazuje dlouhy blok filtru jednim tlacitkem. */
.katalog-filtr-prepinac {
  display: none; align-items: center; gap: 10px; width: 100%;
  appearance: none; cursor: pointer;
  background: #000f3d; color: #fff; border: 0; border-radius: 10px;
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  padding: 13px 18px; margin-bottom: var(--space-4);
  transition: background-color 0.2s ease;
}
.katalog-filtr-prepinac svg { width: 18px; height: 18px; flex: none; }
.katalog-filtr-prepinac[aria-expanded="true"] { background: #c84e00; }
.katalog-filtr-prepinac:hover { background: color-mix(in srgb, #000f3d 85%, #000); }
.katalog-filtr-prepinac[aria-expanded="true"]:hover { background: color-mix(in srgb, #c84e00 88%, #000); }

.katalog-pocet { font-size: 14px; color: color-mix(in srgb, var(--color-text) 60%, transparent); margin-bottom: var(--space-4); min-height: 1.2em; }
.katalog-info {
  font-size: 14px; padding: var(--space-4); margin-bottom: var(--space-4);
  border: 1px dashed color-mix(in srgb, var(--navy) 30%, transparent);
  color: color-mix(in srgb, var(--navy) 70%, transparent);
}

.katalog-karta { display: flex; flex-direction: column; }
.katalog-karta-hlava { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.katalog-karta-znacka { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--navy) 70%, transparent); }
.katalog-stitek { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; }
.katalog-stitek--akce { background: #c84e00; color: #fff; }
.katalog-stitek--novinka { background: #000f3d; color: #fff; }
.katalog-karta-stav { font-size: 13.5px; color: color-mix(in srgb, var(--color-text) 60%, transparent); margin: 2px 0 0; }
/* Cena je zaverecny, ale ne kricici akcent karty - #000f3d misto stare
   --navy palety, mirne vetsi rez nez bezny text, bez dalsich efektu. */
.katalog-karta-cena { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 22px; color: #000f3d; margin: var(--space-3) 0 0; }
.katalog-karta .btn { margin-top: var(--space-4); }
.katalog-karta .btn span { transition: transform 0.2s ease; }
.katalog-karta .btn:hover span { transform: translateX(3px); }
/* Radek "Zobrazit detail" + "Porovnat" vedle sebe - detail tlacitko bere
   zbyvajici sirku, porovnani je kompaktni ctvercova ikona vedle nej. */
.katalog-karta-akce { display: flex; gap: var(--space-2); align-items: stretch; }
.katalog-karta-akce .btn { margin-top: 0; flex: 1 1 auto; }
.katalog-karta-porovnat { flex: 0 0 auto; font-size: 16px; }
.katalog-karta-porovnat.je-aktivni { background: #1c7c4c; border-color: #1c7c4c; color: #fff; }
.katalog-karta-porovnat.je-plno { background: var(--orange); border-color: var(--orange); color: #fff; }
/* Realna fotka vozu ma stejny pomer stran jako .ph placeholder (4:3), aby
   se karty v mrizce nerozjizdely do ruznych vysek, jemne zaobleni rohu
   pro premiovy dojem. */
.katalog-karta figure:not(.ph) { border-radius: 12px; overflow: hidden; }
.katalog-karta figure:not(.ph) img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
}
.katalog-karta-foto-odkaz { display: block; cursor: pointer; }

.katalog-karta--prazdna { opacity: 0.55; }
.katalog-karta--prazdna .btn[aria-disabled="true"] {
  pointer-events: none;
  border-color: color-mix(in srgb, var(--navy) 35%, transparent);
  color: color-mix(in srgb, var(--navy) 45%, transparent);
}

@media (max-width: 1024px) {
  .katalog-layout { grid-template-columns: 1fr; }
  .katalog-filtr-prepinac { display: flex; }
  .katalog-filtr { display: none; }
  .katalog-filtr.je-otevreny { display: flex; }
}
@media (max-width: 640px) {
  .katalog-obsah-horni { flex-direction: column; align-items: stretch; }
  .katalog-razeni { width: 100%; }
  .katalog-select { width: 100%; }
}

/* nahled vozu na uvodni strance — az 5 karet v jednom radku, bez filtru */
/* gap byl drive var(--space-5), ktera v design systemu neexistuje (skace
   z --space-4 na --space-6) - gap se tim tise rozpadl na 0 a karty byly
   nalepene na sebe. --space-8 (32px) odpovida pozadovanym ~30-40px. */
.katalog-nahled-karty { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-8); }
.katalog-nahled-cta { display: flex; justify-content: center; margin-top: var(--space-8); }
@media (max-width: 1080px) { .katalog-nahled-karty { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .katalog-nahled-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .katalog-nahled-karty { grid-template-columns: minmax(0, 1fr); } }

/* === Detail konkretniho vozu (vuz-*) — univerzalni sablona produktove
   stranky jednoho vozu z katalogu (napr. vuz-rimor-sarus-95.html).
   Firemni barvy #000f3d / #c84e00, stejny vzor jako ostatni nove
   predelane casti webu (karty bile s tenkym ramecekem, zadne masivni
   stiny, cena viditelna ale ne kricici). */
.vuz-hero-panel { padding-block: clamp(28px, 4.5vw, 48px); }
.vuz-hero-titulek { margin-bottom: clamp(18px, 2.5vw, 28px); }
.vuz-hero-titulek h1 { color: #000f3d; margin: 0; }
.vuz-hero-titulek-radek {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}
.vuz-hero-meta-radek {
  margin: 10px 0 0; font-size: 14.5px; color: color-mix(in srgb, #000f3d 62%, transparent);
}
.vuz-tecka { color: #c84e00; margin: 0 6px; }
.vuz-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 44px); align-items: stretch;
}
.vuz-galerie-sloupec { min-width: 0; }

.vuz-info-panel {
  display: flex; flex-direction: column; height: 100%;
  justify-content: space-between; gap: var(--space-4);
}
.vuz-cena-box {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--color-surface); border-radius: 12px; padding: var(--space-4);
}
/* Volitelne interni cislo vozu (napr. z kartoteky/dokladu) - decentni,
   nemeni velikost boxu ani nekonkuruje cene. Pouziva se jen u vozu, kde
   je zadano (viz vuz-rimor-kilig-79.html); kdyz span chybi, nic se
   nezobrazi. */
.vuz-cena-interni-cislo {
  position: absolute; top: 10px; right: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  color: color-mix(in srgb, #000f3d 38%, transparent);
}
.vuz-porovnat-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px;
  background: #000f3d; border: 0; border-radius: 0;
  color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; font-family: inherit;
  padding: 16px 32px; min-height: 54px;
  cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease;
}
.vuz-porovnat-btn:hover { background: #c84e00; color: #fff; }
.vuz-porovnat-btn.je-aktivni { background: #1c7c4c; color: #fff; }
.vuz-porovnat-btn.je-plno { background: #c84e00; color: #fff; }
.vuz-cena-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, #000f3d 55%, transparent); }
.vuz-cena-hlavni { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(26px, 2.6vw, 32px); color: #000f3d; }
.vuz-cena-bezdph { font-size: 13.5px; color: color-mix(in srgb, #000f3d 55%, transparent); }
/* Puvodni cena (preskrtnuta) + uspora - obecne tridy pro cenovy box
   detailu vozu, zobrazi se jen kdyz je u vozu zadana cenaPuvodni (viz
   katalog-data.js). Stejna barevna logika jako uz existujici
   .podobne-vozy-karta-cena-puvodni/.podobne-vozy-karta-uspora. */
.vuz-cena-puvodni { font-size: 13.5px; color: color-mix(in srgb, #000f3d 45%, transparent); text-decoration: line-through; }
.vuz-cena-uspora { font-size: 13px; font-weight: 700; color: #1c7c4c; }
.vuz-dostupnost-znacka {
  display: inline-flex; align-self: flex-start; align-items: center; margin-top: 10px;
  background: color-mix(in srgb, #1c7c4c 14%, #fff); color: #1c7c4c;
  font-weight: 700; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
}
.vuz-dostupnost-znacka--foto {
  position: absolute; top: 14px; right: 14px; margin-top: 0; z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 15, 61, 0.22);
}
/* "K objednani" - vuz jeste neni fyzicky skladem, odlisna barva od
   vychoziho zeleneho "Skladem" (stejny odstin jako jiz existujici
   .podobne-vozy-znacka--naceste, aby byl vyznam barvy napric webem
   konzistentni). */
.vuz-dostupnost-znacka--kobjednani { background: color-mix(in srgb, #c84e00 14%, #fff); color: #c84e00; }

.vuz-pudorys-panel img {
  display: block; width: 100%; height: auto; object-fit: contain;
}
/* PUDORYSY - TRVALE PRAVIDLO (viz AGENTS.md "Pudorysy vozidel"): zdrojove
   obrazky pudorysu maji casto velke bile okraje na vsech stranach (export
   z CAD/katalogu vyrobce), takze prosty width:100%/height:auto zobrazi
   malou kresbu uprostred velkeho bileho prostoru. Reseni NENI jen
   object-fit:cover v ramci pomeru stran (to resi jen jednu osu) - presny
   postup je zmerit vsechny 4 hranice obsahu (ne-bilych pixelu) v puvodnim
   obrazku a nastavit panel/obrazek takto:
     panel:  position:relative; overflow:hidden;
             aspect-ratio: contentSirka / contentVyska;
     obrazek: position:absolute;
             width:  (obrazekSirka / contentSirka) * 100%;
             height: (obrazekVyska / contentVyska) * 100%;
             left:  -(contentLeva / contentSirka) * 100%;
             top:   -(contentHorni / contentVyska) * 100%;
   Protoze panel ma presne pomer contentSirka:contentVyska, je vysledne
   meritko na obou osach shodne (zadna deformace) a viditelna cast je
   PRESNE jen kresba pudorysu bez jakehokoli bileho okraje. Soubor samotny
   se nemeni, zadna kopie ani nova slozka - jen CSS. Hodnoty jsou natvrdo
   spocitane pro konkretni obrazek kazdeho vozu (ruzne zdroje maji ruzne
   okraje) - pri pridani noveho vozu VZDY zmerit znovu (viz AGENTS.md). */
body:has(#poptavka-sarus95-96924) .vuz-pudorys-panel {
  position: relative; overflow: hidden; border-radius: 16px; width: 100%;
  aspect-ratio: 443 / 319; /* obrazek 650x343, obsah x:14-457 y:16-335 */
}
body:has(#poptavka-sarus95-96924) .vuz-pudorys-panel img {
  position: absolute; width: 146.7%; max-width: none; height: 107.5%; left: -3.16%; top: -5.02%;
}
/* Sarus 5 (29364): stejny princip, vlastni zmereni pro tento obrazek. */
body:has(#poptavka-sarus5-29364) .vuz-pudorys-panel {
  position: relative; overflow: hidden; border-radius: 16px; width: 100%;
  aspect-ratio: 535 / 399; /* obrazek 1024x550, obsah x:32-567 y:48-447 */
}
body:has(#poptavka-sarus5-29364) .vuz-pudorys-panel img {
  position: absolute; width: 191.4%; max-width: none; height: 137.8%; left: -5.98%; top: -12.03%;
}
/* Sarus 5 (26811): druhy, odlisny fyzicky vuz stejneho modelu - vlastni
   zmereni pro tento obrazek (1024x550, obsah x:36-566 y:49-442). */
body:has(#poptavka-sarus5-26811) .vuz-pudorys-panel {
  position: relative; overflow: hidden; border-radius: 16px; width: 100%;
  aspect-ratio: 530 / 393;
}
body:has(#poptavka-sarus5-26811) .vuz-pudorys-panel img {
  position: absolute; width: 193.21%; max-width: none; height: 139.95%; left: -6.79%; top: -12.47%;
}
/* Sarus 695 (40627): stejny princip, vlastni zmereni pro tento obrazek
   (450x255, obsah x:44-405 y:0-254 - temer zadny bily okraj nahore/dole,
   jen po stranach). */
body:has(#poptavka-sarus695) .vuz-pudorys-panel {
  position: relative; overflow: hidden; border-radius: 16px; width: 100%;
  aspect-ratio: 361 / 255;
}
body:has(#poptavka-sarus695) .vuz-pudorys-panel img {
  position: absolute; width: 124.65%; max-width: none; height: 100%; left: -12.19%; top: 0%;
}
/* Sarus 8 (37200): stejny princip, vlastni zmereni pro tento obrazek
   (450x255, obsah x:55-395 y:0-254 - temer zadny bily okraj nahore/dole,
   jen po stranach). */
body:has(#poptavka-sarus8) .vuz-pudorys-panel {
  position: relative; overflow: hidden; border-radius: 16px; width: 100%;
  aspect-ratio: 340 / 255;
}
body:has(#poptavka-sarus8) .vuz-pudorys-panel img {
  position: absolute; width: 132.35%; max-width: none; height: 100%; left: -16.18%; top: 0%;
}
/* Sarus 9 (05684): stejny princip, vlastni zmereni pro tento obrazek
   (669x550, obsah x:9-624 y:49-503). */
body:has(#poptavka-sarus9-05684) .vuz-pudorys-panel {
  position: relative; overflow: hidden; border-radius: 16px; width: 100%;
  aspect-ratio: 615 / 454;
}
body:has(#poptavka-sarus9-05684) .vuz-pudorys-panel img {
  position: absolute; width: 108.8%; max-width: none; height: 117.8%; left: -1.46%; top: -10.79%;
}
/* Integra 660 EB (45299): stejny princip. Zdrojovy obrazek je uz skoro
   bez bileho okraje (469x194, obsah x:6-459 y:0-191), takze korekce je
   male - hlavni prinos je presne sedici aspect-ratio panelu misto
   vychoziho width:100%/height:auto. */
body:has(#poptavka-integra660-45299) .vuz-pudorys-panel {
  position: relative; overflow: hidden; border-radius: 16px; width: 100%;
  aspect-ratio: 454 / 192;
}
body:has(#poptavka-integra660-45299) .vuz-pudorys-panel img {
  position: absolute; width: 103.3%; max-width: none; height: 101%; left: -1.32%; top: 0%;
}
/* Laser 540 (72981): soubor pudorys_laser540.jpg (puvodne 290x145 PNG s
   pruhlednosti, prevedeno na JPEG) ma jen MALY bily okraj (obsah
   x:5-278 y:18-139, zmereno pixel-scanem - tentokrat spolehlive, soubor
   je ted skutecny JPEG). Na pokyn obsluhy (srovnani se Sarus 95, ktery
   pouziva stejnou crop-to-content techniku) orezany bile okraje - vysledny
   pomer stran 273/121 (~2,26:1) je o neco SIRSI nez cely obrazek (2:1),
   protoze samotna kresba vozu je prirozene siroka/plocha (jiny tvar
   podkladu nez Sarus95) - panel proto vyjde nizsi nez u Sarus95 i po
   orezu, to je dano tvarem vykresu, ne chybou. Potvrzeno obsluhou
   (AskUserQuestion) - prednost ma zachovani pomeru stran pred vyskou. */
body:has(#poptavka-laser540-72981) .vuz-pudorys-panel {
  position: relative; overflow: hidden; border-radius: 16px; width: 100%;
  aspect-ratio: 273 / 121;
}
body:has(#poptavka-laser540-72981) .vuz-pudorys-panel img {
  position: absolute; width: 106.23%; max-width: none; height: 119.83%; left: -1.83%; top: -14.88%;
}
/* Eura Mobil Profila T 696 EB (291086): pudorys_profilat695.jpg (772x342),
   obsah x:8-656 y:56-297 zmereno pixel-scanem (System.Drawing cte soubor
   spravne, zadny format problem). Stejna crop-to-content technika jako
   Sarus95/Laser540 - vysledny pomer 648/241 (~2,69:1) je opet sirsi nez
   Sarus95 (dany tvar vykresu alkoven/polointegry s dlouhou dispozici),
   panel proto vyjde nizsi - stejny, jiz obsluhou potvrzeny princip. */
body:has(#poptavka-profilat696) .vuz-pudorys-panel {
  position: relative; overflow: hidden; border-radius: 16px; width: 100%;
  aspect-ratio: 648 / 241;
}
body:has(#poptavka-profilat696) .vuz-pudorys-panel img {
  position: absolute; width: 119.14%; max-width: none; height: 141.91%; left: -1.23%; top: -23.24%;
}
/* Eura Mobil Profila T 726 EF Freestyle (345823): pudorys_profilat726ef_345823.jpg
   byl MEZITIM (15.10. dopoledne) nahrazen primo Nikol novou verzi se
   skutecne bilym pozadim (450x255, puvodni problematicka 1200x503 verze
   s cernym pozadim jiz na disku neni - stary nalez o cerne pozadi je
   tak vyresen, zaloha puvodniho souboru v _zalohy pro jistotu). Obsah
   x:8-380 y:60-195, orezano stejnou technikou jako jinde. */
body:has(#poptavka-profilat726ef) .vuz-pudorys-panel {
  position: relative; overflow: hidden; border-radius: 16px; width: 100%;
  aspect-ratio: 372 / 135;
}
body:has(#poptavka-profilat726ef) .vuz-pudorys-panel img {
  position: absolute; width: 120.97%; max-width: none; height: 188.89%; left: -2.15%; top: -44.44%;
}
main:has(#poptavka-profilat726ef) + footer.foot { margin-top: 0; }
/* Mezera Zakladni informace -> Podvozek: zmereno CDP 72px (Zakladni
   informace karta ted ma 8 polozek vc. Najeto/Uvedeno do provozu, vyssi
   nez u predchozich vozu), cil 32px jako u ostatnich detailu. */
body:has(#poptavka-integra660-45299) .vuz-spec-mrizka + .vuz-spec-mrizka > .vuz-spec-sloupec:first-child {
  position: relative; top: -40px; margin-bottom: -40px;
}
/* Masuria 780 TL: PUVODNI soubor pudorys_masuria780tl.webp (896x329, bez
   bileho okraje) byl na pokyn obsluhy 14.10. NAHRAZEN NOVYM souborem
   stejneho nazvu - zmena dispozice vozu. Novy soubor (1448x1086, presne
   4:3) obsahuje denni i nocni usporadani POD SEBOU v jednom obrazku a ma
   male bile okraje (zmereno canvasem: obsah x:27-1411 y:49-1060). Tentokrat
   obsluha vyslovne chce CELY obrazek BEZ orezu ("Půdorys zobraz celý, bez
   ořezu a deformací") - zadna absolute-position korekce jako u jinych
   vozu, jen aspect-ratio podle presneho pomeru CELEHO souboru (zadny crop,
   zadny overflow:hidden netreba - img vyplni panel presne, nic se
   neoriznu). */
body:has(#poptavka-masuria780tl-kobjednani) .vuz-pudorys-panel {
  border-radius: 16px; overflow: hidden; width: 100%;
  aspect-ratio: 1448 / 1086;
}
/* Mezera Zakladni informace -> Podvozek: zmereno CDP 113.6px (Zakladni
   informace karta ma 7 polozek vc. radku Dostupnost), cil 32px. */
body:has(#poptavka-masuria780tl-kobjednani) .vuz-spec-mrizka + .vuz-spec-mrizka > .vuz-spec-sloupec:first-child {
  position: relative; top: -82px; margin-bottom: -82px;
}
/* Masuria 780 TL - druhy kus (07793, ojety): stejny pudorys soubor, stejny
   pomer 1448x1086, ale JINY fyzicky obrazek (vlastni slozka) a karta
   "Zakladni informace" ma 8 polozek (navic Uvedeno do provozu + Najeto),
   proto vlastni gap-fix hodnota zmerena CDP zvlast - nekopirovat -82px
   z kobjednani beze zmereni. */
body:has(#poptavka-masuria780tl-07793) .vuz-pudorys-panel {
  border-radius: 16px; overflow: hidden; width: 100%;
  aspect-ratio: 1448 / 1086;
}
body:has(#poptavka-masuria780tl-07793) .vuz-spec-mrizka + .vuz-spec-mrizka > .vuz-spec-sloupec:first-child {
  position: relative; top: -37px; margin-bottom: -37px;
}

.vuz-parametry-radek {
  display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0;
  gap: 0;
}
.vuz-parametry-radek li {
  flex: 1 1 0; min-width: 68px; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 4px; padding: 0 7px; border-left: 1px solid var(--color-divider);
}
.vuz-parametry-radek li:first-child { border-left: 0; padding-left: 0; }
.vuz-parametr-ikona { color: #c84e00; display: flex; }
.vuz-parametr-ikona svg { width: 26px; height: 26px; }
.vuz-parametry-radek b { font-size: 15px; color: #000f3d; font-weight: 700; }
.vuz-parametry-radek span { font-size: 12px; color: color-mix(in srgb, #000f3d 60%, transparent); }

.vuz-hero-akce { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }

@media (max-width: 900px) {
  .vuz-hero-grid { grid-template-columns: 1fr; align-items: start; }
  .vuz-info-panel { margin-top: var(--space-4); height: auto; }
}

.vuz-galerie-hlavni {
  position: relative;
  aspect-ratio: 4 / 3; max-height: 560px; border-radius: 16px; overflow: hidden;
  background: var(--color-surface); margin-bottom: var(--space-4);
}
.vuz-galerie-hlavni img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.18s ease; }
.vuz-galerie-hlavni img.vuz-galerie-mizi { opacity: 0; }
/* Navigacni sipky pres hlavni fotku - jemne pruhledny bily kruh s tmave
   modrou sipkou, presne na vertikalnim stredu, jemne zvyrazneni pri hoveru. */
.vuz-galerie-sipka {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; padding: 0; border: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.82); color: #000f3d;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  cursor: pointer; z-index: 2;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.vuz-galerie-sipka svg { width: 22px; height: 22px; }
.vuz-galerie-sipka:hover { background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24); transform: translateY(-50%) scale(1.07); }
.vuz-galerie-sipka--vlevo { left: 14px; }
.vuz-galerie-sipka--vpravo { right: 14px; }
@media (max-width: 480px) {
  .vuz-galerie-sipka { width: 38px; height: 38px; }
  .vuz-galerie-sipka svg { width: 18px; height: 18px; }
  .vuz-galerie-sipka--vlevo { left: 10px; }
  .vuz-galerie-sipka--vpravo { right: 10px; }
}
.vuz-galerie-nahledy { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.vuz-nahled {
  padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden;
  cursor: pointer; aspect-ratio: 4 / 3; background: none; line-height: 0; display: block;
  opacity: 0.72; transition: border-color 0.2s ease, opacity 0.2s ease;
}
.vuz-nahled img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vuz-nahled:hover { opacity: 1; }
.vuz-nahled.je-aktivni { border-color: #c84e00; opacity: 1; }

.vuz-specifikace { padding-block: clamp(24px, 4vw, 48px); }
.vuz-spec-mrizka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); align-items: start; }
.vuz-spec-mrizka + .vuz-spec-mrizka { margin-top: clamp(20px, 3vw, 32px); }
/* Kilig 79: v prvni .vuz-spec-mrizka je pravy sloupec (Pocet mist + Rozmery
   a hmotnosti) o 123px vyssi nez Zakladni informace vlevo (delsi seznam u
   tohoto vozu) - radek mrizky se tim natahne na vysku praveho sloupce a
   pod Zakladnimi informacemi zustane prazdne misto, takze karta Podvozek
   a motor pod nim zacina zbytecne nizko. Posun nahoru o stejnou hodnotu
   (stejny vzor jako -144px u Sarus95 vyse) resi jen tuhle konkretni
   nerovnovahu u Kiliga - natvrdo spocitano pro jeho obsah, scoped at
   neovlivni jine vozy. */
@media (min-width: 761px) {
  body:has(#poptavka-kilig79) .vuz-spec-mrizka + .vuz-spec-mrizka > .vuz-spec-karta:first-child {
    position: relative; top: -123px; margin-bottom: -123px;
  }
  /* Kilig 79: i po tomhle posunu Podvozku nahoru zustava .vuz-interier-blok
     (karta Interier a dispozice + poznamka vedle slideshow "Pro koho je
     idealni") na puvodnim miste - jeho pozice je dana PRIROZENOU (neposunutou)
     vyskou druhe .vuz-spec-mrizka, ktera je o neco vyssi nez vizualne posunuty
     Podvozek, takze nad Interierem zbyva velka prazdna mezera. Zadano
     vyslovne, ze zarovnani se sousednim slideshow sloupcem neni nutne -
     posouvame proto jen LEVY sloupec (karta Interier + poznamka pod ni)
     nahoru, slideshow vpravo zustava na miste (je ukotveny k vyssimu
     sloupci balicku vybavy vedle Podvozku, tam zadna mezera neni). */
  body:has(#poptavka-kilig79) .vuz-interier-blok > .vuz-spec-sloupec:first-child {
    position: relative; top: -104px; margin-bottom: -104px;
  }
  /* Horus 95: dve nezavisle korekce na pokyn obsluhy.
     (a) "Zakladni informace" (6 polozek) je o 82px nizsi nez sousedni karta
     "Pocet mist" + "Rozmery a hmotnosti" (vice polozek u tohoto vozu) -
     "Podvozek a motor" pod tim proto zacinal zbytecne nizko. Posun nahoru
     o 82px - presne stejny princip jako u Kiliga vyse, jen jina hodnota
     pro jiny obsah. Interier a dispozice (dalsi karta ve stejnem levem
     sloupci) musi o stejnych 82px posunout take, aby na Podvozek dale
     navazovala bez mezery (jinak by shora posunuty Podvozek pod sebou
     znovu otevrel stejne velkou mezeru). */
  body:has(#poptavka-horus95) .vuz-spec-mrizka + .vuz-spec-mrizka > .vuz-spec-karta:first-child {
    position: relative; top: -82px; margin-bottom: -82px;
  }
  /* Kilig 695: stejny princip jako u Kilig79/Horus95 vyse - pravy sloupec
     (Pocet mist + Rozmery a hmotnosti) je o 123px vyssi nez Zakladni
     informace vlevo, takze Podvozek a motor pod tim zacinal zbytecne
     nizko. Druhy radek mrizky (Podvozek + balicky) je sam o sobe vyssi
     nez tenhle posunuty Podvozek (balicky maji 3 karty), takze zadny
     dalsi navazujici posun netreba - overeno mereno, ze .vuz-interier-blok
     uz ma vlastni samostatny fix nize (viz -224px/370px u
     .vuz-idealni-grid--sloupec), ktery na tenhle posun NEnavazuje. */
  body:has(#poptavka-kilig695) .vuz-spec-mrizka + .vuz-spec-mrizka > .vuz-spec-karta:first-child {
    position: relative; top: -123px; margin-bottom: -123px;
  }
  /* Kilig 55: stejny princip jako u Kilig79/Horus95/Kilig695 vyse - pravy
     sloupec (Pocet mist + Rozmery a hmotnosti) je o 123px vyssi nez
     Zakladni informace vlevo, takze Podvozek a motor pod tim zacinal
     zbytecne nizko (zmereno: mezera 155px vs prirozenych 32px, rozdil
     123px). Natvrdo spocitano pro aktualni obsah - pri zmene poctu
     polozek prepocitat. */
  body:has(#poptavka-kilig55) .vuz-spec-mrizka + .vuz-spec-mrizka > .vuz-spec-karta:first-child {
    position: relative; top: -123px; margin-bottom: -123px;
  }
  /* Sarus 5 (treti konkretni vuz, 29364) - stejny princip jako u ostatnich
     vyse (mezera 155px vs prirozenych 32px, rozdil 123px). Pouziva
     nezavisle sloupce (jako Sarus95/96924), takze primym potomkem mrizky 2
     je .vuz-spec-sloupec, ne .vuz-spec-karta primo. */
  body:has(#poptavka-sarus5-29364) .vuz-spec-mrizka + .vuz-spec-mrizka > .vuz-spec-sloupec:first-child {
    position: relative; top: -123px; margin-bottom: -123px;
  }
  /* Sarus 9 (ctvrty konkretni vuz, 05684) - stejny princip, vlastni
     zmereni az po nahrani (hodnota -123px je predbezny odhad shodny s
     ostatnimi vozy teto sablony, prekontrolovat/upravit pres CDP). */
  body:has(#poptavka-sarus9-05684) .vuz-spec-mrizka + .vuz-spec-mrizka > .vuz-spec-sloupec:first-child {
    position: relative; top: -123px; margin-bottom: -123px;
  }
  /* Sarus 95 (druhy konkretni vuz, 96924) - NEZAVISLE SLOUPCE na pokyn
     obsluhy: Podvozek(26 polozek)+Interier(15) jsou ve spolecnem
     .vuz-spec-sloupec vlevo, Zlaty balicek+Balicek KH+slideshow jsou ve
     spolecnem .vuz-spec-sloupec vpravo - oba sloupce jsou primymi potomky
     JEDNE mrizky (.vuz-spec-mrizka ma align-items:start), takze mezera
     Balicek KH->slideshow je uz sama od sebe spravna (zmereno: 32px).
     POZOR - OPRAVA CHYBY: drive tu bylo tvrzeni, ze i mezera Zakladni
     informace->Podvozek je uz prirozene 32px a zadny posun netreba. Byl to
     omyl zpusobeny mereni proti SPATNE referenci (mrizka1 jako celek, tedy
     vuci vyssimu sloupci Pocet mist+Rozmery, misto proti Zakladnim
     informacim samotnym) - skutecna mezera je 155px stejne jako u
     ostatnich vozu, protoze tohle se tyka VNITRNI nerovnovahy mrizky 1
     (Zakladni informace vs Pocet mist+Rozmery), kterou nezavisle sloupce
     v mrizce 2 vubec neresi. Posun vraceno. */
  body:has(#poptavka-sarus95-96924) .vuz-spec-mrizka + .vuz-spec-mrizka > .vuz-spec-sloupec:first-child {
    position: relative; top: -123px; margin-bottom: -123px;
  }
  /* Sarus 95 (96924): protoze slideshow uz nestretchuje na vysku souseda
     (viz nezavisle sloupce vyse), potrebuje vlastni pevnou vysku - jinak
     radek "1fr" v .vuz-idealni-grid--sloupec nema zadny zaklad a fotka
     zkolabuje na 0px (overeno - presne tohle se stalo bez tohoto pravidla).
     550px je rozumna vyska pro foto (cca 4:3 pri sirce sloupce ~600px) +
     textovy panel pod nim. */
  body:has(#poptavka-sarus95-96924) .vuz-idealni-grid--sloupec { height: 550px; }
  /* Sarus 5 (29364): stejny duvod jako u Sarus95-96924 vyse - slideshow bez
     stretch-partnera potrebuje vlastni pevnou vysku. */
  body:has(#poptavka-sarus5-29364) .vuz-idealni-grid--sloupec { height: 550px; }
  /* Sarus 5 (26811): stejny duvod jako u Sarus5-29364 vyse - druhy, odlisny
     fyzicky vuz stejneho modelu, ma vlastni slideshow bez stretch-partnera. */
  body:has(#poptavka-sarus5-26811) .vuz-idealni-grid--sloupec { height: 550px; }
  /* Sarus 9 (05684): stejny duvod jako vyse. */
  body:has(#poptavka-sarus9-05684) .vuz-idealni-grid--sloupec { height: 550px; }
  /* Eura Mobil Profila T 726 EF Freestyle (345823): puvodne bez slideshow,
     doplnena dodatecne na pokyn obsluhy - stejny duvod jako vyse (pevna
     vyska pro slideshow bez stretch-partnera, vsechny 4 fotky 1448x1086). */
  body:has(#poptavka-profilat726ef) .vuz-idealni-grid--sloupec { height: 550px; }
  /* Sarus 695 (40627): stejny duvod jako u ostatnich Sarus modelu - pevna
     vyska pro slideshow bez stretch-partnera. */
  body:has(#poptavka-sarus695) .vuz-idealni-grid--sloupec { height: 550px; }
  /* Sarus 8 (37200): stejny duvod jako u ostatnich Sarus modelu - pevna
     vyska pro slideshow bez stretch-partnera. */
  body:has(#poptavka-sarus8) .vuz-idealni-grid--sloupec { height: 550px; }
  /* Masuria 780 TL: stejny duvod (pevna vyska pro slideshow bez stretch
     partnera). PUVODNE tu bylo object-fit:contain + tmave pozadi, protoze
     slideshow mixovala fotky na sirku i na vysku (sprchovy kout) - po
     odstraneni portretni fotky sprchy (na pokyn obsluhy, zpusobovala
     modre pruhy, ktere obsluha vyslovne chtela pryc) uz vsechny 3
     zbyvajici fotky maji stejny pomer stran (1500x1000/1500x1001), takze
     vychozi object-fit:cover z zakladni tridy staci - vyplni cely panel
     bez pruhu, zadna korekce netreba. */
  body:has(#poptavka-masuria780tl-kobjednani) .vuz-idealni-grid--sloupec { height: 550px; }
  /* Prekryvajici se texty pri prepinani (nahlasena chyba obsluhou): base
     .vuz-idealni-slide-text ma crossfade 0.7s pres opacity - u delsich/
     kratsich textu ruzne dlouhych radku to pri screenshotu v polovine
     prechodu vypada jako "prosvitajici" dvojity text. Foto si svuj plynuly
     crossfade (0.9s) zachovava, text se tu prepina okamzite (bez
     prekryvu) - scoped jen na tenhle vuz, jinde komponenta beze zmeny. */
  body:has(#poptavka-masuria780tl-kobjednani) .vuz-idealni-slide-text { transition: none; }
  /* Masuria 780 TL - druhy kus (07793): stejna slideshow komponenta, stejny
     duvod (vyska + okamzity prepinac textu bez prekryvu). */
  body:has(#poptavka-masuria780tl-07793) .vuz-idealni-grid--sloupec { height: 550px; }
  body:has(#poptavka-masuria780tl-07793) .vuz-idealni-slide-text { transition: none; }
  /* Integra 660 (45299): slideshow "Hlavni prednosti vozidla" presunuta
     z puvodniho plnosirkoveho umisteni (viz AGENTS.md "Neodchyluj se od
     jednotne struktury karet") zpet do praveho sloupce vedle tabulky
     vybavy, stejny vzor jako Masuria/Sarus9/Sarus5/Sarus95. Vsech 5 fotek
     ma presne stejny pomer 4:3 (1448x1086), takze vychozi object-fit:cover
     z zakladni tridy staci - zadne barevne pruhy. */
  body:has(#poptavka-integra660-45299) .vuz-idealni-grid--sloupec { height: 550px; }
  /* Laser 540 (72981): stejny duvod (pevna vyska pro slideshow bez stretch
     partnera v .vuz-spec-sloupec). 4 fotky maji VELMI ruzny pomer stran
     (1279x1230 temer ctverec, 1448x1086 4:3, 1500x844 siroky 16:9-ish,
     1448x1086 4:3) - pri object-fit:contain by to znamenalo barevne pruhy
     (presne to, co obsluha vyslovne odmitla u drivejsich vozu). Pouzit
     vychozi object-fit:cover - mirne orizne okraje u ctvercove/sirokoúhle
     fotky, ale zadne pruhy, hlavni motiv zustava vzdy stredovany a
     viditelny. */
  body:has(#poptavka-laser540-72981) .vuz-idealni-grid--sloupec { height: 550px; }
  body:has(#poptavka-laser540-72981) .vuz-idealni-slide-text { transition: none; }
  /* Eura Mobil Profila T 696 EB (291086): stejny duvod (pevna vyska pro
     slideshow bez stretch partnera). 2 fotky maji VELMI ruzny pomer stran
     (1448x1086 na sirku, 599x800 na vysku) - pouzit vychozi
     object-fit:cover (mirny orez u portretni fotky, ale zadne barevne
     pruhy). */
  body:has(#poptavka-profilat696) .vuz-idealni-grid--sloupec { height: 550px; }
  body:has(#poptavka-profilat696) .vuz-idealni-slide-text { transition: none; }
  /* Mezera Podvozek a motor -> Nastavba a interier: pravy sloupec radku vyse
     (3 male balicky Turin/KH zdarma/TOP vybava) je o 264px vyssi nez
     Podvozek, takze radek 3 (Nastavba + slideshow) prirozene zacina az pod
     tim delsim sloupcem - pod Podvozkem tak zbyva zbytecna prazdna mezera
     (nahlaseno obsluhou se screenshotem). Posunuta jen LEVA karta (Nastavba)
     nahoru, aby navazovala hned pod Podvozkem - slideshow VPRAVO se
     NEPOSOUVA (muselo by prekryvat TOP vybavu, ktera v prave sloupci stale
     pokracuje), zustava na puvodnim miste pod celym pravym sloupcem.
     POZOR: leva karta je ted obalena v .vuz-spec-sloupec (kvuli poznamce
     "Vyhrazujeme si pravo..." pod tabulkou) - selektor cili na sloupec,
     ne primo na kartu, jinak by fix prestal fungovat. */
  body:has(#poptavka-laser540-72981) .vuz-spec-mrizka + .vuz-spec-mrizka + .vuz-spec-mrizka > .vuz-spec-sloupec:first-child {
    position: relative; top: -264px; margin-bottom: -264px;
  }
  /* POZOR: Interier a dispozice NEMA vlastni posun navic - margin-bottom:
     -82px na Podvozku vyse uz sam o sobe zmensi vysku cele predchozi sekce
     o 82px, takze .vuz-interier-blok (a tedy i Interier v jeho levem
     sloupci) prirozene zacne o stejnych 82px vys bez dalsiho zasahu.
     Pridani dalsiho posunu by Interier posunulo 2x a zpusobilo prekryv
     se zbytkem seznamu Podvozku (overeno mereni - presne tohle se stalo
     pri prvnim pokusu). */
  /* "Balicek Karavany Humpolec" vpravo je jen 1 kratka karta (na rozdil od
     Sarus95/Kilig79 nema Horus druhy balicek) - o 360px kratsi nez
     "Podvozek a motor" vedle ni. Zadano vyslovne, ze slideshow "Pro koho
     je idealni" (pravy sloupec dalsiho radku) nemusi cekat na vysku
     Podvozku a muze navazovat primo na Balicek. Diky stejne kaskade jako
     u Interieru (viz vyse) uz .vuz-idealni-grid--sloupec zacina o 82px
     vys, nez odpovida jeho neposunute prirozene pozici - zbyvajici posun
     je proto 360-82 = 278px, ne plnych 360px. */
  body:has(#poptavka-horus95) .vuz-interier-blok > .vuz-idealni-grid--sloupec {
    position: relative; top: -278px; margin-bottom: -278px;
  }
}
.vuz-spec-mrizka--siroka { grid-template-columns: 1fr; }
.vuz-spec-sloupec { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px); min-width: 0; }
.vuz-spec-karta {
  background: #fff; border: 1px solid color-mix(in srgb, #000f3d 10%, transparent);
  border-radius: 16px; padding: clamp(20px, 2.5vw, 28px);
}
.vuz-spec-karta h2 {
  font-size: 18px; color: #000f3d; margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 2px solid color-mix(in srgb, #000f3d 10%, transparent);
}
.vuz-parametry { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.vuz-parametry li { display: flex; justify-content: space-between; gap: var(--space-4); padding: 9px 0; border-top: 1px solid var(--color-divider); }
.vuz-parametry li:first-child { border-top: 0; padding-top: 0; }
.vuz-parametry li span { color: color-mix(in srgb, #000f3d 65%, transparent); }
.vuz-parametry li b { font-weight: 600; color: #000f3d; text-align: right; }

.vuz-vybava-seznam { list-style: none; margin: 0; padding: 0; font-size: 14.5px; color: #000f3d; }
.vuz-vybava-seznam li { position: relative; padding: 7px 0 7px 22px; border-top: 1px solid var(--color-divider); line-height: 1.4; }
.vuz-vybava-seznam li:first-child { border-top: 0; padding-top: 0; }
.vuz-vybava-seznam li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: #c84e00; }
/* Dvousloupcovy rozpis vybavy v ramci jedne karty (napr. dlouhy seznam
   "Nastavba a interier") - dva samostatne <ul>.vuz-vybava-seznam vedle
   sebe 50/50, kazdy ma vlastni nezavisly border-top/first-child reset
   (zadna zmena existujici tridy), takze styl odrazek/linek zustava presne
   stejny jako u jednosloupcovych seznamu jinde na webu. Na mobilu (viz
   media dotaz nize) se vrati pod sebe do jednoho sloupce. */
.vuz-vybava-dvousloupec { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-5); }
@media (max-width: 760px) {
  .vuz-vybava-dvousloupec { grid-template-columns: 1fr; }
}

.vuz-pudorys { margin-top: var(--space-4); border-radius: 12px; overflow: hidden; border: 1px solid var(--color-divider); }
.vuz-pudorys img { display: block; width: 100%; height: auto; }
.vuz-poznamka { font-size: 13px; line-height: 1.5; color: color-mix(in srgb, #000f3d 50%, transparent); margin-top: var(--space-3); }
/* Kilig 79: poznamka presunuta primo pod tabulku Interier (misto na konec
   cele sekce) - jako dalsi flex-child ve stejnem sloupci uz dostava
   standardni mezeru z .vuz-spec-sloupec gap, vlastni margin-top proto
   nechceme scitat navrch. Max-width drzi text citelny i kdyz se v tomto
   uzsim sloupci zalamuje na vic radku. */
.vuz-poznamka--pod-interierem { margin-top: 0; max-width: 60ch; }
/* Laser 540 (72981): sloupec je siroky 600px (na rozdil od uzsiho
   .vuz-interier-blok sloupce u Kilig vozu), takze sdilenych 60ch (~447px)
   zalamuje text na 3 radky misto pozadovanych 2 - rozsireno jen pro tenhle
   vuz (max-width v px, ne ch, aby presne sedelo na 2 radky; na mobilu
   sloupec uz tak uzsi nez tahle hodnota, takze se prirozene zalomi podle
   sirky obrazovky beze zmeny). */
body:has(#poptavka-laser540-72981) .vuz-poznamka--pod-interierem { max-width: 520px; }

@media (max-width: 760px) {
  .vuz-spec-mrizka { grid-template-columns: 1fr; }
}
@media (min-width: 761px) {
  /* U Sarus95 je karta Interier (a tedy i slideshow vedle ni, viz
     .vuz-idealni-grid--sloupec vyse) vizualne o 144px vys, nez odpovida
     jejich layoutove vysce v mrizce (stejny duvod jako u -144px posunu
     Interieru pod Podvozkem) - poznamka pod nimi proto "viselo" v
     prazdnu. Stejne cislo, stejne omezeni a scoping jako u -144px/576.5px
     vyse: natvrdo spocitano pro obsah tabulek KONKRETNIHO vozu. */
  body:has(#poptavka-sarus95) .vuz-poznamka { margin-top: -124px; }
}

/* Pas "Pro koho je idealni" na detailu vozu Sarus 95 - slideshow se 3
   slidy, stejny vzor jako .eura-interier (foto + text pres sebe, crossfade
   pres opacity, sipky/tecky, autoplay - viz vuz-idealni-slideshow.js), jen
   prebarveno na firemni tmave modrou/oranzovou pouzivanou na tomto detailu
   vozu (#000f3d / #c84e00). */
.vuz-idealni-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.vuz-idealni-foto { position: relative; min-height: 460px; overflow: hidden; }
.vuz-idealni-slides { position: relative; width: 100%; height: 100%; }
.vuz-idealni-slides img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  opacity: 0; transition: opacity 0.9s ease;
}
.vuz-idealni-slides img.je-aktivni { opacity: 1; }
.vuz-idealni-sipka {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, #fff 88%, transparent); color: #000f3d;
  cursor: pointer; backdrop-filter: blur(2px);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.vuz-idealni-sipka svg { width: 20px; height: 20px; }
.vuz-idealni-sipka-prev { left: 14px; }
.vuz-idealni-sipka-next { right: 14px; }
.vuz-idealni-sipka:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.vuz-idealni-tecky {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2;
  display: flex; justify-content: center; gap: 8px;
}
.vuz-idealni-tecky button {
  width: 8px; height: 8px; border-radius: 50%; padding: 0; border: 0;
  background: color-mix(in srgb, #fff 55%, transparent); cursor: pointer;
  transition: background-color 0.2s ease, width 0.2s ease;
}
.vuz-idealni-tecky button.je-aktivni { width: 22px; border-radius: 4px; background: #c84e00; }
.vuz-idealni-obsah { display: flex; align-items: center; background: var(--color-surface); padding: clamp(40px, 6vw, 88px) clamp(24px, 4vw, 56px); }
.vuz-idealni-obsah-text { max-width: 540px; margin-inline: auto; }
.vuz-idealni-kicker {
  margin: 0; color: #c84e00; font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.vuz-idealni-kicker::after { content: ""; display: block; width: 48px; height: 3px; background: #c84e00; margin-top: var(--space-3); }
.vuz-idealni-text { display: grid; margin-top: var(--space-4); }
.vuz-idealni-slide-text {
  grid-area: 1 / 1; opacity: 0; pointer-events: none;
  transition: opacity 0.7s ease;
}
.vuz-idealni-slide-text.je-aktivni { opacity: 1; pointer-events: auto; }
.vuz-idealni-slide-text p { color: color-mix(in srgb, #000f3d 82%, transparent); margin: 0; font-size: 16px; line-height: 1.6; }
.vuz-idealni-slide-text b { color: #000f3d; }
@media (max-width: 860px) {
  .vuz-idealni-grid { grid-template-columns: minmax(0, 1fr); }
  .vuz-idealni-foto { min-height: 0; aspect-ratio: 4 / 3; }
  .vuz-idealni-obsah-text { max-width: none; }
}


/* Slideshow "Pro koho je idealni" znovupouzita jako vertikalni/portretni
   sloupec vedle tabulek Interier a dispozice + Balicek Karavany Humpolec
   ZDARMA (.vuz-interier-blok) - stejna komponenta, stejna data, jen jiny
   kontext vykresleni (viz modifikator --sloupec nize). Na sirokych
   obrazovkach vyplnuje presne vysku leveho sloupce s tabulkami, na
   mobilu/tabletu se vrati k puvodnimu "vodorovnejsimu" tvaru (foto s
   pomerem stran 4:3) a presune se pod tabulky - viz media dotaz nize,
   sdili breakpoint s puvodnim mobilnim chovanim komponenty. */
.vuz-interier-blok {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px); align-items: stretch;
  margin-top: clamp(20px, 3vw, 32px);
}
/* "Podvozek a motor" a "Zlaty balicek + Balicek Karavany Humpolec ZDARMA"
   jsou nad timto blokem vedle sebe ve spolecne mrizce (.vuz-spec-mrizka) -
   kdyz je pravy sloupec (karty vybavy) vyssi nez samotny Podvozek, cela
   mrizka konci az pod nim a mezi Podvozkem a Interierem tak vznika velka
   prazdna mezera navic. Reseni pres position:relative posouva jen vizualne
   kartu Interier nahoru (na rozdil od zaporneho margin by to NEOVLIVNILO
   vysku radku, tedy ani vysku/pozici slideshow vedle ni).
   POZOR: hodnota je natvrdo spocitana pro delku seznamu KONKRETNIHO vozu
   (kolik polozek maji tabulky Podvozek/balicky/Interier) - kazdy vuz s
   touto sablonou ma proto VLASTNI scoped pravidlo (body:has(#poptavka-X)),
   protoze delka seznamu se vuz od vozu lisi. Pri zmene obsahu u daneho
   vozu je treba prepocitat (zmerit novy rozdil vysek sloupcu v
   .vuz-spec-mrizka a upravit cislo). Plati jen na sirokych obrazovkach,
   kde jsou tabulky vedle sebe (nad 760px) - na mobilu se vse radi pod
   sebe a mezera tam nevznika. */
@media (min-width: 761px) {
  body:has(#poptavka-sarus95) .vuz-interier-blok > .vuz-spec-sloupec > .vuz-spec-karta {
    position: relative; top: -144px;
  }
}
.vuz-idealni-grid--sloupec {
  border: 1px solid color-mix(in srgb, #000f3d 10%, transparent);
  border-radius: 16px; overflow: hidden;
}
@media (min-width: 861px) {
  .vuz-idealni-grid--sloupec {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto;
    /* Vychozi chovani (zadny align-self) - sloupec se stretchuje na vysku
       sousedni karty Interier (.vuz-interier-blok ma align-items:stretch).
       Spravne pro kazdy vuz BEZ vlastniho -144px posunu vedle (viz vyse) -
       ty maji vlastni scoped height nize, ktera tohle prebije. */
  }
  /* Karta Interier vedle ni je u Sarus95 vizualne o 144px nizsi, nez by
     odpovidalo vysce radku mrizky (viz posun .vuz-spec-karta o
     position:relative:top:-144px o kousek vyse) - slideshow proto NESMI
     stretchovat na celou vysku radku (jinak by prcela dole), ale ma
     pevnou vysku presne o tech 144px nizsi, aby spodni hrany obou karet
     zase sedely. Scoped stejne jako -144px hodnota vyse - kazdy vuz ma
     vlastni natvrdo spocitanou hodnotu pro svuj obsah. */
  body:has(#poptavka-sarus95) .vuz-idealni-grid--sloupec { align-self: start; height: 576.5px; }
  .vuz-idealni-grid--sloupec .vuz-idealni-foto { min-height: 0; height: 100%; }
  .vuz-idealni-grid--sloupec .vuz-idealni-obsah { padding: clamp(20px, 2.5vw, 28px); }
  /* Horus 95: Interier a dispozice ma dlouhy seznam (18 polozek), takze
     vychozi "stretchuj na vysku souseda" chovani vyse natahlo foto-box na
     velkou vysku a sirokouhle fotky (pomer ~3:2) se v nem orezaly skoro na
     uzky prouzek - presny opak toho, co ma tahle sekce ukazovat. Zadano
     vyslovne, ze zarovnani se sousednim sloupcem tabulek tu neni nutne:
     box proto nestretchuje (align-self:start) a ma vlastni rozumnou
     vysku podle pomeru stran 3:2, do ktere se vejde vetsina snimku beze
     zbytku (1536x1024 = presne 3:2). object-fit:contain navic zarucuje,
     ze se zadna fotka neorizne, i kdyz ma jiny pomer (schudek 1672x940,
     volant 1448x1086) - tmave pozadi dovyplni pripadne okraje. */
  body:has(#poptavka-horus95) .vuz-idealni-grid--sloupec { align-self: start; }
  body:has(#poptavka-horus95) .vuz-idealni-grid--sloupec .vuz-idealni-foto {
    height: auto; min-height: 0; aspect-ratio: 3 / 2;
  }
  body:has(#poptavka-horus95) .vuz-idealni-slides img { object-fit: contain; background: #000f3d; }
  /* Kilig 695: posun tabulky Interier zustava (uzavira mezeru mezi
     Podvozkem a Interierem v levem sloupci, nesouvisi se slideshow vpravo).
     Celkovy posun = 123px (Podvozek je sam o -123px vyse kvuli mrizka1/2
     rozdilu, viz pravidlo vyse) + 48px (pravy sloupec balicku je po tomto
     posunu porad o 48px vyssi nez Podvozek, obsah ma 22 polozek) = 171px.
     Natvrdo spocitano pro aktualni delku seznamu Podvozku(22)/Interieru(16)
     /balicku - pri zmene obsahu nutno prepocitat (zmereno pres CDP). */
  body:has(#poptavka-kilig695) .vuz-interier-blok > .vuz-spec-sloupec > .vuz-spec-karta {
    position: relative; top: -171px; margin-bottom: -171px;
  }
  /* Slideshow "Pro koho je idealni" u Kilig695 - od odstraneni portretni
     fotky koupelny (byvaly duvod pro nezavislou vysku + contain, viz stara
     verze tohoto komentare v historii) uz zbyvaji jen 3 fotky na sirku
     (1536x1024 a 2x 1600x740), takze NIC uz nebrani pouzit PRESNE stejny
     mechanismus jako Sarus95 (zavazna vizualni sablona na pokyn obsluhy):
     box se opet ridi vyskou leveho sloupce (grid-template-rows:1fr auto,
     viz zdileno pravidlo vyse) a fotky se oriznou pres vychozi
     object-fit:cover (zadna uz neni na vysku, cover tedy nic nedeformuje
     ani nenecha neprirozene male). Vyska 596px = prirozena celkova vyska
     leveho sloupce (767px: karta 665 + gap 32 + poznamka 59, nezmeneno od
     drivejsiho mereni) minus posun -171px vyse - stejny vzorec jako
     Sarus95 (576.5px pro jeho obsah), jen vlastni cislo pro Kilig695. */
  body:has(#poptavka-kilig695) .vuz-idealni-grid--sloupec { align-self: start; height: 596px; }
  /* Kilig 55: po posunu Podvozku o -123px (viz pravidlo vyse) je Podvozek
     sam o sobe o 171px vys nez sousedni sloupec balicku (3 karty), cimz
     vznika stejna "velka mezera" pred Interierem jako u ostatnich vozu
     (zmereno pres CDP: gap 203px vs prirozenych 32px, rozdil 171px).
     Natvrdo spocitano pro aktualni delku seznamu Podvozku(22)/balicku(3+5+5)
     - pri zmene obsahu prepocitat. */
  body:has(#poptavka-kilig55) .vuz-interier-blok > .vuz-spec-sloupec > .vuz-spec-karta {
    position: relative; top: -171px; margin-bottom: -171px;
  }
  /* Kilig 55: slideshow nahrazena profesionalnimi fotkami stejnych rozmeru
     jako Sarus95 (1536x1024 a 1448x1086) - zadny duvod pro vlastni
     pomer/contain, pouzit presne Sarus95uv mechanismus (vychozi
     stretchovani na vysku leveho sloupce, cover). Vyska dopocitana nize
     stejne jako u ostatnich vozu. */
  body:has(#poptavka-kilig55) .vuz-idealni-grid--sloupec { align-self: start; height: 513px; }
}
@media (max-width: 860px) {
  .vuz-interier-blok { grid-template-columns: minmax(0, 1fr); }
}

/* Univerzalni sekce "Podobne vozy" na detailu vozu (viz podobne-vozy.js) -
   az 4 stejne velke karty vedle sebe na desktopu, na mobilu vodorovny
   carousel (nativni scroll, jedna hlavni karta + kousek dalsi napovida,
   ze lze listovat). Sekci vykresluje/odstranuje JS podle dostupnych dat,
   CSS jen resi vzhled a rozlozeni. */
.podobne-vozy { padding-block: clamp(32px, 5vw, 56px); }
.podobne-vozy-hlavicka { margin-bottom: clamp(20px, 3vw, 32px); }
.podobne-vozy-hlavicka h2 {
  color: #000f3d; margin: 0 0 12px; padding-bottom: 12px; position: relative;
}
.podobne-vozy-hlavicka h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px; background: #c84e00;
}
.podobne-vozy-hlavicka p { margin: 0; font-size: 15px; color: color-mix(in srgb, #000f3d 60%, transparent); }

.podobne-vozy-mrizka { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }

.podobne-vozy-karta {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid color-mix(in srgb, #000f3d 10%, transparent); border-radius: 16px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.podobne-vozy-karta:hover {
  transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 15, 61, 0.12);
  border-color: color-mix(in srgb, #000f3d 20%, transparent);
}

.podobne-vozy-karta-foto { position: relative; aspect-ratio: 4 / 3; background: var(--color-surface); overflow: hidden; }
.podobne-vozy-karta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.podobne-vozy-znacka {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  display: inline-flex; align-items: center;
  font-weight: 700; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.podobne-vozy-znacka--sklad { background: color-mix(in srgb, #1c7c4c 14%, #fff); color: #1c7c4c; }
.podobne-vozy-znacka--naceste { background: color-mix(in srgb, #c84e00 14%, #fff); color: #c84e00; }
.podobne-vozy-znacka--kobjednani { background: color-mix(in srgb, #c84e00 14%, #fff); color: #c84e00; }

.podobne-vozy-karta-obsah { padding: clamp(16px, 2vw, 20px); display: flex; flex-direction: column; gap: 10px; flex: 1; }

.podobne-vozy-karta-hlava { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.podobne-vozy-karta-hlava h3 { font-size: 16px; color: #000f3d; margin: 0; line-height: 1.3; }
.podobne-vozy-karta-rok { font-size: 12.5px; color: color-mix(in srgb, #000f3d 55%, transparent); white-space: nowrap; }

.podobne-vozy-karta-parametry { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.podobne-vozy-karta-parametry li { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: color-mix(in srgb, #000f3d 70%, transparent); }
.podobne-vozy-ikona { color: #c84e00; display: flex; }
.podobne-vozy-ikona svg { width: 16px; height: 16px; }

.podobne-vozy-karta-cena-radek { margin-top: auto; padding-top: 6px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.podobne-vozy-karta-cena { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; color: #000f3d; }
.podobne-vozy-karta-cena-puvodni { font-size: 13px; color: color-mix(in srgb, #000f3d 45%, transparent); text-decoration: line-through; }
.podobne-vozy-karta-uspora { font-size: 12px; font-weight: 700; color: #1c7c4c; }

@media (max-width: 1179px) {
  .podobne-vozy-mrizka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .podobne-vozy-mrizka {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    gap: 14px; padding-bottom: 6px; margin: 0 calc(-1 * var(--gut)); padding-inline: var(--gut);
    scrollbar-width: none;
  }
  .podobne-vozy-mrizka::-webkit-scrollbar { display: none; }
  .podobne-vozy-karta { flex: 0 0 82%; scroll-snap-align: start; }
}
@media (max-width: 480px) {
  .podobne-vozy-karta { flex-basis: 86%; }
}

/* Univerzalni sekce "Financovani" na detailu vozu (viz financovani-vozu.js) -
   cena a vypocty se natahuji automaticky z katalog-data.js podle data-vuz-id,
   nic se nikde nevypisuje rucne. Dve bile karty vedle sebe na desktopu, pod
   sebou na mobilu. Formular pouziva stavajici sdilene tridy .field/.input/
   .consent (stejny vzhled jako kontakt.html) - meni se jen barva CTA na
   firemni #c84e00 misto puvodni #f7941e, stejnym zpusobem jako uz drive u
   .servis-hero/.pujcovna-hero/.kontakt-modal-okno. */
.vuz-financovani { padding-block: clamp(32px, 5vw, 56px); border-top: 0; }
.vuz-financovani-hlavicka { margin-bottom: clamp(20px, 2.8vw, 28px); }
.vuz-financovani-hlavicka h2 { color: #000f3d; margin: 0; font-size: clamp(24px, 3vw, 32px); }
.vuz-financovani-popis {
  margin: 10px 0 0; color: color-mix(in srgb, #000f3d 68%, transparent);
  font-size: 15.5px; line-height: 1.6; max-width: 900px;
}

/* Spolecny ramecek pro obe puvodne samostatne karty - svetle modre pozadi
   odvozene z firemni navy (#000f3d, jen 6% sytosti) + vyrazny plny pruh v
   presne firemni barve nahore. Sloupce uvnitr uz nemaji vlastni bile pozadi/
   ramecek, jen jemnou svislou delici caru mezi sebou na desktopu, aby
   pusobily jako jedna karta, ne dve vlozene do treti. */
.vuz-financovani-box {
  background: color-mix(in srgb, #000f3d 6%, #fff);
  border: 1px solid color-mix(in srgb, #000f3d 12%, transparent);
  border-radius: 16px; overflow: hidden;
}
.vuz-financovani-box-pruh { height: 10px; background: #000f3d; }
.vuz-financovani-mrizka {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px); align-items: start;
  padding: clamp(28px, 3.5vw, 40px) clamp(28px, 4vw, 44px);
}
.vuz-financovani-sloupec { min-width: 0; padding-left: clamp(28px, 4vw, 48px); border-left: 1px solid color-mix(in srgb, #000f3d 8%, transparent); }
.vuz-financovani-sloupec:first-child { padding-left: 0; border-left: 0; }
.vuz-financovani-sloupec h3 {
  font-size: clamp(20px, 2.3vw, 24px); font-weight: var(--font-heading-weight); color: #000f3d; margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 2px solid color-mix(in srgb, #000f3d 14%, transparent);
}

.vuz-financovani-slider-hlavicka { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.vuz-financovani-slider-hlavicka label { font-size: 14px; font-weight: 700; color: #000f3d; }
.vuz-financovani-slider-hlavicka span { font-size: 16px; font-weight: 700; color: #c84e00; }

.vuz-financovani-slider-blok input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin-top: var(--space-3);
  border-radius: 999px; background: color-mix(in srgb, #000f3d 12%, transparent); cursor: pointer;
}
.vuz-financovani-slider-blok input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #c84e00; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 15, 61, 0.35);
  cursor: pointer;
}
.vuz-financovani-slider-blok input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: #c84e00;
  border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 15, 61, 0.35); cursor: pointer;
}
.vuz-financovani-slider-blok input[type="range"]::-moz-range-progress { background: #c84e00; border-radius: 999px; }
.vuz-financovani-slider-blok input[type="range"]:focus-visible { outline: 2px solid #c84e00; outline-offset: 3px; }

.vuz-financovani-radky {
  margin-top: clamp(20px, 3vw, 28px); padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--color-divider);
}
.vuz-financovani-radek {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider);
}
.vuz-financovani-radek:first-child { padding-top: 0; }
.vuz-financovani-radek:last-child { border-bottom: 0; padding-bottom: 0; }
.vuz-financovani-radek span { font-size: 14px; color: color-mix(in srgb, #000f3d 60%, transparent); }
.vuz-financovani-radek strong {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(19px, 2.2vw, 23px); color: #000f3d;
}
.vuz-financovani-poznamka { font-size: 12.5px; line-height: 1.5; color: color-mix(in srgb, #000f3d 50%, transparent); margin: var(--space-4) 0 0; }

.vuz-financovani .btn-primary { background: #c84e00; color: #fff; }
.vuz-financovani .btn-primary:hover { background: color-mix(in srgb, #c84e00 88%, black); }
.vuz-financovani-formular { background: transparent; padding: 0; border-top: 0; }
.vuz-financovani-formular .field:last-of-type { margin-bottom: var(--space-4); }
.vuz-financovani-cta { width: 100%; }

@media (max-width: 760px) {
  .vuz-financovani-mrizka { grid-template-columns: minmax(0, 1fr); }
  .vuz-financovani-sloupec {
    padding-left: 0; border-left: 0;
    padding-top: clamp(20px, 4vw, 28px); border-top: 1px solid color-mix(in srgb, #000f3d 8%, transparent);
  }
  .vuz-financovani-sloupec:first-child { padding-top: 0; border-top: 0; }
}

/* Univerzalni pas "Co ziskate nakupem u nas" na detailu vozu - obecne
   vyhody nakupu u Karavany Humpolec (servis, reklamace, financovani,
   predani), nic specificke pro konkretni znacku/model, takze jde pouzit
   na detailu kterehokoli prodavaneho vozu beze zmeny obsahu. 4 stejne
   velke dlazdice na desktopu, 2x2 na tabletu, pod sebou na mobilu. */
.vuz-vyhody-hlavicka { margin-bottom: clamp(24px, 3.5vw, 40px); }
.vuz-vyhody-hlavicka h2 {
  color: #000f3d; margin: 0 0 12px; padding-bottom: 12px; position: relative;
}
.vuz-vyhody-hlavicka h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px; background: #c84e00;
}
.vuz-vyhody-popis { margin: 0; color: color-mix(in srgb, #000f3d 68%, transparent); font-size: 15.5px; line-height: 1.6; max-width: 68ch; }

.vuz-vyhody-mrizka { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.vuz-vyhody-dlazdice {
  display: flex; flex-direction: column;
  background: color-mix(in srgb, #000f3d 4%, #fff);
  border: 1px solid color-mix(in srgb, #000f3d 10%, transparent);
  border-radius: 14px; padding: clamp(20px, 2.2vw, 26px);
}
.vuz-vyhody-ikona {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: var(--space-4);
  background: color-mix(in srgb, #c84e00 12%, #fff); color: #c84e00;
}
.vuz-vyhody-ikona svg { width: 24px; height: 24px; }
.vuz-vyhody-dlazdice h3 { font-size: 17px; font-weight: var(--font-heading-weight); color: #000f3d; margin: 0 0 10px; line-height: 1.3; }
.vuz-vyhody-dlazdice p { margin: 0; font-size: 15px; line-height: 1.55; color: color-mix(in srgb, #000f3d 72%, transparent); }
.vuz-vyhody-dlazdice .vuz-vyhody-zvyrazneno {
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, #000f3d 12%, transparent);
  font-weight: 700; color: #000f3d;
}
@media (max-width: 1023px) {
  .vuz-vyhody-mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .vuz-vyhody-mrizka { grid-template-columns: minmax(0, 1fr); }
}

/* Kdyz je sekce "Podobne vozy" prazdna (malo vozu v katalogu), JS ji
   odstrani z DOM (podobne-vozy.js) - vuz-vyhody se tak dostane hned za
   vuz-specifikaci. Bez teto opravy by ale i pred odstranenim/pri
   deaktivovanem JS zustala po zakladnim pravidlu .sec seda linka a az
   88px mezera navic. Misto zasahu do sdilenych trid .sec/.vuz-vyhody
   (pouzivaji se i jinde) resime jen tento konkretni prechod. */
.vuz-specifikace + .vuz-vyhody,
.podobne-vozy:empty + .vuz-vyhody {
  border-top: 0;
  padding-top: 14px;
}
.podobne-vozy:empty { display: none; }

/* tesnejsi mezera mezi ukazkou vozu a Aktualitami na uvodni strance */
.sec--tesna-dole { padding-bottom: clamp(16px, 2.5vw, 32px); }
.sec--tesna-nahore { padding-top: clamp(16px, 2.5vw, 32px); }

/* bannery pujcovny a servisu na uvodni strance, pred Aktualitami — vedle sebe na jednom radku */
.uvod-banner { padding-block: var(--space-6); }
.uvod-banner a { display: block; }
.uvod-banner img { display: block; width: 100%; height: auto; box-shadow: var(--shadow-md); }
.uvod-banner-radek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 760px) { .uvod-banner-radek { grid-template-columns: minmax(0, 1fr); } }

/* pas log partnerskych znacek mezi Aktualitami a zapatim — vetsi cast log se
   na jeden staticky radek nevejde, proto jemne a plynule automaticky posouvajici
   pas (obsah zdvojeny v HTML, animace posouva presne o polovinu = neviditelny
   sesun). Loga jsou rameckove "badge" dlazdice s popiskem — velka kvuli citelnosti
   textu uvnitr obrazku, prioritou je citelnost pred poctem soucasne viditelnych log. */
.loga-pas { padding-block: clamp(20px, 3vw, 32px); border-top: 2px solid var(--color-divider); }
.foot--po-logach { margin-top: 0; }
.loga-pas-viewport { overflow: hidden; }
.loga-pas-radek {
  display: flex; align-items: center; width: max-content;
  gap: clamp(40px, 5.5vw, 80px);
  animation: loga-posun 124s linear infinite;
}
.loga-pas-viewport:hover .loga-pas-radek { animation-play-state: paused; }
.loga-pas-radek img { display: block; height: clamp(80px, 8vw, 120px); width: auto; flex: none; }
@keyframes loga-posun {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .loga-pas-radek { animation: none; }
}
@media (max-width: 640px) {
  .loga-pas-radek { gap: 32px; }
  .loga-pas-radek img { height: 67px; }
}

/* ── Mapa webu (sitemap.html) ──────────────────────────────────
   Prehledna hierarchicka mapa realnych stranek pro navstevniky.
   Neni to totez co XML sitemap.xml pro vyhledavace - ten zustava
   samostatny a touto strankou/stylem se nijak nemeni. */
.mapa-webu-mrizka {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px);
}
.mapa-webu-sekce h2 {
  font-size: 18px; color: var(--navy); margin: 0 0 var(--space-4);
  padding-bottom: 10px; border-bottom: 2px solid var(--orange);
}
.mapa-webu-sekce h3 {
  font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--navy) 60%, transparent);
  margin: var(--space-6) 0 var(--space-3);
}
.mapa-webu-sekce ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mapa-webu-sekce li { position: relative; padding-left: 16px; }
.mapa-webu-sekce li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--orange);
}
.mapa-webu-sekce a { color: var(--navy); text-decoration: none; font-size: 15px; }
.mapa-webu-sekce a:hover { color: var(--orange); text-decoration: underline; }
@media (max-width: 1080px) { .mapa-webu-mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mapa-webu-mrizka { grid-template-columns: minmax(0, 1fr); } }

/* ── Porovnani vozu ──────────────────────────────────────────
   Plovouci lista dole na strance (porovnani-vozu.js ji sama
   vklada/odebira podle obsahu localStorage) + vzhled samotne
   stranky porovnani.html s tabulkou vedle sebe. */
.porovnani-lista {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: #000f3d; color: #fff;
  transform: translateY(100%); transition: transform 0.25s ease;
  box-shadow: 0 -4px 16px rgba(0, 15, 61, 0.25);
}
.porovnani-lista.je-viditelna { transform: translateY(0); }
.porovnani-lista-obsah {
  max-width: var(--page); margin: 0 auto;
  padding: 12px var(--gut);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
}
.porovnani-lista-pocet { font-weight: 700; font-size: 14px; white-space: nowrap; }
.porovnani-lista-vozy { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; }
.porovnani-lista-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: color-mix(in srgb, #fff 14%, transparent);
  border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 12.5px;
}
.porovnani-lista-chip button {
  background: transparent; border: 0; color: #fff; cursor: pointer;
  width: 20px; height: 20px; border-radius: 50%; font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.porovnani-lista-chip button:hover { background: color-mix(in srgb, #fff 20%, transparent); }
.porovnani-lista-cta {
  background: #c84e00; color: #fff; text-decoration: none;
  font-weight: 700; font-size: 13.5px; padding: 9px 18px; border-radius: 999px;
  white-space: nowrap;
}
.porovnani-lista-cta:hover { background: color-mix(in srgb, #c84e00 88%, black); }
.porovnani-lista-vyprazdnit {
  background: transparent; border: 1px solid color-mix(in srgb, #fff 30%, transparent);
  color: #fff; font-size: 12.5px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  white-space: nowrap;
}
.porovnani-lista-vyprazdnit:hover { background: color-mix(in srgb, #fff 10%, transparent); }
@media (max-width: 640px) {
  .porovnani-lista-obsah { padding: 10px var(--space-3); }
  .porovnani-lista-pocet { display: none; }
}

.porovnani-prazdno {
  text-align: center; padding: clamp(32px, 6vw, 56px) var(--space-4);
  background: var(--color-surface); border-radius: 16px;
}
.porovnani-prazdno p { margin: 0 0 var(--space-4); color: color-mix(in srgb, #000f3d 65%, transparent); font-size: 15.5px; }

.porovnani-tabulka-obal { margin-top: var(--space-4); }
.porovnani-tabulka { border-collapse: collapse; width: 100%; }
.porovnani-tabulka th, .porovnani-tabulka td {
  border-bottom: 1px solid var(--color-divider);
  padding: var(--space-3) var(--space-4); text-align: left; vertical-align: middle;
}
.porovnani-tabulka thead th {
  min-width: 240px; vertical-align: top; position: relative;
  padding-top: clamp(28px, 3vw, 36px);
  /* Zahlavi s nazvy vozu zustava viditelne i pri rolovani dlouhe tabulky -
     zakaznik vzdy vidi, ke kteremu vozu radek patri. */
  position: sticky; top: 0; z-index: 3; background: #fff;
}
.porovnani-tabulka thead th:first-child { min-width: 0; position: sticky; left: 0; z-index: 4; }
.porovnani-tabulka thead th img {
  display: block; width: 100%; max-width: 220px; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 10px; margin-bottom: var(--space-3);
}
.porovnani-tabulka-znacka { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, #000f3d 60%, transparent); }
.porovnani-tabulka-nazev { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; color: #000f3d; margin-top: 2px; }
.porovnani-tabulka-stav { display: block; font-size: 13px; color: color-mix(in srgb, #000f3d 60%, transparent); margin-top: var(--space-2); }
.porovnani-tabulka-cena { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; color: var(--color-accent-700); margin: var(--space-2) 0 var(--space-3); }
.porovnani-tabulka thead th .btn { font-size: 13px; padding: 8px 16px; }
.porovnani-tabulka-odebrat {
  position: absolute; top: 0; right: 0;
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--color-divider);
  background: #fff; color: #000f3d; font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.porovnani-tabulka-odebrat:hover { background: var(--color-surface); }
.porovnani-tabulka tbody th {
  font-weight: 600; font-size: 13.5px; color: color-mix(in srgb, #000f3d 65%, transparent); white-space: nowrap;
  position: sticky; left: 0; z-index: 1; background: #fff;
}
.porovnani-tabulka tbody td { font-size: 14.5px; color: #000f3d; }
/* Nadpis skupiny parametru (Cena / Zakladni informace / Rozmery a hmotnosti /
   Podvozek a motor / Dalsi informace) - cela sirka tabulky, oranzovy pruh
   jako u ostatnich nadpisu sekci na webu (.vuz-idealni-kicker apod.). */
.porovnani-tabulka-skupina th {
  background: var(--color-surface); border-bottom: 2px solid var(--orange);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: #000f3d;
  position: sticky; left: 0;
}
.porovnani-tabulka-skupina:first-child th { border-top: 0; }

/* Uvodni cast stranky /porovnani.html: nadpis a text pod sebou (ne vedle
   sebe jako .sec-head na jinych strankach), text na sirku containeru at
   se na desktopu vejde na jeden radek. */
[data-porovnani-stranka] .sec-head { display: block; margin-bottom: var(--space-6); }
[data-porovnani-stranka] .sec-head h1 { margin: 0 0 var(--space-2); }
[data-porovnani-stranka] .sec-head .sec-note { max-width: none; margin: 0; }

/* .table-scroll ma site-wide tmave modry border-top (znackova vrstva pro
   .spec tabulky) - na strance porovnani je navic pod uvodnim textem,
   tady ho nechceme. */
.porovnani-tabulka-obal.table-scroll { border-top: 0; }

/* .foot ma vychozi margin-top (stejny jako mezi .sec sekcemi), ktery se
   tu scita s padding-bottom posledni sekce a za tabulkou vznika zbytecne
   velka mezera - stejny vzor uprav jako u stranek koncicich formularem. */
main:has([data-porovnani-tabulka]) + footer.foot { margin-top: 0; }

/* ── Koberce na miru (clanek) ──────────────────────────────────
   Stejna dvojice akcentovych barev (#000f3d / #c84e00) jako uz
   pouziva zazimovani.html pro clankove stranky - konzistentni
   rodina "rady a tipy" vzhledu, odlisna od hlavni --navy/--orange
   znackove vrstvy jen jemnym odstinem. */
/* Uvodni sekce: nadpis a uvodni odstavec pres celou sirku nahore (na pokyn
   obsluhy 2026-10-21), pod nimi dvousloupcovy radek - vyhody vlevo, fotka
   vpravo, zarovnane k hornimu okraji. .split uz ma site-wide align-items:
   start (horni zarovnani) a pod 1080px se sam zalomi na jeden sloupec
   (viz @media max-width:1080px), takze zadne dalsi media query neni
   potreba - desktop vedle sebe, tablet/mobil pod sebou (vyhody pak fotka). */
.koberce-uvod-hlavicka { margin-bottom: clamp(28px, 4vw, 44px); }
.koberce-uvod-hlavicka .lead {
  color: color-mix(in srgb, #000f3d 78%, transparent);
  max-width: none; margin-top: var(--space-4);
}
.koberce-uvod-split { margin: 0; }
.koberce-uvod-text h2 { color: #000f3d; margin-top: 0; }
.koberce-uvod-foto img {
  display: block; width: 100%; height: auto; border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
.koberce-telo { max-width: 760px; margin-inline: auto; }
.koberce-telo .prose { max-width: none; }
.koberce-telo h2 { color: #000f3d; margin-top: clamp(32px, 4vw, 48px); }
.koberce-telo h2:first-child { margin-top: 0; }
.koberce-telo h3 { color: #000f3d; margin-top: var(--space-6); }

.koberce-vyhody { list-style: none; margin: var(--space-4) 0; padding: 0; display: grid; gap: var(--space-2); }
.koberce-vyhody li {
  position: relative; padding: 12px 16px 12px 40px;
  background: color-mix(in srgb, #000f3d 5%, #fff);
  border-radius: 10px; font-size: 15.5px; line-height: 1.5;
}
.koberce-vyhody li::before {
  content: ""; position: absolute; left: 16px; top: 19px;
  width: 9px; height: 9px; border-radius: 50%; background: #c84e00;
}

.koberce-kroky { list-style: none; counter-reset: koberce-krok; margin: var(--space-4) 0; padding: 0; display: grid; gap: var(--space-4); }
.koberce-kroky li {
  counter-increment: koberce-krok;
  position: relative; padding-left: 44px; font-size: 15.5px; line-height: 1.55;
}
.koberce-kroky li::before {
  content: counter(koberce-krok);
  position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; border-radius: 50%;
  background: #000f3d; color: #fff;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}

.koberce-tagline {
  margin-top: var(--space-6); padding: var(--space-4);
  border-left: 4px solid #c84e00;
  background: color-mix(in srgb, #000f3d 6%, #fff);
  font-style: italic; color: #000f3d; font-size: 16px;
}

.koberce-porovnani { max-width: 960px; margin-inline: auto; text-align: center; }
.koberce-porovnani .sec-head { display: block; text-align: center; margin-bottom: clamp(20px, 3vw, 32px); }
.koberce-porovnani-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.5vw, 28px); text-align: left; }
.koberce-porovnani-polozka { margin: 0; }
.koberce-porovnani-stitek {
  display: inline-block; margin: 0 0 var(--space-3);
  padding: 4px 16px; border-radius: 999px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: #000f3d;
}
.koberce-porovnani-stitek--po { background: #c84e00; }
.koberce-porovnani-btn {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in;
}
.koberce-porovnani-btn:focus-visible { outline: 3px solid #c84e00; outline-offset: 3px; }
.koberce-porovnani-ramecek {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; width: 100%;
  background: color-mix(in srgb, #000f3d 5%, #fff);
  border: 1px solid var(--color-divider); border-top: 3px solid #000f3d;
  box-shadow: var(--shadow-md); overflow: hidden;
  transition: opacity 0.15s ease;
}
.koberce-porovnani-btn:hover .koberce-porovnani-ramecek { opacity: 0.92; }
.koberce-porovnani-ramecek img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.koberce-porovnani-text { max-width: 60ch; margin: clamp(20px, 3vw, 32px) auto 0; color: color-mix(in srgb, #000f3d 78%, transparent); font-size: 15.5px; line-height: 1.55; }

@media (max-width: 640px) {
  .koberce-porovnani-grid { grid-template-columns: 1fr; }
}

/* Dlazdice "Koberce do kabiny i nastavby na miru" v servis.html je
   cela kliknutelna - odkaz na samostatny clanek v nove karte, zbytek
   .servis-karta dlazdic zustava obycejnym <article>. */
a.servis-karta { display: block; color: inherit; text-decoration: none; }
a.servis-karta:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }