/* Наезжает на нижнюю часть value-prop (margin-top: -125px = ровно та
   глубина, на которую заходит фото под верхний ряд плашек). Первые 125px
   этой секции оставляем прозрачными — там ещё доигрывает градиент-фейд
   фото value-prop (сам фейд живёт в value-prop.css, здесь мы его просто
   не перекрываем); дальше — сплошной var(--color-solutions-bg), в цвет,
   к которому фото уже пришло к этой точке, поэтому шва не видно. */
.process-steps {
  position: relative;
  z-index: 1;
  margin-top: -125px;
  padding: 0 75px 100px;
  background: linear-gradient(to bottom, transparent 125px, var(--color-solutions-bg) 125px);
}

.process-steps__grid {
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 23px;
  max-width: var(--content-width);
  margin-inline: auto;
}

.step-card {
  position: relative;
  background: var(--color-step-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-step-card);
}

/* Отдельный слой под overflow:hidden — сам .step-card его иметь не может,
   иначе обрежется его же box-shadow (см. заметку про обрезку теней в
   project/frontend/MEMORY.md). border-radius: inherit + overflow:hidden
   здесь клипуют красную полосу ховера строго по форме карточки, а не
   по своему собственному (много меньшему) радиусу. */
.step-card__surface {
  /* Карточки в ряду растягиваются по CSS Grid (align-items: stretch по
     умолчанию) под самую высокую в ряду — без height:100% этот слой
     оставался бы своей естественной (более короткой) высоты и "плавал"
     вверху растянутой карточки, а красная полоса при ховере съезжала
     вместе с ним, отрываясь от настоящего низа карточки. */
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 26px;
  border-radius: inherit;
  overflow: hidden;
}

.step-card__surface::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: transparent;
  transition: background 0.2s ease;
}

.step-card:hover .step-card__surface::after {
  background: var(--color-accent);
}

.step-card .icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  margin-right: 26px;
}

.step-card__divider {
  flex-shrink: 0;
  align-self: stretch;
  width: 1px;
  margin: 35px 40px 35px 0;
  background: var(--color-step-divider);
}

.step-card__body {
  /* align-self: flex-start вместо наследуемого от .step-card
     align-items: center — иначе при разной длине текста (карточки
     заполняются из админки, длина заголовка/описания непредсказуема)
     весь блок номер+заголовок+текст центрируется по своей же высоте и
     "пляшет" по вертикали между карточками вместо общей верхней линии. */
  align-self: flex-start;
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 0;
}

.step-card__number {
  font-size: var(--fs-step-title);
  line-height: var(--lh-step-title);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
}

.step-card__title {
  margin: 0;
  font-size: var(--fs-step-title);
  line-height: var(--lh-step-title);
  font-weight: var(--fw-bold);
  color: var(--color-heading-dark);
  overflow-wrap: break-word;
}

.step-card__description {
  margin: 0;
  font-size: var(--fs-step-desc);
  line-height: var(--lh-step-desc);
  color: var(--color-ink);
  opacity: 0.6;
  overflow-wrap: break-word;
}

/*
  Мобильная адаптация (600px, база
  390px). Раскладка меняется полностью — вертикальный список полноширинных
  карточек вместо сетки 3×2, у каждой карточки СВОЯ высота (не формула, а
  конкретные числа из макета, блок «6 шагов работы»), поэтому
  задаётся через nth-child по каждой из 6 карточек.

  Overlap с value-prop: -75px (не -125px, как на десктопе — другая геометрия
  фото/карточек, см. value-prop.css мобильный блок). Первая карточка на
  мобильном начинается вплотную к верху секции (нет padding-top, нет
  бокового зазора — card width == доступная ширина), поэтому она полностью
  закрывает собой хвост фото value-prop без градиента-фейда: фейд как на
  десктопе здесь не нужен.
*/
@media (max-width: 599.98px) {
  .process-steps {
    margin-top: max(-75px, calc(-75 / 390 * 100vw));
    padding: 0 min(10px, calc(10 / 390 * 100vw)) min(60px, calc(60 / 390 * 100vw));
    background: var(--color-solutions-bg);
  }

  .process-steps__grid {
    display: flex;
    flex-direction: column;
    gap: min(10px, calc(10 / 390 * 100vw));
    max-width: none;
  }

  .step-card {
    width: min(370px, calc(370 / 390 * 100vw));
    margin-inline: auto;
    box-shadow: 0 min(13px, calc(13 / 390 * 100vw)) min(33.5px, calc(33.5 / 390 * 100vw)) rgba(0, 0, 0, 0.04);
  }

  /* Высота карточки — своя на каждый шаг (текст не переносится по сетке,
     карточка просто выше/ниже) — числа по каждому шагу взяты из макета. */
  .step-card:nth-child(1),
  .step-card:nth-child(2),
  .step-card:nth-child(4) {
    height: min(171px, calc(171 / 390 * 100vw));
  }

  .step-card:nth-child(3) {
    height: min(219px, calc(219 / 390 * 100vw));
  }

  .step-card:nth-child(5),
  .step-card:nth-child(6) {
    height: min(267px, calc(267 / 390 * 100vw));
  }

  .step-card__surface {
    padding: 0 min(20px, calc(20 / 390 * 100vw));
  }

  .step-card .icon {
    width: min(50px, calc(50 / 390 * 100vw));
    height: min(50px, calc(50 / 390 * 100vw));
    margin: 0 min(20px, calc(20 / 390 * 100vw)) 0 0;
  }

  .step-card__divider {
    margin: min(30px, calc(30 / 390 * 100vw)) min(25px, calc(25 / 390 * 100vw)) min(30px, calc(30 / 390 * 100vw)) 0;
  }

  .step-card__body {
    padding: min(30px, calc(30 / 390 * 100vw)) 0;
  }

  .step-card__number,
  .step-card__title {
    font-size: min(17px, calc(17 / 390 * 100vw));
    line-height: min(25px, calc(25 / 390 * 100vw));
  }

  .step-card__description {
    font-size: min(13px, calc(13 / 390 * 100vw));
    line-height: min(23px, calc(23 / 390 * 100vw));
  }

  /* На мобильной ширине (234px колонка) заголовок 06-й карточки с ручным
     <br> из данных переносится в 3 строки вместо 2 — лишняя строка съедает
     нижний паддинг карточки. В Figma это один сплошной текст без
     принудительного разрыва. Снимаем разрыв точечно, только для этой
     карточки (у остальных пяти второй <br> безвредный). */
  .step-card:nth-child(6) .step-card__title br {
    display: none;
  }
}