/*
 * GORILLA GARAGE — Section: Process-Steps („Schnell ans Ziel")
 *
 * Liegt auf der Chevron-Component (.chevron-strip / .chevron-cut). Hier:
 *   - Section-Wrapper
 *   - Wrapper-<li> (.gg-process-step) hält Icon + Chevron-Block. Der Chevron-Block
 *     (.gg-process-step__chevron) bekommt den Cut/Clip-Path; das Icon liegt
 *     AUSSERHALB des Clip-Paths und ragt nach oben aus dem Chevron raus.
 *   - Inhalts-Layout pro Chevron (Title+Body, Ghost-Number rechts)
 *   - Step 3 („Fertig abholen") ist rechtsbündig + Icon deutlich größer
 *   - Sequential Reveal (Stagger), Icon-Pop, Ghost-Number-Slide
 *   - Hover-Lift mit drop-shadow (clip-path-kompatibel)
 *   - Mobile: stacked vom Chevron-Component, plus section-spezifische Tunings.
 */

.gg-section-process {
	background-color: var(--gg-white);
	/* Weiß früher anfangen: Section überlappt nach oben in den unteren
	 * Padding-Bereich der services-bento (dort ist nur dunkle Canvas,
	 * kein Content) → Dark→Light-Kante rutscht sichtbar nach oben. */
	margin-top: calc(var(--section-padding-block) * -0.6);

	/* TOP knapp halten (Heading sitzt eng unterhalb der Dark→Light-Kante),
	 * BOTTOM großzügig — damit die Chevrons unten klaren Atemraum zur
	 * nachfolgenden Vehicle-Classes-Section (Cars) bekommen. */
	padding-top: var(--space-2);
	/* padding-bottom = Basis-Spacing + Kompensation für den negativen
	 * margin-top der Strip (siehe unten). Sonst rutscht die Dark-Kante der
	 * Vehicle-Classes-Section zu hoch in die Auto-Cards. */
	padding-bottom: calc(clamp(var(--space-16), 7vw, var(--space-24)) + var(--gg-step-icon-size-lg) * var(--gg-step-icon-overhang) * 0.45);

	/* Section-eigene, tiefere Chevron-Spitze — Token --chevron-depth wird
	 * nicht direkt von den globalen clip-paths gelesen (die sind hardcoded auf 32px),
	 * deshalb überschreiben wir die clip-paths weiter unten lokal. */
	--gg-cut: clamp(48px, 6vw, 80px);

	/* Größen-Tokens für den Icon-Overhang (oben aus dem Chevron raus).
	 * overhang=0.45 → Icons sitzen jetzt tiefer IM Chevron, sticken weniger
	 * weit oben raus. Spart ~120 px weißen Streifen über den Chevrons, ohne
	 * den „schwebenden" Bubble-Effekt komplett zu verlieren. */
	--gg-step-icon-size: clamp(72px, 7.2vw, 100px);
	/* Fertig-Icon (Gorilla) ~3× größer als die Standard-Icons — bewusster
	 * „Belohnungs"-Akzent am Ende des Process-Strips. */
	--gg-step-icon-size-lg: clamp(220px, 22vw, 320px);
	--gg-step-icon-overhang: 0.45;
}

.gg-section-process .section__heading {
	/* Heading bewusst nach UNTEN gezogen (näher zu den Chevrons), gleichzeitig
	 * bleibt der Bereich darüber kompakt (Section-padding-top ist klein). */
	margin-top: clamp(var(--space-8), 4vw, var(--space-16));
	margin-bottom: var(--space-2);
}

/* Chevron-Strip enger an die Headline ziehen — der große padding-top auf
 * .gg-process-step (für den Icon-Overhang) erzeugt sonst eine sichtbare
 * Leerzone zwischen Subtitle und Chevron-Oberkante. Wir kompensieren mit
 * einem negativen margin-top, damit die Icons in den freien Raum neben/unter
 * der Headline wachsen, statt darunter eine eigene Pufferzone aufzuziehen. */
.gg-section-process .gg-process-strip {
	margin-top: calc(var(--gg-step-icon-size-lg) * var(--gg-step-icon-overhang) * -0.95);
}

.gg-section-process .section__heading .section__subtitle {
	margin-top: var(--space-2);
	max-width: 48ch;
}

/* ────────────────────────────────────────────────────────────
 * Strip-Wrapper + tiefere Chevron-Spitzen (section-scoped)
 * ──────────────────────────────────────────────────────────── */

.gg-process-strip {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Chevrons werden am UNTEREN Strip-Rand ausgerichtet — entscheidend, weil
 * Step 3 jetzt einen anderen overhang hat als Step 1/2 und sein <li>
 * dadurch insgesamt höher wird. Mit align-items: end enden alle Chevrons
 * auf derselben Linie, während der Gorilla oben in den extra Platz wächst. */
.gg-section-process .chevron-strip {
	align-items: end;
}

/* Section-spezifische clip-paths mit deutlich tieferer Spitze — auf dem inneren
 * .gg-process-step__chevron, da dieser jetzt der geclippte Block ist.
 * +1px Overlap, damit kein Sub-Pixel-Spalt zwischen Chevrons sichtbar wird. */
.gg-section-process .chevron-cut.chevron-cut--first {
	clip-path: polygon(
		0 0,
		calc(100% - var(--gg-cut)) 0,
		100% 50%,
		calc(100% - var(--gg-cut)) 100%,
		0 100%
	);
}

.gg-section-process .chevron-cut.chevron-cut--both {
	clip-path: polygon(
		var(--gg-cut) 0,
		calc(100% - var(--gg-cut)) 0,
		100% 50%,
		calc(100% - var(--gg-cut)) 100%,
		var(--gg-cut) 100%,
		0 50%
	);
}

.gg-section-process .chevron-cut.chevron-cut--last {
	clip-path: polygon(
		var(--gg-cut) 0,
		100% 0,
		100% 100%,
		var(--gg-cut) 100%,
		0 50%
	);
}

/* Wrapper-<li>s überlappen sich um die Cut-Tiefe — die ursprüngliche
 * Regel zielte auf .chevron-cut direkt im Strip; jetzt sind die <li>s die
 * direkten Kinder, also überlappen wir die <li>s. */
.gg-section-process .gg-process-strip > li + li {
	margin-left: calc(var(--gg-cut) * -1 - 1px);
}

/* Mittlerer Step („Fahrzeug abgeben") ist bewusst ein flaches Rechteck und
 * liegt hinter den beiden äußeren Chevron-Pfeilen — die Spitze von Step 1
 * und die linke Einkerbung von Step 3 überlagern das Rechteck.
 *
 * Wichtig: Polster links/rechts müssen größer sein als var(--gg-cut),
 * sonst werden Title/Body von den darüberliegenden Chevrons verdeckt. */
.gg-section-process .gg-process-step__chevron.chevron-cut--both {
	clip-path: none;
	z-index: 0;
	padding-left: calc(var(--gg-cut) + clamp(var(--space-4), 2vw, var(--space-6)));
	padding-right: calc(var(--gg-cut) + clamp(var(--space-4), 2vw, var(--space-6)));
}

/* Ghost-„2" sitzt sonst hinter Step 3's Einkerbung — vom rechten Rand
 * um die Cut-Tiefe nach innen rücken, damit sie im sichtbaren Rechteck steht. */
.gg-section-process .gg-process-step__chevron.chevron-cut--both .gg-process-step__number {
	right: calc(var(--gg-cut) + clamp(var(--space-2), 1.5vw, var(--space-4)));
}

.gg-section-process .gg-process-step--first,
.gg-section-process .gg-process-step--last {
	z-index: 1;
}

/* ────────────────────────────────────────────────────────────
 * Wrapper-<li>: Positions-Anker für das überlappende Icon
 * ──────────────────────────────────────────────────────────── */

.gg-process-step {
	position: relative;
	display: block;
	/* Gleiches Top-Padding für ALLE Steps — bemessen am größten Icon (Step 3),
	 * damit alle Chevron-Blöcke unten auf derselben Höhe starten und sich der
	 * Strip nicht „verstuft" anfühlt. Step 1/2 nutzen die obere Hälfte dieser
	 * Zone für ihr kleineres, etwas tiefer schwebendes Icon. */
	padding-top: calc(var(--gg-step-icon-size-lg) * var(--gg-step-icon-overhang));
	/* Reveal-Utility neutralisieren — wir treiben den Entrance per @keyframes. */
	transition: none;
}

/* ────────────────────────────────────────────────────────────
 * Chevron-Block (die eigentliche farbige, geclippte Box)
 *
 * Layout pro Chevron (Referenz):
 *   ┌──────────────────────────┐
 *   │                [Ghost #] │   ← Number top-right
 *   │                          │
 *   │  Title                   │
 *   │  Body                    │
 *   └──────────────────────────┘
 *
 * Wir überschreiben das zentrierte Flex-Layout der Component.
 * ──────────────────────────────────────────────────────────── */

.gg-process-step__chevron {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
	gap: clamp(var(--space-3), 1.5vw, var(--space-4));

	/* Polster, damit Inhalt nicht in die Diagonal-Cuts ragt UND damit
	 * Title/Body sicher UNTER dem reinragenden Icon-Tail sitzen. Top:
	 * Icon-Overlap (≈15% von --gg-step-icon-size) + Sicherheitsabstand. */
	padding: calc(var(--gg-step-icon-size) * (1 - var(--gg-step-icon-overhang)) + clamp(var(--space-4), 2vw, var(--space-6)))
	         clamp(var(--space-8), 4vw, var(--space-12))
	         clamp(var(--space-6), 3vw, var(--space-8))
	         clamp(var(--space-10), 5vw, var(--space-16));

	min-height: clamp(240px, 22vw, 320px);
	overflow: hidden; /* clippt Ghost-Number sauber an der Cut-Kante */
}

/* Erstes Chevron hat keinen Cut links — Padding-Left kann kleiner sein. */
.gg-process-step--first .gg-process-step__chevron {
	padding-left: clamp(var(--space-6), 3vw, var(--space-8));
}

/* Step 3 bekommt einen EIGENEN, höheren Overhang — der Gorilla sticht
 * prominent nach oben raus, während Step 1/2 mit dem kleineren Wert
 * eng am Chevron bleiben. Die Strip-align: end-Regel oben sorgt dafür,
 * dass trotzdem alle Chevron-Unterkanten auf einer Linie sitzen. */
.gg-process-step--last {
	--gg-step-icon-overhang: 0.85;
}

/* Step 3: größeres Icon → mehr Top-Padding nötig, damit Title nicht
 * vom Icon überdeckt wird. Außerdem Inhalt rechtsbündig. */
.gg-process-step--last .gg-process-step__chevron {
	align-items: flex-end;
	text-align: right;
	padding-top: calc(var(--gg-step-icon-size-lg) * (1 - var(--gg-step-icon-overhang)) + clamp(var(--space-4), 2vw, var(--space-6)));
	padding-right: clamp(var(--space-10), 5vw, var(--space-16));
}

/* ────────────────────────────────────────────────────────────
 * Ghost-Number (große, halbtransparente „1/2/3" oben rechts)
 * ──────────────────────────────────────────────────────────── */

.gg-process-step__number {
	position: absolute;
	right: clamp(var(--space-6), 4vw, var(--space-10));
	top: clamp(var(--space-3), 2vw, var(--space-6));
	font-family: var(--font-headline);
	font-weight: var(--fw-bold);
	font-size: clamp(5rem, 9vw, 8.5rem);
	line-height: 1;
	letter-spacing: var(--ls-tighter);
	color: rgba(255, 255, 255, 0.22);
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	z-index: 0;
}

/* Auf dem schwarzen Chevron wirkt der Ghost sonst zu hell — etwas runter. */
.gg-process-step__chevron.chevron-cut--black .gg-process-step__number {
	color: rgba(255, 255, 255, 0.14);
}

/* Step 3 ist rechtsbündig → Ghost-„3" wandert nach links, damit sie nicht
 * über dem rechtsbündigen Title liegt. */
.gg-process-step--last .gg-process-step__number {
	right: auto;
	left: calc(var(--gg-cut) + clamp(var(--space-2), 1.5vw, var(--space-4)));
}

/* ────────────────────────────────────────────────────────────
 * Icon — absolut positioniert, ragt oben aus dem Chevron raus
 *
 * Das Icon liegt AUSSERHALB von .gg-process-step__chevron (kein clip-path
 * auf dem Wrapper-<li>), kann also frei nach oben rausragen.
 * ──────────────────────────────────────────────────────────── */

.gg-process-step__icon {
	position: absolute;
	z-index: 2;
	/* Icon-Unterkante landet knapp UNTER der Chevron-Oberkante. Da das
	 * <li>-Padding-Top am lg-Icon bemessen ist, müssen kleinere Icons nach
	 * unten verschoben werden, damit ihre Unterkante ähnlich tief in den
	 * Chevron eintaucht wie die des großen Icons.
	 * top = (lg - normal) * overhang  → Icon-Bottom auf gleichem Level. */
	top: calc((var(--gg-step-icon-size-lg) - var(--gg-step-icon-size)) * var(--gg-step-icon-overhang));
	left: clamp(var(--space-6), 4vw, var(--space-10));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--gg-step-icon-size);
	height: var(--gg-step-icon-size);
	pointer-events: none;
	transition: transform var(--dur-base) var(--ease-emphasis);
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28));
}

/* Step 2 hat eine linke Cut-Einkerbung — Icon nach innen rücken. */
.gg-process-step--both .gg-process-step__icon {
	left: calc(var(--gg-cut) + clamp(var(--space-4), 2vw, var(--space-6)));
}

/* Step 3: Icon deutlich größer, rechts platziert (rechtsbündig).
 * Es ist das lg-Icon → sitzt am oberen Rand des <li>s (top: 0). */
.gg-process-step--last .gg-process-step__icon {
	width: var(--gg-step-icon-size-lg);
	height: var(--gg-step-icon-size-lg);
	top: 0;
	left: auto;
	right: clamp(var(--space-6), 4vw, var(--space-10));
}

.gg-process-step__icon svg,
.gg-process-step__icon img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

/* ────────────────────────────────────────────────────────────
 * Content (Title + Body)
 * ──────────────────────────────────────────────────────────── */

.gg-process-step__content {
	position: relative;
	z-index: 1;
	width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.gg-process-step--last .gg-process-step__content {
	align-items: flex-end;
}

.gg-process-step__title {
	margin: 0;
	font-family: var(--font-headline);
	font-weight: var(--fw-bold);
	font-size: var(--fs-xl);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: inherit;
}

.gg-process-step__body {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
	color: rgba(255, 255, 255, 0.85);
	max-width: 28ch;
}

/* CTA-Button pro Step. Bleibt inline-flex (kein full-width), damit er bei
 * Step 3 mit dem rechtsbündigen Content rechts steht und sonst links unter
 * dem Body. Etwas mehr Abstand nach oben als der Content-Gap, damit der
 * Button optisch zum Body gehört, aber sich klar absetzt. */
.gg-process-step__cta {
	align-self: flex-start;
	margin-top: clamp(var(--space-3), 1.2vw, var(--space-4));
}

.gg-process-step--last .gg-process-step__cta {
	align-self: flex-end;
}

/* ────────────────────────────────────────────────────────────
 * Hover-Lift
 *
 * filter: drop-shadow folgt — anders als box-shadow — der geclippten
 * Chevron-Silhouette. Wir setzen Hover auf den Wrapper, damit Icon
 * UND Chevron-Block gemeinsam liften.
 * ──────────────────────────────────────────────────────────── */

@media (hover: hover) and (min-width: 768px) {
	.gg-process-step {
		transition:
			transform var(--dur-base) var(--ease-emphasis);
	}

	.gg-process-step__chevron {
		transition: filter var(--dur-base) var(--ease-emphasis);
	}

	.gg-process-step:hover {
		transform: var(--hover-lift-card);
		z-index: var(--z-raised);
	}

	.gg-process-step:hover .gg-process-step__chevron {
		filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.22));
	}

	.gg-process-step:hover .gg-process-step__icon {
		transform: var(--hover-scale-icon);
	}

	.gg-process-step:hover .gg-process-step__chevron.chevron-cut--red,
	.gg-process-step:hover .gg-process-step__chevron.chevron-cut--red-bright {
		filter: drop-shadow(0 14px 30px rgba(200, 16, 46, 0.45));
	}
}

/* ────────────────────────────────────────────────────────────
 * Sequential Reveal (Stagger)
 *
 * Inline-Style setzt --gg-reveal-delay pro Step (0/140/280 ms).
 * Die Section-Heading nutzt weiter die Utility-Reveal; die Steps
 * laufen über die Keyframes hier — daher transition:none oben.
 * ──────────────────────────────────────────────────────────── */

@keyframes gg-process-step-enter {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes gg-process-step-icon-pop {
	0% {
		opacity: 0;
		transform: scale(0.55);
	}
	65% {
		opacity: 1;
		transform: scale(1.12);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes gg-process-step-ghost-slide {
	from {
		opacity: 0;
		transform: translateX(40%);
	}
	to {
		opacity: 0.22;
		transform: translateX(0);
	}
}

@keyframes gg-process-step-ghost-slide-black {
	from {
		opacity: 0;
		transform: translateX(40%);
	}
	to {
		opacity: 0.14;
		transform: translateX(0);
	}
}

/* Initial-State: nur wenn JS aktiv (kein FOUC ohne JS) */
html.js .gg-process-step:not(.is-revealed) {
	opacity: 0;
	transform: translateY(28px);
}

html.js .gg-process-step:not(.is-revealed) .gg-process-step__icon,
html.js .gg-process-step:not(.is-revealed) .gg-process-step__number {
	opacity: 0;
}

html.js .gg-process-step.is-revealed {
	animation: gg-process-step-enter var(--dur-slower) var(--ease-emphasis) var(--gg-reveal-delay, 0ms) both;
}

html.js .gg-process-step.is-revealed .gg-process-step__icon {
	animation: gg-process-step-icon-pop var(--dur-slower) var(--ease-emphasis)
		calc(var(--gg-reveal-delay, 0ms) + 180ms) both;
}

html.js .gg-process-step.is-revealed .gg-process-step__number {
	animation: gg-process-step-ghost-slide var(--dur-slower) var(--ease-emphasis)
		calc(var(--gg-reveal-delay, 0ms) + 260ms) both;
}

html.js .gg-process-step.is-revealed .gg-process-step__chevron.chevron-cut--black .gg-process-step__number {
	animation-name: gg-process-step-ghost-slide-black;
}

/* ────────────────────────────────────────────────────────────
 * Mobile-Anpassungen
 *
 * .chevron-strip → bei <=768px stacked vertikal mit Pfeil-nach-unten
 * (siehe components/chevron.css). Wir tunen hier nur Inhalts-Layout,
 * stellen sicher dass die Ghost-Number nicht die ganze Card überdeckt
 * und passen den Icon-Overhang an die mobile Grösse an.
 * ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.gg-section-process {
		--gg-step-icon-size: 72px;
		--gg-step-icon-size-lg: 144px;
	}

	/* Der negative Strip-margin-top (Desktop: Icons wachsen in den freien
	 * Raum NEBEN der Headline) hat auf Mobile keinen Sinn — hier ist der Strip
	 * vertikal gestapelt, es gibt kein „daneben". Der Pull zieht sonst das
	 * erste Bubble-Icon in den Subtitle. Padding-top jeder Step-<li> liefert
	 * den Schwebe-Raum fürs Icon bereits selbst, daher hier klarer Abstand. */
	.gg-section-process .gg-process-strip {
		margin-top: var(--space-6);
	}

	/* Vertikales Stacking — Chevrons zeigen nach unten statt nach rechts.
	 * Wir überschreiben die Desktop-Horizontal-Clip-Paths, da der Strip auf
	 * Mobile (siehe components/chevron.css) zu einer Spalte wird. */
	.gg-section-process .chevron-cut.chevron-cut--first,
	.gg-section-process .chevron-cut.chevron-cut--both {
		clip-path: polygon(
			0 0,
			100% 0,
			100% calc(100% - 24px),
			50% 100%,
			0 calc(100% - 24px)
		);
	}

	.gg-section-process .chevron-cut.chevron-cut--last {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}

	.gg-process-step__chevron {
		min-height: 200px;
		padding: calc(var(--gg-step-icon-size) * (1 - var(--gg-step-icon-overhang)) + var(--space-4))
		         var(--space-6)
		         var(--space-12);
	}

	.gg-process-step--last .gg-process-step__chevron {
		padding-top: calc(var(--gg-step-icon-size-lg) * (1 - var(--gg-step-icon-overhang)) + var(--space-4));
		padding-bottom: var(--space-6); /* keine Pfeilspitze unten beim letzten Step */
	}

	.gg-process-step--first .gg-process-step__chevron {
		padding-left: var(--space-6);
	}

	.gg-process-step__number {
		font-size: clamp(3.5rem, 18vw, 5.5rem);
		right: var(--space-5);
		top: var(--space-3);
	}

	.gg-process-step--last .gg-process-step__number {
		left: var(--space-5);
	}

	.gg-process-step__icon {
		left: var(--space-5);
	}

	.gg-process-step--last .gg-process-step__icon {
		right: var(--space-5);
	}

	.gg-process-step__body {
		max-width: 100%;
	}

	/* Auf Mobile gibt es keine seitliche Strip-Überlappung mehr (siehe
	 * components/chevron.css), also Wrapper-Margin zurücksetzen. */
	.gg-section-process .gg-process-strip > li + li {
		margin-left: 0;
	}
}

/* ────────────────────────────────────────────────────────────
 * Reduced Motion — Stagger & Pop deaktivieren, Inhalt sofort sichtbar
 * ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	html.js .gg-process-step:not(.is-revealed),
	html.js .gg-process-step.is-revealed,
	html.js .gg-process-step.is-revealed .gg-process-step__icon,
	html.js .gg-process-step.is-revealed .gg-process-step__number {
		animation: none;
		opacity: 1;
		transform: none;
	}

	html.js .gg-process-step.is-revealed .gg-process-step__number {
		opacity: 0.22;
		transform: none;
	}

	.gg-process-step:hover {
		transform: none;
	}

	.gg-process-step:hover .gg-process-step__chevron {
		filter: none;
	}
}