/* =============================================================================
   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;
}

.hinke-about__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	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;
}

/* Afsluitende "Lees meer" - in het ontwerp een gouden link, een regelhoogte
   onder de tekst (net als de lege regel in het Figma-tekstvak).

   Het aanraakdoel: de link 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;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
	color: var(--hinke-gold);
	text-decoration: underline;
}

/* =============================================================================
   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) {
	/* 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%;
	}
}