/*
  Карточка модели оборудования (443:3406, 335×488), разметка —
  components/model-card.njk.

  Вертикаль карточки в макете (от верха карточки y=1955):
    30 паддинг → название 24/32 → 10 → подзаголовок 2×22 → 10 →
    «Подходит для:» 23 → 6 → плашки 26+5+26 → фото 220 → кнопка 65 →
    30 паддинг. В сумме ровно 488, поэтому min-height, а не height:
    длинное название из админки обязано увеличить карточку, а не
    обрезаться.
*/
.model-card {
  display: flex;
  flex-direction: column;
  min-height: var(--model-card-height);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  /* Фото идёт враспор по ширине карточки — обрезаем его по скруглению
     углов (на случай, если контента над фото станет меньше и оно
     поднимется к верхнему краю). */
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  /* Постоянный композиторский слой. Без него браузер поднимает карточку в
     отдельный слой на время анимации трансформы и сносит его по
     transitionend — содержимое перерастеризовывается уже в слое страницы,
     с другим округлением, и текст с кнопкой дёргались на 1px ровно в
     момент окончания подъёма (одновременная анимация box-shadow гарантирует,
     что слой не считается непрозрачным). Пишется в базовое правило, не в
     :hover: слой и так создаётся на старте анимации, а сносится не тогда. */
  will-change: transform;
}

/* Ховера у карточки в макете нет — отклик собран из уже принятых на
   проекте: подъём карточки (как .product-card) и реакция пилюли
   (см. ниже). Цвет текста не трогаем. */
.model-card:hover {
  box-shadow: 0 20px 45px rgba(15, 15, 20, 0.1);
  transform: translateY(-2px);
}

.model-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--model-card-pad);
  color: inherit;
}

/* Фото и кнопка прижаты к низу карточки, текст — к верху: весь избыток
   высоты (карточки в ряду тянутся по самой высокой) достаётся зазору
   НАД фото, а не зазору под кнопкой. margin-top:auto у .model-card__media.
   А это поле — наезд фото на 19px под последний ряд плашек: у фото
   верхние 55px (25% от 220 — см. ::after ниже, стоп удлинён с 11,57%
   ради фотографий партии 17) — фейд в белый фон карточки, и в макете
   фото заходит в эту зону (фото y=2148 при нижней границе плашек 2167).
   Величина постоянная, от длины текста не зависит. */
.model-card__body {
  /* position+z-index обязательны: фото ниже спозиционировано (ради
     ::after с фейдом) и без них накрывало бы собой последний ряд плашек,
     на который оно наезжает. В макете фото лежит ПОД текстом — видна
     его фейд-зона, а не плашки под фотографией. */
  position: relative;
  z-index: 1;
  margin-bottom: -19px;
}

/* Плашка скорости прижата к правому краю и стоит по центру ПЕРВОЙ строки
   названия (align-items:flex-start + поле 3px = (32-26)/2), а не по
   центру всего заголовка: название в две строки не должно утаскивать
   плашку вниз. */
.model-card__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.model-card__title {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
  overflow-wrap: break-word;
}

/* white-space:normal (а не nowrap): длинное значение из админки должно
   переноситься внутри плашки, увеличивая её высоту, а не вылезать за
   край карточки. Отсюда же min-height вместо height.

   Вертикальный паддинг 6px обязателен, хотя на однострочной плашке он не
   меняет ничего: 14 строка + 6 + 6 = 26 = min-height. Без него видимые
   6px сверху и снизу — не паддинг, а разница (26 - 14)/2, поделённая
   align-items:center; на двух строках контент (28px) перерастает
   min-height, коробка растёт строго по тексту, делить нечего — и отступы
   обнулялись, текст упирался в обводку.

   Радиус — 13px, а не полный pill, по той же причине, что у
   .tag-pill--model (tag-pill.css): 999px браузер зажимает до половины
   фактической высоты — у однострочной это ровно 13 (задуманный вид), у
   двухстрочной уже 20, и горизонтальный паддинг 12px, посчитанный под 13,
   перестаёт держать текст внутри дуги. */
.model-card__speed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  margin: 3px 0 0 auto;
  padding: 6px 12px;
  border-radius: 13px;
  background: var(--color-accent);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  line-height: 14px;
  color: var(--color-surface);
  text-align: center;
}

.model-card__subtitle {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 22px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
  overflow-wrap: break-word;
}

.model-card__fit {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 23px;
  font-weight: var(--fw-medium);
  color: var(--color-model-card-label);
}

.model-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

/*
  Фото — во всю ширину карточки, без боковых полей: отрицательные поля
  снимают паддинг 30 с обеих сторон. Пропорция 335/220 вместо жёсткой
  высоты — карточка на узком экране сжимается, фото обязано сжиматься
  вместе с ней (числа в aspect-ratio безразмерные, токены в них не
  подставить). Само изображение — object-fit:cover: редактор загрузит
  снимок любых пропорций, кадр от этого не поедет.
*/
.model-card__media {
  position: relative;
  margin: auto calc(-1 * var(--model-card-pad)) 0;
  aspect-ratio: 335 / 220;
}

.model-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Фейд фото в фон карточки сверху и снизу (в макете — две градиентные
   заливки поверх снимка). Нижний нужен не для красоты: на него садится
   кнопка, и без фейда она стояла бы на резаном крае фотографии. */
.model-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, var(--color-surface) 0.85%, transparent 25%),
    linear-gradient(to top, var(--color-surface) 0.72%, transparent 30%);
}

/* Кнопка наезжает на нижний край фото на 20px. position+z-index
   обязательны: .model-card__media спозиционирован (ради ::after) и без
   них перекрывал бы кнопку собой. */
.model-card .btn--card {
  position: relative;
  z-index: 1;
  margin-top: -20px;
}

/* Реакция пилюли — на наведение НА ВСЮ карточку, а не только на саму
   пилюлю: карточка целиком является ссылкой. Значения те же, что у
   карточки каталога: обводка темнеет, эллипс со стрелкой растёт на 15%
   и доворачивается на 45° вправо, за 0,35 с. */
.model-card__link:hover .btn--card {
  border-color: var(--color-slider-pill-border-hover);
}

.model-card__link:hover .btn--card .btn__icon {
  transform: scale(1.15) rotate(45deg);
}

/*
  Мобильного макета карточки нет вовсе (в файле три фрейма, все 1440).
  Поэтому НИ ОДНОГО нового числа ниже нет: все значения — те же, что в
  ПК-макете, к ним добавлена только вторая ветка формулы проекта
  min(Npx, calc(N/390*100vw)). На 390px карточка выглядит ровно так же,
  как до этой правки (min() выбирает фиксированное значение), ПК-ширины
  медиазапрос не касается вовсе.

  ЗАЧЕМ ЭТО ПОНАДОБИЛОСЬ. Раньше формулу получала только ширина самой
  карточки (width:100%), а её внутренности держали ПК-числа. Ниже 390px
  карточка сжималась, а паддинг 30, кегль названия 24 и плашка скорости —
  нет, и содержимое перерастало контейнер. Замеры на стресс-контенте
  («СЕРВОПРИВОДНАЯ КАРТОНАЖНАЯ МАШИНА JDZ-600A» — такой длины названия
  редактор впишет заведомо): на 360px название занимало 240.8 из 244.6
  доступных, то есть проходило с запасом 3.8px, а на 320px плашку
  скорости выдавливало из карточки целиком (вылет 67.2px, срез
  overflow:hidden карточки). Один делитель 390 на все величины — и
  карточка сжимается целиком, сохраняя пропорции макета.
*/
@media (max-width: 599.98px) {
  /*
    Токены переопределяются на самой карточке, а не по месту
    использования: паддинг участвует ещё и в отрицательных полях фото
    (.model-card__media), и два независимых объявления разъехались бы
    между собой.
  */
  .model-card {
    width: 100%;
    --model-card-pad: min(30px, calc(30 / 390 * 100vw));
    --model-card-height: min(488px, calc(488 / 390 * 100vw));
  }

  /*
    Ряд «название + плашка скорости» — та же неразрывность, что была у
    шапки блока «Модели оборудования» (см. product-models.css): min-content
    ряда складывается из самого длинного слова названия, зазора и плашки,
    ниже этой суммы флекс-строка не сжимается, и лишнее выдавливало плашку
    за край карточки. Перенос разрешён: при коротком названии плашка
    стоит справа от него, как в макете, при длинном — уходит на свою
    строку, по-прежнему прижатая вправо (margin-left:auto в базовом
    правиле). Обрезки не остаётся ни при какой длине названия.
  */
  .model-card__head {
    flex-wrap: wrap;
    gap: min(10px, calc(10 / 390 * 100vw));
  }

  .model-card__title {
    font-size: min(24px, calc(24 / 390 * 100vw));
    line-height: min(32px, calc(32 / 390 * 100vw));
  }

  .model-card__speed {
    min-height: min(26px, calc(26 / 390 * 100vw));
    margin-top: min(3px, calc(3 / 390 * 100vw));
    padding: min(6px, calc(6 / 390 * 100vw)) min(12px, calc(12 / 390 * 100vw));
    border-radius: min(13px, calc(13 / 390 * 100vw));
    font-size: min(10px, calc(10 / 390 * 100vw));
    line-height: min(14px, calc(14 / 390 * 100vw));
  }

  .model-card__subtitle {
    margin-top: min(10px, calc(10 / 390 * 100vw));
    font-size: min(14px, calc(14 / 390 * 100vw));
    line-height: min(22px, calc(22 / 390 * 100vw));
  }

  .model-card__fit {
    margin-top: min(10px, calc(10 / 390 * 100vw));
    font-size: min(12px, calc(12 / 390 * 100vw));
    line-height: min(23px, calc(23 / 390 * 100vw));
  }

  .model-card__tags {
    gap: min(5px, calc(5 / 390 * 100vw));
    margin-top: min(6px, calc(6 / 390 * 100vw));
  }

  /* Наезды фото и кнопки — величины ОТРИЦАТЕЛЬНЫЕ, поэтому max(), а не
     min(): иначе ниже 390px наезд не сжимался бы вместе с карточкой, а
     наоборот рос (грабли проекта, зафиксированы в mobile-product-prompt.md). */
  .model-card__body {
    margin-bottom: max(-19px, calc(-19 / 390 * 100vw));
  }

  .model-card .btn--card {
    margin-top: max(-20px, calc(-20 / 390 * 100vw));
  }
}