/* ============================================================
   Первый экран — вписывание в высоту окна.

   Решение Павла 18.10.2026, вариант «В»: убрать обрезку первого экрана
   и сделать верх соразмерным.

   Почему отдельным файлом: `sections.css` заперт как чужой слайс
   (в нём норма карусели кейсов), править его нельзя. Этот файл
   подключается последним и перебивает только размеры первого экрана.

   Что меняется относительно эталона Тилды (замер 11.09.2026):
   - `.hero` сверху 61 → 24, снизу 132 → clamp(48…110);
   - `.hero__text` от верха карточки 82 → clamp(40…64);
   - `.hero__card` — высота по остатку окна, но не больше эталонных 639
     и не меньше 520 (ниже текст начинает вылезать из карточки).

   Учтено: на отраслевых страницах (/stroyka/, /ip-ooo/, /it-startapy/,
   /proizvodstvo/) над первым экраном стоят хлебные крошки — 41 px.
   Без вычета карточка вылезала за окно на те же 41 px.

   Низкие окна (<=820): чуть плотнее типографика и нижний отступ, иначе
   длинный заголовок /proizvodstvo/ (5 строк) не влезает в карточку.

   Мобильный слой (<=980) не трогается — там своя раскладка.
   ============================================================ */

@media (min-width: 981px) {
	.hero {
		padding-top: 24px;
		padding-bottom: clamp(48px, 12vh, 110px);
	}

	.hero__card {
		aspect-ratio: auto;
		height: calc(100vh - 80px - 24px - clamp(48px, 12vh, 110px));
		height: calc(100svh - 80px - 24px - clamp(48px, 12vh, 110px));
		max-height: 639px;
		min-height: 520px;
	}

	/* Отраслевые страницы с хлебными крошками над первым экраном. */
	body:has(nav.crumbs) .hero__card {
		height: calc(100vh - 80px - 41px - 24px - clamp(48px, 12vh, 110px));
		height: calc(100svh - 80px - 41px - 24px - clamp(48px, 12vh, 110px));
	}

	.hero__text {
		padding-top: clamp(40px, 7vh, 64px);
	}
}

/* Низкие окна: плотнее по вертикали, чтобы длинный заголовок влезал. */
@media (min-width: 981px) and (max-height: 820px) {
	.hero {
		padding-bottom: 56px;
	}

	.hero__card {
		height: calc(100vh - 80px - 24px - 56px);
		height: calc(100svh - 80px - 24px - 56px);
	}

	body:has(nav.crumbs) .hero__card {
		height: calc(100vh - 80px - 41px - 24px - 56px);
		height: calc(100svh - 80px - 41px - 24px - 56px);
	}

	.hero__text {
		padding-top: 40px;
	}

	.hero__text h1 {
		font-size: 47px;
		line-height: 1.14;
	}
}

/* ------------------------------------------------------------
   Мобильный и планшетный слой (<=980): высоту первого экрана
   задаёт не отступ, а кадр — он растянут по aspect-ratio и на
   375 px занимает 471 px, на 768 px — 424 px. Из-за этого экран
   вылезал за окно: /kontakty 375/414, /uslugi, /blog, /kviz 768.
   Ограничиваем кадр долей окна; object-fit: cover уже стоит,
   поэтому снимок обрезается, а не плющится.
   ------------------------------------------------------------ */
@media (max-width: 980px) {
	.hero {
		padding-bottom: 40px;
	}

	.hero__bg {
		max-height: 34vh;
	}
}