/**
 * Hero (Startseite) — Vollbild-Hintergrund-Variante (Mai 2026)
 *
 * Per DESIGN.md §7.2 (Variante 2): großes Hintergrund-Bild, Text auf
 * rechter Hälfte mit dezentem Cream-Schleier-Gradient für Lesbarkeit.
 *
 * Mobile: Bild bleibt Hintergrund, Text rückt in die untere Hälfte,
 * Schleier wechselt auf vertikal (transparent oben, cream unten).
 */

.hero {
	position: relative;
	min-height: 400px;
	overflow: hidden;
	background-color: var(--color-cream);
	isolation: isolate;
}

@media (min-width: 768px) {
	.hero {
		min-height: 600px;
	}
}

/* ── Hintergrund-Bild ────────────────────────────────────────────────── */

.hero__background {
	position: absolute;
	inset: 0;
	background-image: var(--hero-bg-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}

/* Fallback wenn kein Bild gesetzt: Honig-Gradient als sanfter Standard */
.hero:not(.hero--has-image) .hero__background {
	background-image:
		radial-gradient(ellipse at 25% 60%, color-mix(in oklab, var(--color-honey) 35%, transparent), transparent 55%),
		radial-gradient(ellipse at 75% 35%, color-mix(in oklab, var(--color-terracotta) 22%, transparent), transparent 58%),
		linear-gradient(165deg,
			color-mix(in oklab, var(--color-cream) 80%, var(--color-honey)) 0%,
			color-mix(in oklab, var(--color-honey) 45%, var(--color-cream)) 100%);
}

/* ── Cream-Schleier-Overlay ──────────────────────────────────────────── */

/* Desktop: horizontal — links Bild durchscheinen lassen, rechts cremig für Text */
.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(250, 246, 238, 0) 0%,
		rgba(250, 246, 238, 0) 30%,
		rgba(250, 246, 238, 0.7) 55%,
		rgba(250, 246, 238, 0.92) 100%
	);
	z-index: 1;
	pointer-events: none;
}

/* Mobile: vertikal — Bild oben, Cream nach unten für Text-Lesbarkeit */
@media (max-width: 767.98px) {
	.hero__overlay {
		background: linear-gradient(
			to bottom,
			rgba(250, 246, 238, 0) 0%,
			rgba(250, 246, 238, 0) 25%,
			rgba(250, 246, 238, 0.85) 55%,
			rgba(250, 246, 238, 0.98) 100%
		);
	}
}

/* ── Layout ──────────────────────────────────────────────────────────── */

.hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
	padding-block: var(--space-12);
	display: grid;
	grid-template-columns: 1fr;
	min-height: inherit;
	align-items: end;
}

@media (min-width: 768px) {
	.hero__inner {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		padding-block: var(--space-20);
	}

	/* Text-Content auf rechte Spalte schicken */
	.hero__content {
		grid-column: 2 / 3;
	}
}

@media (min-width: 1024px) {
	.hero__inner {
		grid-template-columns: 5fr 7fr;
		padding-block: var(--space-24);
	}
}

/* ── Text-Content ────────────────────────────────────────────────────── */

.hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	max-width: 56ch;
}

.hero__headline {
	font-family: var(--font-display);
	font-size: var(--font-size-hero);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-midnight);
	margin: 0;
	text-wrap: balance;
}

.hero__subline {
	font-size: var(--font-size-body-lg);
	line-height: var(--line-height-relaxed);
	color: var(--color-text-body);
	max-width: 56ch;
	text-wrap: pretty;
}

.hero__cta {
	align-self: flex-start;
	margin-top: var(--space-2);
}