/*
  Первый экран страницы модели (444:3613), разметка —
  partials/model-hero.njk.

  Вертикаль фрейма: фото 72 → крошки 140 → H1 195 → подзаголовок 265 →
  «Скорость упаковки» 372 → «Подходит для» 410 → низ фото 649.
  Как и на странице товара, секция заезжает под прозрачный хедер
  (margin-top на его высоту), поэтому крошки на 140 = 88 хедера + 52.
*/
.model-hero {
  position: relative;
  /* Фото шире контентной колонки и в макете уходит за правый край экрана
     (595 + 880 = 1475 при ширине 1440) — обрезаем его секцией, чтобы не
     появлялась горизонтальная прокрутка. */
  overflow: hidden;
  /* Низ фото: 72 + 577. Держит высоту секции, пока под первым экраном
     ничего нет, и не даёт обрезать фото при коротком тексте. */
  min-height: 649px;
  margin-top: calc(-1 * var(--header-height));
  background: var(--color-page-bg);
}

.model-hero__inner {
  position: relative;
  /* Текст — поверх фото: в макете подзаголовок (683px) заходит под левый
     край снимка, а тот в этой зоне уже растворён в фоне. */
  z-index: 1;
  width: min(var(--content-width), 100% - 2 * var(--page-gutter));
  margin-inline: auto;
  padding: calc(var(--header-height) + 52px) 0 80px;
}

.model-hero__title {
  margin: 32px 0 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  color: var(--color-ink);
  overflow-wrap: break-word;
}

.model-hero__subtitle {
  margin: 10px 0 0;
  max-width: 683px;
  font-size: 30px;
  line-height: 41px;
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  color: var(--color-ink);
  overflow-wrap: break-word;
}

/*
  «Скорость упаковки:» и «Подходит для:» — две строки одной таблицы:
  подпись начинается на x=75, значение на x=226, отсюда колонка 151px.
  Ширина значений ограничена 369px — именно на ней плашки в макете
  переносятся во вторую строку и не доходят до фото.
*/
.model-hero__specs {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 25px 0 0;
  max-width: 520px;
}

.model-hero__spec {
  display: flex;
}

.model-hero__spec-label {
  flex: 0 0 151px;
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

/* margin:0 — у <dd> есть собственный отступ слева от браузера, он сбил
   бы колонку значений. */
.model-hero__spec-value {
  margin: 0;
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

.model-hero__spec-value--accent {
  color: var(--color-accent);
}

/* Подпись строки с плашками опущена на 3px (в макете 413 против 410 у
   плашек) — так она стоит по центру первого ряда плашек, а не по его
   верхнему краю. */
.model-hero__spec--tags .model-hero__spec-label {
  margin-top: 3px;
}

.model-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-width: 369px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
  Фото первого экрана (444:3870) — 880×577, левый край на x=595, то есть
  на 520 правее левого края контентной колонки; отсюда формула left.
  object-fit:cover с заданной рамкой: редактор загрузит снимок любых
  пропорций, кадр от этого не поедет.
*/
.model-hero__media {
  position: absolute;
  top: 72px;
  left: calc(50% - var(--content-width) / 2 + 520px);
  z-index: 0;
  width: 880px;
  height: 577px;
}

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

/* Фото растворяется в фоне страницы со всех четырёх сторон — в макете
   это три градиентные заливки поверх снимка (боковая, верхняя, нижняя). */
.model-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to left, var(--color-page-bg) 0%, transparent 10.64%, transparent 84%, var(--color-page-bg) 100%),
    linear-gradient(to bottom, var(--color-page-bg) 0.85%, transparent 11.57%),
    linear-gradient(to top, var(--color-page-bg) 0.72%, transparent 15.28%);
}

/*
  Мобильного макета первого экрана нет вовсе — задача только в том, чтобы
  ничего не уехало за край. Фото из абсолютного становится обычным блоком
  под текстом (в разметке оно и так идёт последним), строки «подпись —
  значение» складываются в колонку: 151 + 369 в 330px не помещаются.
  Кегли остаются макетными: своей мобильной раскладки у страницы нет, и
  придумывать второй набор чисел нельзя.
*/
@media (max-width: 599.98px) {
  .model-hero {
    min-height: 0;
    /* Хедер на телефоне position:fixed — заезжать под него не нужно. */
    margin-top: 0;
  }

  .model-hero__inner {
    width: min(330px, calc(330 / 390 * 100vw));
    padding: min(110px, calc(110 / 390 * 100vw)) 0 min(30px, calc(30 / 390 * 100vw));
  }

  /* Три уровня крошек в строку 330px не помещаются. */
  .model-hero .breadcrumbs__list {
    flex-wrap: wrap;
  }

  /* anywhere, а не break-word: название модели и подзаголовок набраны
     прописными в крупном кегле, и одно длинное слово («СЕРВОПРИВОДНАЯ»)
     на узком экране шире колонки целиком. break-word в этом случае
     полагается на то, что слово не влезает в строку, и на практике
     оставляет его торчать за край — anywhere рвёт его гарантированно.
     Только в этом media query: на ПК-ширине переносов по буквам быть не
     должно. */
  .model-hero__title,
  .model-hero__subtitle {
    overflow-wrap: anywhere;
  }

  /*
    H1 оставался единственным заголовком сайта, который на телефоне
    держал ПК-кегль (--fs-h1/--lh-h1 = 44/60): на колонке 330px это
    5 строк на реальном названии модели, а ниже 390px он вообще не
    сжимался — интерлиньяж 60 не участвовал в формуле, и на 320px
    название занимало 6 строк по 60px.

    32/46 — не новое число: это штатная мобильная пара заголовков
    проекта, та же, что у всех H2 на телефоне, включая заголовок блока
    «Модели оборудования», из которого сюда и ведёт ссылка. У соседнего
    первого экрана товара (.product-hero__title) стоит 30/46 — здесь на
    2px больше сознательно: прямо под H1 идёт подзаголовок 30px, и при
    30/46 заголовок страницы перестал бы читаться как старший. Это
    решение верстальщика (мобильного макета страницы нет), самое
    вероятное место для правки пользователем.
  */
  .model-hero__title {
    margin-top: min(32px, calc(32 / 390 * 100vw));
    font-size: min(32px, calc(32 / 390 * 100vw));
    line-height: min(46px, calc(46 / 390 * 100vw));
  }

  /*
    Подзаголовок уменьшен ТЕМ ЖЕ множителем, что и H1 над ним: 44 → 32 это
    0.727, значит 30 → 22 и 41 → 30. Соотношение кеглей из ПК-макета
    (30/44 = 0.68) сохранено один в один, своего числа здесь не
    придумывается — оно посчитано из макетной пары.

    Зачем понадобилось: при макетных 30px подзаголовок на телефоне
    вставал вровень с H1 (32px) и, занимая 4 строки против одной,
    визуально старше названия модели — то есть ровно наоборот, чем в
    макете. Это решение верстальщика (мобильного макета страницы нет),
    второе по вероятности место для правки пользователем после самого H1.
  */
  .model-hero__subtitle {
    margin-top: min(10px, calc(10 / 390 * 100vw));
    font-size: min(22px, calc(22 / 390 * 100vw));
    line-height: min(30px, calc(30 / 390 * 100vw));
  }

  .model-hero__specs {
    max-width: none;
    gap: min(20px, calc(20 / 390 * 100vw));
    margin-top: min(25px, calc(25 / 390 * 100vw));
  }

  /* «Скорость упаковки:» и «Подходит для:» — кегль макетный (13/18),
     добавлена деградация ниже 390px, чтобы подписи сжимались вместе с
     колонкой, а не упирались в её край. */
  .model-hero__spec-label,
  .model-hero__spec-value {
    font-size: min(13px, calc(13 / 390 * 100vw));
    line-height: min(18px, calc(18 / 390 * 100vw));
  }

  .model-hero__spec {
    flex-direction: column;
    gap: min(6px, calc(6 / 390 * 100vw));
  }

  .model-hero__spec-label {
    flex: none;
  }

  .model-hero__spec--tags .model-hero__spec-label {
    margin-top: 0;
  }

  /* 100%, а не none: ряд плашек обязан переноситься по ширине колонки,
     какой бы она ни была, а не по своей максимальной. */
  .model-hero__tags {
    max-width: 100%;
    gap: min(7px, calc(7 / 390 * 100vw));
  }

  .model-hero__media {
    /* relative, а не static: ::after с inset:0 обязан мерить коробку фото,
       а при static ближайшим позиционированным предком становилась секция
       .model-hero (≈700px) и верхняя заливка приходилась в пустоту над
       текстом — фото обрывалось сверху шагом до 43 уровней.
       top/left обнуляются здесь же: их держит базовое ПК-правило
       (top: 72px, left: calc(50% - var(--content-width)/2 + 520px)), при
       position:static они инертны, а с relative ожили бы и сдвинули отрисовку
       на +72px вниз и +70px вправо (на 390 calc даёт ровно 70px), где правые
       70px фото срезал бы overflow:hidden секции. В потоке по-прежнему не
       меняется ничего. */
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    /* Пропорция макетной рамки 880×577 — числа в aspect-ratio
       безразмерные, токены в них не подставить. */
    aspect-ratio: 880 / 577;
  }
}