/*
  Hero продуктовой страницы (159:3813/3814/3815/3816). Тот же приём, что у
  .hero на главной — margin-top на высоту хедера, чтобы фон уходил под
  прозрачный хедер. В отличие от главной, заголовок здесь выровнен по
  левому краю (не центрирован), а карточка «N шагов» (product-steps.njk)
  наезжает на нижнюю часть ЭТОГО ЖЕ фото (не следующего блока) — см.
  margin-top в product-steps.css, глубина захода = 1257 - 995 = 262px
  (995 — верхняя граница карточки в Figma, отсчитанная от начала hero).
*/
.product-hero {
  position: relative;
  overflow: hidden;
  min-height: 1257px;
  margin-top: calc(-1 * var(--header-height));
  background: var(--color-surface-muted);
}

/* max-width — фото не должно бесконечно растягиваться/увеличивать масштаб
   на широких мониторах (при object-fit:cover и фикс. высоте это раньше
   заставляло машину зумиться и заезжать под текст/бейдж). Кап 1440px
   держит фото РОВНО тем же, что и в макете: выше 1440 коробка не меняется
   вообще, поэтому не меняются ни зум, ни обрезка, ни положение фото.
   Полосу по бокам съедает градиент-фейд в цвет фона (::after), см. ниже
   media query — там же про то, почему здесь 1440, а не --bleed-width. */
.product-hero__media {
  --top-fade-stop: 10%; /* общий источник для маски img и цвет-фейда ::after ниже — оба должны гаснуть на одной и той же глубине */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: 1440px;
  transform: translateX(-50%);
  z-index: 0;
}

/* mask-image — верх фото физически истончается до прозрачности (альфа-канал
   маски, не цвет), поэтому эффект виден независимо от того, совпадает ли
   цвет самой фотографии с фоном секции. Цвет-фейд в ::after ниже сам по себе
   на это не надёжен (виден только если оттенки фото и фона разные). */
.product-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 85%;
  mask-image: linear-gradient(to bottom, transparent, black var(--top-fade-stop));
  -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--top-fade-stop));
}

/* Фейд-градиент к цвету следующего блока (159:3814 в Figma) снизу — без
   него фото обрывается жёстким стыком со следующей секцией; фейд по
   бокам и сверху — не из макета, добавлен для широких мониторов (см.
   max-width выше), чтобы край кап-бокса не выглядел обрезанным. */
.product-hero__media::after {
  --side-fade: transparent; /* боковой фейд не нужен, пока фото не шире экрана (кап 1440px ещё не сработал) */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--side-fade), transparent 16%, transparent 84%, var(--side-fade)),
    linear-gradient(to bottom, var(--color-surface-muted), transparent var(--top-fade-stop), transparent 60%, var(--color-solutions-bg) 99.92%);
}

/* ИСКЛЮЧЕНИЕ (осознанное, согласовано с заказчиком): выше 1440 первый
   экран продуктовой страницы не меняется вообще — кадр, обрезка и
   положение фото те же, что на 1440. Поэтому кап 1440px, а не общий
   var(--bleed-width)=1700px, как у остальных фоновых фото проекта.
   Единственное, что добавляется на широком экране, — боковой фейд:
   он растворяет вертикальный край фото в фоне секции (тот же
   --color-surface-muted), чтобы фото не обрывалось о край экрана.
   НЕ вычищать вместе с остальными 1700-брейкпоинтами при п.18 —
   этот блок сознательно выведен из общего правила.
   1440 захардкожено дважды (max-width выше и число здесь) — в media
   query var() не подставить; менять только парой. .02 — чтобы на
   ровно 1440 фейд ещё не включался. */
@media (min-width: 1440.02px) {
  .product-hero__media::after {
    --side-fade: var(--color-surface-muted);
  }
}

.product-hero__content {
  position: relative;
  z-index: 1;
  width: min(var(--content-width), 100% - 2 * var(--page-gutter));
  margin-inline: auto;
  padding: calc(var(--header-height) + 52px) 0 0;
}

.product-hero__title {
  margin: 12px 0 0;
  max-width: 755px;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  color: var(--color-ink);
}

/* Бейдж характеристики (heroBadge) — опциональная красная плашка сверху
   справа. 72px = 1440 - 1103 - 265 (правый инсет плашки в Figma).
   Теперь дочерний элемент .product-hero__media (см. product-hero.njk) —
   на 1440px .product-hero__media занимает точно ту же рамку, что и
   .product-hero (--bleed-width ещё не начал кэпать), поэтому top/right
   визуально не меняются. Но правая привязка теперь идёт от рамки фото,
   а не от края окна — на широких экранах бейдж остаётся у угла фото
   (которое само зафиксировано на --bleed-width и центрировано), а не
   уезжает к истинному краю браузера. */
.product-hero__badge {
  position: absolute;
  top: 188px;
  right: 72px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 15px 18px;
  border: 1.531px solid var(--color-accent);
  border-radius: var(--radius-card);
  background: var(--color-accent);
  color: var(--color-surface);
  text-align: center;
  white-space: nowrap;
}

.product-hero__badge-value {
  font-size: 30.625px;
  font-weight: var(--fw-semibold);
}

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

/*
  Мобильная адаптация (600px,
  база 390px). Структурная перестройка: бейдж больше не лежит абсолютно
  поверх фото, а становится обычным блочным элементом между заголовком и
  фото. DOM не меняется (badge остаётся внутри .product-hero__media, после
  img) — перестановка чисто через flex+order: .product-hero становится
  колонкой (content, затем media), а внутри .product-hero__media сам badge
  получает order:1 (перед img), что вытесняет фото ниже в потоке документа,
  не трогая разметку .njk. Хедер на мобильном — position:fixed, поэтому
  margin-top под него (десктопный приём) здесь не нужен.
*/
@media (max-width: 599.98px) {
  .product-hero {
    display: flex;
    flex-direction: column;
    gap: min(15px, calc(15 / 390 * 100vw));
    min-height: 0;
    margin-top: 0;
  }

  /* .product-hero__media идёт ПЕРВЫМ в разметке (.njk: media, затем
     content) — без явного order здесь секция с фото визуально оказалась
     бы выше заголовка (flex раскладывает по умолчанию в DOM-порядке).
     order:1 переставляет контент перед фото, ничего не трогая в .njk. */
  .product-hero__content {
    order: 1;
    width: min(330px, calc(330 / 390 * 100vw));
    margin-inline: auto;
    padding: min(110px, calc(110 / 390 * 100vw)) 0 0;
  }

  /* 30px, не макетные 32: слово «ПЕРИОДИЧЕСКОГО» при 32px занимает 324 из
     330px контент-бокса (98%) — запаса нет, а разные браузеры меряют текст
     с расхождением ~3%, и overflow-wrap:break-word ниже рвёт слово прямо
     посередине. Тот же заголовок товара стоит в блоке описания
     (product-description.css) — размер должен совпадать в обоих местах.
     line-height оставлен макетным (46px). */
  .product-hero__title {
    font-size: min(30px, calc(30 / 390 * 100vw));
    line-height: min(46px, calc(46 / 390 * 100vw));
    overflow-wrap: break-word;
  }

  /* .product-hero__media теперь обычный (не absolute) flex-элемент —
     колонка из badge (order:1) и фото (order:2), центрированная bleed-
     ширинa шире 390-фрейма (487px), как и на десктопных full-bleed фото. */
  .product-hero__media {
    order: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: auto;
    bottom: auto;
    left: 50%;
    width: min(487px, calc(487 / 390 * 100vw));
    max-width: none;
    transform: translateX(-50%);
  }

  /* margin-top -87 — в макете фото начинается на y=316, а бейдж на y=345,
     т.е. фото заходит ПОД бейдж своей верхней (сфейженной в фон) частью.
     В потоке flex фото идёт сразу за бейджем (~403), отсюда лишний воздух
     между плашкой и станком. max(), а не min() — значение отрицательное
     (та же поправка к формуле). Фейд (::after) трогать не нужно:
     он привязан к низу .product-hero__media, высота которого уменьшается
     ровно на те же 87px. Побочный эффект нужный — карточка «N шагов»
     (margin-top:-56px) вместе с фото возвращается на макетные 685. */
  .product-hero__media img {
    order: 2;
    width: 100%;
    margin-top: max(-87px, calc(-87 / 390 * 100vw));
    height: min(425px, calc(425 / 390 * 100vw));
    /* Десктопный верхний mask-фейд (mask-image на img) здесь не нужен —
       на мобильном фейд у ::after уже двусторонний и привязан к badge,
       без отдельного истончения верха самого фото. */
    mask-image: none;
    -webkit-mask-image: none;
  }

  /* Двусторонний фейд (свой, не десктопный) — заменяет десктопный ::after
     целиком, привязан только к высоте фото (не всего .product-hero__media,
     чтобы не перекрывать бейдж сверху). */
  .product-hero__media::after {
    top: auto;
    bottom: 0;
    height: min(425px, calc(425 / 390 * 100vw));
    background-image: linear-gradient(
      180deg,
      var(--color-solutions-bg) 0%,
      transparent 20.298%,
      transparent 80.061%,
      var(--color-solutions-bg) 99.933%
    );
  }

  /* Бейдж лежит внутри .product-hero__media — а тот шире экрана (487px) и
     центрирован через left:50%+translateX(-50%), поэтому align-items:center
     родителя (им центрируется фото — не трогать) ставил бейдж по центру
     экрана, тогда как заголовок живёт в 330px-боксе с левым краем на 30px
     от края экрана. align-self+margin-left выравнивают левый край бейджа с
     заголовком: сдвиг = половина разницы bleed-ширины медиа и контентной
     ширины (на 390px = (487-330)/2 = 78.5px, что при вылете медиа за экран
     на 48.5px даёт ровно 30px). Оба числа в формуле уже масштабируются
     сами, отдельная min()-обёртка поверх не нужна. */
  /* position:relative + z-index — фото идёт позже бейджа в DOM и после
     подъёма (margin-top:-87px выше) закрасило бы его собой; при
     position:static z-index на бейдж не действует вовсе. top/right
     обязательно гасить: десктопные 188px/72px при static были инертны, а
     с relative начинают сдвигать плашку вниз и влево от её места в потоке. */
  .product-hero__badge {
    order: 1;
    position: relative;
    top: auto;
    right: auto;
    z-index: 1;
    align-self: flex-start;
    margin-left: calc((min(487px, calc(487 / 390 * 100vw)) - min(330px, calc(330 / 390 * 100vw))) / 2);
    gap: min(5px, calc(5 / 390 * 100vw));
    padding: min(15px, calc(15 / 390 * 100vw)) min(18px, calc(18 / 390 * 100vw));
    border-radius: min(25px, calc(25 / 390 * 100vw));
  }

  .product-hero__badge-value {
    font-size: min(23px, calc(23 / 390 * 100vw));
  }

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