/* info-cards.css — блок 3: четыре белые инфо-карточки, наезжают на низ панели hero.
   Вёрстка по скрину клиента (совпадает с блоком в 1920.png).
   Ширина ряда = ширине панели hero (20px от краёв вьюпорта, как у .hero),
   а не контейнера с полями 80px — так в макете. */

.info-cards {
  /* Насколько ряд карточек поднят на синюю панель hero.
     110 на 1920 (замер по 1920.png) → 90 на 1600 → 70 на 1280 и ниже —
     теперь одной кривой вместо трёх ступеней. */
  --overlap: clamp(70px, 6.25vw - 10px, 110px);
  position: relative;
  z-index: 5;
  /* Боковой отступ ряда: 40 на 1920 (1920.png — ряд от x=40, карточка 445;
     Figma 1:3569 — x=40, ширина 1840), 30 на 1600 и ниже (1:22930 и 1:21505 —
     x=30 при ширине 1540 и 1140). */
  padding-inline: clamp(30px, 3.125vw - 20px, 40px);
  margin-top: calc(-1 * var(--overlap));
}

.info-cards__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 20 на 1920 → 10 на 1600 и ниже (в обоих фреймах адаптива gap 10) */
  gap: var(--gap-cards);
}

.info-cards__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(16px, 1.25vw, 24px);
  /* Высота карточки: 264 на 1920 → 220 на 1600 → 190 на 1280.
     Это резиновый минимум; если текст на узкой ширине не влезает,
     карточка растёт сама. */
  min-height: clamp(190px, max(9.375vw + 70px, 13.75vw), 264px);
  /* padding 32 на 1920 → 20 на 1600 и ниже (карточки 1:22931 и 1:21506) */
  padding: clamp(20px, 3.75vw - 40px, 32px);
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.info-cards__title {
  font-size: var(--fs-h4);
  line-height: 1.2;
}

/* Колонка текста. Доля 72% ширины карточки = макетные 320 при карточке 445 на
   1920 (и ~270 на 1600). ⚠️ Пол 240px (просьба клиента 30.07.2026): на узком
   десктопе (1025–1470) карточка мельчает, и чистые 72% давали ~190px — текст
   рвался в лапшу с пустотой справа. Пол держит колонку не уже макетных 240
   (её ширина на 1280), а на самых узких карточках текст заполняет её целиком
   (когда 240 больше content-box карточки, ширину ограничивает сама карточка).
   На 1920/1600 работает 72% — макет не тронут. */
.info-cards__text {
  max-width: max(72%, 240px);
}

/* Серые акценты внутри текста карточек */
.info-cards__muted {
  color: var(--color-gray-2);
}

/* ⚠️ Медиазапросы 1600 и 1280 удалены: наезд, боковое поле, зазор, высота,
   padding и ширина текста теперь интерполируются формулами выше и дают
   на этих ширинах ровно те же значения, что стояли в ступенях
   (1600 — наезд 90, поле 30, gap 10, высота 220; 1280 — наезд 70, высота 190). */

@media (max-width: 1024px) {
  .info-cards { padding-inline: 12px; }

  /* Ниже планшета карточки в один столбец: в 4 колонки текст нечитаем */
  .info-cards__list { grid-template-columns: 1fr; gap: 24px; }
}

/* Телефоны 360–767 — ряд 1:8351: x=10, ширина 340, column, gap 10;
   карточка padding 20, радиус 20, карточки 2–4 фиксированы по 188.
   Наезд на hero — 65: дети 1:8350 кончаются на y=730, карточки идут с 665. */
@media (max-width: 767px) {
  .info-cards {
    --overlap: 65px;
    padding-inline: var(--page-gap);
    /* Синее поле (его держит .hero-group, см. hero.css) не кончается на последней
       карточке: в макете низ карточек y=1446, низ синего 1496 (нода 1:8280 —
       49+1448), дальше идёт белый «Аттестат». Отступ = эти 50px. */
    padding-bottom: 50px;
  }

  .info-cards__list { gap: 10px; }

  .info-cards__card {
    min-height: 188px;
    gap: 20px;
    padding: 20px;
  }

  /* Первая карточка в макете «по контенту», без фикс. высоты */
  .info-cards__card:first-child { min-height: 0; }

  .info-cards__text { max-width: none; }
}