/* =============================================================================
   KIA — stránky modelů (autodaspol.cz)
   -----------------------------------------------------------------------------
   Registruje je šablona modelu (page-kia-*.php) před get_header().
   Stavba je převzatá ze stránek modelů na bofb.cz (Range Rover), řeč je
   ale Kia: střídají se bílé plochy s tmavými v barvě Kia Midnight Black,
   úvod je tmavý jako na kia.com, fotky mají střízlivější zaoblení a čísla
   jsou velká a ostrá.

   Záměrně MIMO vrstvy (@layer): styly tématu jsou ve vrstvách a nevrstvené
   CSS je přebije bez ohledu na specificitu. Všechno je zavřené pod `.km-page`.

   Písmo a tlačítka jsou ze zbytku webu (Plus Jakarta Sans, Inter, pilulková
   tlačítka). Písmo Kia Signature je licencované jen pro Kia, nepoužíváme ho.
   ========================================================================== */

.km-page {
  --km-midnight: #05141F;  /* Kia Midnight Black */
  --km-bg:      #FFFFFF;
  --km-bg-2:    var(--canvas, #F4F5F7);
  --km-ink:     var(--ink, #0B0C0E);
  --km-ink-2:   var(--ink-2, #3D424B);
  --km-ink-3:   var(--ink-3, #6B7280);
  --km-line:    var(--line, #E5E7EB);
  --km-accent:  var(--km-midnight);

  --km-font:    var(--font-ui);
  --km-head:    var(--font-display);
  --km-ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --km-gap:     clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --km-sec:     clamp(5rem, 3rem + 7vw, 9rem);
  --km-radius:  var(--r-md, 16px);

  background: var(--km-bg);
  color: var(--km-ink);
  font-family: var(--km-font);
  overflow-x: clip;
}

/* Tmavá plocha: stejné komponenty, jen přehozené barvy */
.km-dark {
  --km-bg:     var(--km-midnight);
  --km-bg-2:   #0D2231;
  --km-ink:    #FFFFFF;
  --km-ink-2:  rgba(255, 255, 255, 0.82);
  --km-ink-3:  rgba(255, 255, 255, 0.62);
  --km-line:   rgba(255, 255, 255, 0.14);
  --km-accent: #FFFFFF;
  background: var(--km-bg);
  color: var(--km-ink);
}

.km-page img { display: block; width: 100%; height: auto; }
.km-page figure { margin: 0; }
.km-page sup { font-size: 0.55em; vertical-align: super; line-height: 0; margin-left: 0.1em; color: var(--km-ink-3); }

.km-page .km-breadcrumb { background: var(--km-bg); }

/* --- Typografie ---------------------------------------------------------- */
.km-eyebrow {
  margin: 0 0 1rem;
  font-size: var(--fs-2xs);
  font-weight: 650;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--km-accent);
}

.km-display {
  margin: 0 0 1.25rem;
  font-family: var(--km-head);
  font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--km-ink);
}

.km-h2 {
  margin: 0 0 1.25rem;
  font-family: var(--km-head);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: var(--tracking-head);
  color: var(--km-ink);
}

/* Nadpis, který má zůstat na jednom řádku. Písmo je jinak stejné jako
   u ostatních nadpisů sekcí, jen se na úzkém displeji zmenší podle šířky,
   aby se vešlo. Kolik em nadpis zabírá, říká --km-em (změřeno pro
   Plus Jakarta Sans 700): vzorec pak zmenší písmo právě tolik, kolik je
   potřeba. */
.km-h2--line {
  white-space: nowrap;
  font-size: min(var(--fs-h2), calc((100vw - 2.5rem) / var(--km-em, 12.5)));
}

.km-body {
  margin: 0 0 1.25rem;
  max-width: 36rem;
  font-size: var(--fs-lead);
  line-height: 1.75;
  color: var(--km-ink-3);
}

/* --- Tlačítka ------------------------------------------------------------
   Tlačítka jsou ze zbytku webu (.btn, .btn-outline-dark, .btn-ghost) —
   zaoblená do pilulky. Ostré hrany má jen stránka Jaguaru. */
.km-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}


/* =============================================================================
   ÚVOD — nadpis na bílé, pod ním velké okno s videem
   ========================================================================== */
.km-hero { padding-top: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); }

.km-hero__head {
  display: grid;
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
/* Nadpis má celou šířku, aby „Range Rover" zůstalo na jednom řádku a
   „Electric" pod ním. Perex s tlačítky je až pod nadpisem, vpravo. */
@media (min-width: 992px) {
  .km-hero__head { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
  .km-hero__eyebrow,
  .km-hero__title { grid-column: 1 / -1; }
  .km-hero__eyebrow { margin-bottom: 0; }
  .km-hero__side { grid-column: 2; }
}

.km-hero__eyebrow { animation: km-in 1.2s var(--km-ease) 0.15s both; }

.km-hero__title {
  margin: 0;
  font-family: var(--km-head);
  font-weight: 800;
  /* Velikost hlídá, aby se první řádek názvu vešel i na mobilu. Delší
     název (Range Rover Sport) si v šabloně nastaví vlastní --km-hero-fs. */
  font-size: var(--km-hero-fs, clamp(2.75rem, 0.6rem + 9.6vw, 10rem));
  line-height: 0.95;
  letter-spacing: var(--tracking-display);
  color: var(--km-ink);
}
.km-hero__line {
  display: block;
  white-space: nowrap;
  animation: km-rise 1.5s var(--km-ease) both;
  animation-delay: 0.3s;
}
.km-hero__line--accent {
  animation-delay: 0.5s;
  color: var(--km-accent);
}

.km-hero__side { animation: km-in 1.2s var(--km-ease) 0.8s both; }

.km-hero__lead {
  margin: 0 0 1.75rem;
  max-width: 26rem;
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--km-ink-3);
}

/* Cena (jen stránky modelů, které se prodávají v ceníku — Range Rover Sport) */
.km-hero__price {
  margin: -0.75rem 0 1.75rem;
  font-family: var(--km-head);
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: var(--tracking-head);
  color: var(--km-ink);
}

/* Okno s videem má přesně šířku kontejneru, jako nadpis nad ním. Šířka je
   daná výslovně: při width:auto a max-height by se okno na vysokém displeji
   zúžilo podle poměru stran a zůstalo viset u levého okraje. */
.km-hero__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 82svh;
  overflow: hidden;
  border-radius: var(--r-lg, 22px);
  background: var(--km-bg-2);
  animation: km-frame 1.6s var(--km-ease) 0.6s both;
}
.km-hero__frame picture,
.km-hero__poster,
.km-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.km-page .km-hero__poster,
.km-hero__video { height: 100%; object-fit: cover; }

.km-hero__video { opacity: 0; transition: opacity 0.9s var(--km-ease); }
.km-hero__video.is-playing { opacity: 1; }

.km-hero__replay {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--km-ink);
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 0;
  border-radius: var(--r-pill, 999px);
  cursor: pointer;
  transition: background 0.3s var(--km-ease);
}
/* Atribut hidden by jinak přebilo display: inline-flex výš — tlačítko by
   pak bylo vidět i na mobilu, kde se video vůbec nenačítá. */
.km-hero__replay[hidden] { display: none; }
.km-hero__replay:hover { background: #fff; }
.km-hero__replay:focus-visible { outline: 2px solid var(--km-accent); outline-offset: 3px; }

@keyframes km-rise {
  from { opacity: 0; transform: translateY(0.25em); }
  to   { opacity: 1; transform: none; }
}
@keyframes km-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
/* Okno se rozevře ze středu — jako když se zvedá roleta ve studiu */
@keyframes km-frame {
  from { clip-path: inset(12% 8% 12% 8%); opacity: 0; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}

@media (max-width: 767.98px) {
  .km-hero__frame { aspect-ratio: 4 / 5; max-height: none; border-radius: var(--km-radius); }
  /* Fotka s velkým vozem (Range Rover Sport) by se ve formátu na výšku
     ořízla — okno je proto na mobilu jen 4:3 */
  .km-hero__frame--43 { aspect-ratio: 4 / 3; }
  .km-hero__head .btn { flex: 1 1 100%; }
}


/* =============================================================================
   MANIFEST
   ========================================================================== */
.km-manifest { padding-block: var(--km-sec); }

.km-manifest__text {
  margin: 0;
  max-width: 64rem;
  font-family: var(--km-head);
  font-weight: 600;
  font-size: clamp(1.625rem, 1rem + 2.4vw, 3rem);
  line-height: 1.22;
  letter-spacing: var(--tracking-head);
  color: var(--km-ink);
  text-wrap: pretty;
}

.km-manifest__text .km-w {
  opacity: var(--km-o, 1);
  transition: opacity 0.35s linear;
}
.km-js .km-manifest__text .km-w { --km-o: 0.14; }
.km-js .km-manifest__text .km-w.is-on { --km-o: 1; }


/* =============================================================================
   ČÍSLA
   ========================================================================== */
.km-figures { padding-bottom: var(--km-sec); }

.km-figures__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--km-line);
}
@media (min-width: 992px) {
  .km-figures__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.km-figure {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 2rem 1.25rem 2rem 0;
  border-bottom: 1px solid var(--km-line);
}
.km-figure + .km-figure { padding-left: 1.25rem; border-left: 1px solid var(--km-line); }
@media (max-width: 991.98px) {
  .km-figure:nth-child(3) { padding-left: 0; border-left: 0; }
}

.km-figure__label {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--km-ink-3);
}
.km-figure__value {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  font-family: var(--km-head);
  font-variant-numeric: tabular-nums;
}
.km-figure__num {
  font-weight: 700;
  font-size: clamp(2.75rem, 1.6rem + 4vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
}
.km-figure__unit {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.375rem);
  font-weight: 700;
  color: var(--km-accent);
}


/* =============================================================================
   STUDIO — fotka se rozpouští do bílé stránky
   ========================================================================== */
.km-studio { padding-bottom: var(--km-sec); }

.km-studio__media {
  margin-inline: calc(var(--km-gap) * -1);
  /* Fotka má pozadí #FAFAFA, stránka #FFF — měkký okraj ten rozdíl smaže */
  -webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 52%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 72% 78% at 50% 52%, #000 62%, transparent 100%);
}

/* Nadpis stojí pod fotkou, ne přes ni — na vlnách pod vozem se ztrácel */
.km-studio__text {
  margin: clamp(1.5rem, 1rem + 2vw, 3rem) auto 0;
  text-align: center;
}
.km-studio__text .km-body { max-width: 40rem; margin-inline: auto; }

/* Studiová fotka s tmavou podlahou se do bílé rozpustit nedá — dostane rám
   se zaoblením jako ostatní fotky (Range Rover Sport Electric) */
.km-studio__media--framed {
  margin-inline: 0;
  -webkit-mask-image: none;
          mask-image: none;
  border-radius: var(--r-lg, 22px);
  overflow: hidden;
}

/* Dvě věty, dva řádky — na každém displeji. Věta se nezalomí a písmo je
   odstupňované podle šířky tak, aby se delší z nich („Na první poslech
   něco nového.") vešla do kontejneru: zabírá zhruba 13,8 em. */
.km-studio__line { display: block; white-space: nowrap; }
.km-studio__title { font-size: min(6vw, 3.5rem); }


/* =============================================================================
   SEKCE, DETAILY, ROZDĚLENÍ
   ========================================================================== */
.km-section { padding-block: var(--km-sec); }
.km-details { padding-top: 0; }

.km-details__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--km-gap);
}
@media (min-width: 992px) {
  .km-details__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Mírné schody — mřížka čtyř čtverců jinak působí jako katalog */
  .km-detail:nth-child(even) { margin-top: clamp(2rem, 4vw, 4.5rem); }
}

/* Fotky mají střízlivější zaoblení než na bofb.cz (--km-radius = 16 px). Výjimkou
   jsou fotky rozpuštěné maskou do plochy (studio, akumulátor) a pás přes
   celou šířku. */
.km-detail img,
.km-calm__gallery img,
.km-page .km-wide img,
.km-page .km-duo img {
  border-radius: var(--km-radius);
}

.km-page figcaption {
  margin-top: 0.85rem;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--km-ink-3);
}

.km-split {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 6rem);
  align-items: center;
}
@media (min-width: 992px) {
  .km-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .km-split--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .km-split--reverse .km-split__text { order: 2; }
}

/* --- Seznam s linkami (klid v interiéru) --------------------------------- */
.km-list {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--km-line);
}
.km-list li { padding: 1.25rem 0; border-bottom: 1px solid var(--km-line); }
.km-list__title {
  margin: 0 0 0.35rem;
  font-family: var(--km-head);
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: var(--tracking-head);
  color: var(--km-ink);
}
.km-list__text { margin: 0; font-size: var(--fs-body); line-height: 1.65; color: var(--km-ink-3); }

.km-calm { background: var(--km-bg-2); }
/* Nadpis je nad dvousloupcem. Text pod ním začíná hned, jako u ostatních
   sekcí (mezeru dělá jen spodní okraj nadpisu) — sloupce se proto
   zarovnávají nahoru. Při vystředění by se text posunul dolů proti vyšší
   galerii a pod nadpisem by zela díra. */
.km-calm__head .km-h2 { margin-bottom: 1.25rem; }
.km-calm .km-split { align-items: start; }

.km-calm__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "a a"
    "b c";
  gap: var(--km-gap);
}
/* Varianta přes celou šířku (Range Rover Sport Electric): nadpis a pod ním
   odstavec jako v ostatních sekcích, pod nimi velká fotka a dvě menší nad
   sebou. Odstavec vedle nadpisu ho vytlačil dolů a nahoře zbylo prázdno. */
.km-calm__intro {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.km-calm__intro .km-body { margin-bottom: 0; }

@media (min-width: 768px) {
  .km-calm__gallery--wide {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas:
      "a b"
      "a c";
  }
  /* Velká fotka vyplní výšku obou malých vpravo */
  .km-page .km-calm__gallery--wide .km-calm__a img { height: 100%; object-fit: cover; }
  .km-page .km-calm__gallery--wide .km-calm__b img,
  .km-page .km-calm__gallery--wide .km-calm__c img { aspect-ratio: 16 / 10; object-fit: cover; }
}

.km-calm__a { grid-area: a; }
.km-calm__b { grid-area: b; }
.km-calm__c { grid-area: c; }

/* --- Přes celou šířku ---------------------------------------------------- */
.km-bleed {
  position: relative;
  height: clamp(22rem, 56vw, 48rem);
  overflow: hidden;
}
.km-bleed__media { position: absolute; inset: -8% 0; }
.km-page .km-bleed__media img { height: 100%; object-fit: cover; }

.km-wide { margin-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.km-page .km-wide img { aspect-ratio: 16 / 8; object-fit: cover; }

/* --- Schopnosti ---------------------------------------------------------- */
/* Nadpis na jeden řádek potřebuje víc místa — box i odstavec pod ním jsou
   proto širší než u ostatních sekcí */
.km-ability__head { max-width: 52rem; }
.km-ability__head .km-body { max-width: 46rem; }

.km-ability__grid {
  display: grid;
  gap: 2.5rem var(--km-gap);
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
@media (min-width: 768px)  { .km-ability__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .km-ability__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Šest karet ve třech sloupcích — dva plné řádky místo 4 + 2 */
@media (min-width: 992px)  { .km-ability__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.km-card { padding-top: 1.5rem; border-top: 1px solid var(--km-line); }
.km-card__index {
  display: block;
  margin-bottom: 1rem;
  font-size: var(--fs-2xs);
  font-weight: 650;
  letter-spacing: var(--tracking-wide);
  color: var(--km-accent);
}
.km-card__title {
  margin: 0 0 0.6rem;
  font-family: var(--km-head);
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: var(--tracking-head);
  color: var(--km-ink);
}
.km-card__text { margin: 0; font-size: var(--fs-body); line-height: 1.65; color: var(--km-ink-3); }

.km-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--km-gap);
  align-items: start;
}
.km-duo figure:last-child { margin-top: clamp(2rem, 6vw, 5rem); }
.km-duo--tight figure:last-child { margin-top: clamp(1.5rem, 4vw, 3rem); }
.km-page .km-duo img { aspect-ratio: 4 / 3; object-fit: cover; }
.km-page .km-duo--portrait img { aspect-ratio: 4 / 5; }


/* =============================================================================
   TECHNIKA — kamenná plocha v barvě studiových fotek akumulátoru
   ========================================================================== */
.km-tech {
  padding-block: var(--km-sec);
  background: var(--km-stone);
}
.km-tech__head { max-width: 44rem; }

.km-tech__media {
  margin-inline: calc(var(--km-gap) * -1);
  /* Fotky mají do krajů tmavnoucí vinětu — maska ji rozpustí do plochy */
  -webkit-mask-image: radial-gradient(ellipse 64% 70% at 50% 46%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 64% 70% at 50% 46%, #000 55%, transparent 100%);
}
.km-tech__media--second { margin-top: clamp(1rem, 2vw, 2rem); }

.km-tech__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid rgba(20, 22, 24, 0.16);
}
@media (min-width: 992px) {
  .km-tech__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.km-tech__item {
  padding: 1.75rem 1.25rem 1.75rem 0;
  border-bottom: 1px solid rgba(20, 22, 24, 0.16);
}
.km-tech__item + .km-tech__item { padding-left: 1.25rem; border-left: 1px solid rgba(20, 22, 24, 0.16); }
@media (max-width: 991.98px) {
  .km-tech__item:nth-child(3) { padding-left: 0; border-left: 0; }
}
.km-tech__item dt {
  margin-bottom: 0.5rem;
  font-family: var(--km-head);
  font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  color: var(--km-ink);
  white-space: nowrap;
}
.km-tech__item dd { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--km-ink-2); }

/* --- Nabíjení ------------------------------------------------------------ */
.km-stats {
  display: grid;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--km-line);
}
.km-stats li {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) 1fr;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--km-line);
}
.km-stats strong {
  font-family: var(--km-head);
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  font-weight: 700;
  letter-spacing: var(--tracking-head);
  color: var(--km-ink);
}
.km-stats span { font-size: var(--fs-sm); line-height: 1.5; color: var(--km-ink-3); }


/* =============================================================================
   POHONY — přehled všech motorizací vedle sebe (Range Rover Sport)
   ========================================================================== */
.km-drives__head { max-width: 46rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }

.km-drives__grid {
  display: grid;
  gap: var(--km-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px)  { .km-drives__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .km-drives__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Pět karet ve dvou sloupcích by nechalo pátou samotnou — elektrická
   (první) proto zabere celý řádek a pod ní jsou dvě dvojice. Čtyři karty
   (Range Rover) se do dvou sloupců rozloží samy. U tří karet (Velar) je
   to stejné jako u pěti: zvýrazněná přes celý řádek, pod ní dvojice.
   Dvě karty (Evoque) zůstanou vedle sebe. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .km-drives__grid:not(.km-drives__grid--4):not(.km-drives__grid--2) .km-drive--accent { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .km-drives__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .km-drives__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .km-drives__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.km-drive {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--km-bg-2);
  border-radius: var(--km-radius);
}
/* Elektrický pohon je zvýrazněný — má vlastní stránku */
.km-drive--accent { background: var(--km-accent); color: #fff; }
.km-drive--accent .km-drive__title,
.km-drive--accent .km-drive__stats dd { color: #fff; }
.km-drive--accent .km-drive__text,
.km-drive--accent .km-drive__stats dt,
.km-drive--accent .km-drive__engine { color: rgba(255, 255, 255, 0.72); }
.km-drive--accent .km-drive__stats div { border-color: rgba(255, 255, 255, 0.18); }

.km-drive__engine {
  margin: 0 0 0.35rem;
  font-size: var(--fs-2xs);
  font-weight: 650;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--km-accent);
}
.km-drive__title {
  margin: 0 0 0.6rem;
  font-family: var(--km-head);
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: var(--tracking-head);
  color: var(--km-ink);
}
.km-drive__text { margin: 0 0 1.25rem; font-size: var(--fs-sm); line-height: 1.6; color: var(--km-ink-3); }

.km-drive__stats { margin: auto 0 0; }
.km-drive__stats div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--km-line);
}
.km-drive__stats dt { font-size: var(--fs-xs); font-weight: 400; color: var(--km-ink-3); }
.km-drive__stats dd {
  margin: 0;
  font-family: var(--km-head);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--km-ink);
  white-space: nowrap;
}
/* Pět karet vedle sebe je úzkých (~220 px) — popisek jde nad hodnotu,
   jinak by se delší popisky („10–80 % (350 kW)") lámaly vedle čísla */
@media (min-width: 1200px) {
  .km-drive { padding: 1.25rem; }
  .km-drive__stats div { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
}

.km-drive__link {
  margin-top: 1.25rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.km-drive__link:hover { color: #fff; text-decoration: underline; }


/* =============================================================================
   EDICE — dvě karty s fotkou (Range Rover Sport)
   ========================================================================== */
.km-editions__grid {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem) var(--km-gap);
}
@media (min-width: 768px) { .km-editions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Tři edice (Defender 110 a 130): pod sebou, dokud se nevejdou vedle sebe,
   aby ve dvou sloupcích nezůstala třetí karta osamocená. */
@media (min-width: 768px) and (max-width: 991.98px) { .km-editions__grid--3 { grid-template-columns: 1fr; } }
@media (min-width: 992px) { .km-editions__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.km-edition img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--km-radius); }
.km-edition__title {
  margin: 1.25rem 0 0.5rem;
  font-family: var(--km-head);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--tracking-head);
  color: var(--km-ink);
}
.km-edition__text { margin: 0 0 1rem; max-width: 32rem; font-size: var(--fs-body); line-height: 1.65; color: var(--km-ink-3); }
.km-edition__link { font-size: var(--fs-sm); font-weight: 600; color: var(--km-ink); text-decoration: none; }
.km-edition__link:hover { color: var(--km-accent); }


/* =============================================================================
   VÝZVA — světlý panel s textem a fotkou vedle sebe
   ========================================================================== */
.km-cta { padding-bottom: var(--km-sec); }

.km-cta__box {
  display: grid;
  background: var(--km-bg-2);
  border-radius: var(--r-lg, 22px);
  overflow: hidden;
}
@media (min-width: 992px) {
  .km-cta__box { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 34rem; }
}
.km-cta__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 1.5rem + 3vw, 4.5rem);
}
/* Panel je jen polovina šířky — nadpis v plné velikosti by se lámal na
   čtyři řádky */
.km-cta .km-display { font-size: clamp(1.875rem, 1.2rem + 1.9vw, 2.875rem); }

.km-cta__media { position: relative; min-height: 18rem; }
.km-page .km-cta__media img { position: absolute; inset: 0; height: 100%; object-fit: cover; }

/* Panel je světle šedý — obrysové tlačítko s průhledným pozadím na něm
   splývalo. Dostane bílou výplň a tmavší obrys, aby stálo vedle hlavního
   tlačítka jako rovnocenná druhá volba. */
.km-cta .btn-outline-dark {
  --btn-bg: #fff;
  --btn-bg-h: #fff;
  --btn-bd: rgba(11, 12, 14, 0.22);
  --btn-fg: var(--km-ink);
}

/* Telefon není třetí tlačítko, ale samostatný řádek — číslo je výrazné
   a dá se na mobilu rovnou vytočit. */
.km-cta__phone {
  margin: 1.75rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--km-line);
  font-size: var(--fs-sm);
  color: var(--km-ink-3);
}
.km-cta__phone a {
  display: inline-block;
  margin-left: 0.35rem;
  font-family: var(--km-head);
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: var(--tracking-head);
  color: var(--km-ink);
  text-decoration: none;
  white-space: nowrap;
}
.km-cta__phone a:hover { color: var(--km-accent); }

@media (max-width: 767.98px) {
  .km-cta .btn { flex: 1 1 100%; }
  .km-cta__media { order: -1; }
  .km-cta__phone a { display: block; margin: 0.25rem 0 0; }
}

/* --- Poznámky ------------------------------------------------------------ */
.km-notes { padding-block: 2.5rem 4rem; border-top: 1px solid var(--km-line); }
.km-notes__list {
  max-width: 64rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--km-ink-3);
}
.km-notes__list li + li { margin-top: 0.5rem; }
.km-notes__list b { display: inline-block; min-width: 1.25rem; font-weight: 600; color: var(--km-ink-2); }


/* =============================================================================
   ODHALOVÁNÍ PŘI SCROLLU — jen když běží JS (.km-js na <html>)
   ========================================================================== */
.km-js .km-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s var(--km-ease), transform 1.1s var(--km-ease);
  transition-delay: var(--km-delay, 0ms);
}
.km-js .km-reveal.is-in { opacity: 1; transform: none; }

.km-js .km-wipe img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.06);
  transition: clip-path 1.4s var(--km-ease), transform 2.2s var(--km-ease);
  transition-delay: var(--km-delay, 0ms);
}
.km-js .km-wipe.is-in img { clip-path: inset(0 0 0 0); transform: none; }

/* Schody v detailech nesmí přepsat odhalení */
@media (min-width: 992px) {
  .km-js .km-detail.km-reveal { transform: translateY(28px); }
  .km-js .km-detail.km-reveal.is-in { transform: none; }
}

.km-parallax img { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .km-page *,
  .km-page *::before,
  .km-page *::after {
    animation: none !important;
    transition: none !important;
  }
  .km-js .km-reveal,
  .km-js .km-wipe img { opacity: 1; transform: none; clip-path: none; }
  .km-js .km-manifest__text .km-w { --km-o: 1; }
}

.km-stock { padding-top: clamp(4rem, 3rem + 3vw, 6rem) !important; border-top: 1px solid var(--line, #E5E7EB); }


/* =============================================================================
   KIA — co je jinak než na bofb.cz
   ========================================================================== */

/* Eyebrow s krátkou linkou — jako popisky sekcí na kia.com */
.km-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--km-ink-3);
}
.km-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
}

/* --- Tmavý úvod ----------------------------------------------------------
   Drobečková navigace i úvod leží na Midnight Black. Tlačítka jsou bílá
   (.btn-light) a skleněná (.btn-glass) — tmavé tlačítko by na tmě zmizelo. */
/* Odsazení zůstává jako na zbytku webu, jen linka pod navigací je na tmě
   jemná — bílá by tvrdě řízla úvod a lepila se na text. */
.km-page .km-breadcrumb.km-dark { border-bottom-color: rgba(255, 255, 255, 0.1); }
.km-dark .breadcrumb-item a { color: rgba(255, 255, 255, 0.6); }
.km-dark .breadcrumb-item a:hover { color: #fff; }
.km-dark .breadcrumb-item.active { color: #fff; }
.km-dark .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, 0.35); }

.km-hero.km-dark { padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.km-hero__line--accent { color: rgba(255, 255, 255, 0.42); }
.km-page:not(.km-dark) .km-hero:not(.km-dark) .km-hero__line--accent { color: var(--km-ink-3); }
.km-dark .km-hero__frame { background: #0D2231; }

/* --- Tmavé sekce s kartami a fotkami ------------------------------------- */
.km-dark .km-card__index { color: rgba(255, 255, 255, 0.55); }
.km-section.km-dark + .km-section:not(.km-dark) { border-top: 0; }

/* --- Výbavy -------------------------------------------------------------- */
.km-trims__grid {
  display: grid;
  gap: var(--km-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px)  { .km-trims__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px)  { .km-trims__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .km-trims__grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Čtyři výbavy (Stonic): dvě a dvě, od 1200 px všechny vedle sebe —
   ve třech sloupcích by čtvrtá zůstala sama */
@media (min-width: 992px) and (max-width: 1199.98px) { .km-trims__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .km-trims__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.km-trim {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius);
}
.km-trim--top { background: var(--km-midnight); border-color: var(--km-midnight); }
.km-trim--top .km-trim__name,
.km-trim--top .km-trim__list li { color: #fff; }
.km-trim--top .km-trim__step,
.km-trim--top .km-trim__list li::before { color: rgba(255, 255, 255, 0.6); }

.km-trim__step {
  margin: 0 0 0.35rem;
  font-size: var(--fs-2xs);
  font-weight: 650;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--km-ink-3);
}
.km-trim__name {
  margin: 0 0 1rem;
  font-family: var(--km-head);
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: var(--tracking-head);
  color: var(--km-ink);
}
.km-trim__list { margin: 0; padding: 0; list-style: none; }
.km-trim__list li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.1rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--km-ink-2);
  border-top: 1px solid var(--km-line);
}
.km-trim__list li::before {
  content: "+";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--km-ink-3);
}
.km-trim--top .km-trim__list li { border-color: rgba(255, 255, 255, 0.14); }

/* --- Výzva na tmavém panelu ---------------------------------------------- */
.km-cta__box.km-dark { background: var(--km-midnight); }
.km-cta__box.km-dark .km-cta__phone a:hover { color: rgba(255, 255, 255, 0.75); }