/* Карточка модели, вариант 2: витрина-конфигуратор.
   Подключается поверх style.css на index-v2.html. */

.mv2 { padding-top: 18px; }

.mv2__box {
  background: var(--steel);
  border: 1px solid var(--edge-soft);
}

/* ---------- шапка карточки ---------- */

.mv2__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 18px 30px;
  border-bottom: 1px solid var(--edge-soft);
}

.mv2__title {
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}
.mv2__tagline { margin-top: 8px; color: var(--ash); font-size: 15px; }

.mv2__stock {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border: 1px solid var(--edge);
  background: var(--void);
  color: var(--bone);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .18s, color .18s;
}
.mv2__stock:hover { border-color: var(--amber); }
.mv2__stock b { color: var(--amber); font-weight: 500; white-space: nowrap; }
.mv2__stock .icon { width: 17px; height: 17px; color: var(--amber); }

.mv2__stock--empty { cursor: default; color: var(--ash); }
.mv2__stock--empty:hover { border-color: var(--edge); }

/* ---------- сетка ---------- */

.mv2__grid {
  display: grid;
  grid-template-columns: 1.06fr 1fr;
}
.mv2__media { padding: 0 0 22px 30px; }
.mv2__offer {
  padding: 22px 30px;
  border-left: 1px solid var(--edge-soft);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---------- рендер и цвета ---------- */

/* Подложки нет: кузов стоит прямо на фоне карточки, отдельной плиты вокруг него
   не рисуем. Единственное, что осталось от павильона, — тень по линии колёс
   (BASELINE = 0.92, см. build_colors.py), чтобы машина не висела в воздухе.
   Кадр рендера остаётся 3:2, но окно уже (1.6): cover с привязкой к низу срезает
   пустую полосу над крышей, не уменьшая сам кузов. Проценты тени и знака пересчитаны
   под этот срез — при смене aspect-ratio их надо пересчитать заново (коэффициент 1.6/1.5). */
.mv2__stage {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1.6;
  overflow: hidden;
}
.mv2__stage::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 6%;
  height: 5.1%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 72%);
}
.mv2__stage img[data-stage] {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  animation: paint .45s ease;
}
@keyframes paint { from { opacity: 0; transform: translateY(6px); } }

/* Знак модели («300», «400») — официальная эмблема бренда из assets/img/marks,
   не текст: у TANK каждая модель нарисована своим начертанием, шрифтом его не набрать.
   Стоит за кузовом, крыша перекрывает нижнюю треть — как на сайтах импортёра.
   Размер задаётся высотой, а не шириной: у TANK кадр общий (325×66), а у WEY 80 свой
   — 273×118, и по общей ширине цифры «80» вышли бы в полтора раза выше. 11.8cqw —
   высота в долях кадра, поэтому знак держит размер на любой ширине окна. */
.mv2__mark {
  position: absolute;
  left: 50%;
  top: 14.7%;
  translate: -50% -50%;
  height: 11.8cqw;
  width: auto;
  opacity: .27;
  user-select: none;
}

/* Запасной вариант для модели без поля mark: цифра шрифтом TT Tank на том же месте.
   Кегль подобран так, чтобы высота цифр совпала с высотой знаков. До 18.08.2026 так
   выводился WEY 80 — теперь у него есть свой знак. */
.mv2__index {
  position: absolute;
  left: 0;
  right: 0;
  top: 14.7%;
  translate: 0 -50%;
  text-align: center;
  font-size: 5.05vw;
  font-size: 15.9cqw;
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.04em;
  color: rgba(236, 238, 238, .27);
  user-select: none;
}

.mv2__palette {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.mv2__colors { display: flex; gap: 10px; }
.mv2__color {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: 50%;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
}
.mv2__color:hover { transform: scale(1.09); }
.mv2__color.is-active { box-shadow: 0 0 0 2px var(--steel), 0 0 0 4px var(--amber); }

.mv2__color-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.mv2__color-name b { color: var(--bone); font-weight: 500; }
.mv2__color-name span {
  flex: none;
  white-space: nowrap;
  padding: 4px 10px;
  border: 1px solid var(--edge);
  color: var(--ash);
}
.mv2__color-name span.is-here { border-color: rgba(255, 149, 73, .5); color: var(--amber); }

/* ---------- фото со склада ---------- */

.mv2__shots { margin-top: 16px; }
.mv2__shots-label {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ash-dim);
}
.mv2__thumbs {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.mv2__thumbs:empty { display: none; }
.mv2__thumbs .thumb { aspect-ratio: 3 / 2; }

/* ---------- лестница комплектаций ---------- */

.mv2__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ash-dim);
}
.mv2__label::before {
  content: "";
  width: 23px;
  height: 12px;
  flex: none;
  color: var(--amber);
  background: var(--grille);
}

.mv2__trims { display: grid; border-top: 1px solid var(--edge-soft); }

.mv2__trim {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--edge-soft);
  background: none;
  color: var(--ash);
  text-align: left;
  cursor: pointer;
  transition: color .18s, background-color .18s;
}
.mv2__trim::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--amber);
  transform: scaleY(0);
  transition: transform .2s;
}
.mv2__trim:hover { color: var(--bone); background: rgba(255, 255, 255, .02); }
.mv2__trim.is-active { color: var(--bone); }
.mv2__trim.is-active::before { transform: scaleY(1); }

.mv2__trim-name { font-size: 15px; }

/* Метка топлива у ступени. Её получает только гибрид: бензин — это то, что и так
   ожидают от рамного внедорожника, подписывать его нечем. */
.mv2__fuel {
  margin-right: auto;
  padding: 2px 7px;
  border: 1px solid var(--edge);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ash-dim);
  transition: color .18s, border-color .18s;
}
.mv2__fuel.is-hybrid { border-color: rgba(255, 149, 73, .4); color: var(--amber); }
.mv2__trim.is-active .mv2__fuel.is-hybrid { border-color: rgba(255, 149, 73, .55); color: var(--amber); }
.mv2__trim-price {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.mv2__trim.is-active .mv2__trim-price { color: var(--amber); font-weight: 700; }

/* Панель выбранной комплектации: сноска, плитки характеристик и выгода.
   display: contents — содержимое остаётся прямыми детьми колонки, поэтому
   раскладка та же, что была до появления панелей. */
.mv2__panel { display: contents; }

.mv2__fine {
  margin-top: -12px;
  font-size: 12px;
  color: var(--ash-dim);
}

/* ---------- характеристики ---------- */

.mv2__specs {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--edge-soft);
  border: 1px solid var(--edge-soft);
}
.mv2__specs li {
  padding: 12px 12px;
  background: var(--steel);
  display: grid;
  gap: 4px;
}
.mv2__specs b {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.mv2__specs i {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: var(--ash);
  margin-left: 3px;
}
.mv2__specs span {
  font-size: 11px;
  line-height: 1.3;
  color: var(--ash-dim);
}

/* ---------- выгода ---------- */

.mv2__benefit {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 149, 73, .38);
  background: rgba(255, 149, 73, .09);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone);
}
.mv2__benefit b {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--amber);
  white-space: nowrap;
}

/* ---------- кнопки ---------- */

.mv2__cta { margin-top: auto; display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
.mv2__cta .btn { padding: 0 18px; font-size: 12px; }

/* ---------- адаптив ---------- */

@media (max-width: 1180px) {
  .mv2__grid { grid-template-columns: 1fr; }
  .mv2__media { padding: 0 24px 0; }
  .mv2__offer { padding: 22px 24px; border-left: 0; border-top: 1px solid var(--edge-soft); }
  .mv2__head { padding: 22px 24px; }
}

@media (max-width: 820px) {
  .mv2 { padding-top: 18px; }
  .mv2__head { padding: 22px 18px; align-items: flex-start; }
  .mv2__stock { width: 100%; justify-content: flex-start; flex-wrap: wrap; row-gap: 4px; }
  .mv2__stock .icon { margin-left: auto; }
  .mv2__media { padding: 0 18px 0; }
  .mv2__offer { padding: 22px 18px; gap: 18px; }
  .mv2__palette { margin-top: 14px; gap: 12px; }
  .mv2__color { width: 36px; height: 36px; }
  .mv2__color-name { font-size: 11px; letter-spacing: .06em; gap: 6px 10px; }
  .mv2__color-name span { padding: 3px 8px; }
  .mv2__thumbs { grid-template-columns: repeat(2, 1fr); }
  .mv2__specs { grid-template-columns: repeat(2, 1fr); }
  .mv2__trim { padding: 13px 0 13px 14px; }
  .mv2__trim-price { font-size: 17px; }
  .mv2__benefit b { font-size: 23px; }
  .mv2__cta { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mv2__stage img[data-stage] { animation: none; }
}