/* ════════════════════════════════════════════════════════════════
   CTA BANNER — Shared component
   Used on: Homepage, About Us, Sector pages
   ════════════════════════════════════════════════════════════════ */

@layer components {

.cta-banner__inner {
	display: flex;
	align-items: center;
	gap: var(--space-xl);
}

/* ── Split layout (heading left, buttons right) ── */
.cta-banner--split .cta-banner__content {
	flex: 1;
}

/* ── Centered layout ── */
.cta-banner--centered .cta-banner__inner {
	flex-direction: column;
	text-align: center;
}

.cta-banner__heading {
	font-family: var(--font-heading);
	font-size: var(--heading-s);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	color: var(--text-main);
}

.cta-banner__subheading {
	font-size: var(--text-m);
	line-height: var(--leading-relaxed);
	color: var(--text-muted);
	margin-block-start: var(--space-xs);
}

.cta-banner__actions {
	display: flex;
	gap: var(--space-s);
	flex-shrink: 0;
}

/* ── Dark variant (careers CTA etc.) ── */
.cta-banner--dark .cta-banner__heading {
	color: var(--white);
}

.cta-banner--dark .cta-banner__subheading {
	color: oklch(100% 0 0 / 70%);
}

/* ── Responsive: stack on narrow viewports ── */
@media (max-width: 48em) {
	.cta-banner__inner {
		flex-direction: column;
		text-align: center;
	}

	.cta-banner__actions {
		justify-content: center;
	}
}

} /* end @layer components */