/*
 * Contact. Figma frame BSGV-contact.
 * Title y275, content y396. Label column 157, text column 689 (Eudoxus Light 16),
 * map 690x372 below the text, address/contact details at x1021.
 */

.contact__header {
	padding-top: clamp(48px, 6.6vw, 102px);
}

.contact__content {
	display: grid;
	gap: 48px;
	margin-top: clamp(40px, 4.63vw, 70px);

	@media (min-width: 1024px) {
		grid-template-columns: 846fr 67fr 367fr 16fr;
		gap: 0;

		& .contact__meta {
			grid-column: 3;
		}
	}
}

.contact__main {
	display: grid;
	gap: 8px;

	@media (min-width: 768px) {
		grid-template-columns: 157fr 689fr;
		gap: 0;
	}
}

.contact__label {
	padding-top: 6px;
	color: var(--wp--preset--color--umber);
}

.contact__text {
	color: var(--wp--preset--color--text);

	/* Bold lines are the subheadings (Met het openbaar vervoer, Parkeren, …). */
	& strong,
	& b,
	& h3 {
		display: inline-block;
		margin: 0;
		font-size: inherit;
		font-weight: 400;
		color: var(--wp--preset--color--black);
	}

	& p + p {
		margin-top: 1.5em;
	}

	& a {
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

.contact__map {
	margin-top: clamp(32px, 2.6vw, 40px);
	aspect-ratio: 690 / 372;
	overflow: hidden;
	background: var(--wp--preset--color--grey-light);

	& a,
	& img {
		display: block;
		width: 100%;
		height: 100%;
	}

	& img {
		object-fit: cover;
	}
}

.contact__email {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.contact .site-cta {
	margin-top: clamp(48px, 4.7vw, 71px);
}