/* ============================================================================
   ПЕРВЫЙ ЭКРАН: ПОТОЛОК ВЫСОТЫ

   mailcore-hero-mail-v5.css привязал оранжевую панель к окну:

       height: calc(100svh - var(--header-height) - 16px);

   На ноутбуке это ровно то, что задумано: панель упирается в нижний край
   экрана, и первый экран читается как один кадр. Но высота ничем не
   ограничена сверху, а содержимое панели — заголовок, лид, кнопки и строка
   цены — вместе занимают 440px и не растут. Дальше арифметика:

       окно 900px  → панель 812px, вокруг текста по 105px — так и задумано;
       окно 1080px → панель 992px, снизу 364px пустой заливки;
       окно 1440px → панель 1352px, сверху 368px, снизу 544px.

   На большом мониторе это уже не кадр, а оранжевый простой: блок текста
   плавает в пустоте, а следующая секция не показывается вообще.

   Потолок в 860px возвращает пропорцию. Ноутбучные высоты (до 948px окна)
   он не трогает — там панель по-прежнему доходит до низа экрана. На 1080p
   и выше панель перестаёт расти, поля вокруг текста остаются ~120px, а
   снизу появляется кромка следующей секции — обычная и полезная подсказка,
   что страница продолжается.

   Потолок здесь не новость: так было в mailcore-home-cf-v1.css,
   min-height: min(780px, calc(100svh - var(--header-height) - 16px)).
   Редизайн v2/v5 его потерял.
   ========================================================================= */

@media (min-width: 64rem) and (min-height: 37.5rem) {
  .site-home--cf-v2 .hero__surface {
    height: min(calc(100svh - var(--header-height) - 16px), 860px);
  }
}

/* ============================================================================
   ПЕРВЫЙ ЭКРАН БЕЗ ПОЛОСЫ КОНВЕРТОВ

   Под текстом была отдельная строка сетки (clamp(108px, 18svh, 176px)) для
   летающих конвертов. Конверты убраны вместе с бесконечной анимацией — см.
   mailcore-hero-mail-v2.js, — а место под них держали ещё четыре правила в
   разных файлах, каждое своё:

     — вторая строка сетки панели (v5, десктоп);
     — нижний отступ текста 168px (v1) и 140px (cf-v2) — «под конверты»;
     — минимальная высота панели 720/740px на телефоне (v1);
     — подъём текста на 36–64px на планшете (v4), чтобы он не садился на
       полосу конвертов.

   Отсюда и было «лишнее место снизу»: на 1440×900 над текстом оставалось
   127px, под ним — 257. Все четыре сняты здесь, и текст встаёт по центру
   панели. Нижнее свечение (::after у .hero__surface) — это фон, а не
   содержимое, оно остаётся и держит низ панели. */
.site-home--cf-v2 .hero__surface {
  grid-template-rows: minmax(0, 1fr);
}

.site-home--cf-v2 .hero__copy {
  align-self: center;
  inset-block-start: 0;
  padding-block: clamp(56px, 9vw, 104px);
}

@media (min-width: 64rem) and (min-height: 37.5rem) {
  .site-home--cf-v2 .hero__surface {
    grid-template-rows: minmax(0, 1fr);
  }

  .site-home--cf-v2 .hero__copy {
    padding-block: clamp(24px, 5svh, 56px);
  }
}

@media (max-width: 47.999rem) {
  .site-home--cf-v2 .hero__surface {
    min-height: 0;
  }

  .site-home--cf-v2 .hero__copy {
    padding-block: 64px 72px;
  }
}

/* Адрес по центру строки, а не у левого края коробки в 21 знак: коробку
   держали фиксированной, чтобы бесконечный цикл адресов разной длины не
   дёргал строку. Цикла больше нет, а итоговый адрес стоит постоянно — и
   стоял смещённым влево на ширину пустого хвоста коробки. */
.site-home--cf-v2 .hero-address {
  width: auto;
  justify-items: center;
  padding-inline-start: 0;
  text-align: center;
}

.site-home--cf-v2 .hero-address__typing {
  justify-self: center;
}

/* Последняя строка лида повисала одним хвостом («— по необходимости.»).
   balance уравнивает строки, pretty — только убирает висячее слово. */
.site-home--cf-v2 .hero__lead-line {
  text-wrap: balance;
}