/*
 * GORILLA GARAGE — Section: Page-Hero
 *
 * Schlanker Hero für Unterseiten. Deutlich flacher als gg-section-hero,
 * standardmäßig ohne Bild-Slot und Quick-Stats. Dunkler Hintergrund mit
 * dezentem Red-Glow.
 *
 * Image-Variante (.gg-page-hero--with-image): 2-Spalten-Layout mit
 * 3D-Pin-Bild rechts (Desktop) bzw. unter dem Text (Mobile).
 * Accent-Variante (.gg-page-hero--accent-blue): Blauer Glow statt Rot
 * für den Aufbereitungs-Bereich.
 */

.gg-page-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(var(--space-16), 9vw, var(--space-24));
	/*
	 * Page-Hero zieht sich unter den transparenten Header — das ::before
	 * mit dem Glow (Rot bzw. Blau bei Aufbereitung) laeuft so bis zum
	 * Viewport-Rand. Top-Padding kompensiert den Shift, Content bleibt
	 * unter der Nav-Klinge.
	 */
	margin-top: calc(-1 * var(--gg-header-h, 0px));
	padding-top: calc(clamp(var(--space-16), 9vw, var(--space-24)) + var(--gg-header-h, 0px));
	isolation: isolate;
	/* Einheitliche Höhe über alle Unterseiten-Heroes — egal ob Text-only
	 * (Legal), Image-Variante (Werkstatt etc.) oder Über-Uns. Inhalt wird
	 * vertikal mittig in der Mindesthöhe ausgerichtet. */
	min-height: clamp(380px, 38vw, 480px);
	display: grid;
	align-content: center;
}

.gg-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(
			ellipse 50% 80% at 10% 30%,
			rgba(200, 16, 46, 0.22) 0%,
			rgba(200, 16, 46, 0) 65%
		),
		repeating-linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.05) 0,
			rgba(255, 255, 255, 0.05) 2px,
			transparent 2px,
			transparent 10px
		),
		repeating-linear-gradient(
			45deg,
			rgba(255, 255, 255, 0.05) 0,
			rgba(255, 255, 255, 0.05) 2px,
			transparent 2px,
			transparent 10px
		),
		linear-gradient(180deg, var(--gg-black) 0%, var(--gg-black-soft) 100%);
}

.gg-page-hero__inner {
	max-width: 72ch;
}

.gg-page-hero__eyebrow {
	margin-bottom: var(--space-3);
}

.gg-page-hero__title {
	font-family: var(--font-headline);
	font-weight: var(--fw-bold);
	font-size: var(--fs-3xl);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--gg-white);
	margin: 0;
}

.gg-page-hero__subtitle {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: var(--fs-lg);
	line-height: var(--lh-relaxed);
	color: var(--color-text-muted-on-dark);
	margin-top: var(--space-5);
	max-width: 60ch;
}

.gg-page-hero__lead {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--gg-white);
	margin-top: var(--space-4);
	margin-bottom: 0;
	max-width: 60ch;
}

/* Direkter „Jetzt Termin erstellen"-CTA im Hero jeder Unterseite. */
.gg-page-hero__cta {
	margin-top: var(--space-6);
}

/* ────────────────────────────────────────────────────────────
 * Accent-Variante: Blauer Glow (Aufbereitungs-Bereich)
 * Siehe Memory: project_gorilla_farbcode_bereiche
 * ──────────────────────────────────────────────────────────── */

.gg-page-hero--accent-blue::before {
	background:
		radial-gradient(
			ellipse 50% 80% at 10% 30%,
			var(--color-aufbereitung-glow) 0%,
			transparent 65%
		),
		repeating-linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.05) 0,
			rgba(255, 255, 255, 0.05) 2px,
			transparent 2px,
			transparent 10px
		),
		repeating-linear-gradient(
			45deg,
			rgba(255, 255, 255, 0.05) 0,
			rgba(255, 255, 255, 0.05) 2px,
			transparent 2px,
			transparent 10px
		),
		linear-gradient(180deg, var(--gg-black) 0%, var(--gg-black-soft) 100%);
}

/* ────────────────────────────────────────────────────────────
 * Image-Variante: 2-Spalten-Layout (Text + 3D-Pin)
 * Mobile: Stack (Text oben, Pin unten — semantische DOM-Reihenfolge).
 * Desktop ab 1024: nebeneinander, Text links breiter.
 * ──────────────────────────────────────────────────────────── */

.gg-page-hero--with-image .gg-page-hero__inner {
	max-width: var(--container-max);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-10);
	align-items: center;
}

.gg-page-hero--with-image .gg-page-hero__copy {
	max-width: 60ch;
}

@media (min-width: 1024px) {
	.gg-page-hero--with-image .gg-page-hero__inner {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: var(--space-16);
	}
}

.gg-page-hero__image {
	display: flex;
	align-items: center;
	justify-content: center;
}

.gg-page-hero__image img {
	width: 100%;
	height: auto;
	max-width: clamp(200px, 32vw, 340px);
	object-fit: contain;
	filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55));
}

/* ────────────────────────────────────────────────────────────
 * Logo-Variante: 2-Spalten-Layout (Text + Gorilla-Wortmarke)
 * Genutzt von page-legal.php (Impressum, Datenschutz, AGB).
 * Spiegelt die Struktur von --with-image, aber das Asset ist
 * eine breite Wortmarke statt eines 3D-Pin-Icons.
 * ──────────────────────────────────────────────────────────── */

.gg-page-hero--with-logo .gg-page-hero__inner {
	max-width: var(--container-max);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-10);
	align-items: center;
}

.gg-page-hero--with-logo .gg-page-hero__copy {
	max-width: 60ch;
}

@media (min-width: 1024px) {
	.gg-page-hero--with-logo .gg-page-hero__inner {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: var(--space-16);
	}
}

.gg-page-hero__logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

.gg-page-hero__logo img {
	width: 100%;
	height: auto;
	max-width: clamp(280px, 36vw, 460px);
	object-fit: contain;
}