/*
 * GORILLA GARAGE — Section: Services-Bento
 *
 * Cluster-Bento mit Icon-Grids in den Karten.
 * Werkstatt = dominante Karte (Hauptfokus laut PROJECT.md):
 *   Desktop ab 1024: Werkstatt span 7, Reifen + Aufbereitung je span 5 (gestapelt).
 *   Tablet ab 768: Werkstatt span 2 oben, Reifen + Aufbereitung daneben.
 *   Mobile: einspaltig.
 *
 * Tiles tragen das einheitliche Brand-Chevron-Cut-Treatment (top-right +
 * bottom-left chamfer, 44px) — identisch zu Pakete-Card, Vehicle-Classes,
 * Review-Card, Experts und Warum-Card. Die alten asymmetrischen 56px-Cuts
 * (gg-card--clip / --clip-tr) werden hier neutralisiert; das Markup darf
 * die Modifier weiterhin tragen, sie greifen aber nicht mehr.
 */

/*
 * Section ist Anker fuer das dekorative Gorilla-Auto-Motiv (rechts).
 * KEIN overflow: hidden, damit der Gorilla oben in den Hero hineinragen darf
 * (horizontaler Ueberhang des Autos wird von body { overflow-x: hidden }
 * sauber geclippt — siehe base.css).
 *
 * Auch KEIN overflow-x: clip. Das waere technisch sauberer (die Section
 * clippt sich selbst statt sich auf die globale Regel zu verlassen, und die
 * Dokumentbreite bliebe bei 1280 statt 1620 bei 1280px Viewport), macht die
 * Section aber zu einem Clip-Container: ein wieder aufgeblasenes Icon-Grid
 * darin wuerde die Dokumentbreite nicht mehr veraendern und damit von jedem
 * scrollWidth-basierten Overflow-Test unbemerkt bleiben. Gemessen: mit clip
 * meldet der Test bei absichtlich kaputtem Grid (repeat(2, 1fr) + nowrap)
 * bei 375px faelschlich OK statt +55px.
 *
 * Das Motiv ist dekorativ (aria-hidden) und war nie ein sichtbarer Fehler —
 * die Erkennbarkeit von Regressionen in genau dieser Section wiegt schwerer.
 */
.gg-section-services {
	position: relative;
}

/* Breitere Sektion — Services nutzt --container-wide (1440px) statt 1280px Default */
.gg-section-services > .container {
	max-width: var(--container-wide);
}

/*
 * Dekoratives Gorilla-Auto-Motiv — sitzt rechts im Container. Mobile ausgeblendet.
 */
.gg-section-services__motif {
	display: none;
	position: absolute;
	top: -180px;
	right: -340px;
	width: 800px;
	height: auto;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	z-index: 2;
}

@media (min-width: 1024px) {
	.gg-section-services__motif {
		display: block;
	}

	/* Services-Titel einzeilig — sonst erzwingt text-wrap: balance Umbruch */
	.gg-section-services .section__title {
		text-wrap: nowrap;
		white-space: nowrap;
	}
}

/* Container und Header bleiben ueber dem Motiv */
.gg-section-services > .container {
	position: relative;
	z-index: 1;
}

/*
 * Header-Block (Eyebrow + Titel + Subline) auf die Fluchtlinie der Box-Texte
 * einruecken (Card-Padding-left = --space-12) und etwas nach oben ziehen,
 * damit er optisch mit den darunterliegenden Karten zusammenhaengt.
 */
.gg-section-services .section__heading {
	padding-inline-start: var(--space-12);
	margin-top: calc(-1 * var(--space-8));
}

.gg-section-services__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
}

.gg-section-services__card {
	min-height: 320px;
}

/*
 * Service-Bento-Karten tragen das einheitliche Chevron-Cut-Treatment.
 * Container transparent; Background + Topstripe + Drop-Shadow im ::before,
 * weil clip-path border/box-shadow an den Cuts wegschneidet
 * ([[feedback_keine_border_auf_chevron]]). !important sichert den Override
 * gegen .gg-card-Basis (border, box-shadow, background, clip-path).
 */
.section--dark .gg-section-services__grid .gg-card,
.section--dark-soft .gg-section-services__grid .gg-card {
	--card-bg:       transparent;
	--card-fg:       var(--gg-off-white);
	--card-fg-muted: var(--gg-grey-300);
	--card-border:   transparent;
	--card-bg-image: none;

	position: relative;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	clip-path: none !important;
	/* 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) var(--space-12);
	overflow: visible;
	isolation: isolate;
	transition: transform var(--dur-base) var(--ease-emphasis);
}

/* Background-Layer: Chevron-Cut + 3D-Gradient + Rot→Gold-Topstripe */
.section--dark .gg-section-services__grid .gg-card::before,
.section--dark-soft .gg-section-services__grid .gg-card::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:
		linear-gradient(
			90deg,
			transparent 0%,
			var(--gg-red, #C8102E) 30%,
			var(--gg-gold, #C9A24C) 70%,
			transparent 100%
		) top left / 100% 3px no-repeat,
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.04) 0%,
			rgba(255, 255, 255, 0) 40%
		),
		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;
}

.section--dark .gg-section-services__grid .gg-card:hover,
.section--dark-soft .gg-section-services__grid .gg-card:hover {
	transform: var(--hover-lift-card);
	box-shadow: none !important;
}

.section--dark .gg-section-services__grid .gg-card:hover::before,
.section--dark-soft .gg-section-services__grid .gg-card:hover::before {
	filter:
		drop-shadow(0 26px 42px rgba(0, 0, 0, 0.7))
		drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}

/*
 * CTA-Button am Card-Boden — solid dunkelgrau (Kanten-Konflikt mit chevron-clip
 * verbietet Outline-Treatment, siehe button.css-Kommentar). Pinnt unten,
 * stretcht nicht.
 */
.gg-section-services__grid .gg-card__cta {
	--btn-bg:            var(--gg-grey-700);
	--btn-bg-hover:      var(--gg-black-soft, #1a1a1a);
	--btn-bg-active:     var(--gg-black);
	--btn-color:         var(--gg-white);
	--btn-border-color:  transparent;
	--btn-drop-shadow:        none;
	--btn-drop-shadow-hover:  drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
	--btn-drop-shadow-active: none;

	margin-top: auto;
	align-self: flex-end;
}

.gg-section-services__grid .gg-card__cta:hover {
	color: var(--gg-white);
}

.gg-section-services__card--werkstatt .gg-card__title {
	font-size: var(--fs-2xl);
}

.gg-card__title-link {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur-base) var(--ease-emphasis);
}

.gg-card__title-link:hover {
	color: var(--color-brand, #c8102e);
	text-decoration: none;
}

.gg-card__title-link:focus-visible {
	outline: 2px solid var(--color-brand, #c8102e);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Tablet */
@media (min-width: 768px) {
	.gg-section-services__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-auto-rows: minmax(320px, auto);
	}

	.gg-section-services__card--werkstatt {
		grid-column: span 2;
	}
}

/* Desktop */
@media (min-width: 1024px) {
	.gg-section-services__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--space-8);
	}

	.gg-section-services__card--werkstatt {
		grid-column: span 7;
		grid-row: span 2;
	}

	.gg-section-services__card--reifen {
		grid-column: span 5;
	}

	.gg-section-services__card--aufbereitung {
		grid-column: span 5;
	}
}

/* ────────────────────────────────────────────────────────────
 * Icon-Grid IN den Cluster-Karten (ersetzt frühere Bullet-Liste)
 * ──────────────────────────────────────────────────────────── */

/*
 * minmax(0, 1fr) statt 1fr: `1fr` ist die Kurzform von `minmax(auto, 1fr)`,
 * und `auto` als Minimum heisst „nie schmaler als der min-content der Spalte".
 * Die Sub-Pills waren `white-space: nowrap` — damit war der min-content einer
 * Spalte die volle Textbreite der laengsten Pill. Im Werkstatt-Cluster ist das
 * „Castrol SERVICE Betrieb" (~149px); auf einem 375px-Viewport stehen pro
 * Spalte aber nur ~123px zur Verfuegung. Das Grid hat die Karte dadurch nach
 * rechts aufgeblasen und die Startseite mobil horizontal scrollen lassen.
 * Die Pills brechen jetzt um (siehe .gg-card__icon-tile-pill), und die Spalten
 * duerfen wieder schrumpfen.
 */
.gg-card__icon-grid {
	list-style: none;
	padding: 0;
	margin: var(--space-8) 0 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5) var(--space-4);
}

.gg-card__icon-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-2);
}

.gg-card__icon-tile-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	color: inherit;
	text-decoration: none;
	border-radius: var(--radius-md, 12px);
	outline: none;
}

.gg-card__icon-tile-link:hover,
.gg-card__icon-tile-link:focus-visible {
	color: inherit;
	text-decoration: none;
}

.gg-card__icon-tile-link:focus-visible {
	outline: 2px solid var(--color-brand, #c8102e);
	outline-offset: 6px;
}

.gg-card__icon-tile-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(64px, 9vw, 88px);
	height: clamp(64px, 9vw, 88px);
	transition: transform var(--dur-base) var(--ease-emphasis);
}

.gg-card__icon-tile-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 4px 10px rgba(200, 16, 46, 0.22));
}

.gg-card__icon-tile-wrap:hover,
.gg-card__icon-tile:focus-within .gg-card__icon-tile-wrap {
	transform: var(--hover-scale-icon);
}

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

	.section--dark .gg-section-services__grid .gg-card,
	.section--dark-soft .gg-section-services__grid .gg-card,
	.section--dark .gg-section-services__grid .gg-card:hover,
	.section--dark-soft .gg-section-services__grid .gg-card:hover {
		transform: none;
		transition: none;
	}
}

/* ────────────────────────────────────────────────────────────
 * Erklär-Tooltip auf den Icon-Tiles
 *
 * Erscheint per CSS beim :hover/:focus-within über dem Icon.
 * `aria-hidden="true"` im HTML — Title + Pills decken Screenreader-Info
 * bereits ab, der Tooltip ist rein dekorativer Erklär-Layer.
 * Auf Touch-Geräten deaktiviert (kein echter Hover, vermeidet Flackern beim Tap).
 * ──────────────────────────────────────────────────────────── */

.gg-card__icon-tile-tooltip {
	position: absolute;
	bottom: calc(100% - var(--space-2));
	left: 50%;
	transform: translate(-50%, 4px);
	width: max-content;
	/*
	 * Auf Touch-Geraeten ist der Tooltip ohnehin display:none (siehe
	 * @media (hover: none) weiter unten) — auf einem schmal gezogenen
	 * DESKTOP-Fenster greift diese Regel aber nicht. Dort stand der um
	 * translateX(-50%) zentrierte 240px-Tooltip der rechten Grid-Spalte
	 * ueber der Viewport-Kante (bei 320px bis x=336, also +16px).
	 * Die vw-Schranke deckelt ihn erst unterhalb von ~429px Fensterbreite,
	 * darueber bleiben die vollen 240px erhalten.
	 */
	max-width: min(240px, 56vw);
	padding: 10px 14px;
	background: var(--gg-black-soft, #141414);
	color: var(--gg-white);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-wide);
	text-align: center;
	border-radius: var(--radius-md, 10px);
	box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.55);
	opacity: 0;
	pointer-events: none;
	z-index: 5;
	transition:
		opacity var(--dur-base) var(--ease-emphasis),
		transform var(--dur-base) var(--ease-emphasis);
}

/* Pfeil unten — zeigt auf das Icon */
.gg-card__icon-tile-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--gg-black-soft, #141414);
}

.gg-card__icon-tile-wrap:hover ~ .gg-card__icon-tile-tooltip,
.gg-card__icon-tile:focus-within .gg-card__icon-tile-tooltip {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Touch: Tooltip aus (kein echter Hover) */
@media (hover: none) {
	.gg-card__icon-tile-tooltip {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gg-card__icon-tile-tooltip,
	.gg-card__icon-tile-wrap:hover ~ .gg-card__icon-tile-tooltip,
	.gg-card__icon-tile:focus-within .gg-card__icon-tile-tooltip {
		transform: translate(-50%, 0);
		transition: opacity var(--dur-base) linear;
	}
}

/*
 * Tile-Titel als dunkler Chevron-Chip (Hauptbegriff: INSPEKTION, BREMSEN-
 * SERVICE …). Sub-Pills darunter sind einheitlich mittelgrau — der dunkle
 * Akzent gehört dem Titel, nicht einem Unterpunkt.
 *
 * align-self:center hält den Chip auf Content-Breite trotz flex-column-Parent.
 * white-space normal lässt mehrzeilige Titel ("Klassiker & Oldtimer") sauber
 * umbrechen; der clip-path skaliert mit der Box-Höhe.
 */
.gg-card__icon-tile-title {
	--btn-chevron-cut: 7px;
	align-self: center;
	max-width: 100%;
	/* Notnagel fuer sehr schmale Geraete (320px): „OLDTIMER" ist als einzelnes
	 * Wort breiter als die halbe Spalte und wuerde sonst aus dem Chip laufen. */
	overflow-wrap: break-word;
	font-family: var(--font-headline);
	font-weight: var(--fw-bold);
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
	color: var(--gg-white);
	background-color: var(--gg-black-soft);
	margin: var(--space-1) 0 0;
	padding: 6px 14px;
	letter-spacing: var(--ls-tight);
	text-transform: uppercase;
	clip-path: var(--clip-btn-chevron);
}

/*
 * max-width: min(22ch, 100%) — 22ch haelt die Pill-Zeile auf Desktop kompakt,
 * die 100%-Schranke verhindert, dass die Liste in einer schmalen Grid-Spalte
 * breiter wird als die Spalte selbst.
 */
.gg-card__icon-tile-pills {
	list-style: none;
	padding: 0;
	margin: var(--space-2) 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5px 6px;
	max-width: min(22ch, 100%);
}

/*
 * Kleine Chevron-Chips (Sub-Services), einheitlich mittelgrau.
 * Form via clip-path (--clip-btn-chevron mit reduziertem Cut). Border/Outline
 * würde von clip-path an den Cuts abgeschnitten (feedback_keine_border_auf_chevron),
 * daher Look ausschließlich über background.
 *
 * Umbruch statt nowrap — wie beim Tile-Titel darueber: der clip-path skaliert
 * mit der Box-Hoehe, ein zweizeiliger Chip bleibt also formtreu. nowrap war die
 * Ursache des mobilen Overflows (siehe .gg-card__icon-grid). Auf Desktop bleibt
 * jede Pill einzeilig, dort reicht der Platz — es aendert sich nur die
 * Zeilenhoehe von 1 auf --lh-snug, damit umgebrochene Chips nicht kleben.
 */
.gg-card__icon-tile-pill {
	--btn-chevron-cut: 5px;
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: var(--fw-regular);
	line-height: var(--lh-snug);
	color: var(--gg-white);
	background-color: var(--gg-grey-700);
	padding: 5px 10px;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: break-word;
	text-align: center;
	letter-spacing: var(--ls-normal);
	clip-path: var(--clip-btn-chevron);
	border: 0;
}

/* Werkstatt: 7 Icons → 3 Spalten ab Tablet, 4 Spalten auf großem Desktop.
 * minmax(0, 1fr) aus demselben Grund wie oben — die Karte ist ab 1024px nur
 * noch 7 von 12 Spalten breit, dort wird es fuer die langen Pills wieder eng. */
@media (min-width: 640px) {
	.gg-section-services__card--werkstatt .gg-card__icon-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.gg-section-services__card--werkstatt .gg-card__icon-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Aufbereitung: nur 1 Icon → zentriert, etwas größer */
.gg-section-services__card--aufbereitung .gg-card__icon-grid {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
}

.gg-section-services__card--aufbereitung .gg-card__icon-tile-wrap {
	width: clamp(88px, 12vw, 112px);
	height: clamp(88px, 12vw, 112px);
}

.gg-section-services__card--aufbereitung .gg-card__icon-tile-title {
	font-size: var(--fs-base);
}

/* ────────────────────────────────────────────────────────────
 * Inline-Tags (komma-getrennte Sub-Services unter dem Icon-Grid)
 * ──────────────────────────────────────────────────────────── */

.gg-card__inline-tags {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
	color: var(--card-fg-muted);
	margin: var(--space-3) 0 0;
	letter-spacing: var(--ls-wide);
	text-align: center;
}