/* ==========================================================================
   Contact section - Schildersbedrijf J. Bastiaansen
   ========================================================================== */

.contact-section {
	position: relative;
	overflow: hidden;
	padding: 4rem 0;
}

@media (min-width: 1024px) {
	.contact-section {
		padding: 6rem 0;
	}
}

.contact-section__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.34;
	filter: blur(2px);
	transform: scale(1.04);
}

.contact-section__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18, 18, 16, 0.55) 0%, rgba(18, 18, 16, 0.88) 100%);
}

.contact-section__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 40px;
}

.contact-section__header {
	max-width: 760px;
}

.contact-section__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	color: var(--accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.contact-section__eyebrow-mark {
	width: 12px;
	height: 12px;
	border-radius: 999px;
	background: var(--accent);
	flex-shrink: 0;
}

.contact-section__title {
	margin: 0 0 16px;
	color: var(--text);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 600;
	line-height: 1.15;
}

.contact-section__intro {
	margin: 0;
	max-width: 680px;
	color: var(--text-soft);
	font-size: 1rem;
	line-height: var(--line-height-body);
}

.contact-section__body {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
	gap: 48px 72px;
	align-items: start;
}

.contact-section__info {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 40px;
	align-content: start;
}

.contact-section__info-col {
	display: grid;
	align-content: start;
}

.contact-info-block {
	display: grid;
	gap: 14px;
	margin-bottom: 40px;
}

.contact-info-block:last-child {
	margin-bottom: 0;
}

.contact-info-block__title {
	margin: 0;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--accent);
	color: var(--text);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

.contact-info-block__list,
.contact-info-block .opening-hours {
	list-style: none;
	margin: 0;
	padding: 0;
}

.contact-info-block .opening-hours {
	display: grid;
	gap: 6px;
}

.contact-info-block .opening-hours__row {
	color: var(--text-soft);
	font-size: 15px;
}

.contact-info-block .opening-hours__day {
	font-weight: 600;
	color: var(--text);
}

.contact-info-block__list {
	display: grid;
	gap: 8px;
}

.contact-info-block__list a,
.contact-info-block__address,
.contact-info-block__note {
	color: var(--text-soft);
	font-size: 15px;
	line-height: 1.6;
	font-style: normal;
}

.contact-info-block__list a {
	text-decoration: none;
}

.contact-info-block__list a:hover {
	color: var(--text);
}

.contact-info-block__note {
	margin: 4px 0 0;
	max-width: 36ch;
}

.contact-section__form {
	min-width: 0;
}

.contact-form-notice {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: var(--radius-md);
	font-size: 15px;
	font-weight: 600;
}

.contact-form-notice.is-success {
	background: rgba(45, 157, 226, 0.12);
	color: var(--link);
	border: 1px solid rgba(45, 157, 226, 0.25);
}

.contact-form-notice.is-error {
	background: rgba(198, 40, 40, 0.08);
	color: #c62828;
	border: 1px solid rgba(198, 40, 40, 0.2);
}

.contact-section__form-inner {
	display: grid;
	gap: 16px;
}

/* Optionele achtergrondafbeelding: donkere overlay met lichte tekst */
.contact-section--has-media {
	color: #ffffff;
}

.contact-section--has-media .contact-section__title,
.contact-section--has-media .contact-info-block__title {
	color: #ffffff;
}

.contact-section--has-media .contact-section__intro,
.contact-section--has-media .contact-info-block__list a,
.contact-section--has-media .contact-info-block__address,
.contact-section--has-media .contact-info-block__note,
.contact-section--has-media .contact-info-block .opening-hours__row {
	color: rgba(255, 255, 255, 0.86);
}

.contact-section--has-media .contact-info-block .opening-hours__day,
.contact-section--has-media .contact-info-block .opening-hours__row.is-today {
	color: #ffffff;
}

.contact-section--has-media .contact-info-block__list a:hover {
	color: #ffffff;
}

.contact-section--has-media .form-row label {
	color: rgba(255, 255, 255, 0.92);
}

.contact-section--has-media .form-row input,
.contact-section--has-media .form-row textarea,
.contact-section--has-media .form-row select {
	border-color: rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

.contact-section--has-media .form-row input::placeholder,
.contact-section--has-media .form-row textarea::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

.contact-section--has-media .form-row input:focus,
.contact-section--has-media .form-row textarea:focus,
.contact-section--has-media .form-row select:focus {
	border-color: var(--accent);
	background: rgba(255, 255, 255, 0.12);
}

.contact-section--has-media .contact-form-notice.is-success {
	background: rgba(72, 187, 120, 0.18);
	border-color: rgba(72, 187, 120, 0.45);
	color: #d7ffe8;
}

.contact-section--has-media .contact-form-notice.is-error {
	background: rgba(245, 101, 101, 0.18);
	border-color: rgba(245, 101, 101, 0.45);
	color: #ffd7d7;
}

/* Eerste module na hero: minder witruimte (spacing via sections.css, geen dubbele padding) */
.page-hero + .content > .contact-section.site-section:first-child[data-surface="default"],
.home-hero + .content > .contact-section.site-section:first-child[data-surface="default"] {
	margin-top: var(--section-gap);
}

/* ---------- Responsive contact ---------- */
@media (max-width: 1020px) {
	.contact-section {
		padding-bottom: 48px;
	}

	.contact-section__body {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.contact-section__info {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.contact-info-block {
		margin-bottom: 32px;
	}
}

@media (max-width: 720px) {
	.contact-section {
		padding-bottom: 40px;
	}

	.contact-section__inner {
		gap: 32px;
	}
}