/*
 * GORILLA GARAGE — Section: Castrol (kompakt)
 *
 * Schlanker Servicepartner-Hinweisstreifen im Stil von castrol.com:
 * Lockup links, einzeiliger Hinweistext + Inline-Link rechts.
 * Bewusst dezent — kein Eyebrow, keine H2, keine Bullets, kein Button.
 * Castrol-Grün nur als Mini-Akzent auf dem Schlüsselbegriff.
 */

.gg-section-castrol {
	position: relative;
	overflow: hidden;
}

.gg-section-castrol__row {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
	text-align: center;
}

.gg-section-castrol__logo {
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
}

.gg-section-castrol__logo-img {
	width: clamp(140px, 22vw, 200px);
	height: auto;
	display: block;
}

.gg-section-castrol__note {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--color-text);
	max-width: 60ch;
}

.gg-section-castrol__accent {
	color: var(--color-castrol-green);
	font-weight: 700;
}

.gg-section-castrol__link {
	margin-left: var(--space-2);
	color: var(--color-castrol-green);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}

.gg-section-castrol__link:hover,
.gg-section-castrol__link:focus-visible {
	text-decoration-thickness: 2px;
}

.gg-section-castrol__link span {
	display: inline-block;
	margin-left: 0.25em;
	transition: transform 200ms ease;
}

.gg-section-castrol__link:hover span,
.gg-section-castrol__link:focus-visible span {
	transform: var(--hover-nudge-arrow);
}

@media (min-width: 768px) {
	.gg-section-castrol__row {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: var(--space-8);
		text-align: left;
	}

	.gg-section-castrol__note {
		max-width: 64ch;
	}
}

/* ────────────────────────────────────────────────────────────
 * Anschluss an den Content-Bereich (/werkstatt/, /ueber-uns/,
 * /werkstatt/): .gg-page-main bringt bis zu 128px Bottom-
 * Padding mit, dieser Streifen nochmal bis zu 80px Top-Padding.
 * Zusammen ergab das eine tote Leerzone statt eines Section-Breaks.
 * Content-Seite wird deshalb auf das kleine Section-Padding
 * gestrafft — die Zäsur bleibt lesbar, der Leerraum verschwindet.
 * ──────────────────────────────────────────────────────────── */
.gg-page-main:has(+ .gg-section-castrol) {
	padding-bottom: var(--section-padding-block-sm);
}

/* Deep-Link (`/#castrol`) ohne JS: Streifen darf nicht unter dem
 * sticky Header verschwinden. Der Klick auf das Hero-Badge wird
 * zusätzlich per JS exakt in die Bildschirmmitte gescrollt
 * (initAnchorCenter in main.js). */
.gg-section-castrol {
	scroll-margin-top: calc(var(--gg-header-h, 140px) + var(--space-4));
}