/**
 * Component: Formulier
 */

.bw-formulier__inner {
	display: grid;
	gap: clamp(2rem, 1rem + 4vw, 4rem);
}

@media (min-width: 56rem) {
	.bw-formulier__inner {
		grid-template-columns: 5fr 7fr;
		align-items: start;
	}
}

.bw-formulier__title {
	max-width: 18ch;
}

.bw-formulier__punten {
	display: grid;
	gap: var(--bw-space-2xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bw-formulier__punten li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--bw-space-2xs);
	align-items: start;
	font-size: var(--bw-text-base);
}

.bw-formulier__punten .bw-icon {
	width: 1.3em;
	height: 1.3em;
	margin-block-start: 0.15em;
	color: var(--bw-accent-text, var(--bw-caramel-ink));
}

.bw-formulier__slot {
	background: var(--bw-white);
	border: 1px solid var(--bw-surface-border, var(--bw-border));
	border-radius: var(--bw-radius-lg);
	padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
	box-shadow: var(--bw-shadow-sm);
	color: var(--bw-midnight);
}

.bw-formulier__slot p + p {
	margin-block-start: var(--bw-space-2xs);
}

.bw-formulier__leeg {
	border-left: 3px solid var(--bw-caramel);
	padding-inline-start: var(--bw-space-sm);
	font-size: var(--bw-text-sm);
	color: var(--bw-text-muted);
}

.bw-formulier__leeg strong {
	color: var(--bw-midnight);
}

/* ---------------------------------------------------------------
 * Variant met een paneel Direct contact
 *
 * De briefing vraagt hier formulier 65–70% links en directe gegevens
 * 30–35% rechts. In de DOM staat de kop nog steeds eerst, want dat is
 * de leesvolgorde; alleen op desktop verhuist hij naar boven het
 * formulier. Op mobiel valt alles onder elkaar in de bronvolgorde:
 * kop, formulier, direct contact.
 * ------------------------------------------------------------ */

@media (min-width: 60rem) {
	.bw-formulier--direct .bw-formulier__inner {
		grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
		column-gap: clamp(2rem, 1rem + 3vw, 3.5rem);
		row-gap: var(--bw-space-md);
	}

	.bw-formulier--direct .bw-formulier__intro {
		grid-column: 1;
	}

	.bw-formulier--direct .bw-formulier__slot {
		grid-column: 1;
	}

	.bw-formulier--direct .bw-formulier__direct {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: start;
	}
}

.bw-formulier__direct {
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	border: 1px solid var(--bw-surface-border, var(--bw-border));
	border-radius: var(--bw-radius-lg);
	background-color: var(--bw-white);
	color: var(--bw-midnight);
}

.bw-formulier__direct-titel {
	margin: 0 0 var(--bw-space-md);
	font-size: var(--bw-text-lg);
}

.bw-direct__lijst {
	display: grid;
	gap: var(--bw-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bw-direct__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--bw-space-sm);
	align-items: start;
}

.bw-direct__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--bw-radius-pill);
	background-color: var(--bw-oat);
	color: var(--bw-midnight);
}

.bw-direct__icon .bw-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.bw-direct__body {
	display: grid;
	gap: 0.125rem;
	min-width: 0;
}

.bw-direct__label {
	font-family: var(--bw-font-heading);
	font-size: var(--bw-text-sm);
	letter-spacing: var(--bw-tracking-caps);
	text-transform: uppercase;
	color: var(--bw-accent-text);
}

.bw-direct__waarde {
	font-size: var(--bw-text-base);
	/* Zelfde uitzondering als in contactblok.css: hier staat een
	   e-mailadres, en dat mag wél breken. */
	overflow-wrap: anywhere;
}

a.bw-direct__waarde {
	/* Ruim boven het minimum van 44px voor een aanraakdoel. */
	display: inline-block;
	padding-block: 0.375rem;
}

.bw-direct__toelichting {
	font-size: var(--bw-text-sm);
	color: var(--bw-text-muted);
}