/*
  Карточка «N шагов» (159:3825/3826..3876) — стеклянная плашка (тот же
  backdrop-blur/rgba приём, что у .trust-bar на главной), наезжающая на
  нижнюю часть фото product-hero. margin-top:-262px = 1257 (высота фото
  hero) - 995 (верхняя граница карточки в Figma, от начала hero) — глубина
  захода. Полупрозрачность+blur сама сводит карточку с фото под ней без
  доп. градиента-фейда (в отличие от process-steps/value-prop, где карточка
  непрозрачная и требует градиент в цвет фона).

  Числа из get_design_context (159:3825): card padding 25/40/37 (верх/бок/
  низ — асимметрия так в макете, не опечатка), gap между пунктом и
  разделителем 82px с каждой стороны (Rectangle 11/12/13 — 159:3827/3828/
  3829). Раз в ряду разделитель — отдельный элемент между пунктами (не
  border-left), gap:82px на самом ряду даёт нужный отступ по обе стороны
  разделителя без явного margin на пунктах.
*/
.product-steps {
  position: relative;
  z-index: 1;
  margin-top: -262px;
  padding: 0 var(--page-gutter);
}

.product-steps__card {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 25px 40px 37px;
  border-radius: var(--radius-trust-bar);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(54.45px);
  -webkit-backdrop-filter: blur(54.45px);
}

.product-steps__row {
  display: flex;
  justify-content: center;
  gap: 82px;
}

.product-steps__row + .product-steps__row {
  margin-top: 20px;
}

.product-steps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 200px;
  text-align: center;
}

/* Ряд из менее чем 4 пунктов (см. splitRows в product.njk — раскладка
   1-7 пунктов, при <4 в ряду) имеет намного больше свободной ширины
   в карточке, чем зафиксированные в Figma 200px на пункт (тот размер
   верен только для полного ряда из 4). Даём пункту больше места вместо
   того, чтобы держать его на той же узкой ширине — иначе тот же текст
   переносится на лишнюю строку без необходимости. */
.product-steps__row--compact .product-steps__item {
  max-width: 280px;
}

.product-steps__divider {
  align-self: stretch;
  width: 1px;
  background: var(--color-step-divider);
}

.product-steps__icon svg {
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
}

.product-steps__title {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 21px;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  overflow-wrap: break-word;
}

.product-steps__description {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-ink);
  opacity: 0.5;
  overflow-wrap: break-word;
}

/*
  Мобильная адаптация (600px,
  база 390px) — тот же паттерн-компонент, что trust-bar на главной
  (блок 2 макета): вертикальный список вместо рядов,
  тот же приём margin-top:max() для отрицательного наезда карточки на
  фото героя (поправка к формуле здесь реально нужна:
  -56px = 741 (низ фото hero) - 685 (верх карточки в Figma)).
*/
@media (max-width: 599.98px) {
  .product-steps {
    margin-top: max(-56px, calc(-56 / 390 * 100vw));
    padding: 0;
  }

  .product-steps__card {
    max-width: min(370px, calc(370 / 390 * 100vw));
    padding: min(40px, calc(40 / 390 * 100vw)) min(30px, calc(30 / 390 * 100vw));
    border-radius: min(30px, calc(30 / 390 * 100vw));
  }

  .product-steps__row {
    flex-direction: column;
    gap: 0;
  }

  .product-steps__row + .product-steps__row {
    margin-top: 0;
  }

  .product-steps__item,
  .product-steps__row--compact .product-steps__item {
    max-width: none;
    width: 100%;
    padding: min(40px, calc(40 / 390 * 100vw)) 0;
  }

  .product-steps__item:first-child {
    padding-top: 0;
  }

  .product-steps__item:last-child {
    padding-bottom: 0;
  }

  .product-steps__divider {
    align-self: stretch;
    width: auto;
    height: 1px;
  }

  .product-steps__icon svg {
    width: min(30px, calc(30 / 390 * 100vw));
    height: min(30px, calc(30 / 390 * 100vw));
    margin-bottom: min(10px, calc(10 / 390 * 100vw));
  }

  .product-steps__title {
    margin-bottom: min(6px, calc(6 / 390 * 100vw));
    font-size: min(16px, calc(16 / 390 * 100vw));
    line-height: min(21px, calc(21 / 390 * 100vw));
  }

  .product-steps__description {
    font-size: min(13px, calc(13 / 390 * 100vw));
    line-height: min(20px, calc(20 / 390 * 100vw));
  }
}