/* =============================================================================
   Hinke. Trendstore - homepage.

   1:1 met het Figma-frame "Home" (node 1:2, canvas 1920x5602). Elke desktopwaarde
   komt uit get_metadata/get_design_context, niet uit een screenshot. De
   y-coordinaten in commentaar zijn absoluut op het ontwerpcanvas.

   Containerbreedtes in dit ontwerp (let op: drie verschillende):
     1320px  standaard secties (x=299...1621)
     1710px  lookbook-rij      (x=105...1815)
     1098px  nieuwsbrief-band  (x=411...1509)

   WAT HIER NIET STAAT
   De categorietegels, de productkaart, de lookbook-rij en de nieuwsbrief-band
   staan in assets/css/layout.css, omdat ze ook buiten de voorpagina worden
   gebruikt (404, productpagina, winkelwagen, info-pagina's) waar dit bestand niet
   laadt. Dit bestand laadt NA layout.css, dus een kopie hier zou die gedeelde
   opmaak stil overschrijven - vandaar dat alleen de paginaspecifieke verticale
   ritmiek van die blokken hier blijft.

   ER IS GEEN MOBIEL ONTWERP
   De Figma-file heeft een enkele pagina ("V1") met een enkel frame van 1920 breed.
   Alles onder de mediaqueries hieronder is dus een vertaling, geen ontwerpwaarde;
   bij elke stap staat waarom die keuze is gemaakt.
   ========================================================================== */

/* =============================================================================
   1. HERO - y 136...904, full-bleed. Zichtbaar onder de header: 754px.
   ========================================================================== */

.hinke-hero {
	position: relative;
	height: 754px;
	overflow: hidden;
	background: var(--hinke-pink);
}

.hinke-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* CTA 202x44, #d3bb6c, vierkant. y=498 -> 348px onder de hero-top. */
.hinke-hero__cta {
	position: absolute;
	top: 348px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 202px;
	height: 44px;
	background: var(--hinke-gold);
	color: var(--hinke-white);
	font-family: var(--hinke-font-body);
	font-weight: 800; /* Outfit ExtraBold */
	font-size: 14px;
	line-height: normal;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
}

/* =============================================================================
   2. CATEGORIEKAARTEN - y 976...1500

   Alleen de ruimte erboven; de tegels zelf staan in layout.css omdat de
   404-pagina ze ook gebruikt.
   ========================================================================== */

.hinke-cats {
	padding: 72px 0 0; /* 976 - 904 */
}

/* =============================================================================
   3. PRODUCTCARROUSELS - "Our favs" y 1557...2256 - "Style it up" y 3019...3718

   De kaart zelf (.hinke-card*) staat in layout.css; hier alleen de rij eromheen.
   ========================================================================== */

.hinke-carousel {
	padding-top: 57px; /* "Our favs": 1557 - 1500 */
}

/* "Style it up" volgt op de over-ons band (eindigt 2957) en start op 3019. */
.hinke-carousel--style {
	padding-top: 62px;
}

.hinke-carousel__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}

.hinke-carousel__title {
	margin: 0;
	font-family: var(--hinke-font-heading);
	font-weight: 400;
	font-size: 40px;
	line-height: normal;
	color: var(--hinke-pink);
}

/* Pijlen 44x44 op y=1563 -> 6px onder de koptop; 9px ertussen (1524->1577). */
.hinke-carousel__nav {
	display: flex;
	gap: 9px;
	margin-top: 6px;
	flex: 0 0 auto;
}

.hinke-carousel__arrow {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: var(--hinke-pink);
	cursor: pointer;
	position: relative;
}

.hinke-carousel__arrow[disabled] {
	opacity: .35;
	cursor: default;
}

/* Chevron gecentreerd in de knop. Het export is een NEERWAARTSE chevron van
   19 x 10,83; geroteerd wordt dat 10,83 x 19 - de 11x19 uit het ontwerp.
   -90 graden wijst naar rechts (next), +90 naar links (prev). */
.hinke-carousel__arrow::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 19px;
	height: 10.83px;
	background: var(--hinke-white);
	-webkit-mask: url('../../img/icons/chevron.svg') no-repeat center / contain;
	mask: url('../../img/icons/chevron.svg') no-repeat center / contain;
}

.hinke-carousel__arrow--next::before {
	transform: translate(-50%, -50%) rotate(-90deg);
}

.hinke-carousel__arrow--prev::before {
	transform: translate(-50%, -50%) rotate(90deg);
}

/*
 * Spoor: 4 kaarten met 22px ertussen. Het ontwerp geeft 314px per kaart, maar
 * 4x314 + 3x22 = 1322 in een container van 1320 — twee pixels te veel, waardoor de
 * vierde kaart er net buiten viel en het spoor niet op een kaartgrens eindigde
 * (gemeten: max scrollLeft 1682 i.p.v. 1680). Met de breedte uitgerekend uit de
 * container komt dat op 313,5px en past het exact. Een halve pixel verschil met
 * Figma, in ruil voor precies vier hele kaarten in beeld.
 *
 * DE REGEL VOOR ELKE BREEDTE: er staat een heel aantal kaarten in beeld, nooit een
 * kaart en een stukje. Het aantal volgt de trap van het winkelraster (shop.css):
 * 4 kolommen, onder 1200px drie, onder 620px twee.
 */
.hinke-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (3 * 22px)) / 4);
	gap: 22px;
	margin: 30px 0 0; /* 1642 - 1612 */
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

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

.hinke-card {
	scroll-snap-align: start;
}

/* =============================================================================
   4. OVER-ONS BAND - y 2318...2957, full-bleed 1920x639, #efc2bd
   ========================================================================== */

.hinke-about {
	display: grid;
	/* 973 / 947 van 1920 */
	grid-template-columns: 50.677% 49.323%;
	background: var(--hinke-pink);
	margin-top: 62px; /* 2318 - 2256 */
	min-height: 639px;
}

.hinke-about__text {
	/* kop op y=2422 -> 104px; tekstkolom begint op x=234 */
	padding: 104px 60px 0 234px;
}

.hinke-about__heading {
	margin: 0;
	max-width: 422px;
	font-family: var(--hinke-font-heading);
	font-weight: 400;
	font-size: 50px;
	line-height: 56px;
	color: var(--hinke-white);
}

/* Tekst op y=2561 -> 139px onder de koptop; kop is 2 regels x 56 = 112. */
.hinke-about__body {
	margin-top: 27px;
	max-width: 658px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: var(--hinke-white);
}

.hinke-about__body p {
	margin: 0 0 24px;
}

.hinke-about__body p:last-child {
	margin-bottom: 0;
}

/* Knoppen op y=2810 -> 34px onder de tekst (die eindigt op 2776). 13px ertussen. */
.hinke-about__actions {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-top: 34px;
}

.hinke-about__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 24px;
	font-family: var(--hinke-font-body);
	font-weight: 800;
	font-size: 14px;
	line-height: normal;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: var(--hinke-white);
}

/* Knop 1: gevuld #d3bb6c (211x44). */
.hinke-about__btn--primary {
	min-width: 211px;
	background: var(--hinke-gold);
	border: 0;
}

/* Knop 2: transparant met 2px witte rand (266x44). */
.hinke-about__btn--secondary {
	min-width: 266px;
	background: transparent;
	border: 2px solid var(--hinke-white);
}

.hinke-about__media {
	position: relative;
	overflow: hidden;
	min-height: 639px;
}

/*
 * Staande foto in een liggend kader (947×639 in het ontwerp) — dus `cover`, en er
 * valt altijd iets weg. De vraag is alleen: wát.
 *
 * HIER STOND `center 40%`, EN DAT SNEED HET HOOFD AF. Een percentage rekent niet
 * over de foto maar over de OVERLOOP, en die groeit met de schermbreedte: het kader
 * blijft 639 hoog terwijl het breder wordt, dus schaalt de foto verder op en valt er
 * bovenaan steeds meer weg. Gemeten met het hoofd op y=346 van 1278:
 *
 *     viewport 1440 → kader 703×639 → 250px bron weg → 94px boven het hoofd
 *     viewport 1920 → kader 940×639 → 316px bron weg → 40px boven het hoofd
 *     viewport 2560 → kader 1255×639 → 365px bron weg → hoofd 19px AFGESNEDEN
 *
 * Boven ±2270px viewport ging het hoofd er dus af. Niet zichtbaar op de machine
 * waarop het ontwerp is nagebouwd, wel op een groter scherm.
 *
 * NU `top`, en de overtollige muur is uit het BESTAND gehaald. about.jpg is
 * voorgesneden tot 719×967 met precies 35px boven het hoofd (de marge die het
 * ontwerp ook heeft); het ongesneden origineel staat ernaast als about-origineel.jpg
 * als er ooit anders gesneden moet worden. Met `top` schaalt die 35px netjes mee —
 * 34px op 1440, 46px op 1920, 61px op 2560 — en kan er per definitie niets van het
 * hoofd af, hoe breed het scherm ook wordt.
 *
 * WAAROM GEEN NIEUW PERCENTAGE: deze foto is via Site-instellingen te vervangen
 * (`home_about_image`, zie functions.php) en wordt óók op de bedanktpagina gebruikt
 * (thankyou.php). Een waarde die op één foto is afgestemd sneuvelt zodra de klant een
 * andere foto plaatst; `top` doet bij elke staande portretfoto het juiste.
 */
.hinke-about__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* De lookbook-rij en de nieuwsbrief-banner staan in assets/css/layout.css:
   page.php zet ze onder elke info-/contentpagina en de product- en bedanktpagina
   gebruiken ze ook, waar home.css niet laadt. */

/* =============================================================================
   5. SEO-TEKSTBLOK - y 4912...5171, container 1320px
   ========================================================================== */

.hinke-seo {
	padding: 64px 0 46px; /* 4912 - 4848 ; 5217 - 5171 */
}

.hinke-seo__heading {
	margin: 0;
	max-width: 853px;
	font-family: var(--hinke-font-heading);
	font-weight: 400;
	font-size: 40px;
	line-height: 56px;
	color: var(--hinke-pink);
}

/* Tekst op y=4979 -> 11px onder de kop. */
.hinke-seo__body {
	margin-top: 11px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
	color: var(--hinke-body);
}

.hinke-seo__body p {
	margin: 0 0 24px;
}

.hinke-seo__body p:last-child {
	margin-bottom: 0;
}

/* --- Ingeklapt ---------------------------------------------------------------
   Dit is het SEO-tekstblok: het mag lang zijn, dat is het punt. Maar een lap
   tekst duwt de footer ver naar onder, en op een telefoon is het het eerste wat
   tussen de collectie en de rest van de pagina staat. Ingeklapt staan er vier
   regels; de rest komt met "Lees meer" tevoorschijn.

   WAAROM max-height en niet -webkit-line-clamp: line-clamp is niet te animeren
   en telt bij meerdere alinea's per alinea, niet over het blok heen. Met
   max-height in hele regelhoogtes eindigt de afkapping altijd tussen twee
   regels in, en JS hoeft geen enkel getal te kennen: het pint bij openen de
   gemeten hoogte en laat bij sluiten deze regel het weer overnemen.

   `is-clamped` zet JS erop zodra het weet dat er iets te verbergen valt, en het
   blijft daarna staan; `is-open` is de stand. Zie assets/js/hinke.js §10. */
.hinke-seo__body.is-clamped {
	position: relative; /* voor de uitloop hieronder */
	max-height: calc(var(--hinke-seo-regels, 4) * 24px);
	overflow: hidden;
}

.hinke-seo__body.is-clamped.is-open {
	max-height: none;
}

/* De onderste regel loopt uit in de achtergrond (dezelfde witte pagina-achtergrond
   als in main.css). Dat is het teken dat er meer staat - zonder zo'n verloop lijkt
   een afgekapte regel gewoon het einde van de tekst. */
.hinke-seo__body.is-clamped::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	/* 32px = iets meer dan één regel. Op 48px liep het verloop tot halverwege de
	   derde regel en werd die ook al grijzig; nu blijft alles boven de laatste
	   regel gewoon leesbaar. */
	height: 32px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--hinke-white, #fff));
	pointer-events: none; /* tekst eronder blijft selecteerbaar */
}

.hinke-seo__body.is-clamped.is-open::after {
	opacity: 0;
}

/* Afsluitende "Lees meer" - in het ontwerp een gouden link, een regelhoogte
   onder de tekst (net als de lege regel in het Figma-tekstvak). Het is hier een
   <button>: hij klapt tekst op dezelfde pagina open en gaat niet ergens naartoe.
   Vandaar de reset van de knop-standaardstijl.

   Het aanraakdoel: het label is maar 64x24 groot en staat als losse regel onder
   de tekst, dus de uitzondering die WCAG 2.5.8 voor links binnen een lopende zin
   maakt geldt hier NIET. Met 10px lucht boven en onder komt het vlak op 44px
   hoog. De marge erboven gaat met dezelfde 10px omlaag, zodat de optische
   afstand tot de tekst gelijk blijft aan het ontwerp (24px). */
.hinke-seo__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 14px;
	padding: 10px 0;
	border: 0;
	background: none;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
	color: var(--hinke-gold);
	text-align: left;
	text-decoration: underline;
	cursor: pointer;
}

/* =============================================================================
   6. HOVER - alleen waar een echte aanwijzer is

   WAAROM: op een touchscreen bestaat hover niet, maar mobiele browsers laten
   `:hover` na een tap wel staan tot je iets anders aanraakt. Zonder dit hek bleef
   een aangetikte carrouselpijl goud staan (gemeten op 768px: achtergrond bleef
   #d3bb6c na een tap) en dat leest als een vastgelopen knop. De hover-effecten in
   motion.css hangen om dezelfde reden achter hetzelfde hek.
   ========================================================================== */

@media (hover: hover) {
	.hinke-hero__cta:hover {
		filter: brightness(.95);
	}
	.hinke-carousel__arrow:hover {
		background: var(--hinke-gold);
	}
	.hinke-about__btn--primary:hover {
		filter: brightness(.95);
	}
	.hinke-about__btn--secondary:hover {
		background: var(--hinke-white);
		color: var(--hinke-pink);
	}
}

/* =============================================================================
   7. BEWEGING BEPERKT - de hero-video mag niet spelen

   Staat er een video in de hero, dan speelt die autoplay+loop. Voor wie "beweging
   beperken" aan heeft staan is dat precies wat niet moet. CSS kan een video niet
   pauzeren, dus halen we hem uit de renderboom en zetten we hetzelfde beeld dat
   als poster dient stil op de sectie. hero.php geeft dat beeld mee als
   --hinke-hero-still; de achtergrondafbeelding wordt alleen opgehaald wanneer
   deze query geldt, dus het kost niemand anders iets.

   Volledig stoppen (video.pause()) vraagt een regel JS in hinke.js - gemeld.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.hinke-hero {
		background-image: var(--hinke-hero-still, none);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	video.hinke-hero__media {
		display: none;
	}
}

/* =============================================================================
   8. RESPONSIVE - het ontwerp is alleen op 1920 geleverd

   Alle waarden hieronder zijn vertalingen van de desktopregels, geen
   ontwerpmaten. Gemeten op 360, 390, 414, 768 en 1024px: geen horizontale
   overloop, CTA boven de vouw, alle aanraakdoelen 44x44 of groter.
   ========================================================================== */

@media (max-width: 1740px) {
	.hinke-about__text {
		padding-left: clamp(24px, 12vw, 234px);
	}
}

@media (max-width: 1360px) {
	/* De hero is in het ontwerp 754 hoog bij 1920 breed (verhouding 2,55:1). Die
	   verhouding aanhouden zou op een telefoon een strookje van ~150px opleveren,
	   dus schaalt de hoogte mee met de breedte en stopt hij bij 420px. Gemeten:
	   op 1024 wordt dat 471px, op 390 en smaller de bodem van 420px - dan blijft
	   er onder de header (128px) nog ~90px van de volgende sectie zichtbaar, dus
	   is het zichtbaar dat de pagina doorloopt. */
	.hinke-hero {
		height: clamp(420px, 46vw, 754px);
	}
	/* Met een lagere hero klopt de absolute 348px niet meer; 12% vanaf de onderkant
	   houdt de CTA op elke hoogte op dezelfde optische plek. */
	.hinke-hero__cta {
		top: auto;
		bottom: 12%;
	}
	.hinke-about {
		grid-template-columns: minmax(0, 1fr);
	}
	.hinke-about__text {
		padding: 56px clamp(24px, 6vw, 60px);
	}
	/* Beeld boven de tekst: in het ontwerp staat het rechts van de tekst, en
	   rechts wordt onder. Zo opent de band met beeld in plaats van met een lap
	   tekst, net als op desktop waar het beeld direct opvalt. */
	.hinke-about__media {
		min-height: 420px;
		order: -1;
	}
	.hinke-about__heading {
		font-size: clamp(30px, 3.4vw, 50px);
		line-height: 1.15;
	}
	.hinke-seo__heading,
	.hinke-carousel__title {
		font-size: clamp(26px, 3vw, 40px);
		line-height: 1.25;
	}
}

/* Drie hele kaarten, net als de drie kolommen van het winkelraster hier. */
@media (max-width: 1200px) {
	.hinke-carousel__track {
		grid-auto-columns: calc((100% - (2 * 22px)) / 3);
	}
}

@media (max-width: 720px) {
	/* Boven de eerste kaart stond de 72px uit het ontwerp. Op een telefoon staan
	   de kaarten onder elkaar met 16px ertussen (layout.css), en dan leest die
	   72px als een gat in de pagina in plaats van als ruimte tussen twee secties.
	   Gelijk aan de tussenruimte houdt de rij als één blok bij elkaar. */
	.hinke-cats {
		padding-top: 16px;
	}

	/* De pijlen stonden hier eerder uit ("veeg werkt toch"), maar ze horen bij de
	   kop van de sectie en zonder pijl is niet te zien dat er meer producten staan
	   dan wat er in beeld staat. Ze blijven 44x44 voor het aanraakdoel; de
	   tussenruimte gaat van 9 naar 8px en de kop mag wikkelen, zodat kop + twee
	   pijlen (96px) op 360px breed samen passen. */
	.hinke-carousel__nav {
		gap: 8px;
	}

	.hinke-carousel__title {
		/* Zonder dit duwt de kop op één regel de pijlen van het scherm af. */
		min-width: 0;
	}
	/* Twee knoppen van 211 en 266 breed passen niet naast elkaar op 360; onder
	   elkaar en over de volle breedte houdt het aanraakdoel ruim boven 44px. */
	.hinke-about__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.hinke-about__btn {
		min-width: 0;
	}
}

/*
 * Twee hele kaarten op een telefoon — dezelfde grens en hetzelfde aantal als het
 * winkelraster (shop.css: onder 620px twee kolommen), dus een kaart is hier even
 * breed als daar: 163px op een scherm van 390. Eerder stond hier 70vw, en dat gaf
 * één kaart plus een streepje van de volgende; met de pijlen erbij is dat stukje
 * als hint niet meer nodig, en een kaart en een kwart leest als een fout.
 *
 * De tussenruimte gaat van 22 naar 16px, want met 22px blijft er van een kaart van
 * 160px te weinig over.
 */
@media (max-width: 620px) {
	.hinke-carousel__track {
		grid-auto-columns: calc((100% - 16px) / 2);
		gap: 16px;
	}
	.hinke-seo {
		padding: 40px 0;
	}
	/* De 14px uit het ontwerp is voor een telefoon aan de kleine kant voor een
	   blok van deze lengte. 15px/25px leest rustiger en houdt de regellengte
	   ruim binnen het leesbare bereik (gemeten ~45 tekens per regel op 360px).
	   Dit is dus een mobiele leeskeuze, geen ontwerpwaarde - boven 720px blijft
	   het de 14px van het ontwerp. */
	.hinke-seo__body {
		font-size: 15px;
		line-height: 25px;
	}
}

/*
 * Onder 355px: één hele kaart in beeld.
 *
 * Twee kaarten betekent hier een halve container per kaart, en dat wordt op de
 * kleinste telefoons te smal: op 355px breed is dat 145px voor een kaart met een
 * beeld, een titel in kapitalen, een prijs én maatblokjes. Eén kaart over de volle
 * container (307px op 355) laat het product weer zien waar het om gaat. De pijlen
 * en het snappen doen ongewijzigd hun werk — het aantal blijft een heel getal.
 */
@media (max-width: 355px) {
	.hinke-carousel__track {
		grid-auto-columns: 100%;
	}
}