/* ---------------------------------------------------------------------------
 * Blok: Contactkaarten (Figma 65:6173). Twee witte kaarten (673px, radius 25,
 * zachte schaduw) met blauwe kopbalk die over de curve van de donkere
 * paginakop heen schuiven. Links contactregels met ronde lichtblauwe iconen
 * (cirkel 55px, MobileXL-blauw op 10%), rechts het Gravity Forms-formulier.
 * De gravity-theme markup wordt hier volledig in de huisstijl gestyled:
 * vette labels met blauwe asterisk, lichte velden (grijs-1, rand grijs-2,
 * radius 10 zoals in het ontwerp), placeholder 14px grijs-3, eigen checkbox
 * en de blauwe verzendknop rechtsonder naast de checkboxregel.
 * Mobiel toont het ontwerp niet; zelf ingevuld in lijn met de andere blokken.
 * ------------------------------------------------------------------------- */

.blok-contact-kaarten {
	position: relative;
	z-index: 2; /* de kaarten schuiven over de curve en het donkere vlak heen */
}

.blok-contact-kaarten__kaarten {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.blok-contact-kaarten__kaart {
	display: flex;
	flex-direction: column;
	background: var(--c-wit);
	border-radius: 25px;
	box-shadow: 5px 5px 12.5px rgb(0 0 0 / 5%);
}

/* --------------------------------------------------------------------------
 * Blauwe kopbalk
 * ------------------------------------------------------------------------ */

.blok-contact-kaarten__kopbalk {
	display: flex;
	align-items: center;
	min-height: 90px;
	padding: 20px 62px;
	background: var(--c-blauw);
	border-radius: 24px 24px 0 0;
}

.blok-contact-kaarten__kop {
	margin: 0;
	font-size: 24px;
	line-height: 1.22;
	font-weight: 700;
	color: var(--c-wit);
}

.blok-contact-kaarten__binnen {
	flex: 1;
	padding: 36px 60px 60px;
}

/* De formulierkaart heeft in het ontwerp net iets meer binnenmarge (68px). */
.blok-contact-kaarten__kaart--formulier .blok-contact-kaarten__binnen {
	padding-inline: 68px;
}

.blok-contact-kaarten__intro {
	max-width: 548px;
}

/* --------------------------------------------------------------------------
 * Contactregels (linkerkaart)
 * ------------------------------------------------------------------------ */

.blok-contact-kaarten__regels {
	margin-top: 64px;
	list-style: none;
}

.blok-contact-kaarten__regel {
	display: flex;
	align-items: center;
	gap: 23px;
	padding-block: 39px;
}

.blok-contact-kaarten__regel:first-child {
	padding-top: 0;
}

.blok-contact-kaarten__regel:last-child {
	padding-bottom: 0;
}

.blok-contact-kaarten__regel + .blok-contact-kaarten__regel {
	border-top: 1px solid rgb(213 213 213 / 25%); /* deellijn uit het ontwerp: grijs-3 op 25% */
}

.blok-contact-kaarten__regel-icoon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 55px;
	height: 55px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--c-blauw) 10%, transparent);
	color: var(--c-blauw);
}

.blok-contact-kaarten__regel-icoon .icoon,
.blok-contact-kaarten__regel-icoon .icoon svg {
	display: block;
	width: 55px;
	height: 55px;
}

/* Witte lijniconen uit de themaset: kleiner in de cirkel en blauw ingekleurd
 * (de CSS-property fill wint van het fill-attribuut in de SVG). */
.blok-contact-kaarten__regel-icoon--themaset .icoon,
.blok-contact-kaarten__regel-icoon--themaset .icoon svg {
	width: 30px;
	height: 30px;
}

.blok-contact-kaarten__regel-icoon--themaset .icoon svg [fill="white"] {
	fill: currentColor;
}

.blok-contact-kaarten__regel-inhoud {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.blok-contact-kaarten__regel-label {
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--c-donkerblauw);
}

.blok-contact-kaarten__regel-tekst {
	font-size: 18px;
	line-height: 26px;
	letter-spacing: -0.02em;
	color: var(--c-donkerblauw);
}

/* tel:- en mailto-links tonen als gewone tekst, met blauw bij hover */
.blok-contact-kaarten__regel-tekst a {
	color: inherit;
	text-decoration: none;
}

.blok-contact-kaarten__regel-tekst a:hover {
	color: var(--c-blauw);
}

/* --------------------------------------------------------------------------
 * Formulier (rechterkaart): gravity-theme markup in de huisstijl, volledig
 * gescoped op dit blok.
 * ------------------------------------------------------------------------ */

.blok-contact-kaarten__formulier {
	margin-top: 50px;
}

.blok-contact-kaarten__formulier .gform_wrapper form {
	display: flex;
	flex-direction: column; /* de voet kan zo omhoog naast de checkboxregel */
}

.blok-contact-kaarten__formulier .gform_fields {
	grid-row-gap: 27px;
}

/* De standaardregel "geeft vereiste velden aan" staat niet in het ontwerp;
 * de blauwe asterisk plus het verplicht-veldbericht is duidelijk genoeg. */
.blok-contact-kaarten__formulier .gform_required_legend {
	display: none;
}

.blok-contact-kaarten__formulier .gfield_label {
	display: block;
	margin-bottom: 14px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.012em;
	color: var(--c-donkerblauw);
}

.blok-contact-kaarten__formulier .gfield_required {
	color: var(--c-blauw);
	padding-left: 0; /* ontwerp: de asterisk staat strak achter de dubbele punt */
}

/* De extra .gform_wrapper.gravity-theme in de selectors wint het van de
 * maatregels uit de Gravity Forms-stylesheets (die laden na dit bestand). */
.blok-contact-kaarten__formulier .gform_wrapper.gravity-theme .gfield input[type="text"],
.blok-contact-kaarten__formulier .gform_wrapper.gravity-theme .gfield input[type="email"],
.blok-contact-kaarten__formulier .gform_wrapper.gravity-theme .gfield input[type="tel"],
.blok-contact-kaarten__formulier .gform_wrapper.gravity-theme .gfield textarea {
	width: 100%;
	padding: 0 24px;
	height: 55px;
	background: var(--c-grijs-1);
	border: 1px solid var(--c-grijs-2);
	border-radius: 10px;
	font-family: var(--font-base);
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.012em;
	color: var(--c-donkerblauw);
	transition: border-color var(--dur-kort) var(--ease-out);
}

.blok-contact-kaarten__formulier .gform_wrapper.gravity-theme .gfield textarea {
	height: 250px;
	padding: 18px 24px;
	resize: vertical;
}

.blok-contact-kaarten__formulier .gfield input:focus,
.blok-contact-kaarten__formulier .gfield textarea:focus {
	outline: none;
	border-color: var(--c-blauw);
}

.blok-contact-kaarten__formulier .gfield ::placeholder {
	color: var(--c-grijs-3);
	font-size: 14px;
	letter-spacing: -0.012em;
	opacity: 1;
}

/* Checkbox: eigen vormgeving (20px, rand zwart, radius 5; blauw bij aanvinken) */
.blok-contact-kaarten__formulier .gchoice {
	display: flex;
	align-items: center;
	gap: 15px;
}

.blok-contact-kaarten__formulier .gchoice input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	background: var(--c-wit);
	border: 1px solid var(--c-zwart);
	border-radius: 5px;
	cursor: pointer;
	display: grid;
	place-content: center;
	transition: background-color var(--dur-kort) var(--ease-out), border-color var(--dur-kort) var(--ease-out);
}

.blok-contact-kaarten__formulier .gchoice input[type="checkbox"]::before {
	content: "";
	width: 11px;
	height: 9px;
	background: var(--c-wit);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9'%3E%3Cpath d='M4.03 8.4 0 4.37l1.27-1.27 2.76 2.75L9.73 0 11 1.28Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9'%3E%3Cpath d='M4.03 8.4 0 4.37l1.27-1.27 2.76 2.75L9.73 0 11 1.28Z'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: scale(0);
	transition: transform var(--dur-kort) var(--ease-out);
}

.blok-contact-kaarten__formulier .gchoice input[type="checkbox"]:checked {
	background: var(--c-blauw);
	border-color: var(--c-blauw);
}

.blok-contact-kaarten__formulier .gchoice input[type="checkbox"]:checked::before {
	transform: scale(1);
}

.blok-contact-kaarten__formulier .gchoice input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--c-blauw);
	outline-offset: 2px;
}

.blok-contact-kaarten__formulier .gchoice label {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: var(--c-zwart);
	cursor: pointer;
}

/* Verzendknop rechtsonder, in lijn met de checkboxregel: de voet schuift
 * (checkboxregel 24px + 13px) omhoog zodat de middens van knop (50px) en
 * checkbox gelijk liggen; de checkboxregel houdt rechts ruimte vrij. */
.blok-contact-kaarten__formulier .gform_footer {
	margin: -37px 0 0;
	padding: 0;
	align-self: flex-end;
}

.blok-contact-kaarten__formulier .gfield--type-checkbox {
	padding-right: 175px;
}

/* Validatie in de huisstijl: rustige rode meldingen zonder de kaders van GF */
.blok-contact-kaarten__formulier .gform_validation_errors {
	margin: 0 0 20px;
	padding: 14px 20px;
	background: rgb(192 43 10 / 6%); /* zacht rood vlak, geen ontwerp-token */
	border: 1px solid rgb(192 43 10 / 25%);
	border-radius: 10px;
	box-shadow: none;
}

.blok-contact-kaarten__formulier .gform_submission_error {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: #c02b0a; /* GF-foutkleur, bewust geen ontwerp-token */
}

.blok-contact-kaarten__formulier .gform_validation_errors ol,
.blok-contact-kaarten__formulier .gform_validation_errors ul {
	display: none; /* de velden zelf zijn al gemarkeerd */
}

.blok-contact-kaarten__formulier .gfield_validation_message,
.blok-contact-kaarten__formulier .validation_message {
	margin-top: 8px;
	padding: 0;
	background: none;
	border: none;
	font-size: 14px;
	line-height: 20px;
	color: #c02b0a;
}

.blok-contact-kaarten__formulier .gfield_error input,
.blok-contact-kaarten__formulier .gfield_error textarea {
	border-color: #c02b0a;
}

/* Bevestiging na verzenden */
.blok-contact-kaarten__formulier .gform_confirmation_message {
	padding: 20px 24px;
	background: color-mix(in srgb, var(--c-blauw) 8%, var(--c-wit));
	border: 1px solid color-mix(in srgb, var(--c-blauw) 30%, var(--c-wit));
	border-radius: 10px;
	font-size: 16px;
	line-height: 26px;
	color: var(--c-donkerblauw);
}

/* Melding voor redacteuren als er (nog) geen formulier is */
.blok-contact-kaarten__formulier-melding {
	margin: 40px 0 0;
	padding: 14px 20px;
	background: #fff6d9; /* zachte waarschuwingsgeel, alleen voor redacteuren */
	border-radius: 10px;
	font-size: 15px;
	color: #5c4a00;
}

/* --------------------------------------------------------------------------
 * Desktop (vanaf 1200px): twee kaarten naast elkaar, over de curve van de
 * paginakop heen getrokken (kaarttop 566px in het 1920-ontwerp, de lichte
 * zone begint op 864px: 298px overlap).
 * ------------------------------------------------------------------------ */

@media (min-width: 1200px) {
	/* Kaarttop op 566px in het 1920-ontwerp (65:7025), de lichte zone begint op
	 * 861px. De hero eindigt onder de curve met nog 67px lichte ruimte, dus die
	 * telt mee: 295px overlap + 67px = 362px omhoog. */
	.blok-contact-kaarten--overlap {
		margin-top: -362px;
	}

	/* Een pagina-hero zonder foto krimpt normaal in (min-height 0). Staan er
	 * overlappende kaarten onder, dan moet het donkere vlak zijn ontwerphoogte
	 * houden: anders trekt de negatieve marge de kaarten over de h1 heen.
	 * De kop staat dan ook op de gewone ontwerpafstand, niet op de krappere
	 * marge van de overgenomen pagina's. */
	.blok-pagina-hero:has(+ .blok-contact-kaarten--overlap) .blok-pagina-hero__donker {
		min-height: 587px;
	}

	.blok-pagina-hero:has(+ .blok-contact-kaarten--overlap) .blok-pagina-hero__tekst {
		margin-top: 78px;
	}

	.blok-contact-kaarten__kaarten {
		grid-template-columns: 1fr 1fr;
		gap: 55px;
	}
}

/* Tussenmaat: een kolom, bescheiden over de curve heen. */
@media (min-width: 768px) and (max-width: 1199px) {
	.blok-contact-kaarten--overlap {
		margin-top: -40px;
	}

	/* De kaarten houden hun ontwerpbreedte en staan gecentreerd: over de volle
	 * breedte uitgerekt staat de inhoud verloren in een kaart van bijna
	 * 1200px, met een gapend gat rechts van de contactregels. */
	.blok-contact-kaarten__kaarten {
		max-width: 673px;
		margin-inline: auto;
	}
}

/* --------------------------------------------------------------------------
 * Mobiel
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.blok-contact-kaarten--overlap {
		margin-top: 16px; /* de donkere kop heeft mobiel geen ruimte onder de h1 */
	}

	.blok-contact-kaarten__kopbalk {
		min-height: 70px;
		padding: 16px 28px;
	}

	.blok-contact-kaarten__kop {
		font-size: 20px;
	}

	.blok-contact-kaarten__binnen {
		padding: 28px 24px 40px;
	}

	.blok-contact-kaarten__regels {
		margin-top: 36px;
	}

	.blok-contact-kaarten__regel {
		gap: 18px;
		padding-block: 26px;
	}

	.blok-contact-kaarten__regel-icoon {
		width: 48px;
		height: 48px;
	}

	.blok-contact-kaarten__regel-icoon .icoon,
	.blok-contact-kaarten__regel-icoon .icoon svg {
		width: 48px;
		height: 48px;
	}

	.blok-contact-kaarten__regel-icoon--themaset .icoon,
	.blok-contact-kaarten__regel-icoon--themaset .icoon svg {
		width: 26px;
		height: 26px;
	}

	.blok-contact-kaarten__regel-label {
		font-size: 18px;
	}

	.blok-contact-kaarten__regel-tekst {
		font-size: 16px;
		line-height: 24px;
	}

	.blok-contact-kaarten__formulier {
		margin-top: 36px;
	}

	.blok-contact-kaarten__kaart--formulier .blok-contact-kaarten__binnen {
		padding-inline: 24px;
	}

	.blok-contact-kaarten__formulier .gform_wrapper.gravity-theme .gfield input[type="text"],
	.blok-contact-kaarten__formulier .gform_wrapper.gravity-theme .gfield input[type="email"],
	.blok-contact-kaarten__formulier .gform_wrapper.gravity-theme .gfield input[type="tel"] {
		height: 50px;
		padding: 0 18px;
	}

	.blok-contact-kaarten__formulier .gform_wrapper.gravity-theme .gfield textarea {
		height: 200px;
		padding: 14px 18px;
	}

	/* Checkbox en knop onder elkaar: de knop gewoon in de flow, rechts. */
	.blok-contact-kaarten__formulier .gfield--type-checkbox {
		padding-right: 0;
	}

	.blok-contact-kaarten__formulier .gform_footer {
		margin: 24px 0 0;
	}
}