/*
 * Герой главной страницы.
 *
 * Заменяет виджет Slider Revolution нативными виджетами Elementor. Размеры не
 * подобраны на глаз: сняты с работающего слайдера на четырёх ширинах
 * (412, 768, 1024, 1350) пробой scripts/perf/hero-check.js.
 *
 * Slider Revolution масштабирует слайд целиком: внутри своей полосы он умножает
 * все размеры на vw / <верхняя граница полосы>. Отсюда и полосы, и проценты:
 *
 *   > 1240 px    фиксированные значения: заголовок 80, описание 18/26,
 *                кнопка 16/60 с паддингом 60, текстовый блок 793
 *   779-1240     та же база, делённая на 1240
 *   481-778      база 778:  заголовок 60, описание 16/24, кнопка 16/59,
 *                паддинг 50, текст во всю ширину минус 40
 *   <= 480       база 480:  заголовок 42, описание 14/24, кнопка 14/55,
 *                паддинг 47
 *
 * Высота (2026-08-05, просьба владельца) больше не слайдерная (800 и полосы
 * от него), а «шапка + герой = первый экран»: 100dvh минус замеренная высота
 * шапки — 101px при ширине от 779, 80px уже. Строка со 100vh — фолбэк для
 * браузеров без dvh; на мобильных dvh честно учитывает адресную строку.
 *
 * Отбивки между текстами (30 и 50 px) слайдер задавал только для десктопа и
 * мобильного, а на промежуточных полосах масштабировал их по базе 1240 —
 * здесь ровно так же.
 *
 * Перемерить после любой правки: node scripts/perf/hero-check.js
 * (после намеренной смены геометрии пересоздать эталон: --baseline).
 */

/* --- каркас -------------------------------------------------------------- */

.somea-hero {
	position: relative;
	height: calc(100vh - 101px);
	height: calc(100dvh - 101px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/*
 * Во всю ширину окна. Тема держит контент в колонке 1150 px, а слайдер рисовал
 * фон и затемнение по всей ширине вьюпорта — замер это подтверждает:
 * sr7-content 1350 px при вьюпорте 1350.
 *
 * Селектор с body не для красоты: Elementor режет верхнеуровневый контейнер
 * правилом `:is(.elementor-section-wrap, [data-elementor-id]) > .e-con` со
 * специфичностью (0,2,0), и одного класса не хватает — 100vw упирается в
 * max-width: 100% и даёт ширину колонки темы. body.home .somea-hero — (0,2,1),
 * выигрывает независимо от порядка файлов в склейке LiteSpeed.
 */
body.home .somea-hero {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/*
 * 100vw включает полосу прокрутки, поэтому на десктопе с видимым скроллбаром
 * герой на несколько пикселей шире доступной ширины. clip обрезает вылет, но,
 * в отличие от hidden, не делает предка контейнером прокрутки и не ломает
 * position: sticky внутри.
 */
body.home #site-content {
	overflow-x: clip;
}

/* Затемнение поверх фото, под текстом. */
.somea-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.25);
	pointer-events: none;
}

/* Виджет изображения целиком становится подложкой. */
.somea-hero .somea-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.somea-hero .somea-hero__bg .elementor-widget-container,
.somea-hero .somea-hero__bg img {
	width: 100%;
	height: 100%;
}

.somea-hero .somea-hero__bg img {
	display: block;
	object-fit: cover;
	object-position: 50% 50%;
}

.somea-hero .somea-hero__inner {
	position: relative;
	z-index: 2;
	width: 793px;
	max-width: 100%;
	padding: 0;
	gap: 0;
	text-align: center;
}

/* --- типографика: полоса > 1240 px --------------------------------------- */

/*
 * Фолбэк с подгонкой метрик. Playfair Display приезжает через отложенный
 * webfontloader, и до него заголовок рендерится Times'ом. Playfair на 8.5%
 * шире (замерено канвасом на тексте заголовка: 1785.7 против 1646.4 при
 * 80px), перевёрстка строк при подмене двигала всю страницу — Lighthouse
 * насчитывал за это 0.29 CLS, почти весь бюджет метрики. size-adjust
 * раздувает Times до ширины Playfair: строки ломаются в тех же местах, и
 * подмена шрифта проходит без сдвига.
 */
@font-face {
	font-family: "Playfair Fallback";
	src: local("Times New Roman"), local("Times");
	size-adjust: 108.5%;
}

.somea-hero .somea-hero__title .elementor-heading-title {
	margin: 0;
	font-family: "Playfair Display", "Playfair Fallback", serif;
	font-weight: 400;
	font-size: 80px;
	line-height: 1;
	color: #fff;
}

/*
 * Отбивки между текстами — те самые «линейки» слайдера: 30 px до описания и
 * 50 px до кнопки.
 *
 * Снова селектор с body: Elementor обнуляет отступы виджетов внутри контейнера
 * правилом `.e-con .elementor-widget.elementor-widget` — класс там продублирован
 * ради специфичности (0,3,0). Двух классов не хватает, три с body дают (0,3,1).
 * Свойство берём то же самое, логическое, чтобы не спорить шорткатом с
 * лонгхендом.
 */
body.home .somea-hero .somea-hero__title {
	margin-block-end: 30px;
}

.somea-hero .somea-hero__desc p {
	margin: 0;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 26px;
	color: #fff;
}

body.home .somea-hero .somea-hero__desc {
	margin-block-end: 50px;
}

.somea-hero .somea-hero-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 60px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 60px;
	text-decoration: none;
	transition: border-color 0.3s;
}

.somea-hero .somea-hero-btn .elementor-button:hover,
.somea-hero .somea-hero-btn .elementor-button:focus {
	background: transparent;
	color: #fff;
	/* Ровно то, что слайдер держал в состоянии hover. */
	border-color: rgba(255, 255, 255, 0.75);
}

/*
 * Стрелка кнопки. В слайдере это <i class="material-icons">arrow_forward</i> —
 * 122 КБ шрифта MaterialIcons ради одного глифа. Здесь тот же глиф вписан в CSS
 * как data-URI: ноль сетевых запросов, чёткость на любом экране.
 */
.somea-hero .somea-hero-btn .elementor-button-text::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 1em;
	height: 1em;
	margin-left: 0.3em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- полоса 779-1240 px --------------------------------------------------- */

@media (max-width: 1240px) {
	.somea-hero .somea-hero__inner {
		width: 63.95vw;              /* 793 / 1240 */
	}

	.somea-hero .somea-hero__title .elementor-heading-title {
		font-size: 6.4516vw;         /* 80 */
	}

	body.home .somea-hero .somea-hero__title {
		margin-block-end: 2.4194vw;  /* 30 */
	}

	.somea-hero .somea-hero__desc p {
		font-size: 1.4516vw;         /* 18 */
		line-height: 2.0968vw;       /* 26 */
	}

	body.home .somea-hero .somea-hero__desc {
		margin-block-end: 4.0323vw;  /* 50 */
	}

	.somea-hero .somea-hero-btn .elementor-button {
		padding: 0 4.8387vw;         /* 60 */
		font-size: 1.2903vw;         /* 16 */
		line-height: 4.8387vw;       /* 60 */
	}
}

/* --- полоса 481-778 px ---------------------------------------------------- */

@media (max-width: 778px) {
	.somea-hero {
		/* Шапка ниже 779px ниже: 80px вместо 101. */
		height: calc(100vh - 80px);
		height: calc(100dvh - 80px);
	}

	.somea-hero .somea-hero__inner {
		width: calc(100vw - 40px);
	}

	.somea-hero .somea-hero__title .elementor-heading-title {
		font-size: 7.7121vw;         /* 60 */
	}

	.somea-hero .somea-hero__desc p {
		font-size: 2.0566vw;         /* 16 */
		line-height: 3.0848vw;       /* 24 */
	}

	.somea-hero .somea-hero-btn .elementor-button {
		padding: 0 6.4267vw;         /* 50 */
		font-size: 2.0566vw;         /* 16 */
		line-height: 7.5835vw;       /* 59 */
	}
}

/* --- полоса <= 480 px ----------------------------------------------------- */

@media (max-width: 480px) {
	.somea-hero .somea-hero__title .elementor-heading-title {
		font-size: 8.75vw;           /* 42 */
	}

	body.home .somea-hero .somea-hero__title {
		margin-block-end: 4.1667vw;  /* 20 */
	}

	.somea-hero .somea-hero__desc p {
		font-size: 2.9167vw;         /* 14 */
		line-height: 5vw;            /* 24 */
	}

	body.home .somea-hero .somea-hero__desc {
		margin-block-end: 6.25vw;    /* 30 */
	}

	.somea-hero .somea-hero-btn .elementor-button {
		padding: 0 9.7917vw;         /* 47 */
		font-size: 2.9167vw;         /* 14 */
		line-height: 11.4583vw;      /* 55 */
	}
}

/* --- отступ между шапкой и героем ----------------------------------------- */

/*
 * 89 px на десктопе и 67 на мобильном складывались из двух источников, оба
 * замерены: padding-top у .site-content (48.6 / 27) и margin-bottom у
 * .page-header-content (40). Заголовок страницы для главной отключён, но
 * обёртка всё равно рендерится и тащит свой отступ.
 *
 * Гасим только на главной: на остальных страницах в .page-header-content лежит
 * заголовок и отступ там осмыслен.
 */
body.home #site-content .site-content {
	padding-top: 0;
}

body.home .page-header-content {
	margin-bottom: 0;
}