/**
 * Front page styles.
 *
 * Alle kleuren, spacing, radii en breedtes staan als custom properties in
 * het eerste blok: map die op je eigen huisstijl en de rest volgt vanzelf.
 * Naamgeving: BEM onder het .home-*-prefix.
 *
 * Inhoud:
 * 1. Instellingen (custom properties)
 * 2. Basis: secties, kickers, knoppen, focus
 * 3. Hero
 * 4. Productcarrousel + productkaart
 * 5. Categorie-grid
 * 6. Split-promo
 * 7. Verhaalkaarten
 * 8. Reduced motion
 */

/* ==========================================================================
   1. Instellingen — map deze waarden op je huisstijl
   ========================================================================== */

:root {
	/* Layout. */
	/* Deze twee zijn de pakketdefaults en worden in dit thema niet
	   gerenderd: sectie 23 van style.css zet .home-section__inner en
	   .home-hero__inner — de enige twee afnemers — op max-width: none
	   met --dg-gutter, en dat blad laadt later. Ze blijven staan omdat
	   het pakket zonder thema anders geen uitlijning heeft; wie de
	   marges wil wijzigen moet in style.css zijn, niet hier. */
	--home-max-width: var(--dg-max, 1280px); /* dé sitebreedte, geen eigen kopie */
	--home-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--home-gap: clamp(1rem, 2.5vw, 1.5rem);

	/* Kleuren — verwijzingen naar de thematokens in style.css, zodat een
	   rebrand dáár de voorpagina meteen meeneemt; de fallbacks zijn de
	   huidige waarden. --home-color-text blijft bewust kop-zwart als
	   literal: dit token kleurt kop én tekst, en de donkere keuze is de
	   veilige (zie ook de toelichting bij de thematokens). */
	--home-color-text: #111111;
	--home-color-text-soft: var(--ink-soft, #696969);
	--home-color-bg: #ffffff;
	--home-color-surface: var(--surface, #FFF5E8);
	--home-color-surface-deep: #2b2926;
	--home-color-border: var(--line, #E5E5E5);
	--home-color-accent: var(--knop, #B64444);
	--home-color-accent-hover: var(--knop-hover, #963838);
	--home-color-on-accent: #ffffff;
	--home-color-focus: var(--knop, #B64444);
	--home-color-scrim: 23, 21, 19; /* RGB-basis voor overlays op afbeeldingen. */

	/* Vorm & beweging. */
	--home-radius: var(--radius, 8px);
	--home-radius-small: var(--radius-s, 6px);
	--home-transition: 180ms ease;

	/* Typografie-accenten (sectietitels erven de theme-typografie). */
	--home-kicker-size: 0.75rem;
	--home-kicker-tracking: 0.16em;

	/* Carrousel: zichtbare kaarten per viewport ("1.2" = peek op mobiel). */
	--home-carousel-per-view: 1.2;
}

@media (min-width: 600px) {
	:root {
		--home-carousel-per-view: 2.2;
	}
}

@media (min-width: 900px) {
	:root {
		--home-carousel-per-view: 3;
	}
}

@media (min-width: 1200px) {
	:root {
		--home-carousel-per-view: 4;
	}
}

/* ==========================================================================
   2. Basis: secties, kickers, knoppen, focus
   ========================================================================== */

.home-front-page {
	background: var(--home-color-bg);
	color: var(--home-color-text);
}

/* .home-section kreeg hier padding-block via --home-section-padding
   (verwijderd uit het instellingenblok hierboven, want dit was zijn
   enige gebruik). style.css laadt na dit bestand en zet .home-section
   op dezelfde eigenschap met dezelfde specificiteit (sectie 34a in
   style.css): de latere regel wint altijd, dus deze deed al niets meer
   vóór hij verwijderd werd. */

.home-section__inner {
	max-width: var(--home-max-width);
	margin-inline: auto;
	padding-inline: var(--home-gutter);
}

.home-section__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--dg-space-4) var(--dg-space-6);
	/* Was clamp(1.5rem, 4vw, 2.25rem): 24-36px afhankelijk van
	   schermbreedte. Bij het aansluiten op de schaal blijft de
	   ondergrens over -- dezelfde 24 die op smalle schermen al gold.
	   --dg-blok-onder en niet de kale --dg-space-5: dit IS het
	   "kop- of meldingsblok" waar dat token voor bedoeld is (sectie 1),
	   en tot deze regel stond het token nergens bekabeld. Zonder deze
	   verwijzing zou taak 13 zijn verlaging van --dg-blok-onder (24→16)
	   hier niet laten landen. */
	margin-block-end: var(--dg-blok-onder);
}

.home-section__title {
	margin: 0; /* Grootte en font komen uit de theme-typografie. */
}

.home-kicker {
	margin: 0 0 var(--dg-space-2);
	font-size: var(--home-kicker-size);
	font-weight: 600;
	letter-spacing: var(--home-kicker-tracking);
	text-transform: uppercase;
	color: var(--home-color-text-soft);
}

.home-button {
	/* Volgt de knopconventie van het thema: --dg-knop-y als padding en
	   het 44px-raakvlak dat elke andere knop op de site al heeft. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--dg-raakvlak);
	padding: var(--dg-knop-y) var(--dg-space-5);
	border: 1px solid var(--home-color-accent);
	border-radius: var(--home-radius-small);
	background: var(--home-color-accent);
	color: var(--home-color-on-accent);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--home-transition),
		border-color var(--home-transition),
		color var(--home-transition),
		transform var(--home-transition);
}

.home-button:hover {
	background: var(--home-color-accent-hover);
	border-color: var(--home-color-accent-hover);
	color: var(--home-color-on-accent);
	transform: translateY(-1px);
}

/* De witte knopvariant (--light) is vervallen: het brandsysteem §6 kent
   alleen accent- en randknoppen, dus ook de hero-CTA draagt het accent. */

/* Zichtbare, consistente focus voor alle interactieve elementen. */
.home-front-page :is(a, button):focus-visible {
	outline: var(--dg-focus-ring, 2px solid var(--home-color-focus));
	outline-offset: 3px;
}

/* Alleen in de hero: daar ligt de ring op de foto en is wit het
   zichtbaarst. De tegelring valt door de offset op de witte pagina
   en volgt dus gewoon de accentkleur van de focusregel hierboven. */
.home-hero :is(a, button):focus-visible {
	outline-color: var(--home-color-on-accent);
}

/* ==========================================================================
   3. Hero
   ========================================================================== */

.home-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: var(--dg-hero-min);
	overflow: hidden;
	background: var(--home-color-surface-deep); /* Neutrale placeholder zonder afbeelding. */
	color: var(--home-color-on-accent);
}

.home-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Twee lagen: een leesband links, en daaronder de sfeerlaag.
 *
 * De 20deg-laag alleen is te licht waar de tekst staat. Gemeten met de
 * tekst op transparant en de ondergrond uit een screenshot: de kicker
 * haalde 2,51:1 en de kop 2,88:1 — de kicker is 12px en heeft 4,5:1
 * nodig, de kop is 57,6px en valt onder "grote tekst", maar zelfs die
 * 3:1 werd niet gehaald.
 *
 * De eerste laag donkert alleen de linkerkolom waar de tekst staat en is
 * op 70% van de breedte volledig weg, zodat de foto rechts open blijft.
 * De sfeerlaag eronder is ongewijzigd; het beeld verliest dus niets van
 * zijn opzet, alleen de leeskant wordt zwaarder.
 */
.home-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			to right,
			rgba(var(--home-color-scrim), 0.78) 0%,
			rgba(var(--home-color-scrim), 0.58) 40%,
			rgba(var(--home-color-scrim), 0) 70%
		),
		linear-gradient(
			20deg,
			rgba(var(--home-color-scrim), 0.65) 0%,
			rgba(var(--home-color-scrim), 0.28) 55%,
			rgba(var(--home-color-scrim), 0.05) 100%
		);
}

.home-hero--placeholder .home-hero__scrim {
	background: radial-gradient(120% 120% at 85% 0%, rgba(255, 255, 255, 0.08), transparent 60%);
}

.home-hero__inner {
	position: relative;
	width: 100%;
	max-width: var(--home-max-width);
	margin-inline: auto;
	padding-inline: var(--home-gutter);
	/* Was clamp(5rem, 14vh, 8rem) / clamp(2.75rem, 8vh, 4.5rem) -- twee
	   losse curves die nergens op de schaal landden. De ondermarge is nu
	   vast op --dg-space-7; de bovenmarge blijft bewust met de
	   vensterhoogte meebewegen, net als --dg-hero-min hierboven, maar
	   dan tussen twee schaalstappen in plaats van twee kale rem-waarden. */
	padding-block: clamp(var(--dg-space-7), 10vh, var(--dg-space-8)) var(--dg-space-7); /* geen-schaal: bovenmarge volgt de vensterhoogte, zoals --dg-hero-min */
}

/* Vol wit, niet 85%: op 12px is elke procent doorzichtigheid contrast
   die je weggeeft, en de rust die de 85% moest brengen zit al in de
   letterafstand en het gewicht. */
.home-hero__kicker {
	color: #fff;
}

.home-hero__title {
	margin: 0 0 var(--dg-space-5);
	max-width: 16ch;
	font-size: clamp(2.1rem, 5vw, 3.6rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
}

/* ==========================================================================
   4. Productcarrousel + productkaart
   ========================================================================== */

.home-carousel__nav {
	display: flex;
	gap: var(--dg-space-2);
}

.home-carousel__nav[hidden] {
	display: none;
}

.home-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--home-color-border);
	border-radius: 999px;
	background: var(--home-color-bg);
	color: var(--home-color-text);
	cursor: pointer;
	transition:
		background-color var(--home-transition),
		border-color var(--home-transition),
		opacity var(--home-transition);
}

.home-carousel__btn:hover:not(:disabled) {
	background: var(--home-color-surface);
	border-color: var(--home-color-text-soft);
}

.home-carousel__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.home-carousel__track {
	display: flex;
	gap: var(--home-gap);
	margin: 0;
	padding: 0 0 var(--dg-space-2);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Pijlknoppen + swipe vervangen de scrollbar. */
}

.home-carousel__track::-webkit-scrollbar {
	display: none;
}

.home-carousel__track:focus-visible {
	outline: var(--dg-focus-ring, 2px solid var(--home-color-focus));
	outline-offset: 4px;
}

.home-carousel__item {
	flex: 0 0 calc((100% - (var(--home-carousel-per-view) - 1) * var(--home-gap)) / var(--home-carousel-per-view));
	scroll-snap-align: start;
}

.home-product-card {
	display: flex;
	flex-direction: column;
	gap: var(--dg-space-4);
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.home-product-card__media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--home-radius);
	background: var(--home-color-surface);
}

.home-product-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.home-product-card:hover .home-product-card__image,
.home-product-card:focus-visible .home-product-card__image {
	transform: scale(1.04);
}

.home-product-card__category {
	display: block;
	margin-block-end: var(--dg-space-1);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--home-color-text-soft);
}

.home-product-card__title {
	margin: 0 0 var(--dg-space-1);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

.home-product-card:hover .home-product-card__title {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.home-product-card__price {
	display: block;
	font-size: 0.95rem;
}

.home-product-card__price del {
	margin-inline-end: 0.4em; /* geen-schaal: spatie tussen doorgestreepte en huidige prijs, schaalt met de letter */
	color: var(--home-color-text-soft);
}

.home-product-card__price ins {
	font-weight: 600;
	text-decoration: none;
}

/* ==========================================================================
   5. Categorie-grid (vierkante tegels)
   ========================================================================== */

.home-category-grid__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--home-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-category-tile {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--home-radius);
	background: var(--home-color-surface);
	color: var(--home-color-on-accent);
	text-decoration: none;
}

.home-category-tile__media {
	position: absolute;
	inset: 0;
	display: block;
}

/* --- De tegel zonder foto draagt het merk zelf --------------------

   Geen enkele categorie heeft een beeld, en acht tegels toonden
   hetzelfde lege taupe verloop met een zware zwarte leesband. In
   plaats van op fotografie te wachten tekent de tegel het merk: het
   pennenveld van een borstelkop als stippenraster, op kleuren die de
   productillustraties al dragen. Vier varianten op rij, zodat het
   grid ademt zoals het schap zelf.

   De stipmaat (22px-raster, stip van 1.5px) is beeldopbouw, geen
   spatiëring — hij staat bewust buiten de schaal, zoals een
   iconenmaat. */

.home-category-tile__media--placeholder {
	background-color: var(--knop);
	background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 1.6px);
	background-size: 22px 22px;
	background-position: 50% 50%;
	transition: background-position 400ms ease;
}

.home-category-grid__item:nth-child(4n + 2) .home-category-tile__media--placeholder {
	/* Het lichte zand van de fotografie-achtergronden. */
	background-color: var(--jade);
	background-image: radial-gradient(rgba(30, 28, 26, 0.15) 1.5px, transparent 1.6px);
}

.home-category-grid__item:nth-child(4n + 3) .home-category-tile__media--placeholder {
	background-color: var(--surface);
	background-image: radial-gradient(rgba(30, 28, 26, 0.14) 1.5px, transparent 1.6px);
}

.home-category-grid__item:nth-child(4n) .home-category-tile__media--placeholder {
	background-color: var(--grain);
	background-image: radial-gradient(rgba(30, 28, 26, 0.15) 1.5px, transparent 1.6px);
}

/* De stippen schuiven een borstelstreek mee onder de cursor. */
.home-category-tile:hover .home-category-tile__media--placeholder,
.home-category-tile:focus-visible .home-category-tile__media--placeholder {
	background-position: 50% calc(50% + 11px);
}

/* Op een egaal merkvlak is de zwarte leesband overbodig, en op de twee
   lichte varianten hoort de tekst in inkt. Beide alleen waar :has()
   bestaat: in oudere browsers blijft de band staan en blijft witte
   tekst daardoor overal leesbaar. */
@supports selector(:has(*)) {
	.home-category-tile:has(.home-category-tile__media--placeholder) .home-category-tile__content {
		background: none;
	}

	.home-category-grid__item:nth-child(4n + 2) .home-category-tile:has(.home-category-tile__media--placeholder),
	.home-category-grid__item:nth-child(4n + 3) .home-category-tile:has(.home-category-tile__media--placeholder),
	.home-category-grid__item:nth-child(4n) .home-category-tile:has(.home-category-tile__media--placeholder) {
		color: var(--home-color-text);
	}
}


.home-category-tile__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.home-category-tile:hover .home-category-tile__image,
.home-category-tile:focus-visible .home-category-tile__image {
	transform: scale(1.05);
}

.home-category-tile__content {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--dg-space-1);
	/* Was clamp(1rem, 3vw, 1.5rem): de ondergrens (16) staat al exact
	   op de schaal; de bovengrens (24) verviel bij het aansluiten. */
	padding: var(--dg-space-4);
	/*
	 * De leesband dekt nu ook echt waar de tekst staat.
	 *
	 * Hij liep van 0,72 onderaan naar volledig doorzichtig bovenaan het
	 * contentblok. Op de hoogte van de categorienaam was hij daarmee nog
	 * maar een fractie dekkend, en sinds de categorieën echte foto's
	 * hebben stond die witte naam op een lichte ondergrond: 2,2:1 gemeten,
	 * tegen een norm van 4,5.
	 *
	 * Nu blijft de band vol tot 62% van het blok — dus achter de hele
	 * tekst — en vervaagt hij alleen in de bovenmarge daarboven. Die
	 * bovenmarge is groter gemaakt zodat er ruimte is om te vervagen
	 * zonder dat je een harde rand ziet.
	 */
	padding-block-start: var(--dg-space-7);
	background: linear-gradient(
		to top,
		rgba(var(--home-color-scrim), 0.88) 0%,
		rgba(var(--home-color-scrim), 0.88) 62%,
		rgba(var(--home-color-scrim), 0) 100%
	);
}

.home-category-tile__name {
	font-size: 1.1rem;
	font-weight: 600;
}

.home-category-tile__cta {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--home-kicker-tracking);
	text-transform: uppercase;
	opacity: 0.92;
}

/* ==========================================================================
   6. Split-promo
   ========================================================================== */

.home-split__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* Was clamp(1.75rem, 5vw, 4rem): 28 (ondergrens) naar 24, gelijk-
	   ertussenin naar beneden; de bovengrens (64) verviel. */
	gap: var(--dg-space-5);
	align-items: center;
}

.home-split__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--home-radius);
	background: var(--home-color-surface);
}

.home-split__media--placeholder {
	/* De fotografie-achtergrondtokens zelf, geen kopie van hun waarden. */
	background: linear-gradient(150deg, var(--jade) 0%, #FBF4E9 60%, var(--warmgrijs) 100%);
}

.home-split__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-split__content {
	max-width: 34rem;
}

.home-split__title {
	margin-block-end: var(--dg-space-4);
}

.home-split__text {
	margin: 0 0 var(--dg-space-5);
	color: var(--home-color-text-soft);
	line-height: 1.7;
}

/* Gespiegelde variant: afbeelding rechts (alleen naast elkaar). */
@media (min-width: 768px) {
	.home-split--reverse .home-split__media {
		order: 2;
	}
}

/* ==========================================================================
   7. Verhaalkaarten
   ========================================================================== */

.home-story-cards__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* Was clamp(1.25rem, 3vw, 2rem): 20 (ondergrens) naar 16, gelijk-
	   ertussenin naar beneden (coin-flip); de bovengrens (32) verviel. */
	gap: var(--dg-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-story-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--dg-space-3);
	height: 100%;
}

.home-story-card__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--home-radius);
	background: var(--home-color-surface);
}

.home-story-card__media--placeholder {
	background: linear-gradient(150deg, #F3E9D8 0%, #FBF6EC 100%);
}

.home-story-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.home-story-card:hover .home-story-card__image {
	transform: scale(1.04);
}

.home-story-card__title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.35;
}

.home-story-card__link {
	color: inherit;
	text-decoration: none;
}

/* Stretched link: de hele kaart is klikbaar via de titel-link. */
.home-story-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--home-radius);
}

.home-story-card__link:hover,
.home-story-card__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.home-story-card__text {
	margin: 0;
	color: var(--home-color-text-soft);
	line-height: 1.65;
}

.home-story-card__more {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--home-kicker-tracking);
	text-transform: uppercase;
	color: var(--home-color-accent); /* tekstlinks in het accent (§6) */
}

/* ==========================================================================
   Responsive: grids 4 → 2 → 1, split gestapeld, verhalen 3 → 1
   ========================================================================== */

@media (max-width: 899.98px) {
	.home-category-grid__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.home-story-cards__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

	.home-split__content {
		max-width: none;
	}
}

@media (max-width: 519.98px) {
	.home-category-grid__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   8. Reduced motion
   ========================================================================== */

/* De universele regel in style.css sectie 2 dekt transities en
   animaties al; hier blijft alleen wat daar niet onder valt. */
@media (prefers-reduced-motion: reduce) {

	.home-carousel__track {
		scroll-behavior: auto;
	}

	.home-button:hover {
		transform: none;
	}

	.home-product-card:hover .home-product-card__image,
	.home-product-card:focus-visible .home-product-card__image,
	.home-category-tile:hover .home-category-tile__image,
	.home-category-tile:focus-visible .home-category-tile__image,
	.home-story-card:hover .home-story-card__image {
		transform: none;
	}

	.home-category-tile__media--placeholder {
		transition: none;
	}

	.home-category-tile:hover .home-category-tile__media--placeholder,
	.home-category-tile:focus-visible .home-category-tile__media--placeholder {
		background-position: 50% 50%;
	}
}