/* Путь конверта: четыре шага. Макет: BGUtp (1440) и E6UKyV (390).

   Кикер/заголовок/лид - общие .hw-kicker/.hw-h2, лид свой класс (в
   макете у него высота строки 1.8, а не общая 1.75 из .hw-lead).

   Шаги делят ширину ряда поровну (flex: 1 1 0) независимо от числа
   карточек - добавит заказчица пятую, вёрстка подстроится. Линия между
   шагами - border-left у всех карточек кроме первой (на десктопе; на
   телефоне в макете линий между шагами нет вовсе, только отступ). */

.vl-path {
  /* В макете вертикальный паддинг секции 110px (десктоп) и 56px
     (телефон), а не общие 116/52 из .hw-sec (prazdnik.css). */
  padding-block: 110px;
  /* Заливка секции в дампе - белая (BGUtp и E6UKyV, fill #FFFFFF), а не
     розовый фон страницы (--bg = #FFF7FA). Без своей заливки секция
     просвечивала фоном body: разница в 8 единиц синего пиксельный порог
     прощает, но на полосе в 650px рядом с белым разговорником она видна. */
  background: var(--white);
}

.vl-path__in {
  display: flex;
  flex-direction: column;
  gap: 46px;
}

.vl-path__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vl-path__lead {
  max-width: 800px;
  line-height: 31px;   /* 17 x 1.8 = 30.6, в макете строка целая - 31 */
}

.vl-path__steps {
  /* flex: 1 1 0 здесь не даёт поровну делённых карточек: у первой
     карточки нет своих padding/border (граница только у остальных),
     и flex-basis:0 с box-sizing:border-box у браузера всё равно считает
     free-space без них - в итоге первая карточка выходит уже остальных
     на те же 28px padding + 1px границы. Грид делит дорожки поровну
     независимо от padding/border внутри ячейки - ровно то, что нужно. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
}

.vl-path__step {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vl-path__step:not(:first-child) {
  padding: 0 14px;
  border-left: 1px solid var(--line-h);
}

.vl-path__step-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vl-path__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--accent-text);
}

.vl-path__icon svg { width: 22px; height: 22px; }

.vl-path__num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 32px;
  line-height: 44px;   /* метрика Manrope x1.36: 32 x 1.36 = 43.52 */
  color: var(--line-h);
}

.vl-path__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 22px;
  line-height: 30px;   /* метрика Manrope x1.36: 22 x 1.36 = 29.92 */
  color: var(--text);
}

.vl-path__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 26px;   /* в макете явно 1.75: 15 x 1.75 = 26.25, строка целая - 26 */
  color: var(--text-2);
}

@media (max-width: 860px) {
  .vl-path { padding-block: 56px; }

  /* На телефоне (E6UKyV) между лидом и первым шагом в макете нет
     зазора вовсе - в отличие от десктопных 46px. */
  .vl-path__in { gap: 0; }

  /* Общий .hw-h2 на телефоне даёт line-height:31px (28 x 1.1 - конвенция
     prazdnik.css для заголовков секций), а в дампе этого блока у "H"
     высота ровно 30px - здесь единственное место на странице, где общий
     заголовок на 1px выше макета, и это расхождение накапливается в
     высоту всей секции. Поправка только тут, общий класс не трогаем. */
  .vl-path__head .hw-h2 { line-height: 30px; }

  .vl-path__lead { font-size: 15px; line-height: 27px; }   /* 15 x 1.8 = 27 точно */

  .vl-path__steps {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .vl-path__step:not(:first-child) {
    padding: 0 14px;
    /* В макете (E6UKyV) между шагами на телефоне нет линий - только
       отступ, поэтому границу здесь снимаем (в отличие от десктопа). */
    border-left: none;
  }

  .vl-path__title { font-size: 20px; line-height: 27px; }   /* 20 x 1.36 = 27.2 */
  .vl-path__text { font-size: 14px; line-height: 25px; }    /* 14 x 1.75 = 24.5, в макете строка 25 */
}