/*
  «Состав линии» (Figma 312:3304 — фреймы «4 в ряд» 311:2939, «3 в ряд»
  314:3385, мобильная 314:4060). Блок только для автоматизированных линий,
  опционален целиком; условие видимости — в single-equipment.php, как и у
  остальных секций товара.

  Вертикальный ритм секции взят у соседних блоков товара, а НЕ из
  координат фрейма: у обоих новых макетов фреймы обрезаны по месту, под
  удобство работы в Figma, и их верхняя/нижняя граница не описывает
  отступы секции. Числа — те же, что в product-dimensions.css:15-19.

  Фон — --color-solutions-bg (#F5F5F8): тот же, что у «Описания» выше по
  странице, и ровно тот, что стоит в макете. Не путать с --color-cta-bg
  (#F6F5F8) соседней «Габаритной схемы» — оттенки различаются на 1 unit.
*/
.product-line-composition {
  padding: 89px var(--page-gutter) 108px;
  background: var(--color-solutions-bg);
  border-bottom: 1px solid var(--color-divider);
}

/* margin:0 auto — та же причина, что у .product-dimensions__heading: без
   него блок с max-width висит у левого края секции, пока строка карточек
   центрируется отдельно. */
.product-line-composition__heading {
  --heading-gradient-angle: 130.86deg;
  margin: 0 auto 15px;
  max-width: var(--content-width);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  text-align: center;
}

.product-line-composition__subtitle {
  margin: 0 auto 45px;
  max-width: var(--content-width);
  font-size: 15px;
  line-height: 25px;
  color: var(--color-ink);
  text-align: center;
  overflow-wrap: break-word;
}

/* Центрирование — только justify-content + flex-wrap, без модификаторов
   под количество пунктов. При четырёх карточках ряд занимает ровно
   --content-width (4×315 + 3×10 = 1290), при трёх, двух и одной остаток
   делится поровну сам. row-gap задан на случай, если пунктов когда-нибудь
   станет больше четырёх и ряд перенесётся. */
.product-line-composition__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 65px 10px;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* 315px — ширина карточки из макета, 30px паддинга с каждой стороны дают
   текстовую колонку 255px (тоже из макета). Высота не фиксирована: текст
   в карточку приходит из админки и его длина заранее не известна.

   position:relative — система координат для стрелки-разделителя, см.
   .product-line-composition__item-arrow в конце десктопного блока. */
.product-line-composition__item {
  position: relative;
  flex: 0 0 315px;
  max-width: 315px;
  padding: 0 30px;
  text-align: center;
}

/* Фотография — 315×220 из макета, то есть во всю ширину карточки: из её
   30px паддинга бокс выходит отрицательными margin, а не отдельной
   разметкой.

   Высота ФИКСИРОВАННАЯ, и это осознанно. Фото грузит редактор, пропорции
   у разных машин свои, и без фиксированного бокса заголовки соседних
   карточек встали бы на разной высоте. object-fit:contain — чтобы
   нестандартную пропорцию вписало целиком, а не обрезало. */
.product-line-composition__item-photo {
  height: 220px;
  margin: 0 -30px;
}

.product-line-composition__item-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* display:block — чтобы работал вертикальный margin из цепочки соседних
   селекторов ниже. Размер задаём и svg, и img: SVG инлайнится
   lekoborud_icon_attachment() и красится CSS, но редактор вправе загрузить
   и растр — тогда та же функция отдаёт <img>. */
.product-line-composition__item-icon {
  display: block;
}

/* margin-inline:auto — сама иконка блочная (глобальный reset base.css:
   img,svg{display:block}), а блок text-align:center у карточки не
   центрирует: он выравнивает только строчное содержимое. Без auto иконка
   прижималась бы к левому краю карточки. */
.product-line-composition__item-icon svg,
.product-line-composition__item-icon img {
  width: 34px;
  height: 34px;
  margin-inline: auto;
}

/* Вертикальные отступы внутри карточки — СОСЕДНИМИ селекторами, а не
   margin-top на самих элементах. Причина: фото и иконка опциональны
   (поля может не быть или редактор их не заполнил), и отсутствующий
   элемент обязан унести свой отступ с собой, не оставив дыру. gap на
   колоночном флексе тут не подошёл бы, если расстояния в макете когда-то
   разойдутся: сейчас фото→иконка и иконка→заголовок оба по 15px, но
   заданы они раздельно и правятся независимо.

   Пара «фото → заголовок» — это случай, когда иконки нет: без неё
   карточка без иконки прилипла бы заголовком к фото. Случай «есть фото,
   нет ни иконки, ни заголовка» отдельного правила не требует: у
   .item-text свой margin-top, и он те же 15px. */
.product-line-composition__item-photo + .product-line-composition__item-icon,
.product-line-composition__item-photo + .product-line-composition__item-title,
.product-line-composition__item-icon + .product-line-composition__item-title {
  margin-top: 15px;
}

.product-line-composition__item-title {
  margin: 0;
  font-size: 17px;
  line-height: 22px;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  overflow-wrap: break-word;
}

/* opacity, а не отдельный цвет — так же, как у .product-steps__description:
   в макете это тот же --color-ink с прозрачностью. */
.product-line-composition__item-text {
  margin: 15px 0 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-ink);
  opacity: 0.6;
  overflow-wrap: break-word;
}

/*
  Стрелка-разделитель — элемент ВНУТРИ карточки, но вынутый из потока.

  Обычным элементом в потоке её ставить нельзя: ряд из четырёх карточек
  укладывается в --content-width ТОЧНО (4×315 + 3×10 = 1290, см.
  .product-line-composition__items выше). Стрелка 35px во флекс-потоке дала
  бы 4×315 + 6×10 + 3×35 = 1425 > 1290, и flex-wrap унёс бы четвёртую
  карточку во второй ряд — то есть главный, четырёхкарточный случай
  развалился бы. Абсолютная стрелка ширины ряда не занимает, механику
  центрирования (justify-content:center + flex-wrap) не трогает вообще.

  По горизонтали: left:-5px — половина column-gap:10px, то есть ровно шов
  между карточками. Свободного места на шве 70px (30 паддинга + 10 гэпа +
  30 паддинга), стрелка 35px укладывается с запасом и на текст не наезжает.

  По вертикали: 110px — центр фотографии (220/2), фиксированным значением,
  а не процентами: высота карточки плавает от длины текста, и проценты
  увели бы стрелку вниз у карточки с длинным описанием.
*/
.product-line-composition__item-arrow {
  position: absolute;
  top: 110px;
  left: -5px;
  transform: translate(-50%, -50%);
}

.product-line-composition__item-arrow svg {
  display: block;
  width: 35px;
  height: 35px;
}

/*
  Мобильная (база 390px): карточки — вертикальный список во всю ширину
  контента, заголовок 32/46. Подзаголовок в мобильном фрейме макета не
  нарисован, но выводится и здесь — решение пользователя от 2026-08-07
  (в макете его просто не дорисовали, скрывать редакторский текст на
  телефоне не нужно).

  Формула min(Npx, calc(N / 390 * 100vw)) работает ниже 390px, где
  масштаб зафиксирован на единице; в полосе 390–600 она инертна.
*/
@media (max-width: 599.98px) {
  .product-line-composition {
    padding: min(89px, calc(89 / 390 * 100vw)) min(30px, calc(30 / 390 * 100vw)) min(38px, calc(38 / 390 * 100vw));
  }

  .product-line-composition__heading {
    max-width: none;
    margin-bottom: min(13px, calc(13 / 390 * 100vw));
    font-size: min(32px, calc(32 / 390 * 100vw));
    line-height: min(46px, calc(46 / 390 * 100vw));
    overflow-wrap: break-word;
  }

  .product-line-composition__subtitle {
    max-width: none;
    margin-bottom: min(45px, calc(45 / 390 * 100vw));
    font-size: min(15px, calc(15 / 390 * 100vw));
    line-height: min(25px, calc(25 / 390 * 100vw));
  }

  .product-line-composition__items {
    flex-direction: column;
    gap: min(65px, calc(65 / 390 * 100vw));
    max-width: none;
  }

  /* Карточка на мобильной — вся ширина контента (390 − 2×30 = 330 из
     макета), паддинг 30px оставляет текстовую колонку 270px. */
  .product-line-composition__item {
    flex: none;
    max-width: none;
    width: 100%;
    padding: 0 min(30px, calc(30 / 390 * 100vw));
  }

  /* Фото на мобильной — 330×220, то есть снова во всю ширину карточки.
     Отрицательное значение — через max(), не min(): иначе на широких
     телефонах (390–600) отступ рос бы вместо того, чтобы оставаться
     зафиксированным (та же поправка к формуле). Пара с padding карточки
     сокращается при любой ширине, поэтому бокс ровно во всю карточку. */
  .product-line-composition__item-photo {
    height: min(220px, calc(220 / 390 * 100vw));
    margin: 0 max(-30px, calc(-30 / 390 * 100vw));
  }

  .product-line-composition__item-icon svg,
  .product-line-composition__item-icon img {
    width: min(34px, calc(34 / 390 * 100vw));
    height: min(34px, calc(34 / 390 * 100vw));
  }

  .product-line-composition__item-photo + .product-line-composition__item-icon,
  .product-line-composition__item-photo + .product-line-composition__item-title,
  .product-line-composition__item-icon + .product-line-composition__item-title {
    margin-top: min(15px, calc(15 / 390 * 100vw));
  }

  /* Стрелки на мобильной есть (фрейм 314:4060), но карточки идут
     столбиком, поэтому стрелка переезжает со шва между колонками на
     разрыв между карточками: по центру ширины и по центру gap:65px, то
     есть на 32.5px выше верха своей карточки. Из потока она по-прежнему
     вынута, разрыв между карточками не растёт.

     rotate(90deg) — строго вниз, по требованию заказчика (правка 11.7,
     2026-08-08). Исходная иконка смотрит вправо. Не «по макету»: в
     макете 45°, заказчик его отменил. */
  .product-line-composition__item-arrow {
    top: max(-32.5px, calc(-32.5 / 390 * 100vw));
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .product-line-composition__item-arrow svg {
    width: min(35px, calc(35 / 390 * 100vw));
    height: min(35px, calc(35 / 390 * 100vw));
  }

  .product-line-composition__item-title {
    font-size: min(16px, calc(16 / 390 * 100vw));
    line-height: min(24px, calc(24 / 390 * 100vw));
  }

  .product-line-composition__item-text {
    margin-top: min(10px, calc(10 / 390 * 100vw));
    font-size: min(13px, calc(13 / 390 * 100vw));
    line-height: min(22px, calc(22 / 390 * 100vw));
  }
}