/*
 * GORILLA GARAGE — Section: Vehicle-Classes
 *
 * Dunkle Section auf /aufbereitung/ (Section-Tokens kommen aus
 * .section--dark — KEIN eigener Background-Override, damit dieser
 * Bereich exakt auf demselben Schwarz sitzt wie die Reviews-Section
 * auf der Startseite).
 *
 * Karten orientieren sich am Review-Card-Look:
 *  - subtiler 3D-Gradient
 *  - Rot-Gold-Topstripe als Brand-Akzent
 *  - tiefer Drop-Shadow + Inset-Highlight
 *  - Hover-Lift (kein Tilt, weil Icon-Cards quadratischer wirken)
 *
 * Icons (rote 3D-Marker-Pins) bleiben mit Brand-Rot-Drop-Shadow.
 */

/* Heading-Block in dieser Section darf breiter laufen als das globale
 * 60ch-Default: Titel „Wählen Sie Ihre Fahrzeugklasse" passt damit auf
 * eine Zeile, der Subtitle wird flacher (war 3-zeilig, jetzt 1–2). */
.gg-section-vehicle-classes .section__heading {
	max-width: 64rem;
}

.gg-section-vehicle-classes .section__subtitle {
	max-width: 48rem;
	margin-inline: auto;
}

.gg-vehicle-classes__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

.gg-vehicle-classes__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-4);
	/* Padding-bottom + horizontal großzügig (> Cut-Wert 44px), damit Text
	 * NIE in die Chevron-Cut-Diagonale rutscht. */
	padding: var(--space-8) var(--space-10) var(--space-12);
	color: var(--gg-off-white);
	/* Card selbst transparent — Background, Topstripe und Chevron-Cut
	 * leben im ::before-Pseudo dahinter (analog Pakete-Card). */
	background: transparent;
	transition: transform var(--dur-base) var(--ease-emphasis);
	overflow: visible;
	isolation: isolate;
}

/* Background-Layer: Chevron-Cut + 3D-Gradient + Rot→Gold-Topstripe in
 * einer Pseudo-Schicht. clip-path schneidet border/box-shadow weg →
 * stattdessen filter: drop-shadow (folgt der Chevron-Silhouette). */
.gg-vehicle-classes__item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	clip-path: polygon(
		0 0,
		calc(100% - 44px) 0,
		100% 44px,
		100% 100%,
		44px 100%,
		0 calc(100% - 44px)
	);
	background:
		/* Topstripe Rot→Gold (oberste Lage) */
		linear-gradient(
			90deg,
			transparent 0%,
			var(--gg-red, #C8102E) 30%,
			var(--gg-gold, #C9A24C) 70%,
			transparent 100%
		) top left / 100% 3px no-repeat,
		/* Subtiles Top-Highlight */
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.04) 0%,
			rgba(255, 255, 255, 0) 40%
		),
		/* 3D-Body-Gradient */
		linear-gradient(
			160deg,
			#1f1f22 0%,
			#141417 55%,
			#0e0e10 100%
		);
	filter:
		drop-shadow(0 18px 28px rgba(0, 0, 0, 0.6))
		drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
	transition: filter var(--dur-base) var(--ease-emphasis);
	pointer-events: none;
}

.gg-vehicle-classes__item:hover,
.gg-vehicle-classes__item:focus-within {
	transform: var(--hover-lift-card);
}

.gg-vehicle-classes__item:hover::before,
.gg-vehicle-classes__item:focus-within::before {
	filter:
		drop-shadow(0 26px 42px rgba(0, 0, 0, 0.7))
		drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}

.gg-vehicle-classes__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(140px, 20vw, 180px);
	height: clamp(110px, 15vw, 140px);
	transition: transform var(--dur-base) var(--ease-emphasis);
}

.gg-vehicle-classes__icon {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 10px 18px rgba(200, 16, 46, 0.35));
}

.gg-vehicle-classes__icon-wrap:hover,
.gg-vehicle-classes__item:focus-within .gg-vehicle-classes__icon-wrap {
	transform: var(--hover-scale-icon);
}

.gg-vehicle-classes__title {
	font-family: var(--font-headline);
	font-weight: var(--fw-bold);
	font-size: var(--fs-lg);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: var(--gg-white);
	margin: 0;
}

.gg-vehicle-classes__examples {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
	max-width: 28ch;
}

.gg-vehicle-classes__footnote {
	margin: var(--space-8) auto 0;
	max-width: 56ch;
	text-align: center;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-snug);
	color: rgba(255, 255, 255, 0.7);
}

/* Tablet + Desktop: 3-spaltig */
@media (min-width: 768px) {
	.gg-vehicle-classes__grid {
		/*
		 * minmax(0, 1fr) statt 1fr: `1fr` ist kurz fuer `minmax(auto, 1fr)`,
		 * und `auto` als Minimum heisst „nie schmaler als der min-content der
		 * Spalte". Die Items tragen 80px horizontales Padding, dadurch lag der
		 * min-content bei 233,6px. Drei davon plus 2x --space-8 Gap ergaben
		 * 764,8px in einem 721,9px breiten Grid — die dritte Karte lief bis
		 * x=787,8 und damit 19,8px ueber den Viewport.
		 * Gleiche Ursache wie seinerzeit im Services-Bento-Grid.
		 */
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-8);
	}
}

/* /aufbereitung/: Section sitzt zwischen zwei Content-Blöcken (--leading
 * oben, --continued unten). Volles --section-padding-block (bis 128px je
 * Seite) ergibt zusammen mit der H2 darunter einen viel zu breiten Dark-
 * Korridor unter den Karten. Hier deshalb gestrafft — der Rhythmus bleibt
 * spürbar, aber kein doppelter Section-Break mehr. */
.gg-page-main--leading + .gg-section-vehicle-classes {
	padding-block: clamp(var(--space-12), 5vw, var(--space-20));
}

/* Startseite: Section nach oben ziehen, damit der dunkle BG unter dem
 * Chevron-Kasten von „Schnell ans Ziel" liegt. Nur Desktop/Tablet — auf
 * Mobile sitzen die Chevrons gestapelt, da macht der Overlap keinen Sinn.
 * /aufbereitung/ bleibt unberührt (kein body.home). */
@media (min-width: 768px) {
	body.home .gg-section-vehicle-classes {
		/* Dark-Section beginnt erst nach einem deutlichen Weißraum unter dem
		 * Chevron-Strip — und ihre OBERKANTE läuft mittig durch die Cards.
		 * Daher padding-top: 0 (BG startet exakt am Section-Top) und die
		 * Cards werden um die halbe Card-Höhe nach oben gehoben, sodass die
		 * obere Hälfte im Weißraum, die untere auf dem Dark-BG sitzt. */
		margin-top: clamp(60px, 6vw, 120px);
		padding-top: 0;
		padding-bottom: clamp(var(--space-10), 4vw, var(--space-16));
		position: relative;
		z-index: 1;
	}

	body.home .gg-section-vehicle-classes .gg-vehicle-classes__grid {
		margin-top: clamp(-160px, -10vw, -110px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gg-vehicle-classes__item,
	.gg-vehicle-classes__item:hover,
	.gg-vehicle-classes__item:focus-within,
	.gg-vehicle-classes__icon-wrap,
	.gg-vehicle-classes__icon-wrap:hover,
	.gg-vehicle-classes__item:focus-within .gg-vehicle-classes__icon-wrap {
		transform: none;
		transition: none;
	}
}