/*
 * GORILLA GARAGE — Review-Card-Komponente
 *
 * Brand-Chevron-Silhouette (top-right + bottom-left chamfer, 44px) — einheitlich
 * mit Pakete-Card, Vehicle-Classes-Item, Experts, Warum-Card. Layout-Container
 * bleibt transparent; Background + Topstripe + Drop-Shadow leben im ::before-
 * Pseudo, weil clip-path border/box-shadow an den Cuts wegschneidet
 * ([[feedback_keine_border_auf_chevron]]).
 */

.gg-review-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-height: 240px;
	height: 100%;
	/* 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);
	color: var(--gg-off-white);
	background: transparent;
	overflow: visible;
	isolation: isolate;
	transform: translateZ(0);
	transition: transform var(--dur-base) var(--ease-emphasis);
	will-change: transform;
}

/* Background-Layer mit Chevron-Cut, 3D-Body-Gradient und Rot→Gold-Topstripe. */
.gg-review-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;
}

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

.gg-review-card:hover::before,
.gg-review-card: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-review-card__stars {
	font-size: var(--fs-base);
	letter-spacing: 0.1em;
	color: var(--gg-gold);
	margin: 0;
	filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5));
}

.gg-review-card__quote {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--gg-off-white);
	flex: 1;
}

.gg-review-card__quote p {
	margin: 0;
}

/* Zweizeilig statt umbrechender Einzeile: In den schmalen 4er-Spalten passt
 * „Name · Google Rezension" mal in eine Zeile und mal nicht — dann bliebe der
 * Trenner allein am Zeilenende stehen. Feste Stapelung hält alle Cards gleich. */
.gg-review-card__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-1);
	font-size: var(--fs-xs);
	color: rgba(255, 255, 255, 0.55);
	padding-top: var(--space-3);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.gg-review-card__author {
	font-weight: var(--fw-semibold);
	color: var(--gg-white);
	letter-spacing: var(--ls-wide);
}

.gg-review-card__sep {
	opacity: 0.5;
}

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