/* =============================================================
   PIARNYA — Hero Section v3 (редизайн Claude Design, блок «3a»)
   Диагональ светлая/тёмная зона. Точные значения макета —
   не подгонять на глаз, см. .claude/plans (если нужно свериться).
   Зависит от: variables.css, base.css
   ============================================================= */

/* ── СЕКЦИЯ ─────────────────────────────────────────────────── */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--hh-bg-light); /* #FAFAFC */
}

/* ── ВНУТРЕННИЙ БЛОК: высота + предел ширины ─────────────────
   ⚠ height (не min-height!) — раньше min-height была только полом:
   когда контент с фикс-отступами суммарно превышал 812px, блок
   просто рос вниз и статистика уезжала под сгиб экрана. Жёсткая
   height + overflow:hidden на .hero гарантируют, что секция ВСЕГДА
   равна видимой области под шапкой (не крупнее 812px — потолок
   макета, чтобы на 4K-мониторах hero не раздувался). Сам контент
   при этом ужимается через clamp() ниже, а не обрезается. */
.hero__inner {
	position: relative;
	display: flex;
	align-items: center; /* вертикальный центр = top:50% из макета */
	height: min(calc(100svh - var(--header-total-h)), 812px);
	max-width: 1920px;
	margin-inline: auto;
}

/* Декоративные пятна на светлом фоне */
.hero__decor {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(560px 420px at 18% 22%, rgba(226, 61, 172, .07), transparent 70%),
		radial-gradient(520px 400px at 40% 88%, rgba(43, 192, 228, .06), transparent 70%);
}

/* ── СВЕТЛАЯ ЗОНА: контент ────────────────────────────────────
   margin-left:96px вместо центрированного .container — фиксированный
   отступ по макету «3a». Контент в потоке (не absolute): вертикальный
   центр даёт flex родителя, а на низких экранах блок растягивает
   секцию вместо того, чтобы вылезать за её верх под шапку. */
.hero__content {
	/* Вертикальный центр даёт align-items:center родителя (.hero__inner) —
	   сам блок остаётся auto-высоты (сжатой через clamp), не растянут
	   на 100%, поэтому justify-content здесь не нужен. */
	position: relative;
	z-index: 2;
	margin-left: 96px;
	max-width: 560px;
	max-height: 100%; /* последний рубеж защиты, если clamp всё же не хватит */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	overflow: hidden;
}

/* ── БЕЙДЖ-ПИЛЮЛЯ ─────────────────────────────────────────────── */
.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 9px 18px;
	border: 1px solid rgba(214, 45, 160, .4);
	border-radius: 999px;
	background: rgba(255, 255, 255, .6);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--hh-text);
	white-space: nowrap;
}

.hero__badge-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--hh-gradient-badge);
	flex-shrink: 0;
}

/* ── ЗАГОЛОВОК ──────────────────────────────────────────────── */
.hero__title {
	/* clamp вместо фикс. 26px/48px — на низких окнах отступ и кегль
	   сжимаются, освобождая место для статистики внизу блока */
	margin: clamp(14px, 1.8vh, 26px) 0 0;
	font-family: var(--font-body); /* Manrope, не Unbounded — как в макете */
	font-weight: 800;
	font-size: clamp(32px, 3vw, 48px);
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--hh-text);
	text-wrap: balance;
}

.hero__title-highlight {
	background: var(--hh-gradient-highlight);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ── ПОДЗАГОЛОВОК ───────────────────────────────────────────── */
.hero__subtitle {
	margin: clamp(12px, 1.6vh, 24px) 0 0;
	font-weight: 400;
	font-size: clamp(16px, 1.1vw, 19px);
	line-height: 1.55;
	color: var(--hh-text-muted);
	max-width: 490px;
}

/* ── КНОПКИ ─────────────────────────────────────────────────── */
.hero__actions {
	display: flex;
	gap: 16px;
	margin-top: clamp(20px, 2.6vh, 40px);
	flex-shrink: 0;
}

.hero__btn-primary {
	height: 56px;
	padding: 0 32px;
	border-radius: 12px;
	gap: 10px;
	background: var(--hh-gradient-btn);
	color: #FFFFFF;
	font-size: 17px;
	font-weight: 600;
	box-shadow: 0 6px 18px rgba(217, 61, 176, .22);
	transition: box-shadow .25s ease, transform .25s ease;
}

.hero__btn-primary:hover {
	/* .btn:hover (base.css) подменяет фон на --btn-bg-hover — здесь
	   градиент на hover не меняется, только тень+подъём */
	background: var(--hh-gradient-btn);
	box-shadow: 0 12px 26px rgba(217, 61, 176, .4);
	transform: translateY(-2px);
}

.hero__btn-icon {
	flex-shrink: 0;
}

.hero__btn-secondary {
	height: 56px;
	padding: 0 32px;
	border-radius: 12px;
	background: transparent;
	border: 1.5px solid var(--hh-accent);
	color: var(--hh-accent);
	font-size: 17px;
	font-weight: 600;
	transition: background .25s ease, color .25s ease;
}

.hero__btn-secondary:hover {
	background: var(--hh-accent);
	color: #FFFFFF;
	/* .btn--outline:hover (base.css) добавляет тень+подъём —
	   в макете у этой кнопки их нет, сбрасываем явно */
	box-shadow: none;
	transform: none;
}

/* ── СТАТИСТИКА ─────────────────────────────────────────────── */
.hero__stats {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-top: clamp(24px, 3.5vh, 52px);
	flex-shrink: 0;
}

.hero__stat {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.hero__stat-value {
	font-family: var(--font-body);
	font-weight: 800;
	font-size: clamp(22px, 2vw, 30px);
	line-height: 1;
	color: var(--hh-text);
}

.hero__stat-label {
	font-size: 14px;
	color: var(--hh-text-muted);
}

.hero__stat-sep {
	display: block;
	width: 1px;
	height: 40px;
	background: rgba(21, 10, 36, .12);
	flex-shrink: 0;
}

/* ── ТЁМНАЯ ЗОНА (диагональ + текстура стены) ─────────────────
   Точки макета (1440px): 830,0 / 1440,0 / 1440,812 / 687,812.
   В процентах: 830/1440=57.6%, 687/1440=47.7% — так диагональ
   верно масштабируется на любой ширине блока (clip-path % всегда
   считается от собственного бокса элемента). */
.hero__dark {
	position: absolute;
	inset: 0;
	z-index: 1;
	clip-path: polygon(57.6% 0, 100% 0, 100% 100%, 47.7% 100%);
	/* Базовая заливка тем же тоном, что и стена в .piarnya-neon.
	   Обязательна: диагональ внизу уходит до x=47.7%, а слот
	   вывески начинается только с x=52.65% — без этой заливки
	   в зазоре между ними просвечивал бы светлый фон hero,
	   и диагональ визуально выглядела «ступенькой», не прямой. */
	background: #0E0817;
}

/* Слот вывески «ПИАРНЯ». Диагональ клипает .hero__dark: при
   top:0 видимая часть начинается с x=57.6%, при bottom:0 — с
   x=47.7% (см. clip-path выше). 52.65% — среднее между ними:
   левый край слота остаётся внутри видимой зоны на любой высоте,
   поэтому центрирование содержимого внутри слота (см. .piarnya-neon)
   визуально совпадает с центром именно видимой, не срезанной
   диагональю части стены — а не всего .hero__dark. */
#hero-neon-slot {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 52.65%;
	right: 0;
}

/* ── МОБИЛЬНЫЙ HERO (редизайн Claude Design, блок «4a») ───────
   Порог 767px — с 768px и выше работает десктопная диагональ выше.
   На мобильном диагонали НЕТ: неоновая полоса сверху (прямой
   горизонтальный срез), светлая зона с контентом ниже. Порядок
   ВНУТРИ светлой зоны и порядок кнопок отличаются от десктопа —
   см. комментарии у .hero__stats/.hero__actions/.hero__btn-*. */
@media (max-width: 767px) {
	.hero__inner {
		display: flex;
		flex-direction: column;
		/* ⚠ десктопный align-items:center центрирует по кросс-оси
		   ПО СОБСТВЕННОЙ ШИРИНЕ содержимого — без stretch у .hero__dark
		   (в нём нет обычного контента, только absolute) контентная
		   ширина схлопывается в 0, и вся полоса становится невидимой */
		align-items: stretch;
		height: auto; /* десктопная жёсткая height здесь не нужна — стек растёт свободно */
		max-width: none;
	}

	/* В эталоне «4a» декоративных пятен в мобильной светлой зоне
	   нет вообще — на десктопе они есть, здесь сознательно убраны */
	.hero__decor {
		display: none;
	}

	/* Неоновая полоса — ПЕРВАЯ визуально, хотя в разметке (общей
	   с десктопом) идёт после .hero__content; сортируем flex-ом */
	.hero__dark {
		order: 1;
		position: relative;
		inset: auto;
		z-index: 1;
		clip-path: none;
		/* 200px — минимум эталона; выше на высоких экранах, чтобы
		   слово+тег+тумблер неоновой вывески не обрезались */
		height: clamp(200px, 30vh, 260px);
		overflow: hidden;
	}

	#hero-neon-slot {
		left: 0; /* без диагонали слот на всю ширину блока */
	}

	.hero__content {
		order: 2;
		margin-left: 0;
		max-width: none;
		max-height: none;
		overflow: visible; /* десктопный safety-net clamp здесь не нужен */
		padding: 26px clamp(20px, 6vw, 24px) clamp(20px, 5vh, 40px);
	}

	/* ── Бейдж: чуть компактнее десктопного ──────────────────── */
	.hero__badge {
		gap: 9px;
		padding: 8px 15px;
		font-size: 11px;
		letter-spacing: .07em;
	}

	.hero__badge-dot {
		width: 6px;
		height: 6px;
	}

	/* ── Заголовок: 26px — потолок эталона, ужимается по высоте ── */
	.hero__title {
		margin-top: clamp(10px, 2.5vh, 18px);
		font-size: clamp(22px, 3.2vh, 26px);
		line-height: 1.16;
	}

	.hero__subtitle {
		margin-top: clamp(10px, 2vh, 16px);
		font-size: clamp(14px, 2vh, 15.5px);
		max-width: none;
	}

	/* ── Статистика: ПЕРЕД кнопками (не после, как на десктопе) ── */
	.hero__stats {
		order: 1; /* внутри .hero__content, до .hero__actions (order:2) */
		gap: 16px;
		margin-top: clamp(14px, 3vh, 24px);
		align-items: stretch; /* сепаратор растягивается на всю высоту строки */
		width: 100%;
	}

	.hero__stat {
		flex: 1;
		gap: 2px;
	}

	.hero__stat-value {
		font-size: 23px;
	}

	.hero__stat-label {
		font-size: 12px;
		line-height: 1.3;
	}

	.hero__stat-sep {
		height: auto; /* было фикс. 40px на десктопе */
	}

	/* ── Кнопки: колонка на всю ширину, ПОСЛЕ статистики,
	   порядок ОБРАТНЫЙ десктопу — «Оставить заявку» сверху ─────── */
	.hero__actions {
		order: 2;
		flex-direction: column;
		gap: 12px;
		margin-top: clamp(14px, 3vh, 24px);
		width: 100%;
	}

	.hero__btn-primary,
	.hero__btn-secondary {
		width: 100%;
		height: 54px;
		font-size: 16px;
		justify-content: center;
	}

	.hero__btn-secondary { order: 1; } /* «Оставить заявку» — первая */
	.hero__btn-primary   { order: 2; } /* «Рассчитать стоимость» — вторая */
}