/*
  Блок «Описание» (159:3886..3916). Фон секции — --color-solutions-bg
  (#F5F5F8, подтверждено стоп-цветом фейда фото в get_design_context, не
  белый, как предполагалось раньше). Тонкая линия-разделитель снизу
  (159:3917 в Figma) — border-bottom вместо отдельного элемента.

  Фото — position:absolute, прижато к правому краю, НЕ CSS-grid колонка:
  раньше текстовая колонка была `1fr` (остаток места после фото), из-за
  чего рост фото до реальных 765px (см. ниже) сжимал текст настолько, что
  3 бейджа-преимущества переставали помещаться в один ряд, а заголовок
  переносился в 4 строки вместо 2. В реальном Figma заголовок/бейджи и
  фото имеют ПЕРЕСЕКАЮЩИЕСЯ x-координаты (heading правый край 799 против
  левого края фото 706 — заходит на 93px; бейджи аналогично) — то есть
  оригинальный макет и не планировал непересекающиеся колонки, текст
  просто идёт поверх приглушённого (opacity:0.4) фото. Контент — z-index
  выше фото, свои независимые max-width на заголовке/тексте/бейджах, не
  зависящие от ширины фото.
*/
/* 108px до разделителя (159:3917) — точное значение из координат Figma,
   тот же расчёт применён и к нижнему отступу product-dimensions (второй
   разделитель, 159:3918). */
.product-description {
  padding: 100px var(--page-gutter) 108px;
  background: var(--color-solutions-bg);
  border-bottom: 1px solid var(--color-divider);
  /* Фото по Figma (159:3886: x=706, width=765 в фрейме 1440px) уходит
     правым краем на x=1471 — на 31px за пределы страницы. overflow:hidden
     удерживает этот выход за край в рамках секции, чтобы не появлялся
     горизонтальный скролл всей страницы на ширине ровно 1440px. */
  overflow: hidden;
}

.product-description__inner {
  position: relative;
  min-height: 456px;
  max-width: var(--content-width);
  margin: 0 auto;
}

.product-description__content {
  position: relative;
  z-index: 1;
}

.product-description__eyebrow {
  margin: 0 0 15px;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
}

.product-description__heading {
  --heading-gradient-angle: 111.02deg;
  margin: 0 0 15px;
  max-width: 724px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

.product-description__text {
  margin: 0 0 30px;
  max-width: 600px;
  font-size: 17px;
  line-height: 30px;
  color: var(--color-ink);
}

/* Правки 2026-08-05, п.9: буллиты — 2 в строке, колонками как в таблице.
   Было display:flex+flex-wrap: число буллитов в строке зависело от длины
   подписей (влезало 3), а начало второй колонки ехало за шириной первого
   буллита. Два фиксированных трека дают ровно 2 в строке при любом
   количестве (1 → 1, 2 → 2, 3 → 2+1, 4 → 2+2, 5 → 2+2+1, 6 → 2+2+2) и
   общий x у второй колонки. 320px — та же ширина, что уже стоит
   max-width у самого буллита (.product-description__badge), поэтому
   переносы ВНУТРИ подписей не меняются: текстовый бокс как был
   320-48(иконка)-14(gap) = 258px, так и остался.
   max-width:1050px удалён осознанно — при фиксированных треках он ни на
   что не влияет, ширина набора теперь 320*2+25 = 665px. */
.product-description__badges {
  display: grid;
  grid-template-columns: repeat(2, 320px);
  align-items: start;
  gap: 25px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-description__badge {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 320px;
  font-size: 17px;
  line-height: 22px;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

.product-description__badge .icon--feature-badge {
  flex-shrink: 0;
}

/* opacity:0.4 — подтверждено в Figma (не случайный слой, перепроверено
   повторным вызовом get_design_context): фото задумано как приглушённая,
   полупрозрачная декоративная композиция, не полноценное фото на полную
   яркость — поэтому заголовок/бейджи спокойно читаются, даже заходя на
   его левый край. */
/* right:-106px — точный расчёт из координат Figma (get_metadata, узел
   159:3886): фото x=706, width=765 в фрейме 1440px → правый край на
   x=1471, т.е. на 31px за пределами страницы. .inner (max-width:1290px,
   центрирован) даёт правый край на x=1365, значит выход фото за край
   .inner = 1471-1365 = 106px. */
.product-description__media {
  position: absolute;
  top: 0;
  right: -106px;
  z-index: 0;
  width: 765px;
  max-width: 100%;
  aspect-ratio: 765 / 456;
  border-radius: var(--radius-card);
  overflow: hidden;
  opacity: 0.4;
}

.product-description__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Фейд по всем 4 сторонам в цвет фона секции — при замене фото не должно
   быть жёстких стыков с окружением (тот же принцип, что у
   .value-prop__media::after, но фейдит все края, а не только верх/низ). */
.product-description__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--color-solutions-bg) 0%, rgba(245, 245, 248, 0) 7.72%, rgba(245, 245, 248, 0) 90.87%, var(--color-solutions-bg) 100%),
    linear-gradient(to bottom, var(--color-solutions-bg) 0%, rgba(245, 245, 248, 0) 11.33%, rgba(245, 245, 248, 0) 83.32%, var(--color-solutions-bg) 100%);
}

/*
  Мобильная адаптация (600px,
  база 390px). Структурная перестройка: decorative-фото уходит из-за
  текста (position:absolute) в full-bleed полосу ПОСЛЕ бейджей-преимуществ.
  DOM не меняется — .product-description__media уже идёт последним
  ребёнком .product-description__inner (после .product-description__content
  с бейджами), поэтому просто переводим .inner на flex-column и снимаем
  .media с absolute — порядок в потоке уже правильный без правки .njk.
  Фейд-градиент (::after) не переопределяем — он в процентах (не px),
  поэтому корректно масштабируется под новую full-bleed ширину сам собой.
*/
@media (max-width: 599.98px) {
  /* padding-bottom 20px, а не десктопные 108: 108 посчитаны под десктопную
     композицию, где внизу блока стоят бейджи-преимущества. На мобильном
     последним элементом идёт full-bleed фото-полоса, и разделитель в
     макете стоит сразу за ней (по координатам мобильного фрейма — ~на
     2293 при низе фото 2302). Ноль не нужен: нижние ~17% высоты фото уже
     сведены фейдом в фон (~44px визуального воздуха), 20px дают мягкий
     стык без провала. */
  .product-description {
    padding: min(100px, calc(100 / 390 * 100vw)) 0 min(20px, calc(20 / 390 * 100vw));
  }

  .product-description__inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: none;
    padding: 0 min(30px, calc(30 / 390 * 100vw));
  }

  .product-description__eyebrow {
    margin-bottom: min(15px, calc(15 / 390 * 100vw));
  }

  /* 30px, не макетные 32 — тот же расчёт, что у .product-hero__title
     (product-hero.css): при 32px «ПЕРИОДИЧЕСКОГО» занимает 98% контент-
     бокса 330px и overflow-wrap рвёт слово посередине; при 30px — 92%.
     Это один и тот же заголовок товара в двух местах страницы, размеры
     должны совпадать. line-height оставлен макетным (46px). */
  .product-description__heading {
    max-width: none;
    margin-bottom: min(15px, calc(15 / 390 * 100vw));
    font-size: min(30px, calc(30 / 390 * 100vw));
    line-height: min(46px, calc(46 / 390 * 100vw));
    overflow-wrap: break-word;
  }

  .product-description__text {
    max-width: none;
    margin-bottom: min(30px, calc(30 / 390 * 100vw));
    font-size: min(13px, calc(13 / 390 * 100vw));
    line-height: min(23px, calc(23 / 390 * 100vw));
  }

  /* Правки 2026-08-05, п.9: возврат к flex обязателен — базовое правило
     выше стало grid с двумя треками по 320px, и без этих двух строк
     flex-direction:column перестал бы работать вовсе: на телефоне
     остались бы две колонки по 320px. Мобильная раскладка не меняется:
     один столбец, зазор 15px — как было. */
  .product-description__badges {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: stretch;
    max-width: none;
    gap: min(15px, calc(15 / 390 * 100vw));
    margin-bottom: min(30px, calc(30 / 390 * 100vw));
  }

  .product-description__badge {
    max-width: none;
    font-size: min(13px, calc(13 / 390 * 100vw));
    line-height: min(21px, calc(21 / 390 * 100vw));
  }

  .product-description__media {
    display: block;
    position: relative;
    top: auto;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: min(431px, calc(431 / 390 * 100vw));
    max-width: none;
    aspect-ratio: 431 / 257;
    border-radius: 0;
  }
}