/*
 * GORILLA GARAGE — UTILITIES
 *
 * Globale Layout-Helfer und das Section-System.
 * Button-Basisstyles liegen in components/button.css — hier sind nur die
 * neutralen Layout-/A11y-/Sichtbarkeitshelfer.
 */

/* ────────────────────────────────────────────────────────────
 * Container
 * ──────────────────────────────────────────────────────────── */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.container--wide {
	max-width: var(--container-wide);
}

.container--narrow {
	max-width: var(--container-narrow);
}

.container--flush {
	padding-inline: 0;
}

/* ────────────────────────────────────────────────────────────
 * Section-System
 *
 * .section ist die semantische Default-Sektion mit konsistentem Padding.
 * .section--dark / .section--light triggern den Dark-/Light-Context
 * (siehe tokens.css — semantische Color-Tokens werden dort ueberschrieben).
 * ──────────────────────────────────────────────────────────── */

.section {
	position: relative;
	padding-block: var(--section-padding-block);
	background-color: var(--color-bg);
	color: var(--color-text);
}

.section--sm {
	padding-block: var(--section-padding-block-sm);
}

.section--flush {
	padding-block: 0;
}

/*
 * Helle Sections — einheitlich weiß mit weichen Tiefen-Fades (3D-Volumen).
 *
 * Spiegelt den Dark-Canvas auf body (base.css): zwei diagonale Radial-Glows
 * + diagonaler Linear-Verlauf, plus zarter Inset-Shadow als Vignette.
 *
 * background-attachment: fixed → der Glow bleibt am Viewport verankert,
 * sodass mehrere gestapelte helle Sections wie eine durchgehende Canvas
 * wirken (kein „Reset" pro Section).
 */
.section--light,
.section--off-white {
	background-color: var(--gg-white);
	color: var(--gg-black);
	background-image: var(--bg-light-fade);
	background-attachment: fixed;
	box-shadow: var(--bg-light-vignette);
}

/*
 * Dark-Sections sind transparent — die durchgängige Canvas
 * (Gradient + Glows) liegt fix am Viewport auf body (siehe base.css).
 * So gibt es zwischen gestapelten Dark-Sections KEINE Kante: alle
 * teilen sich denselben viewport-fixierten BG, der Glow startet nicht neu.
 */
.section--dark,
.section--dark-soft {
	background: transparent;
	color: var(--gg-off-white);
}

/*
 * Accent-Section — mehrlagiger Rot-Verlauf für 3D-Tiefe:
 * Lichtkante oben-links (Rot-Bright), Schatten unten-rechts (Rot-Dark),
 * diagonaler Base-Gradient als Volumen.
 */
.section--accent {
	background:
		radial-gradient(ellipse at 25% 0%, rgba(230, 57, 70, 0.55) 0%, transparent 60%),
		radial-gradient(ellipse at 80% 110%, rgba(139, 15, 31, 0.65) 0%, transparent 60%),
		linear-gradient(160deg, var(--gg-red-bright) 0%, var(--gg-red) 45%, var(--gg-red-dark) 100%);
	color: var(--gg-white);
}

/* Eyebrow (kleine rote Pre-Headline) */
.section__eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: var(--space-4);
}

.section--dark .section__eyebrow,
.section--dark-soft .section__eyebrow {
	color: var(--gg-red-bright);
}

/* Headline-Block (Eyebrow + h2 + optional Subline) */
.section__heading {
	margin-bottom: var(--space-12);
	max-width: 60ch;
}

.section__heading--center {
	margin-inline: auto;
	text-align: center;
}

.section__heading--right {
	margin-inline-start: auto;
	text-align: right;
}

.section__title {
	font-size: var(--fs-2xl);
}

.section__subtitle {
	margin-top: var(--space-4);
	font-size: var(--fs-lg);
	font-family: var(--font-body);
	color: var(--color-text-muted);
}

.section--dark .section__subtitle,
.section--dark-soft .section__subtitle {
	color: var(--color-text-muted-on-dark);
}

/* Headline-Akzent-Span (das fette Wort in Rot) */
.text-accent {
	color: var(--color-accent);
}

.section--dark .text-accent,
.section--dark-soft .text-accent {
	color: var(--gg-red-bright);
}

/* ────────────────────────────────────────────────────────────
 * Accessibility
 * ──────────────────────────────────────────────────────────── */

.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/*
 * Skip-Link wird per Tab sichtbar — bleibt fuer Screenreader bedienbar.
 * Die !important wins gegen .visually-hidden, weil der :focus-Zustand
 * den Hide-Default zwingend ueberschreiben muss (dokumentierter Edge-Case).
 */
.skip-link:focus,
.skip-link:focus-visible {
	position: fixed !important;
	top: var(--space-2);
	left: var(--space-2);
	z-index: var(--z-max);
	width: auto !important;
	height: auto !important;
	clip: auto !important;
	padding: var(--space-3) var(--space-4) !important;
	margin: 0 !important;
	overflow: visible !important;
	white-space: normal !important;
	background-color: var(--gg-black);
	color: var(--gg-white);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
}

/* ────────────────────────────────────────────────────────────
 * Generische Helfer (sparsam einsetzen — Komponenten sind primaer)
 * ──────────────────────────────────────────────────────────── */

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

.no-wrap { white-space: nowrap; }

.flow > * + * {
	margin-top: var(--flow-space, var(--space-4));
}

.stack {
	display: flex;
	flex-direction: column;
	gap: var(--stack-gap, var(--space-4));
}

.cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cluster-gap, var(--space-4));
	align-items: center;
}

.grid {
	display: grid;
	gap: var(--grid-gap, var(--space-6));
}

/* Aspect-Ratio-Helfer fuer Bild-Container */
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-4-3  { aspect-ratio: 4 / 3; }
.aspect-1-1  { aspect-ratio: 1 / 1; }
.aspect-3-4  { aspect-ratio: 3 / 4; }

/* ────────────────────────────────────────────────────────────
 * PHASE 4 — Reveal-Helper (additiv, kommentiert)
 *
 * data-gg-reveal markiert Elemente, die beim Eintreten in den
 * Viewport dezent eingeblendet werden. Default ist SICHTBAR —
 * Hidden-State greift nur, wenn die .js-Klasse am <html> sitzt
 * (gesetzt durch reveal.js sofort beim Boot). Ohne JS bleibt
 * alles sichtbar, kein FOUC-Risiko.
 * Bei prefers-reduced-motion wird die Animation ausgeschaltet
 * und das Element sofort revealt (reveal.js übernimmt das).
 * ──────────────────────────────────────────────────────────── */

[data-gg-reveal] {
	transition:
		opacity var(--reveal-duration) var(--ease-emphasis),
		transform var(--reveal-duration) var(--ease-emphasis);
}

html.js [data-gg-reveal]:not(.is-revealed) {
	opacity: 0;
	transform: translateY(var(--reveal-distance));
}

html.js [data-gg-reveal].is-revealed {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	[data-gg-reveal],
	html.js [data-gg-reveal]:not(.is-revealed) {
		opacity: 1;
		transform: none;
		transition: none;
	}
}