/* ============================================================
   СЕКЦИЯ «steps» — ряд из четырёх клеток-шагов.
   Секция состоит только из ряда: заголовка в макете нет.

   Главная примета: рамка клетки НЕравномерная — сверху плашка
   14 px, с остальных сторон волосок 1 px (individualStrokeWeights
   в Figma). Обводка INSIDE, поэтому она съедает внутренние отступы.
   ============================================================ */

.steps {
  background: var(--bg);
}

/* Padding 134 из макета не мёртвый: он задаёт контентный бокс 1172,
   внутри которого ряд (1151.63) центруется. Отсюда фактические 144.19
   до первой клетки — их отдельно прописывать не нужно. */
.steps__inner {
  padding: calc(20 * var(--u)) calc(134 * var(--u)) calc(60 * var(--u));
}

.steps__row {
  display: flex;
  justify-content: center;
  gap: calc(10.5427 * var(--u));   /* itemSpacing из макета, как есть */
}

/* ---------- клетка ---------------------------------------- */

/* Высота жёсткая: в Figma контент (182.23) на 0.23 px выше рамки,
   и разницу гасит вертикальное центрирование — повторяем это. */
.steps__card {
  /* #1E1E1E в общую палитру не входит — это собственный цвет секции,
     поэтому держим его локально, а не подменяем на --line (#2F2F2F). */
  --steps-bd: #1e1e1e;

  flex: 0 0 calc(280 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(182 * var(--u));
  border: 1px solid var(--steps-bd);
  border-top: calc(14 * var(--u)) solid var(--steps-bd);
  /* Отступы посчитаны от cap-height: Figma меряет текст по прописным,
     браузер — по line-box. Поправка для Inter = 0.23623em:
     сверху 38 − 14(рамка) − 3.5435, снизу 20 − 1(рамка) − 3.5435. */
  padding: calc(20.4565 * var(--u)) calc(20 * var(--u) - 1px) calc(16.4565 * var(--u) - 1px);
  transition: border-color 180ms var(--ease);
}

/* :active — разумный дефолт для тача: ховера там нет,
   а состояние выбора дизайнером не описано. */
.steps__card:hover,
.steps__card:active {
  border-color: var(--accent);
}

.steps__stack {
  display: flex;
  flex-direction: column;
  gap: calc(21.259 * var(--u));    /* 30 между cap-боксами − поправки 3.54 и 5.20 */
}

/* ---------- номер [ NN ] ----------------------------------- */

.steps__num {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: max(12px, calc(15 * var(--u)));
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--grey-70);
  transition: color 180ms var(--ease);
}

.steps__num--end {
  text-align: right;
}

/* По комментарию дизайнера #24 краснеет вся клетка целиком:
   и рамка, и оба номера. Заголовок остаётся белым. */
.steps__card:hover .steps__num,
.steps__card:active .steps__num {
  color: var(--accent);
}

/* ---------- заголовок шага --------------------------------- */

.steps__title {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: max(12px, calc(22 * var(--u)));
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--white);
}

.steps__strong {
  font-weight: 600;
}

/* ---------- мобилка (375) ---------------------------------- */

@media (max-width: 599px) {
  /* Фиксированная высота 800 при контенте 779.63 — «мёртвый» низ
     макета; вместо неё симметричный padding 20. */
  .steps__inner {
    padding: calc(20 * var(--u));
  }

  .steps__row {
    flex-direction: column;
  }

  .steps__card {
    flex: 0 0 auto;
    width: 100%;
  }
}