/* Haags.nl — contactpagina: oker vlak, groene info-kaarten links + wit Fluent
 * Forms-formulier rechts.
 *
 * Etch-NATIEF formaat: elke top-level regel is één class-style (id = classnaam),
 * @media GENEST. StylesParser leest dit als Etch-stijlen (via de HaagsContact-
 * pattern) → het ontwerp is ook in de builder-canvas te zien. Fonts, keyframes,
 * box-sizing-reset en de Fluent Forms-/kaart-descendant-regels staan in
 * ContactSection.global.css. */

.hg-contact {
	position: relative;
	background-color: #e6c044;
	/* Subtiele witte rasterlijnen (zelfde look als de shop-banner en de body). */
	background-image:
		linear-gradient(90deg, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size:
		100px 100%,
		20px 100%;
	background-position:
		-2px 0,
		-1px 0;
	/* Kleine top-padding zodat het logo op dezelfde hoogte-van-de-top staat als op
	 * de shop-banner (~58px); royale onderkant voor de rest van de content. */
	padding: 0.9rem 0 clamp(4rem, 8vw, 7rem);
	font-family: "Funnel Display", system-ui, sans-serif;
}

.hg-contact__container {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
}

/* Kop: groen Haags-logo met "Contact" eronder. Faadt bij het laden in. */
.hg-contact__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(.75rem, 2vw, 1.6rem);
	text-align: center;
	animation: hg-contact-logo-in .8s cubic-bezier(.5, .5, 0, 1) .15s both;

	@media (prefers-reduced-motion: reduce) {
		animation: none;
	}
}

.hg-contact__logo {
	display: block;
	/* Zelfde formaat als het logo op de shop-banner. */
	width: min(82vw, 54rem);
	height: auto;
	object-fit: contain;
	user-select: none;
	/* Smoothing voor het 3D-tilt-effect (JS zet de rotatie). */
	transition: transform .35s cubic-bezier(.5, .5, 0, 1);
	transform-origin: center center;
	backface-visibility: hidden;
	will-change: transform;

	@media (prefers-reduced-motion: reduce) {
		transition: none;
	}
}

/* Het logo linkt naar de homepage. */
.hg-contact__logo-link {
	display: block;
	border-radius: 1rem;

	&:focus-visible {
		outline: 3px solid #1e7a54;
		outline-offset: 6px;
	}
}

.hg-contact__pagetitle {
	margin: 0;
	font-family: "Antonio", system-ui, sans-serif;
	font-size: clamp(2.5rem, 6vw, 5.5rem);
	font-weight: 700;
	line-height: .9;
	letter-spacing: -.015em;
	text-transform: uppercase;
	color: #1e7a54;
}

.hg-contact__intro {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	text-align: center;
	font-family: "Funnel Display", system-ui, sans-serif;
	font-size: clamp(1.05rem, 1.6vw, 1.35rem);
	font-weight: 500;
	text-transform: none;
	color: #1e7a54;
}

/* Twee zinnen netjes onder elkaar. */
.hg-contact__intro-line {
	display: block;
}

/* Tweekoloms-indeling: info-kaarten links, formulier rechts. */
.hg-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
	gap: clamp(1.25rem, 2.5vw, 2.5rem);
	align-items: start;
	margin-top: clamp(2.5rem, 5vw, 4.5rem);

	@media (max-width: 900px) {
		grid-template-columns: minmax(0, 1fr);
	}
}

.hg-contact__aside {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* Groene info-kaarten (adres + gegevens). */
.hg-contact__card {
	padding: clamp(1.5rem, 2.5vw, 2.25rem);
	border-radius: 1rem;
	background-color: #1e7a54;
	color: #ffffff;
}

.hg-contact__card-title {
	margin: 0 0 1rem;
	font-family: "Antonio", system-ui, sans-serif;
	font-size: clamp(1.3rem, 2vw, 1.7rem);
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
	color: #f7e87d;
}

/* Witte formulierkaart. */
.hg-contact__form {
	padding: clamp(1.5rem, 3vw, 2.75rem);
	border-radius: 1rem;
	background-color: #ffffff;
	color: #222;
}

.hg-contact__form-title {
	margin: 0 0 .5rem;
	font-family: "Antonio", system-ui, sans-serif;
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
	color: #1e7a54;
}

.hg-contact__form-note {
	margin: 0 0 1.5rem;
	font-family: "Funnel Display", system-ui, sans-serif;
	font-size: clamp(1rem, 1.3vw, 1.1rem);
	font-weight: 400;
	text-transform: none;
	color: #555;
}