/*
 * GORILLA GARAGE — BUTTON
 *
 * .btn als Basis-Klasse, .btn--primary / --ghost / --dark als Varianten.
 *
 * Architektur-Note: In Phase-Brief stand .btn unter utilities.css. Wir
 * legen sie hier in components/button.css ab, weil sie eine vollwertige
 * UI-Komponente ist (mehrere Varianten, States, Modifiers). Utilities
 * bleibt dadurch klein und neutral. Beide Files werden in der gleichen
 * Reihenfolge geladen (siehe inc/enqueue.php).
 */

.btn {
	--btn-bg:            var(--gg-red);
	--btn-bg-hover:      var(--gg-white);
	--btn-bg-active:     var(--gg-off-white);
	--btn-color:         var(--gg-white);
	--btn-color-hover:   var(--gg-black);
	--btn-border-color:  transparent;

	/*
	 * Drop-Shadow statt box-shadow: folgt der clip-path-Form (chevron-Cut),
	 * sodass der Glow an den diagonalen Kanten sauber abschliesst.
	 */
	--btn-drop-shadow:        drop-shadow(0 6px 18px rgba(200, 16, 46, 0.32));
	--btn-drop-shadow-hover:  drop-shadow(0 12px 32px rgba(0, 0, 0, 0.28));
	--btn-drop-shadow-active: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	min-height: 48px;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	text-decoration: none;
	background-color: var(--btn-bg);
	color: var(--btn-color);
	/*
	 * Border-Look via inset shadow — eine echte border wuerde von clip-path
	 * an den diagonalen Cut-Kanten abgeschnitten. Inset shadow rendert
	 * innerhalb der Box und bleibt von clip-path unangetastet, wirkt so
	 * wie ein bundiger 2px Outline.
	 */
	border: 0;
	border-radius: 0;
	box-shadow: inset 0 0 0 2px var(--btn-border-color);
	clip-path: var(--clip-btn-chevron);
	filter: var(--btn-drop-shadow);
	cursor: pointer;
	transition:
		background-color var(--dur-fast) var(--ease-standard),
		box-shadow       var(--dur-fast) var(--ease-standard),
		color            var(--dur-fast) var(--ease-standard),
		filter           var(--dur-base) var(--ease-standard),
		transform        var(--dur-fast) var(--ease-standard);
}

.btn:hover {
	background-color: var(--btn-bg-hover);
	color: var(--btn-color-hover, var(--btn-color));
	filter: var(--btn-drop-shadow-hover);
	transform: var(--hover-lift-btn);
}

.btn:active {
	background-color: var(--btn-bg-active);
	transform: translateY(0);
	filter: var(--btn-drop-shadow-active);
}

.btn:disabled,
.btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	filter: none;
}

.btn__icon {
	display: inline-flex;
	width: 1.1em;
	height: 1.1em;
	flex-shrink: 0;
}

.btn__icon--trailing {
	transition: transform var(--dur-fast) var(--ease-standard);
}

.btn:hover .btn__icon--trailing {
	transform: var(--hover-nudge-arrow);
}

/* ────────────────────────────────────────────────────────────
 * Varianten
 * ──────────────────────────────────────────────────────────── */

.btn--primary {
	/* Default — alles aus den Basis-Variablen, hier nichts zu tun. */
}

/*
 * .btn--ghost — solid weiße Fläche mit schwarzem Text.
 *
 * Hinweis: trägt aus historischen Gründen weiterhin den Namen „ghost",
 * ist aber bewusst KEIN Outline-/Transparent-Button mehr. Outline-Buttons
 * wirken auf Gorilla-Hintergründen (rot/dunkel) unsauber — Vorgabe ist
 * durchgängig Fläche + schwarzer Text.
 */
.btn--ghost {
	--btn-bg:           var(--gg-white);
	--btn-bg-hover:     var(--gg-red);
	--btn-bg-active:    var(--gg-red-dark);
	--btn-color:        var(--gg-black);
	--btn-color-hover:  var(--gg-white);
	--btn-border-color: transparent;
	--btn-drop-shadow:        drop-shadow(0 6px 18px rgba(0, 0, 0, 0.18));
	--btn-drop-shadow-hover:  drop-shadow(0 12px 32px rgba(200, 16, 46, 0.45));
	--btn-drop-shadow-active: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}

.btn--dark {
	--btn-bg:           var(--gg-black);
	--btn-bg-hover:     var(--gg-red);
	--btn-bg-active:    var(--gg-red-dark);
	--btn-color:        var(--gg-white);
	--btn-color-hover:  var(--gg-white);
	--btn-border-color: transparent;
	--btn-drop-shadow:        drop-shadow(0 8px 20px rgba(0, 0, 0, 0.28));
	--btn-drop-shadow-hover:  drop-shadow(0 16px 36px rgba(200, 16, 46, 0.45));
	--btn-drop-shadow-active: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.btn--grey {
	--btn-bg:           var(--gg-grey-700);
	--btn-bg-hover:     var(--gg-red);
	--btn-bg-active:    var(--gg-red-dark);
	--btn-color:        var(--gg-white);
	--btn-color-hover:  var(--gg-white);
	--btn-border-color: transparent;
	--btn-drop-shadow:        drop-shadow(0 8px 20px rgba(0, 0, 0, 0.32));
	--btn-drop-shadow-hover:  drop-shadow(0 16px 36px rgba(200, 16, 46, 0.45));
	--btn-drop-shadow-active: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.btn--gold {
	--btn-bg:           var(--gg-gold);
	--btn-bg-hover:     var(--gg-red);
	--btn-bg-active:    var(--gg-red-dark);
	--btn-color:        var(--gg-black);
	--btn-color-hover:  var(--gg-white);
	--btn-border-color: transparent;
	--btn-drop-shadow:        drop-shadow(0 6px 18px rgba(201, 162, 76, 0.35));
	--btn-drop-shadow-hover:  drop-shadow(0 12px 32px rgba(200, 16, 46, 0.45));
	--btn-drop-shadow-active: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}

/* Size-Modifier — Cut-Tiefe skaliert mit Button-Hoehe */
.btn--sm {
	--btn-chevron-cut: 10px;
	padding: var(--space-2) var(--space-4);
	min-height: 36px;
	font-size: var(--fs-sm);
}

.btn--lg {
	--btn-chevron-cut: 18px;
	padding: var(--space-4) var(--space-8);
	min-height: 56px;
	font-size: var(--fs-lg);
}

/* Block-Modifier (volle Breite) */
.btn--block {
	display: flex;
	width: 100%;
}

@media (max-width: 640px) {
	.btn--block-mobile {
		display: flex;
		width: 100%;
	}
}