/* ============================================================
   CTA-SYSTEEM — het terugkerende slotblok (.bc-cta)
   ------------------------------------------------------------
   1-op-1 uit de bron-export → <style>-blok "CTA-SYSTEEM —
   terugkerend blok". Navy blok met stippen-masker, gradient
   alleen op het kernwoord en op de knop, en sinds de export van
   30-07-2026 een kort formulier met vier velden (naam,
   telefoonnummer, e-mailadres, bedrijf) in plaats van één knop.
   Eén bestemming: /kennismaken/.

   Stond eerder in widgets/cta/cta.css; verhuisd naar de gedeelde
   laag omdat het blok nu door bconnect_site_cta() op alle
   pagina's wordt gerenderd (ook vanuit pagina-widgets die geen
   bconnect-cta-stylesheet laden). Sitewide geënqueued in
   functions.php, ná bconnect-forms zodat de donkere velden de
   lichte basisstijl van de formulierlaag verslaan.
   ============================================================ */

.bc-cta { padding: var(--space-8, 88px) 0; }
.bc-cta-block {
	position: relative; overflow: hidden;
	background: var(--c-navy);
	border-radius: 28px;
	box-shadow: var(--shadow-feature);
	padding: 72px 48px;
	text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.bc-cta-block::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(75% 65% at 50% 40%, #000, transparent 75%);
	        mask-image: radial-gradient(75% 65% at 50% 40%, #000, transparent 75%);
}
.bc-cta-block > * { position: relative; z-index: 1; }
.bc-cta-eyebrow {
	font-family: var(--font-head); font-size: 12px; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,.72);
}
.bc-cta-h2 {
	font-family: var(--font-head); font-weight: 600;
	font-size: clamp(30px, 4vw, 44px); line-height: 1.12; letter-spacing: -0.02em;
	color: #fff; margin: 0; max-width: 24ch; text-wrap: balance;
}
.bc-cta-accent {
	background: var(--gradient-text);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Optionele intro-regel onder de kop (02-09-2026, voor /ai-chatbot/).
   bconnect_site_cta() rendert hem alleen als 'lead' gevuld is, dus voor de
   pagina's die dit blok al gebruiken staat deze regel er ongebruikt bij. */
.bc-cta-lead {
	display: block; box-sizing: border-box;
	max-width: 60ch; margin: 14px auto 0;
	font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.82);
	text-wrap: pretty;
}
.bc-cta-btn { margin-top: 10px; }
.bc-cta-micro {
	font-family: var(--font-body); font-size: 13.5px; line-height: 1.55;
	color: rgba(255,255,255,.7); margin: 0; max-width: 56ch;
}
.bc-cta-block .btn:focus-visible { outline: 2px solid var(--c-sky); outline-offset: 3px; }
@media (max-width: 680px) {
	.bc-cta-block { padding: 52px 24px; border-radius: 22px; }
}

/* Hardening tegen de Elementor/Hello-resets: gradient-tekst afdwingen.
   Gescoped op het blok zelf (0,2,0) i.p.v. op de widget-wrapper, zodat het
   ook werkt wanneer een pagina-widget het blok rendert. */
.bc-cta-block .bc-cta-accent {
	background: var(--gradient-text) !important;
	-webkit-background-clip: text !important; background-clip: text !important;
	-webkit-text-fill-color: transparent !important; color: transparent !important;
	display: inline-block;
}
.bc-cta-block .bc-cta-h2 { color: #fff !important; }

/* ============================================================
   Het korte aanvraagformulier op de navy kaart.
   Vier velden naast elkaar (2 kolommen ≤880px, 1 kolom ≤520px) —
   exact het raster uit de bron. De velden komen uit de Elementor-
   formuliertemplate (variant "cta", vier velden op width 25), dus
   we vertalen hier de Elementor-structuur naar de bron-stijl. De
   basislaag bconnect-forms.css zet lichte velden met !important;
   deze selectors zijn één klasse specifieker en winnen daardoor.
   ============================================================ */
.bc-cta-form {
	width: 100%;
	max-width: 820px;
	margin: 6px 0 0;
}
/* De [elementor-template]-container brengt zijn eigen 10px padding mee; die
   zou de veldbreedtes 5px per kolom smaller maken dan in de bron. */
.bc-cta-form .elementor-element.e-con,
.bc-cta-form .e-con > .e-con-inner {
	padding: 0 !important;
}
/* De vier velden staan op elementor-col-25. Een `gap` op de wrapper zou die
   4 × 25% over de 100% duwen (het vierde veld valt dan naar een tweede rij),
   dus de 14px tussenruimte komt uit padding op de veldgroepen met een
   negatieve marge op de wrapper — dezelfde techniek als Elementor zelf. */
.bc-cta-form .elementor-form-fields-wrapper {
	margin: 0 -7px !important;
	row-gap: 14px;
}
.bc-cta-form .elementor-field-group {
	padding: 0 7px !important;
	margin-bottom: 0 !important;
	text-align: left;
}
.bc-cta-form .elementor-field-group.elementor-field-type-submit {
	justify-content: center;
	margin-top: 4px;
}
/* Elementor zet de verzendknop op `flex: 0 1 100%` binnen .e-form__buttons;
   in de bron is dit een gewone pill op contentbreedte. */
.bc-cta-form .elementor-field-type-submit .elementor-button {
	width: auto !important;
	flex: 0 0 auto !important;
	margin-top: 10px;
}
.bc-cta-form .elementor-field-label {
	font-family: var(--font-head) !important;
	font-size: 12px !important;
	font-weight: var(--fw-semibold) !important;
	line-height: 1.6 !important;
	letter-spacing: .04em !important;
	color: rgba(255, 255, 255, .78) !important;
	margin-bottom: 6px !important;
}
.bc-cta-form .elementor-field-group .elementor-field.elementor-field-textual {
	font-family: var(--font-body) !important;
	font-size: 15px !important;
	/* bron: geen expliciete line-height, dus 'normal' (44px hoog veld);
	   bconnect-forms.css zet 1.5 en zou het veld 5px hoger maken. */
	line-height: normal !important;
	color: #fff !important;
	background-color: rgba(255, 255, 255, .08) !important;
	border: 1px solid rgba(255, 255, 255, .22) !important;
	border-radius: 12px !important;
	padding: 12px 14px !important;
}
.bc-cta-form .elementor-field-group .elementor-field-textual::placeholder {
	color: rgba(255, 255, 255, .45) !important;
	opacity: 1;
}
.bc-cta-form .elementor-field-group .elementor-field-textual:hover {
	border-color: rgba(255, 255, 255, .34) !important;
}
.bc-cta-form .elementor-field-group .elementor-field-textual:focus {
	background-color: rgba(255, 255, 255, .13) !important;
	border-color: var(--c-sky) !important;
	box-shadow: 0 0 0 3px rgba(88, 208, 245, .22) !important;
}
/* De bevestigings- en foutmelding staan hier op navy. */
.bc-cta-form .elementor-message.elementor-message-success,
.bc-cta-form .elementor-message.elementor-message-danger {
	color: #fff !important;
	text-align: center;
}
.bc-cta-form .elementor-message.elementor-message-success::before { color: var(--c-success) !important; }

@media (max-width: 880px) {
	.bc-cta-form .elementor-field-group:not(.elementor-field-type-submit) {
		width: 50% !important;
		flex-basis: 50% !important;
		max-width: 50% !important;
	}
}
@media (max-width: 520px) {
	.bc-cta-form .elementor-field-group:not(.elementor-field-type-submit) {
		width: 100% !important;
		flex-basis: 100% !important;
		max-width: 100% !important;
	}
}

/* "Verder lezen"-rij boven het slot-CTA — 05-08-2026.
   Beschrijvende interne links; zie bconnect_related_links() voor de pagina-map.
   Staat op een witte band, dus navy tekst; de rij wrapt op smalle schermen. */
.bc-related { padding: var(--space-6) 0 0; }
.bc-related .container { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px; }
.bc-related-label {
	font-family: var(--font-head);
	font-size: 12.5px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-text-soft);
}
.bc-related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.bc-related-list a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: var(--fw-semibold);
	color: var(--c-navy);
	text-decoration: none;
}
.bc-related-list a:hover { color: var(--c-magenta); }
.bc-related-list a span { transition: transform .18s var(--ease); }
.bc-related-list a:hover span { transform: translateX(3px); }
@media (max-width: 767px) {
	.bc-related .container { gap: 8px 18px; }
	.bc-related-list { flex-direction: column; gap: 8px; }
	.bc-related-list a { font-size: 14.5px; }
}