/* ==========================================================================
   Short screens: small laptops, and any laptop at 125% or 150% zoom (user, 1 Nov 2026).
   Zoom makes the browser report a narrower window (about 900 to 1200px wide), which used to switch the site to
   its stacked tablet layouts: photo on top, words below, every section twice as tall as the screen. On a short
   landscape window the side-by-side desktop layouts are kept instead, and photographs are sized to the window
   height, so each section can be taken in at once. Loaded last, on every page.
   ========================================================================== */
@media (min-width: 860px) and (max-height: 820px) and (orientation: landscape) {
  :root { --fit-h: calc(100svh - var(--nav-h, 72px) - 48px); }

  /* ---------- Homepage ---------- */
  /* Why choose: list beside the photograph */
  .kia__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) !important; gap: clamp(28px, 3.4vw, 64px) !important; align-items: center !important; }
  .kia__media { order: 0 !important; display: block !important; align-self: center !important; width: 100%; max-width: none !important; min-height: 0 !important; aspect-ratio: 16 / 10 !important; max-height: var(--fit-h); }
  .kia__list { margin-top: clamp(14px, 2.4vh, 30px); }
  .reason { padding-top: clamp(8px, 1.6vh, 16px); padding-bottom: clamp(8px, 1.6vh, 16px); }

  /* Find your Kia: the car beside its description */
  .finder__result { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) !important; max-width: none; }
  .finder__img { aspect-ratio: auto !important; height: 100%; max-height: calc(var(--fit-h) - 120px); }

  /* Model spotlight: the words over the photograph, as on a desktop */
  .spot__media { grid-area: 1 / 1 !important; z-index: -1 !important; aspect-ratio: auto !important; min-height: min(var(--fit-h), 600px) !important; }
  .spot__media.pan img + img { display: block; }
  .spot__media::after { background: linear-gradient(90deg, rgba(8, 9, 10, .78) 0%, rgba(8, 9, 10, .5) 34%, rgba(8, 9, 10, 0) 62%) !important; }
  .spot__panel { grid-area: 1 / 1 !important; align-self: center; padding: clamp(24px, 4vh, 48px) var(--pad) !important; }
  .spot__panel > *, .spot__panel .highlights { max-width: min(520px, 46vw) !important; }
  .spot__panel .h2 { white-space: nowrap; }
  .highlights { margin-top: clamp(14px, 2.6vh, 28px); }

  /* Finance and insurance: tighter boxes */
  #finance .fin__topics .fin__topic { padding: clamp(16px, 2.6vh, 28px) clamp(18px, 2vw, 28px) !important; }
  #finance .fin__body h3 { margin-top: 10px; }
  #finance .fin__topic ul { margin-top: 8px; gap: 6px; }
  #finance .fin__topic li { font-size: .92rem; line-height: 1.45; }
  #finance .fin__acts { padding-top: 14px; }

  /* Showrooms and reviews: photographs a share of the window */
  .rooms__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .room__img { width: 100% !important; aspect-ratio: auto !important; height: clamp(150px, 33svh, 290px); max-height: none; }
  .room__actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 8px; margin-top: 14px; }
  .room__actions .btn { min-height: 44px; padding: 0 10px; }

  /* ---------- Car pages ---------- */
  /* 360 view: the car and the detail panel side by side */
  .viewer.is-fit { display: grid !important; grid-template-columns: minmax(0, 2.4fr) minmax(250px, 1fr) !important; column-gap: clamp(16px, 2vw, 28px); }
  .viewer.is-fit .viewer__stage { height: min(calc(100svh - var(--nav-h, 72px) - 150px), 46cqw) !important; margin: 0 !important; }
  .viewer.is-fit .spots { margin-top: 0; }
  .viewer .dtl__img { aspect-ratio: 16 / 10; }
  .viewer .dtl__text { font-size: .9rem; }

  /* What it costs: the car beside the figures */
  .cost__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important; gap: clamp(24px, 3vw, 56px) !important; }
  .cost__car { grid-column: auto !important; }
  .cost__car figure { max-height: calc(var(--fit-h) - 140px); }

  /* Up close: the film with its card over it and the stops in one row */
  .tour__screen { max-height: calc(100svh - var(--nav-h, 72px) - 190px) !important; margin: 0 !important; width: 100% !important; border-radius: var(--r-lg) !important; }
  .tour__list { display: grid !important; grid-template-columns: repeat(9, minmax(0, 1fr)) !important; overflow: visible !important; margin: 12px 0 0 !important; padding: 0 !important; }
  .tour__card { position: absolute !important; top: 14px; right: 14px; width: min(270px, 34%) !important; margin: 0 !important; padding: 14px 16px !important; min-height: 0 !important; }

  /* Right fit, and after you enquire: words beside the photograph */
  .fit__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) !important; gap: clamp(24px, 3vw, 56px) !important; }
  .fit__photo { aspect-ratio: auto !important; min-height: 0 !important; max-height: var(--fit-h); }
  .whyus__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important; gap: clamp(24px, 3vw, 56px) !important; }
  .whyus--flip .whyus__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important; }
  .whyus--flip .whyus__photo { order: 0 !important; }
  .whyus__photo { aspect-ratio: auto !important; min-height: 0 !important; max-height: var(--fit-h); margin: 0 !important; border-radius: var(--r-lg) !important; }
  .step { padding-top: clamp(8px, 1.6vh, 16px); padding-bottom: clamp(8px, 1.6vh, 16px); }

  /* Customers: the photo strip a share of the window */
  .reel__track li { width: clamp(200px, calc((100svh - var(--nav-h, 72px) - 230px) * 4 / 3), 520px) !important; }

  /* ---------- Inner pages ---------- */
  .split__photo { max-height: var(--fit-h); overflow: hidden; }
  .split__photo img { height: 100%; object-fit: cover; }
  .visit__map { min-height: 0 !important; max-height: calc(var(--fit-h) - 40px); }
  .cards { gap: clamp(12px, 1.6vw, 20px); }
  .card { padding: clamp(16px, 2.6vh, 28px) clamp(16px, 1.8vw, 24px); }
}

/* Why choose, on short laptop screens (user: cluttered): smaller type, more room between the four reasons */
@media (min-width: 860px) and (max-height: 820px) and (orientation: landscape) {
  #why-kia .reason { padding-top: clamp(12px, 2.2vh, 20px) !important; padding-bottom: clamp(12px, 2.2vh, 20px) !important; row-gap: 4px; }
  #why-kia .reason b { font-size: clamp(1.02rem, 2.6vh, 1.25rem) !important; }
  #why-kia .reason i { font-size: clamp(.9rem, 2.2vh, 1.1rem) !important; }
  #why-kia .reason span { font-size: clamp(.86rem, 2vh, .95rem) !important; line-height: 1.5; }
  #why-kia .kia__list { margin-top: clamp(16px, 3vh, 32px); }
}
@media (min-width: 860px) and (max-height: 820px) and (orientation: landscape) {
  /* 360 view: swatches and detail numbers compact, so the whole viewer sits inside the window */
  .viewer .paint__list { gap: clamp(4px, 1vh, 10px) !important; padding-top: 6px !important; padding-bottom: 6px !important; }
  .viewer .paint__dot { width: clamp(20px, 4.4vh, 30px) !important; height: clamp(20px, 4.4vh, 30px) !important; }
  .viewer .drail { gap: 6px; }
  .viewer .drail__card { width: 32px; height: 32px; font-size: .82rem; }
  .viewer .dnav { padding-top: 10px; gap: 10px; }
  .viewer .dnav__step .round { width: 34px; height: 34px; }
  .viewer .dtl__img { aspect-ratio: 16 / 7 !important; }
  .viewer .spots { gap: 8px; }
  .explore__head + .viewer, #viewer { margin-top: clamp(14px, 2.6vh, 28px); }
}
@media (min-width: 860px) and (max-height: 820px) and (orientation: landscape) {
  .viewer .paint__list { max-height: none !important; overflow: visible !important; }
  .viewer .paint__dot { width: clamp(18px, 3.8vh, 30px) !important; height: clamp(18px, 3.8vh, 30px) !important; }
  .viewer .dnav__step { display: none; }
  .viewer .drail { flex-wrap: nowrap; gap: 5px; }
  .viewer .drail__card { width: 30px; height: 30px; }
}
@media (min-width: 860px) and (max-height: 820px) and (orientation: landscape) {
  /* Why choose: clear room between the subline and the first reason */
  #why-kia .kia__list { margin-top: clamp(32px, 6.4vh, 48px) !important; }
}
@media (min-width: 860px) and (max-height: 820px) and (orientation: landscape) {
  /* Right fit: the photograph keeps a real height (its picture is laid over it), sized to the window */
  .fit__photo { aspect-ratio: auto !important; height: clamp(260px, calc(100svh - var(--nav-h, 72px) - 120px), 560px) !important; max-height: none !important; align-self: center; }
  .whyus__photo { height: clamp(260px, calc(100svh - var(--nav-h, 72px) - 100px), 600px); max-height: none !important; }
}
@media (min-width: 860px) and (max-height: 820px) and (orientation: landscape) {
  .whyus--flip .whyus__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important; }
}
@media (min-width: 860px) and (max-height: 820px) and (orientation: landscape) {
  #finance .fin__topic ul { margin-top: 14px; gap: 12px; }
  #finance .fin__topic li { line-height: 1.5; }
  #finance .fin__acts { padding-top: 22px; }
}

/* Right fit (client, 2 Nov 2026): the words stack with even spacing and the photograph matches their height,
   on every desktop and laptop window (loaded last, so it settles the earlier fit rules) */
@media (min-width: 860px) {
  .fit .fit__grid { align-items: stretch !important; }
  .fit .fit__side { justify-content: flex-start !important; gap: 0 !important; }
  .fit .fit__mid { margin-top: clamp(22px, 2.4vw, 30px); }
  .fit .fit__answer { margin-top: 20px !important; }
  .fit .fit__acts { margin-top: clamp(22px, 2.4vw, 30px) !important; }
  .fit .fit__photo { height: auto !important; min-height: 300px !important; max-height: none !important; aspect-ratio: auto !important; align-self: stretch !important; }
  .fit .fit__photo::before { display: none !important; }
}

/* Why choose (05): heading and intro each on two lines across the page width (client, 2 Nov 2026) */
@media (min-width: 860px) {
  .duel .cmp__head > div { flex: 1 1 100%; }
  .duel #cmp-title { max-width: 48ch !important; text-wrap: balance; }
  .duel .cmp__lede { max-width: 132ch !important; text-wrap: balance; }
}
@media (min-width: 860px) and (max-height: 820px) and (orientation: landscape) {
  /* Page banners with a subline and two intro paragraphs: wider lines, so the buttons stay on screen */
  .phero__inner:has(.phero__lede + .phero__lede) { max-width: 1040px; }
  .phero__inner:has(.phero__lede + .phero__lede) .phero__lede { max-width: 92ch; }
}

/* 360 view detail panel (client, 2 Nov 2026, critical at 150%): the numbers and arrows always share one row,
   the numbers narrowing to fit; the close-up photograph takes only the height left, so nothing overlaps */
@media (min-width: 1100px) {
  .viewer .dnav { flex-wrap: nowrap !important; gap: 10px !important; }
  .viewer .drail { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap !important; gap: 6px !important; }
  .viewer .drail li { flex: 0 1 40px; min-width: 24px; }
  .viewer .drail__card { width: 100% !important; height: auto !important; aspect-ratio: 1; font-size: .85rem; }
  .viewer .dnav__step { display: flex !important; flex: none; }
  .viewer .dnav__step .round { width: 34px; height: 34px; }
  .viewer.is-fit .dtl__img { flex: 1 1 0 !important; min-height: 0 !important; aspect-ratio: auto !important; }
  .viewer .spots .dtl { flex: none !important; }
  .viewer .spots .dtl__from { margin-bottom: 2px; }
  .viewer .dnav { flex: none; margin-top: auto; }
}