/* ==========================================================================
   1 блок — hero, node 743:2704, y 258–1160
   Моно-подзаголовок слева (y=380, x=38) + фото ростера справа (x=1329..1880,
   y=119..442) + логотип-надпись «ИДЕЯ В ЧАШКЕ» во всю ширину (y≈675..1160).

   Отступы сверху — padding, а не margin: секция без своего padding-block,
   верхние margin'ы детей схлопывались бы наружу.
   ========================================================================== */

.hero {
  padding-bottom: 3.75rem;
}

/* Геометрия десктопного героя. Раньше стояла inline на самой секции и на
   подзаголовке — значения перенесены сюда один в один, чтобы их можно было
   не применять на мобилке. Проверяется tools/desktop-guard.py: на 1920
   страница обязана остаться попиксельно прежней. */
@media (min-width: 992px) {
  #hero {
    height: calc(100vh - 110px);
    padding-bottom: 32px;
    margin-bottom: 339px;
  }

  .hero__row { margin-bottom: 54px; }

  .hero__text { font-size: 1.5rem; }
}

.hero__lead {
  padding-top: 17.875rem; /* 286px от низа шапки до строки подзаголовка (y=380) */
  line-height: 1.45;    /* в макете интерлиньяж 26px при кегле 18 */
}


.hero__media {
  max-width: var(--media-w); /* та же переменная, что у хвоста шапки */
}

/* Видео занимает ту же коробку, что раньше картинка: ширина от --media-w,
   пропорция 551:323 из макета. Исходник 906×624 выше по пропорции, поэтому
   object-fit: cover подрезает его сверху и снизу — рамка не должна ехать,
   на её правый край завязан хвост шапки (см. header.css). */
.hero__media img,
.hero__media video {
  width: 100%;
  aspect-ratio: 551 / 323;
  object-fit: cover;
}

/* Надпись-логотип: цельный SVG 1840×476.743, поля 40px как у шапки */
.hero__wordmark {
  /*padding-top: 14.0625rem; !* 225px *!*/
}

.hero__wordmark img {
  width: 100%;
}

/* --- Мобильный макет (954:1683) -------------------------------------------
   Вертикаль по макету, координаты — от верха страницы:
     108…540   фото 438×432
     556       подзаголовок, 4 строки 21/23
     875…988   вордмарк 438×113.5
     1013…1045 кнопка 438×32
     1173      начало 2 блока

   Всё, что идёт во всю ширину, поджато на --grid-inset: контейнер стоит по
   линиям сетки (15…483), а блоки в макете — 30…468.
------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

  /* Поджатие вешаем на колонку, а не на саму figure: у неё стоят утилиты
     m-0 p-0, а они с !important и любой свой отступ съедают.
     Заодно гасим отрицательные поля: на элементе висит и col-*, и row, а
     .row объявляет свой --bs-gutter-x: 1.5rem (внешний g-0 на него не
     распространяется) и разводит края на −12px. */
  .hero__media-col {
    margin-inline: 0;
    padding-inline: var(--grid-inset);
  }

  .hero__media {
    max-width: none;
    width: 100%;
  }

  .hero__media video,
  .hero__media img {
    aspect-ratio: 438 / 432;   /* на десктопе 551/323 — кадр другой */
  }

  .hero__text {
    margin-top: 0.8125rem;     /* 13px: низ фото 540 → верх строки 556 (по
                                  минимуму расхождения, не по верху литеры:
                                  у макета в первой строке вылезает бревис Й) */
    padding-inline: var(--in-text);
    font-size: var(--fs-lead);
    line-height: 1.15;         /* 23px при кегле 20 */
    letter-spacing: -0.01em;   /* у остального моно −0.05em, тут свой */
  }

  /* Низ героя — вордмарк и кнопка — прижимается к низу экрана тем же приёмом,
     что на десктопе: высота секции от окна плюс mt-auto на вордмарке (утилита
     уже стоит в разметке). Зазор в 230 px из макета больше не задаётся числом:
     он и есть та самая свободная высота, которую mt-auto отдаёт вордмарку.

     Потолок min() — ради проверки на 498. Там окно браузера произвольной
     высоты, и от 100svh герой растянулся бы выше макета, утащив за собой всю
     страницу. 69.625rem — его макетная высота (1114 = 50 поле + 432 фото +
     13 + 92 текст + 230 зазор + 113.5 вордмарк + 24.5 + 32 кнопка + 127 поле
     снизу), поэтому на высоком окне зазор выходит ровно макетным, а на
     невысоком экране телефона поджимается сам.

     svh, а не vh и не dvh: vh — высота БЕЗ нижней плашки браузера, то есть
     ровно та ошибка, из-за которой кнопка под неё и уезжала; dvh дышит вместе
     с плашкой, и вордмарк дёргался бы на каждой прокрутке. Строка на vh выше —
     запасная, для движков без svh. */
  #hero {
    padding-top: 3.125rem;     /* 50px: низ шапки 58 → верх фото 108 */
    padding-bottom: 4.9375rem; /* 127px: низ кнопки 1045 → начало 2 блока 1173 */
    display: flex;
    flex-direction: column;
    min-height: min(100vh, 69.625rem);
    min-height: min(100svh, 69.625rem);
  }

  /* Вордмарк тянется на 438 и сам берёт высоту из пропорции svg (3.859),
     давая ровно 113.5 — как в макете. */
  .hero__wordmark {
    padding-top: 0;
    padding-inline: var(--grid-inset);
  }

  .hero__cta {
    margin-top: 1.53125rem;    /* 24.5px: низ вордмарка 988.5 → верх кнопки 1013 */
    margin-inline: var(--grid-inset);
  }
}