/*
 * Homepage The Boozt — alleen geladen op de voorpagina.
 *
 * Richting: de houding van Imperiale Bolgheri (donker, grote kapitalen), het
 * typografische spel van Postfamiliar (beeld midden in de tekst, haakjes), de
 * warmte van Autajon, en de kleuren uit Maria's foto's. Experimenteel waar het
 * merk spreekt; product en checkout blijven voorspelbaar. Alles in CSS — geen
 * WebGL, want snelheid is juist de reden van de overstap van Shopify.
 */

/* Secties sluiten naadloos op elkaar aan en regelen hun eigen ruimte. Zonder dit
   zet de flow-layout van WordPress een strook linnen tussen twee gekleurde
   secties. Specificiteit (0,2,1) wint van WordPress' :root :where(...) > *. */
body.home .wp-block-post-content > * {
	margin-block-start: 0;
}

.boozt-sectie {
	padding-block: var(--wp--preset--spacing--60);
}

/* ------------------------------------------------------------------- labels */

.boozt-labels,
.boozt-label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.boozt-labels p {
	margin: 0;
}

.boozt-labels a {
	text-decoration: none;
}

.boozt-labels a:hover,
.boozt-labels a:focus-visible {
	text-decoration: underline;
}

.boozt-label {
	margin: 0 0 1.5em;
}

/* --------------------------------------------------------------------- hero */

/* Schermvullend: 100% breed (alignfull) en één schermhoogte, met titel en
   intro horizontaal én verticaal in het midden. svh i.p.v. vh waar het kan:
   op mobiel telt vh de adresbalk mee, waardoor de hero net te hoog wordt. */
.boozt-hero {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--wp--preset--spacing--50);
	overflow: hidden;
}

.boozt-hero .boozt-hero__lead {
	margin-inline: auto;
}

/* De slogan als beeld, op twee regels: "HAAL MEER UIT / ELK GLAS".
   De langste regel is ~9,2em breed. Met 9vw past hij tot 375px schermbreedte
   op één regel; het maximum van 7.5rem houdt hem binnen de wideSize (72rem). */
.boozt-hero__h1 {
	font-weight: 900;
	font-size: clamp(2rem, 9vw, 7.5rem);
	line-height: 0.86;
	letter-spacing: -0.035em;
	text-transform: uppercase;
	margin: 0.2em 0 0.2em;
}

/* STAAT NU UIT (11-09): de foto is uit de H1 gehaald. Regel blijft staan zodat
   hij terug kan door de <img> weer in de kop te zetten.
   Foto midden in de zin, zoals op postfamiliar.com. Decoratief (alt=""), zodat
   de H1 voor zoekmachines en screenreaders gewoon "Haal meer uit elk glas" is.
   Gericht op de img in de kop in plaats van op een eigen class: de blok-editor
   bewaart geen classes op inline afbeeldingen. */
.boozt-hero__h1 img {
	display: inline-block;
	width: 1.9em;
	height: 0.78em;
	object-fit: cover;
	border-radius: 1em;
	vertical-align: -0.02em;
	transform: rotate(-5deg);
	margin: 0 0.06em;
}

.boozt-hero__lead {
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	max-width: 38ch;
}

.boozt-hero__foto {
	max-width: 22rem;
	margin-left: auto;
}

/* Desktop: de foto schuift omhoog de lege ruimte naast "GLAS" in. Zo staan de
   lead en de bestelknop boven de vouw, en overlapt het beeld de kop net. */
@media (min-width: 782px) {
	.boozt-hero__foto {
		margin-top: -9rem;
		position: relative;
		z-index: 1;
	}
}

.boozt-finale .boozt-hero__lead {
	margin-inline: auto;
}

/* ------------------------------------------------------------- woordmerk */

.boozt-wordmark {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 900;
	font-size: clamp(3.75rem, 15.5vw, 15rem);
	line-height: 0.82;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	margin: 0.2em 0 0.4em;
}

/* Staat op de brede lijn (alignwide, 72rem): op 10rem is "PROOST." ±48rem breed en past niet in
   de tekstkolom van 44rem. Het woord stak dan rechts uit en het masker van de tekst-intro knipte
   de punt af — alleen op schermen vanaf ±1300px (15-09). */
.boozt-wordmark--klein {
	font-size: clamp(3rem, 11vw, 10rem);
	margin-top: 0;
}

/* ------------------------------------------------------- gekantelde foto's */

.boozt-tilt img {
	transform: rotate(-3deg);
	border-radius: 0.5rem;
}

.boozt-strip-sectie {
	overflow: hidden;
}

.boozt-strip img {
	border-radius: 0.5rem;
}

.boozt-strip .wp-block-column:nth-child(odd) img {
	transform: rotate(-2deg);
}

.boozt-strip .wp-block-column:nth-child(even) img {
	transform: rotate(2.5deg) translateY(1.5rem);
}

/* ------------------------------------------------------ grote kapitalen */

.boozt-statement {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 900;
	/* Op smalle schermen wint 8vw, zodat "GEEN WACHTTIJD." op één regel past
	   (op 375px ≈ 30px); daarboven de oude schaal. */
	font-size: clamp(1.6rem, min(1rem + 6vw, 8vw), 6.5rem);
	line-height: 0.92;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin: 0;
}

.boozt-kop-groot {
	font-weight: 900;
	font-size: clamp(2.25rem, 1rem + 4.5vw, 5rem);
	line-height: 0.95;
	text-transform: uppercase;
}

/* ------------------------------------------------------------ film grain */

/*
 * Gebaseerd op "Film Grain Effect" (Osmo Supply): zelfde textuurgrootte, filter,
 * dekking en animatie. Twee afwijkingen:
 *  - Per donkere sectie (::after binnen .boozt-grain) in plaats van één vaste
 *    laag over de hele site. Grain op licht oogt vies, en over productgrids en
 *    de checkout wil je het niet.
 *  - Eigen ruistextuur (assets/img/grain.webp) in plaats van Osmo's CDN: geen
 *    externe aanroep.
 */
.boozt-grain {
	position: relative;
	isolation: isolate;
}

.boozt-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	/* ?v= is de hash van de tegel: CSS krijgt een versie via filemtime, maar een
	   plaatje waarnaar de CSS verwijst niet. Zonder dit blijven browser en
	   LiteSpeed de oude tegel serveren. Bij een nieuwe tegel: hash bijwerken. */
	background: url("../img/grain.webp?v=7508d862") 50% 50% / 7.8125em repeat;
	opacity: 0.5;
	filter: contrast(125%) brightness(60%);
	animation: boozt-grain 0.6s steps(1, end) infinite;
}

/* Hoge pixeldichtheid (iPhone 3×, MacBook 2×): de tegel van 128px werd daar 2–3× opgeschaald,
   waardoor elke spikkel een blokje van meerdere schermpixels werd — veel korreliger dan op een
   1×-scherm (LG UltraFine, 17-09). Tegel even klein in schermpixels houden, iets zachter. */
@media (min-resolution: 1.5dppx) {
	.boozt-grain::after {
		background-size: 3.90625em;
		opacity: 0.42;
	}
}

@media (min-resolution: 2.5dppx) {
	.boozt-grain::after {
		background-size: 2.6em;
		opacity: 0.38;
	}
}

@keyframes boozt-grain {
	0%   { background-position: 0em 0em; }
	20%  { background-position: -0.5em 0.3em; }
	40%  { background-position: 0.4em -0.2em; }
	60%  { background-position: -0.3em -0.4em; }
	80%  { background-position: 0.2em 0.5em; }
}

/* --------------------------------------------------------------- mobiel */

@media (max-width: 781px) {
	.boozt-tilt img {
		transform: rotate(-2deg);
	}

	.boozt-strip .wp-block-column:nth-child(even) img {
		transform: rotate(2deg);
	}

	.boozt-hero__foto {
		max-width: 16rem;
		margin: 1rem auto 0;
	}
}

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

/* ------------------------------------------------------------ carrousel */

/* Foto's en video's als 4:5-kaartjes, horizontaal scrollbaar met snap.
   De pijlen komen uit carousel.js; zonder JS blijft het een scrollbare strook. */
.boozt-carousel {
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.25rem;
}

.boozt-carousel::-webkit-scrollbar {
	display: none;
}

.boozt-carousel > figure {
	flex: 0 0 min(80%, 20rem);
	margin: 0;
	aspect-ratio: 4 / 5;
	border-radius: 0.5rem;
	overflow: hidden;
	scroll-snap-align: start;
	background-color: var(--wp--preset--color--line, #dccbba);
}

.boozt-carousel > figure img,
.boozt-carousel > figure video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.boozt-carousel-nav {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: 1rem;
}

.boozt-carousel-nav__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--ink, #1b0b09);
	color: var(--wp--preset--color--cream, #ebe0d6);
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.boozt-carousel-nav__btn.is--vorige svg {
	transform: scaleX(-1);
}

.boozt-carousel-nav__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.boozt-moment__lead {
	max-width: 36ch;
	margin-bottom: 1.75rem;
}

/* Tekst-intro (text-reveal.js): de verbergregel staat sinds 17-09 in app.css. */

/* --------------------------------------------- drie kaarten (gelegenheid) */

.boozt-drie__kaarten {
	gap: 1.5rem;
	margin-top: var(--wp--preset--spacing--40);
}

.boozt-drie__kaart {
	overflow: hidden; /* foto binnen de ronde hoeken */
}

.boozt-drie__kaart .wp-block-cover__inner-container {
	padding: 0 0.5rem 0.5rem;
}

.boozt-drie__kaart h3 {
	font-size: var(--wp--preset--font-size--xl);
	margin: 0 0 0.5rem;
}

.boozt-drie__kaart p {
	margin: 0;
	max-width: 28ch;
}

.boozt-drie__kaart p + p {
	margin-top: 1rem;
}

.boozt-drie__link {
	color: var(--wp--preset--color--cream, #ebe0d6);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.1em;
}

.boozt-drie__link:hover,
.boozt-drie__link:focus-visible {
	border-bottom-width: 2px;
	padding-bottom: 0.05em; /* dikkere lijn zonder dat de regel verspringt */
}

@media (max-width: 781px) {
	.boozt-drie__kaarten {
		gap: 1rem;
	}

	.boozt-drie__kaart {
		min-height: 22rem !important; /* overschrijft de inline min-height van het cover-blok */
	}
}

/* "Zo werkt de VinO₂": video boven de kaarten (23-09-2026).
   Twee classes tegen de flow-layout van WordPress (valkuil 6) en tegen WooCommerce (valkuil 11).
   Zelfde brede maat als de kaartenrij eronder, 16:9 zodat kop, video en kaarten samen in beeld passen. */
.boozt-uitleg .boozt-uitleg__video {
	margin-block: clamp(2rem, 4vw, 3.25rem);
	/* Breedte ook begrensd door de hoogte die past: 16:9 terugrekenen. De variant mét kop, want de H2 erboven
	   moet samen met de video in beeld staan (zie app.css). */
	max-width: min(100%, 72rem, calc(var(--boozt-media-max-h-kop) * 16 / 9));
	margin-inline: auto;
}

.boozt-uitleg .boozt-uitleg__video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 1.25rem;
	background-color: var(--wp--preset--color--ink);
}

@media (max-width: 781px) {
	/* op een telefoon wordt een 16:9-band te smal om het detail nog te zien */
	.boozt-uitleg .boozt-uitleg__video video {
		aspect-ratio: 4 / 3;
		border-radius: 1rem;
	}
}