/**
 * Component: Contactblok
 *
 * Gegevens links, beeld of een CTA rechts. Het <address> staat bewust
 * niet cursief — dat is de standaardstijl van de browser en past niet
 * bij de rest van de typografie.
 */

.bw-contactblok__inner {
	display: grid;
	gap: clamp(2rem, 1rem + 4vw, 3.5rem);
	align-items: center;
}

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

.bw-contactblok__adres {
	display: grid;
	gap: var(--bw-space-2xs);
	justify-items: start;
	font-style: normal;
	font-size: var(--bw-text-base);
	line-height: 1.55;
}

.bw-contactblok__naam {
	font-family: var(--bw-font-heading);
	font-size: var(--bw-text-lg);
	letter-spacing: var(--bw-tracking-heading);
}

.bw-contactblok__link {
	display: inline-flex;
	align-items: center;
	gap: var(--bw-space-2xs);
	/* Ruim boven de 24px die WCAG 2.2 als aanraakdoel vraagt. */
	min-height: 2.75rem;
	text-decoration: none;
	/* Een e-mailadres heeft geen spaties; zonder dit loopt het op een
	   smal scherm buiten de kolom. Zie .bw-lange-tekenreeks in base.css:
	   dit is dezelfde uitzondering, hier op de plek waar hij nodig is. */
	overflow-wrap: anywhere;
}

.bw-contactblok__link:hover {
	text-decoration: underline;
	text-decoration-color: var(--bw-caramel);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.bw-contactblok__link .bw-icon {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--bw-accent-text);
}

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

.bw-contactblok__media img,
.bw-contactblok__media .bw-placeholder {
	width: 100%;
	border-radius: var(--bw-radius-lg);
}

.bw-contactblok__media img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}