/* =========================== TOKENS =========================== */
@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo-latin.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--brand-primary: #a6051e;
	--brand-voeg: #be5162;
	--ink: #15110f;
	--text-muted: #6e655d;
	--achtergrond: #f4f0eb;
	--lijn: rgba(21, 17, 15, 0.12);
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =========================== BASIS =========================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--achtergrond);
	color: var(--ink);
	font-family: 'Archivo', system-ui, sans-serif;
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

h1, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

a:focus-visible {
	outline: 2px solid var(--brand-primary);
	outline-offset: 4px;
}

/* =========================== LAYOUT =========================== */
.soon {
	display: grid;
	grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
	gap: 14px;
	min-height: 100vh;
	min-height: 100svh;
	padding: 32px;
	position: relative;
	isolation: isolate;
}

/* achtergrondfoto op 30 procent over de crèmekleur */
.soon::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../img/background-coming-soon.webp") center / cover no-repeat;
	opacity: 0.3;
	pointer-events: none;
}

.soon-inhoud {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 48px;
	padding: 32px 80px 32px 32px;
}

/* =========================== LOGO =========================== */
.soon-logo { display: block; width: 170px; }
.soon-logo img { width: 170px; height: auto; }

/* =========================== TEKST =========================== */
.soon-tekst {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.soon-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.soon-bakstenen {
	display: flex;
	flex-direction: column;
}

.soon-bakstenen-rij { display: flex; }
.soon-bakstenen-rij--boven { padding-left: 6px; margin-bottom: -1px; }

.soon-bakstenen i {
	display: block;
	width: 12px;
	height: 7px;
	margin-right: -1px;
	background: var(--brand-primary);
	border: 1px solid var(--brand-voeg);
	border-radius: 1px;
}

.soon-titel {
	font-size: clamp(2.25rem, 5.62vw, 5.3125rem);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.04em;
	text-transform: uppercase;
}

.soon-titel span { display: block; }

.soon-intro {
	max-width: 560px;
	font-size: 16px;
	letter-spacing: -0.003em;
	color: var(--text-muted);
}

/* =========================== CONTACT =========================== */
.soon-onder {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.soon-contact {
	display: flex;
	border-top: 1px solid var(--ink);
	padding-top: 20px;
}

.soon-contact li {
	flex: 1 1 0;
	min-width: 0;
	padding: 0 20px;
	border-left: 1px solid var(--lijn);
}

.soon-contact li:first-child { padding-left: 0; border-left: 0; }
.soon-contact li:last-child { padding-right: 0; }

.soon-contact a {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	font-weight: 600;
}

.soon-contact-tekst {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.soon-label {
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.soon-waarde {
	font-size: 20px;
	line-height: 1.25;
	letter-spacing: -0.008em;
	white-space: nowrap;
}

.soon-pijl {
	flex-shrink: 0;
	margin-bottom: 4px;
	transition: transform 0.3s var(--ease);
}

.soon-contact a:hover .soon-pijl,
.soon-contact a:focus-visible .soon-pijl {
	transform: translate(2px, -2px);
}

.soon-meta {
	display: flex;
	justify-content: space-between;
	gap: 8px 24px;
	font-size: 14px;
	color: var(--text-muted);
}

.soon-meta a { transition: color 0.3s var(--ease); }
.soon-meta a:hover { color: var(--ink); }

/* =========================== MOZAIEK =========================== */
.soon-mozaiek {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	gap: 32px;
	padding: 122px 41px 142px 0;
}

.soon-foto {
	position: relative;
	overflow: hidden;
}

.soon-foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* donkere verloop onderaan elke foto */
.soon-foto::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(21, 17, 15, 0) 65%, rgba(21, 17, 15, 0.4));
	pointer-events: none;
}

.soon-foto--klein {
	align-self: center;
	height: min(360px, 55%);
	min-height: 550px;
}

.soon-foto--klein img { object-position: 50% 61%; }

/* =========================== RESPONSIVE =========================== */
@media (max-width: 1023px) {
	.soon {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		padding: 24px 20px 32px;
	}

	.soon-inhoud { padding: 12px 0 0; gap: 56px; }

	.soon-titel { font-size: clamp(2.25rem, 9vw, 5rem); }

	.soon-contact {
		flex-direction: column;
		padding-top: 0;
	}

	.soon-contact li,
	.soon-contact li:first-child,
	.soon-contact li:last-child {
		padding: 16px 0;
		border-left: 0;
		border-bottom: 1px solid var(--lijn);
	}

	.soon-contact li:last-child { border-bottom: 0; }

	.soon-meta { flex-direction: column; }

	.soon-mozaiek {
		gap: 16px;
		padding: 0;
		aspect-ratio: 659 / 654;
	}

	.soon-foto--klein { min-height: 0; }
}

@media (max-width: 480px) {
	.soon-waarde { font-size: 18px; }
	.soon-mozaiek { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.soon-pijl, .soon-meta a { transition: none; }
}