/**
 * Главный экран первой страницы (template-parts/hero-home.php).
 *
 * Все вертикальные размеры заданы через clamp() с vh, чтобы экран
 * целиком помещался и на 1080p, и на ноутбучных 768px по высоте.
 */

.oh {
	--oh-orange: #f2701e;
	--oh-red:    #ee2b2b;
	--oh-gold:   #f5a623;
	--oh-muted:  #b6afab;
	--oh-line:   rgba(255, 255, 255, .1);

	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: 100vh;
	/* Шапка выведена из потока и лежит поверх экрана: верхний отступ
	   учитывает её высоту (~71px), иначе логотип уезжает под меню. */
	padding: clamp(80px, 10.5vh, 150px) 0 clamp(20px, 3.5vh, 44px);
	background-color: #0b0a0a;
	overflow: hidden;
}

/* Пока не принято согласие на cookie, плашка внизу перекрывает кнопки.
   Класс ставит сам плагин и снимает после принятия — освобождаем место
   только на это время, не ужимая экран остальным. */
body.cookies-not-set .oh {
	padding-bottom: 78px;
}

@media (max-width: 991px) {
	body.cookies-not-set .oh {
		padding-bottom: 96px;
	}
}

/* ---------- Светящаяся сфера ----------

   Нарисована градиентом, а не картинкой. Исходный PNG 494×671 приходилось
   растягивать вдвое: край размывался, цвет уплывал в грязно-жёлтый.
   Градиент держит чёткий край на любом экране — и это на один запрос меньше.

   Шар заведомо больше экрана, его центр уведён за правый край: в кадр
   попадает светящийся лимб, а не мяч целиком. */

.oh__glow {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	/* редкие искры в тёмной части, как в макете */
	background-image:
		radial-gradient(circle 1.5px at 34% 18%, rgba(255, 170, 70, .55), transparent 100%),
		radial-gradient(circle 1px   at 44% 63%, rgba(255, 150, 60, .45), transparent 100%),
		radial-gradient(circle 2px   at 39% 88%, rgba(255, 180, 80, .35), transparent 100%),
		radial-gradient(circle 1px   at 48% 31%, rgba(255, 160, 60, .4),  transparent 100%);
}

.oh__glow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 61.5%;
	width: max(148vh, 860px);
	aspect-ratio: 1;
	transform: translateY(-50%);
	border-radius: 50%;
	/* Светится не пятно сбоку, а сам край шара по всей дуге: у окружности
	   почти белое золото, глубже — оранжевый, красный и тёмная сердцевина.
	   Поэтому градиент идёт от ЦЕНТРА круга наружу, а не от его края. */
	/* closest-side обязателен: без него 100% градиента приходится на угол
	   квадрата (радиус × √2), яркий обод уезжает за пределы круга и край
	   получается тусклым. */
	background: radial-gradient(circle closest-side at 50% 50%,
		#3a0d0a 0%,
		#4d110d 28%,
		#6b1510 46%,
		#8e1d16 60%,
		#b1241a 71%,
		#d4331c 80%,
		#ee5520 87%,
		#fb8324 92%,
		#ffae42 96%,
		#ffe08a 100%);
	box-shadow: 0 0 170px 26px rgba(255, 110, 30, .3);
}

/* Затемнения поверх шара:
   сверху — под шапкой фон почти чёрный;
   слева — чтобы читались слоган и описание;
   справа — шар уходит в тень за светящимся краем, иначе вся правая
   половина остаётся ровно-красной, особенно верхний угол: там дальше
   от центра сферы, и градиент сам по себе светлее. */
.oh__glow::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg,
			rgba(11, 10, 10, .92) 0%,
			rgba(11, 10, 10, .8) 6%,
			rgba(11, 10, 10, .32) 15%,
			rgba(11, 10, 10, 0) 27%),
		radial-gradient(95% 75% at 100% 0%,
			rgba(11, 10, 10, .5) 0%,
			rgba(11, 10, 10, .22) 38%,
			rgba(11, 10, 10, 0) 66%),
		linear-gradient(90deg,
			rgba(11, 10, 10, 0) 54%,
			rgba(11, 10, 10, .32) 72%,
			rgba(11, 10, 10, .78) 85%,
			rgba(11, 10, 10, .94) 92%,
			rgba(11, 10, 10, .96) 100%),
		linear-gradient(90deg,
			rgba(11, 10, 10, .9) 0%,
			rgba(11, 10, 10, .42) 30%,
			rgba(11, 10, 10, 0) 50%);
}

.oh__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1540px;
	margin: 0 auto;
	/* Справа отступ больше: карточки заканчиваются там же, где гаснет
	   свечение сферы, и их рамки не выходят в тёмную зону. */
	padding: 0 clamp(16px, 6vw, 100px) 0 clamp(16px, 2.5vw, 40px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(320px, 30%, 440px);
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
}

/* ---------- Левая колонка ---------- */

/* Логотип и подпись — общий блок: подпись отступает ровно на ширину сферы */
.oh__brand {
	width: min(100%, 780px);
}

.oh__logo {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 0 72px rgba(255, 120, 40, .5));
}

.oh__tagline {
	/* Подпись подтягивается под сам логотип.
	   В картинке логотипа под словом «ОЛИМПИЯ» остаётся пустое место —
	   его занимает нижняя часть сферы. Без этого подъёма подпись
	   отрывалась от слова и висела заметно ниже, чем в макете.
	   Отрицательный отступ в процентах считается от ширины блока,
	   поэтому смещение сохраняется на любом размере логотипа. */
	margin: -6% 0 0;
	/* 33.5% — доля сферы в ширине логотипа, подпись начинается за ней */
	padding-left: 33.5%;
	color: #ded8d4;
	font-size: clamp(14px, 1.55vw, 24px);
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.oh__tagline span {
	display: block;
	/* Каждая строка задана в разметке. Переносить их ещё раз нельзя:
	   на узком логотипе подпись расползалась на три строки. */
	white-space: nowrap;
}

.oh__slogan {
	margin: clamp(12px, 2vh, 26px) 0 0;
	font-size: clamp(30px, 4.6vw, 74px);
	font-weight: 800;
	line-height: .94;
	letter-spacing: -.01em;
	text-transform: uppercase;
}

.oh__slogan::before {
	content: "";
	display: block;
	width: clamp(44px, 4vw, 66px);
	height: 7px;
	margin-bottom: clamp(10px, 1.8vh, 22px);
	border-radius: 3px;
	background: linear-gradient(90deg, #f5a623, #ee2b2b);
}

.oh__slogan span {
	display: block;
}

.oh__slogan-hot {
	background: linear-gradient(90deg, #f5a623 0%, #f2701e 48%, #ee2b2b 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.oh__slogan-cool {
	color: #fff;
}

/* Если браузер не умеет обрезать фон по тексту — показываем сплошной цвет */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
	.oh__slogan-hot {
		color: var(--oh-orange);
		-webkit-text-fill-color: currentColor;
	}
}

@media (forced-colors: active) {
	.oh__slogan-hot {
		background: none;
		color: CanvasText;
		-webkit-text-fill-color: currentColor;
	}
}

.oh__lead {
	max-width: 760px;
	margin: clamp(10px, 1.6vh, 18px) 0 0;
	color: var(--oh-muted);
	font-size: clamp(14px, 1.08vw, 17px);
	line-height: 1.5;
}

.oh__lead span {
	display: block;
}

/* ---------- Поиск ---------- */

.oh__search {
	max-width: 700px;
	margin: clamp(14px, 2vh, 24px) 0 0;
}

.oh__search .dgwt-wcas-search-wrapp {
	width: 100%;
	max-width: 100%;
	margin: 0;
}

.oh__search .dgwt-wcas-sf-wrapp {
	position: relative;
	display: flex;
	align-items: center;
	background: rgba(20, 17, 16, .92);
	border: 1px solid var(--oh-line);
	border-radius: 14px;
	transition: border-color .2s ease, background-color .2s ease;
}

.oh__search .dgwt-wcas-sf-wrapp:hover,
.oh__search .dgwt-wcas-sf-wrapp:focus-within {
	background: rgba(26, 22, 20, .96);
	border-color: rgba(242, 112, 30, .55);
}

/* Лупа слева — метка поля, кликов не перехватывает */
.oh__search .dgwt-wcas-sf-wrapp::before {
	content: "";
	position: absolute;
	left: 22px;
	top: 50%;
	width: 20px;
	height: 20px;
	transform: translateY(-50%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d8683' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat center / contain;
	pointer-events: none;
	z-index: 2;
}

.oh__search .dgwt-wcas-search-input {
	flex: 1 1 auto;
	height: 60px !important;
	padding: 0 60px 0 54px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 14px !important;
	box-shadow: none !important;
	color: #f3f0ee !important;
	font-size: 16px !important;
	line-height: 60px;
}

.oh__search .dgwt-wcas-search-input::placeholder {
	color: #8d8683;
	opacity: 1;
}

/* Кнопка отправки — оранжевая плашка со стрелкой */
.oh__search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	position: absolute !important;
	right: 7px !important;
	left: auto !important;
	top: 50% !important;
	bottom: auto !important;
	width: 44px !important;
	min-width: 44px !important;
	max-width: 44px !important;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: translateY(-50%) !important;
	background: linear-gradient(90deg, #f5a623 0%, #f2701e 46%, #ee2b2b 100%) !important;
	border: 0 !important;
	border-radius: 11px !important;
	box-shadow: 0 4px 14px rgba(238, 43, 43, .32) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: box-shadow .2s ease, filter .2s ease;
}

.oh__search .dgwt-wcas-search-submit:hover {
	box-shadow: 0 6px 20px rgba(238, 43, 43, .5) !important;
	filter: brightness(1.06);
}

.oh__search .dgwt-wcas-search-submit svg,
.oh__search .dgwt-wcas-search-submit .dgwt-wcas-ico-magnifier {
	display: none !important;
}

.oh__search .dgwt-wcas-search-submit::after {
	content: "";
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform .2s ease;
}

.oh__search .dgwt-wcas-search-submit:hover::after {
	transform: translateX(3px);
}

.oh__search .dgwt-wcas-search-submit:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.oh__search .dgwt-wcas-preloader {
	right: 58px !important;
}

.oh__search .dgwt-wcas-voice-search {
	display: none;
}

/* ---------- Кнопки действия ---------- */

.oh__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: clamp(12px, 1.8vh, 20px) 0 0;
}

.oh__btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: clamp(46px, 6.6vh, 60px);
	padding: 0 26px;
	border-radius: 14px;
	font-size: clamp(14px, 1.1vw, 17px);
	font-weight: 600;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

/* текст занимает свободное место, стрелка прижимается к правому краю */
.oh__btn > span {
	margin-right: auto;
}

.oh__btn .oh-ico {
	flex: none;
	width: 20px;
	height: 20px;
}

/* Главное действие: тот же градиент, что у кнопки поиска и «Каталога»
   в шапке — оранжевый акцент на сайте один. */
.oh__btn--solid {
	min-width: 356px;
	color: #fff;
	background: linear-gradient(90deg, #f5a623 0%, #f2701e 46%, #ee2b2b 100%);
	box-shadow: 0 10px 30px rgba(238, 43, 43, .28);
}

.oh__btn--solid:hover,
.oh__btn--solid:focus-visible {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 36px rgba(238, 43, 43, .42);
}

/* Второстепенное действие: нейтральный контур, оранжевый появляется
   только при наведении — иначе два оранжевых пятна спорят друг с другом. */
.oh__btn--ghost {
	position: relative;
	min-width: 318px;
	color: #f0ece9;
	background: transparent;
	border: 0;
}

/* Рамка нарисована псевдоэлементом с той же растяжкой цветов, что у заливки.
   Через border так не получится: он не умеет градиент, а фон под кнопкой
   должен оставаться прозрачным. */
.oh__btn--ghost::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(90deg, #f5a623 0%, #f2701e 46%, #ee2b2b 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	opacity: .75;
	transition: opacity .2s ease;
	pointer-events: none;
}

.oh__btn--ghost:hover,
.oh__btn--ghost:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, .06);
	transform: translateY(-2px);
}

.oh__btn--ghost:hover::before,
.oh__btn--ghost:focus-visible::before {
	opacity: 1;
}

.oh__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ---------- Карточки показателей ---------- */

.oh__stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(10px, 2.2vh, 20px);
}

.oh__stat {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.3vw, 20px);
	padding: clamp(16px, 3vh, 34px) clamp(16px, 1.6vw, 24px);
	border-radius: 20px;
	/* Заметно темнее свечения за ними — иначе цифры теряются на ярком фоне */
	background: linear-gradient(135deg, rgba(28, 10, 8, .46) 0%, rgba(74, 18, 13, .36) 100%);
	border: 1px solid rgba(255, 150, 90, .3);
	box-shadow: 0 8px 30px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 190, 130, .06);
	backdrop-filter: blur(14px) saturate(115%);
	-webkit-backdrop-filter: blur(14px) saturate(115%);
	transition: border-color .2s ease, transform .2s ease;
}

.oh__stat:hover {
	border-color: rgba(242, 112, 30, .5);
	transform: translateY(-2px);
}

.oh__stat-ico {
	flex: none;
	display: grid;
	place-items: center;
	width: clamp(54px, 5.8vw, 92px);
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1.5px solid rgba(242, 112, 30, .45);
	background: rgba(242, 112, 30, .07);
	color: var(--oh-orange);
}

.oh__stat-ico .oh-ico {
	width: 46%;
	height: 46%;
}

.oh__stat-text {
	flex: 1 1 auto;
	min-width: 0;
}

.oh__stat-num {
	display: block;
	color: #fff;
	font-size: clamp(26px, 2.9vw, 46px);
	font-weight: 700;
	line-height: 1.05;
	white-space: nowrap;
}

.oh__stat-unit {
	margin-left: .22em;
	font-size: .62em;
	font-weight: 600;
}

.oh__stat-label {
	display: block;
	margin-top: 7px;
	color: #c3bcb8;
	font-size: clamp(13px, 1.3vw, 21px);
	line-height: 1.3;
}

/* ---------- Адаптив ---------- */

/* Низкие экраны ноутбуков: макет рассчитан на ~900px высоты,
   ниже пропорционально ужимаем, чтобы кнопки не ушли под сгиб. */
@media (min-width: 992px) and (max-height: 880px) {
	.oh { padding-top: 86px; }
	.oh__brand { width: min(100%, 660px); }
	.oh__tagline { font-size: 19px; }
	.oh__slogan { font-size: clamp(28px, 3.9vw, 58px); }
	.oh__lead { font-size: 15px; }
	.oh__search .dgwt-wcas-search-input { height: 54px !important; line-height: 54px; }
	.oh__btn { min-height: 52px; }
	.oh__btn--solid { min-width: 300px; }
	.oh__btn--ghost { min-width: 268px; }
	.oh__stat { padding: 18px 22px; }
	.oh__stat-num { font-size: 36px; }
	.oh__stat-label { font-size: 17px; }
	.oh__stat-ico { width: 68px; }
}

@media (min-width: 992px) and (max-height: 760px) {
	.oh { padding-top: 80px; padding-bottom: 20px; }
	.oh__brand { width: min(100%, 540px); }
	.oh__tagline { font-size: 16px; }
	.oh__slogan { font-size: clamp(26px, 3.2vw, 46px); }
	.oh__slogan::before { height: 5px; margin-bottom: 12px; }
	.oh__lead { font-size: 14px; }
	.oh__search { margin-top: 14px; }
	.oh__search .dgwt-wcas-search-input { height: 48px !important; line-height: 48px; }
	.oh__cta { margin-top: 12px; }
	.oh__btn { min-height: 46px; }
	.oh__btn--solid { min-width: 260px; }
	.oh__btn--ghost { min-width: 230px; }
	.oh__stat { padding: 13px 18px; }
	.oh__stat-num { font-size: 31px; }
	.oh__stat-label { font-size: 15px; }
	.oh__stat-ico { width: 58px; }
}

@media (max-width: 991px) {
	.oh {
		min-height: auto;
		padding: 104px 0 40px;
	}
	.oh__inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	/* Планшет: колонка одна, шар поднимается к правому верхнему углу */
	.oh__glow::before {
		top: 0;
		left: 56%;
		width: 118vh;
		transform: none;
	}
	.oh__glow::after {
		background: linear-gradient(180deg,
			rgba(11, 10, 10, .88) 0%,
			rgba(11, 10, 10, .5) 10%,
			rgba(11, 10, 10, .08) 26%,
			rgba(11, 10, 10, .45) 74%,
			rgba(11, 10, 10, .85) 100%);
	}
	.oh__stats {
		grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	}
	.oh__btn--solid,
	.oh__btn--ghost {
		min-width: 0;
		flex: 1 1 240px;
	}
}

@media (max-width: 767px) {
	.oh {
		/* шапка на телефоне ниже, но всё ещё лежит поверх экрана */
		padding: 78px 0 32px;
		text-align: left;
	}
	.oh__brand { width: 100%; }
	/* На телефоне шар уходит в правый верхний угол и становится меньше:
	   в полную величину он перекрывал текст и поиск. Ниже слогана
	   затемнение выводит его в фон, чтобы всё читалось. */
	.oh__glow::before {
		top: -6%;
		left: 60%;
		width: 64vh;
		transform: none;
		box-shadow: 0 0 90px 14px rgba(255, 110, 30, .22);
	}
	.oh__glow::after {
		background: linear-gradient(180deg,
			rgba(11, 10, 10, .9) 0%,
			rgba(11, 10, 10, .5) 8%,
			rgba(11, 10, 10, .16) 20%,
			rgba(11, 10, 10, .7) 42%,
			rgba(11, 10, 10, .93) 60%,
			rgba(11, 10, 10, .96) 100%);
	}
	.oh__tagline { font-size: 13px; }
	.oh__lead { font-size: 14px; }
	.oh__search .dgwt-wcas-search-input {
		height: 52px !important;
		line-height: 52px;
		font-size: 15px !important;
		padding: 0 54px 0 48px !important;
	}
	.oh__search .dgwt-wcas-sf-wrapp::before { left: 18px; width: 18px; height: 18px; }
	.oh__search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
		width: 38px !important;
		min-width: 38px !important;
		max-width: 38px !important;
		height: 38px !important;
	}
	.oh__cta { gap: 10px; }
	.oh__btn--solid,
	.oh__btn--ghost { flex: 1 1 100%; }
	.oh__stats { grid-template-columns: 1fr; }
	.oh__stat { padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.oh__btn,
	.oh__stat,
	.oh__search .dgwt-wcas-sf-wrapp,
	.oh__search .dgwt-wcas-search-submit::after {
		transition: none;
	}
	.oh__btn:hover,
	.oh__stat:hover { transform: none; }
}