/* Компактный режим карточки модели и шапки. Подключается только на index-v3.html
   поверх models-v2.css — v2 остаётся нетронутой для сравнения.

   Задача: на ноутбуке карточка целиком помещается под липкой шапкой. Правки
   привязаны к ВЫСОТЕ окна, а не к ширине: на мониторе 1920×1280 не срабатывает
   ни одно правило, страница пиксель-в-пиксель равна v2. Ниже 1181px карточка
   и так разворачивается в одну колонку — туда компактный режим не заходит.

   Высоту карточки задаёт правая колонка (по содержимому 614px), левая
   растягивается под неё. Поэтому режутся обе: лестница — чтобы карточка стала
   ниже, сцена с машиной — чтобы левая колонка не стала новым ограничителем. */

@media (min-width: 1181px) and (max-height: 900px) {

  /* ---------- шапка ---------- */

  :root { --header-h: 45px; }

  .header__row { min-height: 58px; gap: 22px; }
  .header__logo { height: 26px; }
  .header__mark { height: 30px; }
  .header__phone { font-size: 19px; }
  .header__cta { min-height: 42px; }
  .header__nav-row { min-height: 44px; }
  .nav-link { padding: 9px 18px; }
  .nav-link::after { left: 18px; right: 18px; bottom: 6px; }

  /* ---------- витрина моделей ---------- */

  .section { padding: 64px 0; }
  .picker { margin-top: 32px; gap: 14px; }
  .picker__item { padding: 14px 18px 12px; }
  .picker__img { height: 96px; }
  .picker__fuel { margin: auto -18px 0; padding: 8px 18px 0; }

  /* Колонки остаются в пропорции обычной версии — левая шире правой.
     Высоту вместо этого отдаёт сцена: её предельная ширина считается от высоты
     окна, поэтому машина уменьшается плавно, без ступенек, а кадр сохраняет
     пропорцию 1.6 и не режется по крыше. */
  .mv2__stage { max-width: min(100%, calc((100svh - 305px) * 1.6)); margin-inline: auto; }

  .mv2__head { padding: 12px 30px; }
  .mv2__title { font-size: clamp(24px, 2.1vw, 32px); }
  .mv2__tagline { margin-top: 5px; font-size: 14px; }
  .mv2__stock { padding: 9px 16px; }

  .mv2__media { padding-bottom: 14px; }
  .mv2__palette { margin-top: 10px; gap: 14px; }
  .mv2__color { width: 34px; height: 34px; }
  .mv2__shots { margin-top: 10px; }
  .mv2__thumbs { margin-top: 8px; gap: 8px; }

  .mv2__offer { padding: 14px 30px; gap: 12px; }
  .mv2__trim { padding: 8px 0 8px 14px; }
  .mv2__trim-price { font-size: 18px; }
  .mv2__specs li { padding: 9px 10px; }
  .mv2__specs b { font-size: 19px; }
  .mv2__benefit { padding: 10px 16px; }
  .mv2__benefit b { font-size: 23px; }
  .mv2__cta .btn { min-height: 48px; }
}

/* Вторая ступень — ноутбуки 1366×768 и окна с открытой консолью. */
@media (min-width: 1181px) and (max-height: 780px) {

  :root { --header-h: 41px; }
  .header__row { min-height: 54px; }
  .header__nav-row { min-height: 40px; }
  .nav-link { padding: 8px 16px; }

  .section { padding: 52px 0; }
  .picker__img { height: 84px; }

  .mv2__head { padding: 9px 30px; }

  /* Ряд со склада ужимаем шириной, а не высотой: кадры сняты 3:2, и правка
     одной высоты заставляла object-fit: cover срезать автомобилю крышу
     и колёса. Пропорция остаётся, ряд просто становится уже. */
  .mv2__thumbs { max-width: 520px; }

  .mv2__offer { gap: 10px; }
  .mv2__trim { padding: 6px 0 6px 14px; }
}

/* Третья ступень — 1366×768 в развёрнутом окне (полезная высота ~648px).
   Здесь ограничитель уже левая колонка: подпись цвета переносится на вторую
   строку, и вместе с превью со склада она перевешивает лестницу. Сцену ужимаем
   ещё на 10% — это цена за то, чтобы фото со склада остались в карточке. */
@media (min-width: 1181px) and (max-height: 700px) {

  .section { padding: 44px 0; }
  .mv2 { padding-top: 8px; }

  .mv2__palette { margin-top: 8px; gap: 10px; }
  .mv2__color { width: 30px; height: 30px; }
  .mv2__color-name { font-size: 11px; letter-spacing: .08em; gap: 6px 10px; }
  .mv2__color-name span { padding: 3px 8px; }
  .mv2__media { padding-bottom: 10px; }
  .mv2__shots { margin-top: 8px; }
  .mv2__thumbs { margin-top: 6px; max-width: 440px; }
}

/* Галерея со склада на телефоне — две плитки в один ряд вместо четырёх в два.
   Остаются первый кадр и последний со счётчиком остальных фото. */
@media (max-width: 820px) {
  .mv2__thumbs .thumb:nth-child(2),
  .mv2__thumbs .thumb:nth-child(3) { display: none; }
}