/*
  Блок «Модели оборудования» на странице товара (443:3396..444:3607),
  разметка — partials/product-models.njk.

  РАЗДЕЛИТЕЛИ. В макете блок стоит между двумя линиями во всю ширину
  экрана: 443:3396 сверху и 443:3180 снизу. Верхнюю уже рисует блок
  описания — у .product-description есть border-bottom тем же
  --color-divider (до появления моделей она и была единственной линией
  между описанием и габаритной схемой). Поэтому свою линию блок рисует
  снизу: двух 1px-линий подряд в одном стыке быть не должно, а при
  выключенном блоке (моделей нет) линия под описанием остаётся на месте
  сама.

  ВЕРТИКАЛЬ (координаты фрейма 443:3076): линия 1783,5 → заголовок 1855
  (70 сверху) → карточки 1955 (40 от низа заголовка) → полоски 2483 (40
  от низа карточек) → следующая секция 2564 (78 снизу).
*/
.product-models {
  padding: 70px 0 78px;
  background: var(--color-solutions-bg);
  border-bottom: 1px solid var(--color-divider);
  /* Пятая карточка (слайдер ещё не подключён) или ховер-подъём у края
     не должны давать горизонтальную прокрутку странице. */
  overflow: hidden;
}

/*
  Шапка блока. В макете заголовок начинается на x=75 (левый край
  контентной колонки 1290), а пара стрелок кончается на x=1415 — это 25
  от правого края макета, то есть правее контентной колонки. Отсюда
  асимметричные паддинги: 75 слева, 25 справа, ширина — ширина макета.
*/
/*
  position+z-index обязательны, иначе стрелки мертвы. У вьюпорта трека
  ниже padding:100px 0 при margin:-100px auto (запас под тень карточек
  внутри overflow:hidden, приходит из .solutions-slider__viewport). Трек
  стоит в 40px под шапкой, шапка высотой 60 — значит верх бокса вьюпорта
  приходится ровно на верх шапки и накрывает её целиком. Вьюпорт лежит
  внутри .solutions-slider (position:relative) и идёт позже по DOM,
  поэтому он забирал себе все события указателя: elementFromPoint в
  центре обеих стрелок возвращал вьюпорт, а не кнопку, и :hover у
  .product-related__nav-btn просто не наступал. Тот же приём, что у
  .product-related__nav-btn--side (там z-index:2 над тем же вьюпортом).
*/
.product-models__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  max-width: var(--layout-width);
  margin: 0 auto 40px;
  padding: 0 25px 0 75px;
}

.product-models__title {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.product-models__heading {
  --heading-gradient-angle: 122.4deg;
  margin: 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  overflow-wrap: break-word;
}

/*
  Счётчик «N шт.» (444:3606) — 92×60. min-width, а не width: при десятке
  моделей число становится двузначным, плашка обязана вырасти. Цифра и
  единица стоят на общей базовой линии (в макете у них разные кегли и
  разные верхние координаты — 1868 против 1876 — при совпадающей базовой).
*/
.product-models__counter {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 92px;
  min-height: 60px;
  margin: 0;
  /* Вертикальный паддинг обязателен: align-items:baseline прижимает
     выровненную по базовой линии группу к верху флекс-линии, и весь запас
     min-height ушёл бы под текст (цифра занимала верхние 32px плашки, под
     ней 28px пустоты). 14 + 32 (line-height цифры) + 14 = ровно 60, то
     есть min-height выполняется впритык и остаётся полом на случай
     двузначного числа. align-items менять на center нельзя — общая
     базовая линия у двух разных кеглей есть в макете. */
  padding: 14px 12px;
  border-radius: var(--radius-model-counter);
  background: var(--color-model-counter-bg);
  color: var(--color-model-counter-ink);
}

.product-models__counter-value {
  font-size: 30px;
  line-height: 32px;
  font-weight: var(--fw-bold);
}

.product-models__counter-unit {
  font-size: 20px;
  font-weight: var(--fw-semibold);
}

.product-models__nav {
  display: flex;
  flex-shrink: 0;
  gap: 10px;
  margin-left: auto;
}

/* Обёртки трека. Классы .solutions-slider / .solutions-slider__viewport
   стоят на них вторыми именами намеренно: движок initSolutionsSlider
   ищет вьюпорт и обёртку именно по этим классам, и когда блок станет
   слайдером, параметризовать придётся только порог (4 против 5). Оттуда
   же приходят padding/margin, дающие запас под тень карточек внутри
   overflow:hidden. */
.product-models__track {
  display: flex;
  justify-content: center;
  gap: var(--model-card-gap);
  max-width: var(--bleed-width);
  margin: 0 auto;
  padding: 0 var(--model-row-gutter);
  list-style: none;
  /* Нужна будущему движку: позицию трека он задаёт inline-трансформом,
     плавность — за CSS. Сейчас трансформа нет, правило ничего не делает. */
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.product-models__item {
  display: flex;
  flex: 0 0 var(--model-card-width);
  width: var(--model-card-width);
}

.product-models__item .model-card {
  width: 100%;
}

.product-models .solutions-slider__dots {
  margin-top: 40px;
}

/*
  Заготовка под режимы движка (он выставляет data-slider-mode на секции).
  Пока атрибута нет, действует базовое правило — статичный ряд по центру.
  В карусели ряд обязан начинаться от левого края трека, иначе центровка
  дерётся с позицией, которую движок считает сам.
*/
.product-models[data-slider-mode="static"] .product-models__nav,
.product-models[data-slider-mode="static"] .solutions-slider__dots {
  display: none;
}

.product-models[data-slider-mode="carousel"] .product-models__track,
.product-models[data-slider-mode="finite"] .product-models__track {
  justify-content: flex-start;
}

/* Статичный ряд: карточки стоят по центру полосы — шапка обязана встать
   туда же. 25px справа заложены под стрелки (они кончаются на x=1415,
   правее контентной колонки); стрелок здесь нет, и без уравнивания
   паддингов центр шапки уехал бы на 25px правее центра карточек.
   1440 − 75 − 75 = 1290 = --content-width.
   Только ПК: на телефоне движок для 2–4 моделей выбирает режим "finite"
   (см. solutionsSliderMode в main.js) — там трек прижат влево, и
   центровать над ним шапку нельзя. Приём с @media (min-width: 600px)
   в проекте уже есть — mobile-nav.css. */
@media (min-width: 600px) {
  .product-models--static .product-models__head {
    justify-content: center;
    padding-right: 75px;
  }
}

/* Один кадр без анимаций на время пересборки блока при пересечении границы
   600px — то же правило и та же причина, что у .solutions.is-rebuilding в
   solutions-slider.css: движок разбирает режим и возвращает треку пустой
   transform, и без этого возврат к статичному ряду разыгрывался бы как
   проезд трека за 0,45 с прямо на глазах у посетителя. */
.product-models.is-rebuilding * {
  transition: none !important;
}

/*
  Мобильного макета у блока нет вовсе — задача только в том, чтобы ничего
  не уехало за край: ряд остаётся рядом и листается тем же движком, что на
  ПК (карточка 330 = 390 − 2 × 30 гуттера, как у принятого
  .product-related__item), полоски убираются, стрелки остаются.
  Размеры — по существующей формуле проекта min(Npx, calc(N/390*100vw)).
  Кегль заголовка — тот же, что у всех H2 проекта на телефоне
  (32/46, как .product-related__heading): 44px из ПК-макета в карточку
  330px не помещается физически.
*/
@media (max-width: 599.98px) {
  .product-models {
    padding: min(70px, calc(70 / 390 * 100vw)) 0 min(78px, calc(78 / 390 * 100vw));
  }

  /*
    Шапка на телефоне — два этажа, а не три. Заголовок занимает всю
    строку (flex-basis:100% у .product-models__heading ниже), а счётчик и
    стрелки встают во ВТОРУЮ строку того же флекс-ряда: счётчик слева,
    стрелки прижаты вправо базовым margin-left:auto у
    .product-models__nav. Раньше шапка была колонкой
    (flex-direction:column + align-items:flex-start), и стрелки стояли
    третьим этажом, отдельной строкой под плашкой счётчика.

    align-items тут намеренно НЕ переопределяется: центровка из базового
    правила и нужна — плашка счётчика (60) и стрелки (50) стоят в одной
    строке центрами друг против друга. Заголовок в своей строке один,
    ему центровка ничего не меняет.

    gap задаёт оба зазора одним числом: 20 между этажами по вертикали и
    те же 20 между заголовком и плашкой, если они когда-нибудь окажутся
    в одной строке.
  */
  .product-models__head {
    flex-wrap: wrap;
    gap: min(20px, calc(20 / 390 * 100vw));
    max-width: none;
    margin-bottom: min(30px, calc(30 / 390 * 100vw));
    padding: 0 min(30px, calc(30 / 390 * 100vw));
  }

  /*
    display:contents — чтобы заголовок и счётчик стали флекс-элементами
    самой шапки. Стрелки лежат в разметке рядом с .product-models__title,
    а не внутри него, и встать со счётчиком в одну строку иначе не могут.
    Разметка при этом не меняется вовсе (её трогать нельзя: блок ждёт
    порта в тему), а ПК-раскладка — шапка-ряд «заголовок + счётчик»
    слева, стрелки справа — остаётся ровно той же, потому что правило
    живёт только в этом медиазапросе.
  */
  .product-models__title {
    display: contents;
  }

  /*
    Заголовок — на всю строку шапки. Этим же снята прежняя причина
    вылета плашки счётчика за правый край экрана (замер до той правки:
    правый край плашки 424.8 при ширине экрана 390, и её срезал
    overflow:hidden секции). Причина была не в отступах, а в
    неразрывности строки: min-content ряда «заголовок + плашка»
    складывался из самого длинного слова заголовка (282.8 при кегле 32),
    зазора 20 и плашки 92 = 394.8, а колонка тут 330; флекс-элемент не
    сжимается ниже своего min-content, и лишние 64.8px выдавливало
    плашку за край. Раньше от этого спасал перенос внутри
    .product-models__title (flex-wrap:wrap) — теперь то, что заголовок и
    плашка в одной строке не стоят никогда, какой бы длины название ни
    вписал редактор. overflow-wrap:break-word из базового правила
    по-прежнему страхует от одного слова шире 330px.
  */
  .product-models__heading {
    flex: 0 0 100%;
    font-size: min(32px, calc(32 / 390 * 100vw));
    line-height: min(46px, calc(46 / 390 * 100vw));
  }

  /*
    Плашка счётчика оставалась единственным местом блока с ПК-числами:
    всё вокруг сжималось формулой, а она держала 92×60 и кегли 30/20 —
    из-за чего на 360px её вылет был БОЛЬШЕ, чем на 390 (40.7 против
    34.8). Числа те же, что в макете, добавлена только деградация ниже
    390px. Соотношение 14 + 32 + 14 = 60 из базового правила при этом
    сохраняется: все три величины сжимаются одним множителем.
  */
  .product-models__counter {
    gap: min(8px, calc(8 / 390 * 100vw));
    min-width: min(92px, calc(92 / 390 * 100vw));
    min-height: min(60px, calc(60 / 390 * 100vw));
    padding: min(14px, calc(14 / 390 * 100vw)) min(12px, calc(12 / 390 * 100vw));
  }

  .product-models__counter-value {
    font-size: min(30px, calc(30 / 390 * 100vw));
    line-height: min(32px, calc(32 / 390 * 100vw));
  }

  .product-models__counter-unit {
    font-size: min(20px, calc(20 / 390 * 100vw));
  }

  .product-models__nav {
    gap: min(10px, calc(10 / 390 * 100vw));
  }

  /*
    Полоски на телефоне не показываем: их ровно столько, сколько моделей
    (так их считает движок), и у товара с одиннадцатью моделями ряд
    11 × 50 + 10 × 20 = 750px в 390 не влезает физически. Взято поведение
    «Других решений» на этой же товарной — стрелки без полосок.
  */
  .product-models .solutions-slider__dots {
    display: none;
  }

  /* Зазор — собственный --model-card-gap блока (10), он же зазор
     «Других решений» на телефоне. flex-wrap НЕ трогаем: ряд обязан
     остаться рядом, иначе клоны карусели встали бы колонкой. */
  .product-models__track {
    gap: min(10px, calc(10 / 390 * 100vw));
    padding: 0 min(30px, calc(30 / 390 * 100vw));
  }

  .product-models__item {
    flex: 0 0 min(330px, calc(330 / 390 * 100vw));
    width: min(330px, calc(330 / 390 * 100vw));
  }
}