/*
 * GORILLA GARAGE — Section: Hero
 *
 * Dunkler Hero mit reserviertem Bild-Slot (kein Layout-Shift), Dark-Overlay-Fallback,
 * Eyebrow + H1 + Subtitle, Dual-CTA und horizontalem Quick-Stats-Strip.
 * Hero-Bild kommt in Phase 6 — bis dahin trägt der Overlay-Gradient den Look.
 */

.gg-section-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(var(--space-20), 14vw, var(--space-40));
	/*
	 * Hero zieht sich unter den transparenten Header. Negativer Margin
	 * hebt die Box um die Header-Hoehe an; Top-Padding gleicht den Shift
	 * fuer den Content wieder aus, damit Eyebrow/H1 weiter unter dem
	 * Header sitzen — das Hintergrund-Bild + Overlay laufen jedoch bis
	 * zum Viewport-Rand durch (transparenter Header blurt darueber).
	 */
	margin-top: calc(-1 * var(--gg-header-h, 0px));
	padding-top: calc(clamp(var(--space-20), 14vw, var(--space-40)) + var(--gg-header-h, 0px));
	min-height: clamp(560px, 80vh, 820px);
	display: flex;
	align-items: center;
	isolation: isolate;
}

.gg-section-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-color: var(--gg-black);
	overflow: hidden;
}

/*
 * Widescreen-Schutz: Original-Bild wird bei 1920px gedeckelt und zentriert.
 * Beyond → gespiegelte Flanken (siehe ::before / ::after) füllen den Rest
 * und faden zu den Viewport-Rändern aus, damit der Mechaniker auf großen
 * Monitoren nicht mit-skaliert wird.
 */
.gg-section-hero__picture {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1920px;
	height: 100%;
	overflow: hidden;
}

.gg-section-hero__picture > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * Gespiegelte Bild-Flanken außerhalb der 1920px-Content-Zone.
 * Greift nur, wenn Viewport > 1920px (kein Overhead darunter).
 *
 * Trick: bg-size = 1920px auto matcht exakt das cover-Scaling des Center-Bilds,
 * sodass der Inhalt am Nahtpunkt deckungsgleich übergeht. scaleX(-1) spiegelt
 * den Inhalt; mask-image fadet die Außenkante zur Viewport-Kante hin aus.
 */
@media (min-width: 1920px) {
	.gg-section-hero__media::before,
	.gg-section-hero__media::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: calc((100vw - 1920px) / 2);
		/*
		 * Doppel-Layer: oben dunkle Schicht (75% schwarz), unten das Bild
		 * im exakten Center-Scaling (1920px auto). Mirror bleibt als leiser
		 * Schimmer am Nahtpunkt — der Rest läuft im Section-Dunkel auf.
		 */
		background-image:
			linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
			url("../../images/hero-werkstatt.png");
		background-size:
			100% 100%,
			1920px auto;
		background-repeat:
			no-repeat,
			no-repeat;
		transform: scaleX(-1);
		pointer-events: none;
	}

	/*
	 * Mask: Mirror sichtbar nur in den 240px nächst der Naht (pixel-fix, nicht %).
	 * Bei bg-position links/rechts entspricht das genau dem Bildbereich
	 * jenseits des Mechanikers (image-x < 150 links bzw. > 1050 rechts),
	 * d.h. nur Werkstatt-Hintergrund spiegelt — der Mechaniker erscheint
	 * nicht mehr als Geist im Mirror. 2px Overlap auf die Naht kaschiert
	 * jegliche Sub-Pixel-Kante.
	 */
	.gg-section-hero__media::before {
		left: 0;
		width: calc((100vw - 1920px) / 2 + 2px);
		background-position:
			center,
			left center;
		-webkit-mask-image: linear-gradient(to right, black 0%, transparent 240px);
		mask-image: linear-gradient(to right, black 0%, transparent 240px);
	}

	.gg-section-hero__media::after {
		right: 0;
		width: calc((100vw - 1920px) / 2 + 2px);
		background-position:
			center,
			right center;
		-webkit-mask-image: linear-gradient(to right, transparent calc(100% - 240px), black 100%);
		mask-image: linear-gradient(to right, transparent calc(100% - 240px), black 100%);
	}
}

/*
 * Dark-Overlay-Treatment — funktioniert als Fallback ohne Bild und als
 * Lesbarkeits-Layer mit Bild. Doppel-Gradient: vertikal abdunkelnd,
 * dezenter roter Glow links oben für Brand-Akzent.
 */
.gg-section-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(
			ellipse 60% 70% at 15% 20%,
			rgba(200, 16, 46, 0.25) 0%,
			rgba(200, 16, 46, 0) 60%
		),
		linear-gradient(
			180deg,
			rgba(10, 10, 10, 0.92) 0%,
			rgba(10, 10, 10, 0.75) 45%,
			rgba(10, 10, 10, 0.95) 100%
		);
}

.gg-section-hero__inner {
	position: relative;
	z-index: 1;
	margin-inline-start: max(clamp(var(--space-6), 6vw, var(--space-24)), calc((100vw - var(--container-wide)) / 2));
	margin-inline-end: auto;
	/*
	 * .gg-section-hero ist ein Flex-Container, dieser Block also ein Flex-Item
	 * mit dem Default `min-width: auto` — er konnte deshalb nicht unter seinen
	 * min-content schrumpfen und war bei 320px Viewport 320px breit, obwohl
	 * nach Margin nur 296px Platz waren (Ueberhang 24px). min-width: 0 loest
	 * die Sperre; die Kinder duerfen jetzt umbrechen statt zu schieben.
	 */
	min-width: 0;
}

/*
 * Eyebrow als kleine, schwarze Chevron-Pille (Brand-Cut, statisch — kein Button).
 * Cut-Tiefe lokal kleiner als bei .btn--sm, damit die Pille schlank wirkt.
 */
.gg-section-hero__eyebrow.section__eyebrow {
	--btn-chevron-cut: 20px;
	display: inline-flex;
	align-items: center;
	column-gap: 0.35em;
	max-width: 100%;
	padding: var(--space-3) var(--space-6);
	background-color: var(--gg-black);
	color: var(--gg-white);
	font-size: var(--fs-xs);
	margin-bottom: var(--space-6);
	clip-path: var(--clip-btn-chevron);
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

.gg-section-hero__eyebrow-line {
	white-space: nowrap;
}

/*
 * Schmale Viewports: Pille stapelt statt umzubrechen. Als Column-Flex ist die
 * Shrink-to-fit-Breite die breiteste Zeile — die Box sitzt damit eng unter der
 * Schrift statt über die volle Container-Breite zu laufen.
 */
@media (max-width: 600px) {
	.gg-section-hero__eyebrow.section__eyebrow {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 0.25em;
	}
}

.gg-section-hero__check {
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-left: 0.1em;
	vertical-align: baseline;
	object-fit: contain;
	object-position: bottom;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
	pointer-events: none;
}

.gg-section-hero__title {
	position: relative;
	font-family: var(--font-headline);
	font-size: clamp(2.5rem, 1.5rem + 4vw, 5.25rem);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tighter);
	color: var(--gg-white);
	max-width: 18ch;
	text-wrap: balance;
}

.gg-section-hero__subtitle {
	margin-top: var(--space-6);
	font-family: var(--font-headline);
	font-size: var(--fs-xl);
	font-weight: var(--fw-regular);
	letter-spacing: var(--ls-tight);
	text-transform: uppercase;
	color: var(--color-text-muted-on-dark);
	max-width: none;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.gg-section-hero__subtitle {
		white-space: normal;
	}
}

.gg-section-hero__cta {
	margin-top: var(--space-10);
	gap: var(--space-4);
}

/* ────────────────────────────────────────────────────────────
 * Quick-Stats-Strip
 * ──────────────────────────────────────────────────────────── */

.gg-section-hero__stats {
	list-style: none;
	padding: 0;
	margin: var(--space-12) 0 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-6);
	align-items: center;
}

/*
 * Stats-Pills als Glasmorph (Ausnahme zur No-Glass-Default-Regel).
 * Sitzen vor dem Hero-Foto, dunkles getöntes Glas + Blur gibt Tiefe
 * ohne den darunter liegenden Foto-Kontrast zu verlieren.
 *
 * Scope ist eng auf .gg-section-hero__stat — andere Pills im Theme
 * (z.B. Card-Badges, Topbar) bleiben solid.
 */
.gg-section-hero__stat {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	background-color: rgba(8, 8, 10, 0.7);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-pill);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		0 6px 20px rgba(0, 0, 0, 0.35);
	font-size: var(--fs-sm);
	color: var(--gg-white);
	white-space: nowrap;
}

.gg-section-hero__stat-icon {
	color: var(--gg-gold);
	font-size: 1em;
	line-height: 1;
}

.gg-section-hero__stat-icon--google {
	display: inline-flex;
	align-items: center;
	width: 1.05em;
	height: 1.05em;
}

.gg-section-hero__stat-icon--google svg {
	width: 100%;
	height: 100%;
	display: block;
}

.gg-section-hero__stat-stars {
	display: inline-flex;
	align-items: center;
	color: var(--gg-gold);
	font-size: 0.95em;
	letter-spacing: 0.05em;
	line-height: 1;
	text-shadow: 0 0 6px rgba(201, 162, 76, 0.35);
}

.gg-section-hero__stat-dot {
	display: inline-block;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: var(--radius-pill);
	flex-shrink: 0;
}

.gg-section-hero__stat-dot--open {
	background-color: var(--color-status-open);
	box-shadow: 0 0 0 4px var(--color-status-open-glow);
}

.gg-section-hero__stat-dot--closed {
	background-color: var(--color-status-closed);
}

/*
 * Castrol-Service-Badge — offizielles Logo auf weißer Karte, unten rechts
 * im Hero verankert. Original-Wordmark (rot „Castrol" + grün „Service")
 * bleibt CI-treu lesbar.
 */
.gg-section-hero__castrol-badge {
	--btn-chevron-cut: 16px;
	position: absolute;
	right: max(clamp(var(--space-4), 4vw, var(--space-12)), calc((100vw - var(--container-wide)) / 2));
	bottom: clamp(var(--space-20), 14vw, var(--space-40));
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: var(--space-5) var(--space-8);
	background-color: var(--gg-white);
	clip-path: var(--clip-btn-chevron);
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.3));
	text-decoration: none;
	line-height: 0;
	transition: transform 200ms ease, filter 200ms ease;
}

.gg-section-hero__castrol-badge:hover,
.gg-section-hero__castrol-badge:focus-visible {
	transform: var(--hover-lift-btn);
	filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.4));
}

.gg-section-hero__castrol-logo {
	display: block;
	width: auto;
	height: clamp(2.25rem, 3.2vw, 3rem);
}

/* ────────────────────────────────────────────────────────────
 * Mobile
 * ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	.gg-section-hero {
		min-height: clamp(520px, 100svh, 720px);
		padding-block: var(--space-20);
		/* Negativer Margin + Top-Padding-Kompensation wie im Desktop-Setup,
		 * damit das Hero-Bild auch auf Mobile unter den Header laeuft. */
		padding-top: calc(var(--space-20) + var(--gg-header-h, 0px));
	}

	.gg-section-hero__cta {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.gg-section-hero__stats {
		gap: var(--space-2);
		margin-top: var(--space-10);
		display: grid;
		/*
		 * minmax(0, 1fr) statt 1fr — sonst bekommt die breiteste Pille ihren
		 * min-content zugeteilt und die Spalten werden ungleich: gemessen
		 * 125,9px + 193,2px = 319,2px in einem 280px breiten Grid. Die Pille
		 * „350+ Google-Bewertungen" lief dadurch bei 320px Viewport bis
		 * x=371 und wurde vom Hero-eigenen overflow-x: hidden abgeschnitten.
		 */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.gg-section-hero__stat {
		justify-content: flex-start;
		white-space: normal;
		font-size: var(--fs-xs);
		/*
		 * Die gleichbreiten Spalten oben loesen nur den Grid-Ueberlauf. Der
		 * Pillen-INHALT lief danach immer noch aus seiner eigenen Box heraus
		 * (bei 320px scrollWidth 159 vs. clientWidth 122, also +37px) — ein
		 * Fehler, den ein Test auf documentElement.scrollWidth NICHT sieht,
		 * weil die Pille selbst im Viewport bleibt.
		 *
		 * Ursache: die Pille ist ein inline-flex mit Sterne-Span + Textknoten.
		 * Flex-Items haben `min-width: auto` und schrumpfen nicht unter ihren
		 * min-content — „Google-Bewertungen" ist als Wort breiter als die
		 * 124px-Spalte. flex-wrap laesst die Sterne in eine eigene Zeile
		 * rutschen, min-width: 0 hebt die Schrumpfsperre auf, und
		 * overflow-wrap: anywhere ist das Sicherheitsnetz fuer lange Woerter
		 * bei jeder beliebigen Breite.
		 */
		flex-wrap: wrap;
		min-width: 0;
		overflow-wrap: anywhere;
		padding: var(--space-2) var(--space-3);
	}

	.gg-section-hero__stat > * {
		min-width: 0;
	}

	/* Auf Mobile würde die Badge mit dem Stats-Grid kollidieren — verstecken,
	 * Castrol-Botschaft kommt sowieso prominent in der eigenen Section. */
	.gg-section-hero__castrol-badge {
		display: none;
	}
}