/*
 * GORILLA GARAGE — CHEVRON / POLYGON-CUT-SYSTEM
 *
 * Wiederverwendbares Pfeil-/Polygon-System fuer Steps, Stat-Strips,
 * Navigation-Bars und Card-Corner-Cuts.
 *
 * Tokens kommen aus tokens.css (--clip-chevron-*, --chevron-depth*).
 */

/* ────────────────────────────────────────────────────────────
 * Basis
 * ──────────────────────────────────────────────────────────── */

.chevron-cut {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	padding: var(--space-6) var(--space-8);
	background-color: var(--gg-black);
	color: var(--gg-white);
	clip-path: var(--clip-chevron-right);
	min-height: clamp(120px, 14vw, 200px);
	text-align: center;
}

/* ────────────────────────────────────────────────────────────
 * Richtungs-Modifier
 * ──────────────────────────────────────────────────────────── */

.chevron-cut--left {
	clip-path: var(--clip-chevron-left);
}

.chevron-cut--both {
	clip-path: var(--clip-chevron-both);
}

/*
 * Erstes/letztes Element in einer Chevron-Reihe: nur eine Seite cutten.
 * Greift, wenn man eine Liste von .chevron-cut--both direkt nebeneinander
 * legt und an den Aussenseiten keinen Cut will.
 */
.chevron-cut--first {
	clip-path: var(--clip-chevron-right);
}

.chevron-cut--last {
	clip-path: var(--clip-chevron-left);
}

/* ────────────────────────────────────────────────────────────
 * Farb-Modifier
 * ──────────────────────────────────────────────────────────── */

.chevron-cut--black {
	background-color: var(--gg-black);
	color: var(--gg-white);
}

.chevron-cut--black-soft {
	background-color: var(--gg-black-soft);
	color: var(--gg-white);
}

.chevron-cut--red {
	background-color: var(--gg-red);
	color: var(--gg-white);
}

.chevron-cut--red-bright {
	background-color: var(--gg-red-bright);
	color: var(--gg-white);
}

.chevron-cut--red-dark {
	background-color: var(--gg-red-dark);
	color: var(--gg-white);
}

.chevron-cut--white {
	background-color: var(--gg-white);
	color: var(--gg-black);
}

/* ────────────────────────────────────────────────────────────
 * Chevron-Strip — eine Reihe Chevron-Boxen
 *
 * Boxen ueberlappen sich um die Cut-Tiefe, damit die Spitzen
 * sich beruehren statt eine Luecke zu lassen.
 * ──────────────────────────────────────────────────────────── */

.chevron-strip {
	display: grid;
	grid-template-columns: repeat(var(--chevron-strip-cols, 3), 1fr);
	gap: 0;
}

.chevron-strip > .chevron-cut + .chevron-cut {
	margin-left: calc(var(--chevron-depth) * -1);
}

@media (max-width: 768px) {
	.chevron-strip {
		grid-template-columns: 1fr;
	}

	.chevron-strip > .chevron-cut + .chevron-cut {
		margin-left: 0;
		margin-top: var(--space-4);
	}

	/*
	 * Auf Mobile zeigen die Pfeile nach unten statt nach rechts.
	 * Wir vergroessern die Hoehe und passen die Polygon-Punkte an.
	 */
	.chevron-strip > .chevron-cut {
		clip-path: polygon(
			0 0,
			100% 0,
			100% calc(100% - 24px),
			50% 100%,
			0 calc(100% - 24px)
		);
		padding-bottom: var(--space-12);
	}

	.chevron-strip > .chevron-cut:last-child {
		clip-path: polygon(
			0 0,
			100% 0,
			100% 100%,
			0 100%
		);
		padding-bottom: var(--space-6);
	}
}

/* ────────────────────────────────────────────────────────────
 * Card-Corner-Cut (subtle, fuer Cards in der Bento-Grid)
 * ──────────────────────────────────────────────────────────── */

.corner-cut {
	clip-path: var(--clip-card-corner);
}

.corner-cut--tl {
	clip-path: var(--clip-card-corner-tl);
}

/* ────────────────────────────────────────────────────────────
 * Nav-Bar-Cut (fuer die Hauptnavigation in Phase 3)
 * ──────────────────────────────────────────────────────────── */

.nav-cut {
	clip-path: var(--clip-nav-bar);
}