/*
 * De homepage: hero, hoe het werkt, collecties, verhaal en afsluiting.
 *
 * Ritme is hier het hoofdingrediënt. Vijf secties achter elkaar in dezelfde
 * tint en op dezelfde breedte leest als één lange lap; door te wisselen tussen
 * canvas en vlak, en tussen brede en smalle inhoud, krijgt de pagina een
 * hartslag. §3: veel witruimte, grote typografie, alles dient de foto.
 */

/* --- Hero ---
 * Eén compositie: beeld schermvullend, tekst erin. De hoogte is gebonden aan
 * het venster min de header, zodat kop, ondertitel en knop binnen het eerste
 * scherm vallen. svh in plaats van vh, want vh telt op mobiel de adresbalk mee
 * die er tijdens het scrollen niet meer is.
 */
.hero {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-areas: "hero";
	/* De hero vult het eerste scherm: alles onder de header, tot de onderrand.
	 *
	 * De 8 rem is de plakkende header, dus header plus hero is samen precies één
	 * scherm. De tekst staat onderin de hero en is daarmee altijd zichtbaar.
	 *
	 * Twee ondergrenzen houden het heel. De 30vw is er voor een laag en breed
	 * venster: de lijst aan de muur beslaat de helft van de hoogte van de foto
	 * (van 14% tot 64%), en bij een uitsnede platter dan ongeveer 3,5 staat tot
	 * 1 snijdt hij af. Op zo'n venster valt de knop liever net onder de vouw dan
	 * dat het werk half in beeld staat.
	 *
	 * Het minimum garandeert dat de tekst er zelf in past. */
	height: max(20rem, 30vw, calc(100svh - 8rem));
	overflow: hidden;
}

.hero__media,
.hero__scrim,
.hero__body {
	grid-area: hero;
}

.hero__media {
	display: block;
	min-height: 0;
}

.hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Het hart van de lijst ligt op 39% van de hoogte (hij loopt van 14% tot
	   64%). Daar centreren we de uitsnede op, zodat er boven en onder evenveel
	   lucht overblijft. Stond op 44%, en dat sneed de bovenrand eraf. */
	object-position: 50% 39%;
	display: block;
	/* Heel langzaam dichterbij komen: je ziet het niet gebeuren, je voelt dat
	   het beeld leeft. Staat uit bij prefers-reduced-motion. */
	animation: hero-adem 24s var(--wce-ease) infinite alternate;
}

@keyframes hero-adem {
	from { transform: scale(1); }
	to   { transform: scale(1.045); }
}

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

/* Verloop van niets naar bijna-inkt, zodat de tekst leesbaar is zonder dat de
   foto grijs wordt. Alleen onderin, want daar staat de tekst. */
.hero__scrim {
	background: linear-gradient(
		to top,
		rgb(var(--wce-ink-rgb) / 0.74) 0%,
		rgb(var(--wce-ink-rgb) / 0.46) 24%,
		rgb(var(--wce-ink-rgb) / 0.10) 48%,
		transparent 68%
	);
}

.hero__body {
	display: flex;
	align-items: flex-end;
	padding-block: var(--wce-space-5);
	z-index: 1;
}

.hero__inner {
	width: 100%;
	max-width: var(--wce-container);
	margin-inline: auto;
	padding-inline: var(--wce-gutter);
}

.hero__title {
	margin: 0 0 var(--wce-space-2);
	max-width: 18ch;
	font-size: clamp(2.2rem, 1.2rem + 3.4vw, 3.6rem);
	line-height: 1.03;
	color: #FFFFFF;
	text-shadow: 0 1px 28px rgb(var(--wce-ink-rgb) / 0.4);
}

.hero__lead {
	margin: 0 0 var(--wce-space-4);
	max-width: 32ch;
	font-size: var(--wce-text-lead);
	line-height: var(--wce-leading-lead);
	color: rgb(255 255 255 / 0.9);
}

.hero__actions { margin: 0; }

/* Op de hero staat de knop op een foto, dus die krijgt hier het maximale
   contrast in plaats van de merksalie. */
.hero .btn-primary {
	background: #FFFFFF;
	color: var(--wce-color-ink);
	border-color: #FFFFFF;
	box-shadow: 0 2px 20px rgb(var(--wce-ink-rgb) / 0.22);
}

.hero .btn-primary:hover {
	background: var(--wce-color-accent);
	border-color: var(--wce-color-accent);
	color: var(--wce-color-ink);
}

/* --- De hero op een telefoon ---
 * Een staand scherm en een liggende foto gaan niet samen. Bij een hoge, smalle
 * uitsnede zie je nog maar 46% van de breedte, en dan valt de lijst er links en
 * rechts af. Daarom staat de foto hier boven en de tekst eronder: de foto houdt
 * zijn hele compositie, en de tekst staat op papier in plaats van onder een
 * donkere sluier. Alles past boven de vouw.
 *
 * Op desktop blijft de tekst wél in het beeld staan; daar is breedte genoeg.
 */
@media (max-width: 780px) {
	.hero {
		display: block;
		height: auto;
	}

	.hero__media {
		display: block;
		overflow: hidden; /* houdt de langzame zoom binnen het beeldvlak */
	}

	.hero__img {
		height: auto;
		aspect-ratio: 16 / 9;
		object-position: 50% 50%;
	}

	.hero__scrim {
		display: none;
	}

	.hero__body {
		display: block;
		padding-block: var(--wce-space-5);
		background: var(--wce-color-bg);
	}

	.hero__title {
		max-width: 16ch;
		color: var(--wce-color-ink);
		text-shadow: none;
	}

	.hero__lead {
		color: var(--wce-color-ink-soft);
	}

	/* Terug naar de merksalie: de knop staat hier op papier, niet op een foto. */
	.hero .btn-primary {
		background: var(--wce-color-accent-ink);
		border-color: var(--wce-color-accent-ink);
		color: var(--wce-color-bg);
		box-shadow: var(--wce-shadow-1);
	}

	.hero .btn-primary:hover {
		background: var(--wce-color-ink);
		border-color: var(--wce-color-ink);
	}
}

/* --- Hoe het werkt ---
 * Drie stappen naast elkaar op papier, met de nummering als echte volgorde in
 * de tijd. Elke stap is een vlak dat van de pagina komt, zodat de sectie niet
 * leest als drie kolommen tekst.
 */
.steps {
	padding-block: var(--wce-sectie);
}

.steps__inner {
	width: 100%;
	max-width: var(--wce-container);
	margin-inline: auto;
	padding-inline: var(--wce-gutter);
}

.steps__title {
	margin: 0 0 var(--wce-space-6);
	max-width: 24ch;
	font-size: var(--wce-text-h2);
}

.steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wce-space-4);
	counter-reset: stap;
}

.steps__item {
	counter-increment: stap;
	position: relative;
	padding: var(--wce-space-5) var(--wce-space-4) var(--wce-space-5);
	background: var(--wce-color-paper);
	border: 1px solid var(--wce-color-line-soft);
	border-radius: var(--wce-radius-frame);
	box-shadow: var(--wce-shadow-1);
	transition: box-shadow var(--wce-duur) var(--wce-ease),
	            transform var(--wce-duur) var(--wce-ease);
}

.steps__item:hover {
	box-shadow: var(--wce-shadow-2);
	transform: translateY(-2px);
}

/* Het nummer als groot, licht cijfer in de hoek: het telt echt, want dit is een
   volgorde in de tijd en geen opsomming. */
.steps__item::before {
	content: counter( stap, decimal-leading-zero );
	position: absolute;
	top: var(--wce-space-3);
	right: var(--wce-space-4);
	font-family: var(--wce-font-display);
	font-size: 2.6rem;
	line-height: 1;
	color: var(--wce-color-accent);
	opacity: 0.34;
}

.steps__item-title {
	margin: 0 0 var(--wce-space-2);
	max-width: 14ch;
	font-size: var(--wce-text-h3);
}

.steps__item-body {
	margin: 0;
	font-size: var(--wce-text-small);
	line-height: 1.6;
	color: var(--wce-color-ink-soft);
}

@media (max-width: 860px) {
	.steps__list { grid-template-columns: 1fr; gap: var(--wce-space-3); }
	.steps__item { padding: var(--wce-space-4); }
	.steps__item::before { font-size: 2rem; }
	.steps__item-title { max-width: none; }
}

/* --- Collecties ---
 * De sectie valt terug naar het vlak, zodat de beelden ervoor komen te liggen.
 */
.collections {
	padding-block: var(--wce-sectie-ruim);
	background: var(--wce-color-surface);
}

.collections__inner {
	width: 100%;
	max-width: var(--wce-container);
	margin-inline: auto;
	padding-inline: var(--wce-gutter);
}

.collections__title {
	margin: 0 0 var(--wce-space-6);
	font-size: var(--wce-text-h2);
}

.collections__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wce-space-4);
}

.collections__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.collections__media {
	display: block;
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: var(--wce-radius-frame);
	overflow: hidden;
	background: var(--wce-color-paper);
	box-shadow: var(--wce-shadow-1);
	transition: box-shadow var(--wce-duur) var(--wce-ease);
}

.collections__link:hover .collections__media,
.collections__link:focus-visible .collections__media {
	box-shadow: var(--wce-shadow-3);
}

.collections__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 900ms var(--wce-ease-uit);
}

.collections__link:hover img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
	.collections__link:hover img { transform: none; }
}

/* Nog geen beeld? Dan een typografische kaart in plaats van een leeg vlak.
   Een grijs blok leest als een fout, een zin op papier als een keuze. */
.collections__item--tekst .collections__media {
	display: grid;
	place-items: center;
	padding: var(--wce-space-4);
	border: 1px solid var(--wce-color-line);
	text-align: center;
}

.collections__zin {
	font-family: var(--wce-font-display);
	font-size: var(--wce-text-body);
	font-style: italic;
	line-height: 1.4;
	color: var(--wce-color-ink-soft);
	text-wrap: balance;
}

.collections__meta {
	display: flex;
	align-items: baseline;
	gap: var(--wce-space-2);
	margin-top: var(--wce-space-3);
}

.collections__name {
	font-family: var(--wce-font-display);
	font-size: var(--wce-text-h3);
	line-height: 1.2;
	transition: color var(--wce-duur-kort) var(--wce-ease);
}

.collections__count {
	font-size: var(--wce-text-label);
	letter-spacing: 0.08em;
	color: var(--wce-color-ink-soft);
}

.collections__link:hover .collections__name,
.collections__link:focus-visible .collections__name {
	color: var(--wce-color-accent-ink);
}

@media (max-width: 900px) { .collections__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .collections__grid { grid-template-columns: 1fr; gap: var(--wce-space-5); } }

/* --- Het verhaal ---
 * Asymmetrisch: een smalle kolom tekst met ruimte ernaast, in plaats van een
 * blok over de volle breedte. Zo leest het als een persoonlijk stuk en niet als
 * een productbeschrijving.
 */
.story {
	padding-block: var(--wce-sectie);
}

.story__inner {
	width: 100%;
	max-width: var(--wce-container);
	margin-inline: auto;
	padding-inline: var(--wce-gutter);
}

@media (min-width: 900px) {
	.story__inner {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: var(--wce-space-7);
		align-items: start;
	}

	.story__inner .eyebrow,
	.story__title { grid-column: 1; }
	.story__body,
	.story__sign { grid-column: 2; }
	.story__title { margin-bottom: 0; }
}

.story__title {
	margin: 0 0 var(--wce-space-4);
	font-size: var(--wce-text-h2);
	max-width: 16ch;
}

.story__body {
	margin: 0 0 var(--wce-space-3);
	max-width: var(--wce-measure);
	font-size: var(--wce-text-lead);
	line-height: var(--wce-leading-lead);
	color: var(--wce-color-ink-soft);
}

/* De eerste letter wat groter: een klein editoriaal gebaar dat het verhaal
   losmaakt van de rest van de pagina. */
.story__body:first-of-type::first-letter {
	font-family: var(--wce-font-display);
	font-size: 1.45em;
	line-height: 1;
	padding-right: 0.04em;
	color: var(--wce-color-ink);
}

.story__sign {
	margin: var(--wce-space-4) 0 0;
	font-family: var(--wce-font-display);
	font-style: italic;
	color: var(--wce-color-ink);
}

/* --- Afsluiting ---
 * Wie hier komt heeft alles gelezen. Op papier, zodat de pagina eindigt op de
 * lichtste laag in plaats van weg te zakken.
 */
.closing {
	padding-block: var(--wce-sectie-ruim);
	background: var(--wce-color-paper);
	border-top: 1px solid var(--wce-color-line-soft);
	text-align: center;
}

.closing__inner {
	width: 100%;
	max-width: var(--wce-container-text);
	margin-inline: auto;
	padding-inline: var(--wce-gutter);
}

.closing__title {
	margin: 0 0 var(--wce-space-3);
	font-size: var(--wce-text-h2);
}

.closing__body {
	margin: 0 auto var(--wce-space-5);
	max-width: 34ch;
	font-size: var(--wce-text-lead);
	line-height: var(--wce-leading-lead);
	color: var(--wce-color-ink-soft);
}

.closing__actions { margin: 0 0 var(--wce-space-6); }

.closing__trust { margin-top: 0; }

.closing__trust .trust {
	margin-top: 0;
	margin-inline: auto;
	background: var(--wce-color-bg);
	text-align: left;
}