/* ==========================================================================
   Блок 3 — «Операционный спринт»

   Главный входной продукт. Фон и рамка — общие с блоком шагов, они живут
   на панели-обёртке (panel.css); здесь только содержимое.

   По скролле фон собирается из полосы во всю ширину в скруглённую карточку
   с белыми полями (scripts/frame.js).

   Шапка выровнена по центру: срок, название, подпись, кнопка. Она видна
   сразу и не анимируется — это продающий текст, его нужно прочитать без
   прокрутки. Проявляются по очереди только карточки снизу
   (scripts/reveal.js).
   ========================================================================== */

.sprint {
  position: relative;
  padding: var(--section-pad) var(--panel-pad);
  color: var(--color-white);
}

/* --- Живой фон ------------------------------------------------------------ */

/* Содержимое поверх фона. */
.sprint__inner {
  position: relative;
  z-index: 1;
}

/* --- Шапка по центру ------------------------------------------------------ */

.sprint__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
}

.sprint__title {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.sprint__note {
  /* 700px на макете 1440: на меньшей ширине последнее слово уезжало
     на отдельную четвёртую строку. */
  max-width: min(100%, max(400px, 48.6vw));
  text-wrap: balance;
  font-size: var(--fs-body);
  line-height: 1.3;
  letter-spacing: var(--tracking-ui);
}

.sprint__head .cta {
  margin-top: var(--space-8);
}

/* --- Три карточки --------------------------------------------------------- */

.sprint__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
  margin: var(--section-pad) 0 0;
  padding: 0;
  list-style: none;
}

/* Тот же язык, что у чёрных карточек первого экрана — точка, радиус 40,
   28px Medium, — но кегль берётся из общей шкалы страницы, а не от ширины
   карточки: здесь она втрое шире и внутреннее масштабирование дало бы
   несоразмерно крупный текст. */
.sprint-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-40);
  min-height: 400px;
  padding: var(--space-40);
  border-radius: var(--radius-40);
  background-color: var(--color-white);
  color: var(--color-bg);
}

.sprint-card .dot {
  width: 20px;
  height: 20px;
  background-color: var(--color-bg);
}

.sprint-card__label {
  display: block;
  margin-bottom: var(--space-16);
  font-size: var(--fs-ui);
  line-height: 1;
  letter-spacing: var(--tracking-ui);
  color: rgba(4, 10, 10, 0.5);
}

.sprint-card__text {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}

/* ==========================================================================
   Адаптив
   ========================================================================== */

@media (max-width: 1023px) {
  .sprint {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .sprint__title {
    font-size: max(22px, 5vw);
  }

  .sprint__cards {
    grid-template-columns: 1fr;
  }

  .sprint-card {
    min-height: 0;
    gap: var(--space-32);
    padding: var(--space-24);
  }

  .sprint-card__text {
    font-size: max(19px, 3.4vw);
  }
}