/* Единый межстрочный интервал заголовков на всех размерах экрана.
   У NAMU Display высокие буквы: прежние значения 0.8–0.98 сближали строки
   до наложения. Единый интервал сохраняется и при переносах внутри span. */
:is(
  .calm-hero__title,
  .task__title,
  .sprint__title,
  .steps__title,
  .results__title,
  .cases__title,
  .products__title,
  .why__title,
  .team__title,
  .telegram__title
) {
  line-height: 1.1;
}

/* Единая шкала заголовков секций со второго блока.
   Файл подключён после стилей секций, чтобы они не меняли кегль. */

:is(
  .task__title,
  .sprint__title,
  .steps__title,
  .results__title,
  .cases__title,
  .products__title,
  .why__title,
  .team__title,
  .telegram__title
) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding-right: clamp(28px, 3vw, 48px);
  font-size: clamp(58px, 8.7vw, 150px);
}

/* При общем крупном кегле заголовок процесса больше не помещается в прежнюю
   половину сетки. На десктопе даём ему полную ширину, а шаги ставим ниже. */
@media (min-width: 901px) {
  .steps__intro {
    position: static;
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: clamp(560px, 72svh, 760px);
    justify-content: space-between;
    gap: clamp(52px, 7vw, 104px);
    padding-right: 0;
    padding-bottom: clamp(56px, 6vw, 88px);
    border-bottom: 1px solid var(--color-light-grid);
  }

  .steps__list {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .step {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .step__num {
    grid-column: 1;
  }

  .step__body {
    grid-column: 2 / -1;
  }
}

@media (max-width: 900px) {
  :is(
    .task__title,
    .sprint__title,
    .steps__title,
    .results__title,
    .cases__title,
    .products__title,
    .why__title,
    .team__title,
    .telegram__title
  ) {
    /* У NAMU Display отрицательный трекинг: без оптического поля крайняя
       буква выглядит прилипшей к линии сетки даже при формально верной ширине. */
    padding-right: clamp(22px, 4vw, 36px);
    font-size: clamp(48px, 9vw, 72px);
    overflow-wrap: anywhere;
  }

  :is(
    .task__title,
    .sprint__title,
    .steps__title,
    .results__title,
    .cases__title,
    .products__title,
    .why__title,
    .team__title,
    .telegram__title
  ) span {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 560px) {
  /* Воздух между мобильными секциями 02–10. Отступ находится внутри
     цветового поля блока, поэтому фон и вертикальная сетка не рвутся. */
  :is(
    .task,
    .sprint,
    .steps,
    .results,
    .cases,
    .products,
    .why,
    .team,
    .telegram
  ) {
    padding-top: clamp(44px, 12vw, 60px);
  }

  :is(
    .task__title,
    .sprint__title,
    .steps__title,
    .results__title,
    .cases__title,
    .products__title,
    .why__title,
    .team__title,
    .telegram__title
  ) {
    font-size: clamp(36px, 9.5vw, 42px);
    padding-right: 20px;
  }

  /* Не разрываем «измеримому» внутри слова. Уменьшается только
     декоративный сдвиг строки — кегль и общие поля секции не меняются. */
  .steps__title span:nth-child(2) {
    margin-left: 4%;
    overflow-wrap: normal;
    word-break: normal;
  }
}