/*
 * Ootes CTA Banner — call-to-action-banner met afgeronde hoeken.
 *
 * Alle kleuren en de afronding lopen via CSS-variabelen op .ootes-cta-banner,
 * zodat ze per banner te overschrijven zijn (shortcode-attributen of de
 * Elementor-widget). De standaardwaarden volgen de huisstijl-tokens van het
 * Ootes-thema, met dezelfde kleur als terugvalwaarde voor gebruik zonder
 * het thema.
 */
.ootes-cta-banner {
	--ootes-cta-banner-bg: var(--ootes-color-secondary, #004584);
	--ootes-cta-banner-text: #fff;
	--ootes-cta-banner-button-bg: #fff;
	/* Knoptekst volgt standaard de achtergrondkleur van de banner. */
	--ootes-cta-banner-button-text: var(--ootes-cta-banner-bg);
	--ootes-cta-banner-radius: 20px;

	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.75rem 2.5rem;
	width: 100%;
	max-width: var(--ootes-container-width, 1200px);
	margin-inline: auto;
	padding: clamp(2rem, 1.4rem + 2.6vw, 4rem) clamp(1.5rem, 1rem + 2vw, 3rem);
	border-radius: var(--ootes-cta-banner-radius);
	background: var(--ootes-cta-banner-bg);
	color: var(--ootes-cta-banner-text);
}

.ootes-cta-banner *, .ootes-cta-banner *::before, .ootes-cta-banner *::after { box-sizing: border-box; }

.ootes-cta-banner__content { flex: 1 1 26rem; min-width: 0; }

.ootes-cta-banner .ootes-cta-banner__heading {
	margin: 0 0 .5rem;
	font-family: var(--ootes-font-heading, 'Playfair Display', Georgia, 'Times New Roman', serif);
	font-weight: 700;
	font-size: clamp(1.7rem, 1.35rem + 1.5vw, 2.5rem);
	line-height: 1.2;
	color: var(--ootes-cta-banner-text);
	text-wrap: balance;
}

.ootes-cta-banner .ootes-cta-banner__text {
	max-width: 520px;
	font-family: var(--ootes-font-body, 'Inter', 'Segoe UI', sans-serif);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ootes-cta-banner-text);
	opacity: .88;
}
.ootes-cta-banner .ootes-cta-banner__text p { margin: 0 0 .75em; color: inherit; }
.ootes-cta-banner .ootes-cta-banner__text p:last-child { margin-bottom: 0; }
.ootes-cta-banner .ootes-cta-banner__text a { color: inherit; text-decoration: underline; }

.ootes-cta-banner__actions { flex: 0 0 auto; }

.ootes-cta-banner .ootes-cta-banner__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .95rem 1.9rem;
	border: 2px solid transparent;
	border-radius: var(--ootes-radius-pill, 999px);
	background: var(--ootes-cta-banner-button-bg);
	color: var(--ootes-cta-banner-button-text);
	font-family: var(--ootes-font-body, 'Inter', 'Segoe UI', sans-serif);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
}
.ootes-cta-banner .ootes-cta-banner__button:hover,
.ootes-cta-banner .ootes-cta-banner__button:focus-visible {
	color: var(--ootes-cta-banner-button-text);
	opacity: .92;
	transform: translateY(-1px);
	box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .5);
}
.ootes-cta-banner .ootes-cta-banner__button:focus-visible {
	outline: 2px solid var(--ootes-cta-banner-text);
	outline-offset: 3px;
}

@media (max-width: 640px) {
	.ootes-cta-banner__actions,
	.ootes-cta-banner .ootes-cta-banner__button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.ootes-cta-banner .ootes-cta-banner__button { transition: none; }
}