/*
 * LN-Tweaks Widget: Page Hero
 *
 * Theme-agnostic via CSS-Variable-Fallbacks (siehe _tokens.css).
 * Backwards-Compat-Klassen (.page-hero, .ph-label, .ph-h, .ph-desc, .ph-chip,
 * .ph-title, .ph-sub, .ph-stats) bleiben erhalten, damit Theme-CSS in
 * `lucas-nuelle-v2/assets/css/sections.css` weiter greift.
 *
 * ALL BASELINE-STYLES VIA `:where()` (Specificity 0) — Style-Tab-Controls
 * (Specificity ≥ 1) gewinnen IMMER über Defaults.
 */

:where(.ln-tweaks-page-hero) {
	/* Nur vertikales Padding. Das horizontale Seitenpadding liefert der innere
	   Container (`.ln-tweaks-page-hero__inner.wrap`, immer gerendert) über die
	   Theme-Klasse `.wrap` (= --ln-container-pad). Würde der Hero hier ZUSÄTZLICH
	   horizontales Padding setzen, entstünde doppeltes Padding auf allen Seiten
	   ohne `.page-hero { padding: …0 }`-Override (z. B. about-us, service-support). */
	padding: 72px 0;
	font-family: var(--ln-tweaks-font);
	color: var(--ln-tweaks-dark);
	position: relative;
	overflow: hidden;
}

:where(.ln-tweaks-page-hero__inner) {
	max-width: var(--ln-tweaks-container-max);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

:where(.ln-tweaks-page-hero--has-stats .ln-tweaks-page-hero__inner) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}

:where(.ln-tweaks-page-hero--has-stats .ln-tweaks-page-hero__stats) {
	margin-top: 0;
}

@media (max-width: 1024px) {
	:where(.ln-tweaks-page-hero--has-stats .ln-tweaks-page-hero__inner) { gap: 48px; }
}

@media (max-width: 768px) {
	:where(.ln-tweaks-page-hero--has-stats .ln-tweaks-page-hero__inner) { grid-template-columns: 1fr; gap: 32px; }
}

/* Theme-Variants — sind Style-Defaults, müssen Hover-States gewinnen
   aber Style-Tab BG-Color soll überschreiben. Daher :where(). */
:where(.ln-tweaks-page-hero--theme-light) {
	background: var(--ln-tweaks-light, #F6F6F6);
	color: var(--ln-tweaks-dark);
}

:where(.ln-tweaks-page-hero--theme-dark) {
	background: var(--ln-tweaks-dark, #2A2A2C);
	color: var(--ln-tweaks-white);
}

:where(.ln-tweaks-page-hero--theme-image) {
	background: var(--ln-tweaks-dark, #2A2A2C);
	color: var(--ln-tweaks-white);
}

.ln-tweaks-page-hero--theme-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.4) 100%);
	z-index: 0;
}

/* Universeller Overlay (Style-Tab `overlay_enable=yes`) — wirkt auf jedes
   theme_mode + BG-Image. Pseudo via `::before` analog zu theme-image. */
:where(.ln-tweaks-page-hero[data-overlay="yes"])::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.55);
	z-index: 0;
	pointer-events: none;
}

/* Eyebrow */
:where(.ln-tweaks-page-hero__eyebrow) {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: var(--ln-tweaks-primary);
	margin-bottom: 14px;
}

:where(.ln-tweaks-page-hero__eyebrow--chip) {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--ln-tweaks-primary);
	border-radius: 999px;
	font-size: 10px;
	letter-spacing: 2.5px;
	margin-bottom: 18px;
}

/* Chip-Flat: gleiche Pill-Form wie `chip` aber ohne Border,
   BG-Tint via primary mit reduzierter Opacity. Style-Tab `eyebrow_bg` überschreibt. */
:where(.ln-tweaks-page-hero__eyebrow--chip-flat) {
	display: inline-block;
	padding: 6px 14px;
	border: none;
	border-radius: 999px;
	font-size: 10px;
	letter-spacing: 2.5px;
	margin-bottom: 18px;
	background: rgba(255, 134, 0, 0.12);
	color: var(--ln-tweaks-primary);
}

:where(.ln-tweaks-page-hero--theme-dark .ln-tweaks-page-hero__eyebrow,
.ln-tweaks-page-hero--theme-image .ln-tweaks-page-hero__eyebrow) {
	color: var(--ln-tweaks-primary);
}

/* Headlines */
:where(.ln-tweaks-page-hero__heading) {
	font-weight: 900;
	letter-spacing: -1px;
	line-height: 1.1;
	margin: 0 0 14px 0;
	color: inherit;
}

:where(.ln-tweaks-page-hero__heading span) {
	color: var(--ln-tweaks-primary);
}

:where(.ln-tweaks-page-hero__heading em) {
	font-style: italic;
	color: var(--ln-tweaks-primary);
}

:where(.ln-tweaks-page-hero--h-md .ln-tweaks-page-hero__heading) {
	font-size: 38px;
}

:where(.ln-tweaks-page-hero--h-lg .ln-tweaks-page-hero__heading) {
	font-size: 48px;
}

:where(.ln-tweaks-page-hero--h-xl .ln-tweaks-page-hero__heading) {
	font-size: 62px;
}

/* Subline */
:where(.ln-tweaks-page-hero__subline) {
	font-size: 16px;
	line-height: 1.6;
	color: inherit;
	opacity: .85;
	max-width: 720px;
	margin: 0;
}

:where(.ln-tweaks-page-hero--theme-light .ln-tweaks-page-hero__subline) {
	color: var(--ln-tweaks-mid);
	opacity: 1;
}

/* Stats (training-systems-Variant) */
:where(.ln-tweaks-page-hero__stats) {
	display: flex;
	gap: 32px;
	align-items: center;
	margin-top: 48px;
}

:where(.ln-tweaks-page-hero__stat-num) {
	font-size: 36px;
	font-weight: 900;
	color: var(--ln-tweaks-primary);
	line-height: 1;
	letter-spacing: -1px;
}

:where(.ln-tweaks-page-hero__stat-num span) {
	color: var(--ln-tweaks-primary);
}

:where(.ln-tweaks-page-hero__stat-lbl) {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--ln-tweaks-mid);
	margin-top: 6px;
}

:where(.ln-tweaks-page-hero--theme-dark .ln-tweaks-page-hero__stat-lbl,
.ln-tweaks-page-hero--theme-image .ln-tweaks-page-hero__stat-lbl) {
	color: rgba(255,255,255,.7);
}

:where(.ln-tweaks-page-hero__stat-divider) {
	width: 1px;
	height: 40px;
	background: var(--ln-tweaks-border);
	opacity: .5;
}

/* Mobile — alle Defaults via :where() damit Style-Tab Responsive-Controls greifen */
@media (max-width: 768px) {
	:where(.ln-tweaks-page-hero) {
		/* Horizontal weiterhin 0 — Seitenabstand kommt vom inneren `.wrap`. */
		padding: 56px 0;
	}
	:where(.ln-tweaks-page-hero--h-xl .ln-tweaks-page-hero__heading) { font-size: 38px; }
	:where(.ln-tweaks-page-hero--h-lg .ln-tweaks-page-hero__heading) { font-size: 32px; }
	:where(.ln-tweaks-page-hero--h-md .ln-tweaks-page-hero__heading) { font-size: 26px; }
	:where(.ln-tweaks-page-hero__stats) { flex-wrap: wrap; gap: 20px; }
	:where(.ln-tweaks-page-hero__stat-divider) { display: none; }
}