/* =============================================================================
   Blok: linkrij ("Bekijk ook").

   Ontwerp: kop + 2–3 kaarten van 426×142 met 22px ertussen, op x=299/747/1195.
   Elke kaart heeft een icoon en een label.

   Deze stijl stond eerder in assets/css/pages/page.css. Hij hoort hier omdat de
   blok-CSS-lader (hinke_enqueue_block_css) dit bestand alleen inlaadt op
   pagina's waar het blok daadwerkelijk staat.
   ========================================================================== */

/* De kop "Bekijk ook" is kleiner dan de gedeelde blokkop uit pages/page.css
   (40px/56 met 24px marge eronder). Het ontwerp zet hier DM Serif Display 30px
   met een regelvak van 41 en 17px tot de kaarten (nodes 2199:6580 op
   Betaalmogelijkheden en 2199:6861 op Ruilen & Retourneren). De kleur klopte al.
   Twee klassen (0,2,0) verslaan de (0,1,0) uit page.css, en dit bestand laadt
   later, dus de override pakt zonder !important. */
.hinke-block--linkrij .hinke-block__kop {
	margin: 0 0 17px;
	font-size: 30px;
	line-height: 41px;
}

/* Let op de rekensom: het ontwerp zet de kaartrij op x=299…1621 = 1322px breed
   (3 × 426 + 2 × 22), maar de container is 1320. Met een gap van 22 past de
   derde kaart dus net niet en klapte de rij naar 2+1 — ook op 1920. De
   kaartbreedte van 426 is visueel belangrijker dan de tussenruimte, dus de gap
   gaat naar 21: 3 × 426 + 2 × 21 = exact 1320. */
.hinke-linkrij {
	display: grid;
	grid-template-columns: repeat(auto-fit, 426px);
	gap: 21px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Icoon en label staan NAAST elkaar, niet onder elkaar. In het ontwerp
   (Bezorgen & Afhalen, node 2199:6566) is er per kaart evenveel lucht links als
   rechts van het icoon+label-blok — 53px bij kaart 1 en 3, 47px bij kaart 2 —
   dus het blok is gecentreerd en niet op een vaste x geplaatst. De tussenruimte
   icoon↔label is 22px (433 − 411) resp. 23px (878 − 855); 22 is de maat.
   Verticaal vallen icoon (y=816..875) en label (y=833..858) precies om het
   kaartmidden (845) heen. */
.hinke-linkrij__card {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 22px;
	height: 142px;
	padding: 0 20px;
	background: var(--hinke-band);
	color: var(--hinke-body);
	text-align: center;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

/* Hover volgt de roze kaart uit het ontwerp: vlak #efc2bd met icoon én label in
   #d2544f (nodes 2199:6569 en 2199:6581) — dus NIET wit. #d2544f is dezelfde
   kleur als --hinke-sale/--hinke-heart in main.css, maar staat hier letterlijk
   omdat het hier geen sale- of verlanglijst-betekenis heeft.

   Alleen achter `(hover: hover)`. Op een telefoon (gemeten: matchMedia
   '(hover: hover)' = false, '(pointer: coarse)' = true) blijft :hover na een tap
   namelijk plakken: je komt terug van de doelpagina en dan staat er één roze
   kaart tussen twee grijze. :focus-visible staat er los van, want dat is de
   toetsenbordstaat en die moet op elk apparaat blijven werken. */
@media (hover: hover) {
	.hinke-linkrij__card:hover {
		background: var(--hinke-pink);
		color: #d2544f;
	}
}

.hinke-linkrij__card:focus-visible {
	background: var(--hinke-pink);
	color: #d2544f;
}

/* Indrukken: dezelfde roze staat, maar nu als directe reactie op de tap. Op touch
   is dit de enige bevestiging dat de kaart een link is die je net hebt geraakt —
   hover bestaat daar niet. Geldt ook met de muis, waar het als "klik" leest. */
.hinke-linkrij__card:active {
	background: var(--hinke-pink);
	color: #d2544f;
}

/* Zonder hover mist de kaart de enige aanwijzing dat er iets aanklikbaar is: in
   rust is het een vlak grijs blok (#f5f5f5) met een grijs label, zonder rand,
   zonder onderstreping. Op touch krijgt hij daarom een dunne roze rand — dezelfde
   roze als de hover-staat en de titelbalk, dus geen nieuwe kleur in het ontwerp —
   die het blok als tegel/knop laat lezen. Met een inset box-shadow in plaats van
   `border`, want de kaarthoogte van 142px uit het ontwerp mag niet verschuiven en
   `outline` is voor de focusring. */
@media (hover: none) {
	.hinke-linkrij__card {
		box-shadow: inset 0 0 0 1px var(--hinke-pink);
	}
}

/* Het icoon is een gemaskeerd vlak in de tekstkleur van de kaart, zodat het in
   rust #4e4e4e is (node 2199:6582) en op hover mee naar #d2544f gaat. Dezelfde
   truc als de FAQ-chevron (blocks/faq.css). De icoon-URL komt per kaart uit ACF
   en staat daarom als --hinke-linkrij-icon in het style-attribuut.
   In het ontwerp varieert de icoonmaat per icoon (help 59, insurance 61,
   package-box 67); we houden één maat van 59 aan zodat de drie kaarten dezelfde
   optische opbouw krijgen. */
.hinke-linkrij__icon {
	flex: 0 0 auto;
	width: 59px;
	height: 59px;
	background: currentColor;
	transition: background-color .2s ease;
	-webkit-mask: var(--hinke-linkrij-icon) no-repeat center / contain;
	mask: var(--hinke-linkrij-icon) no-repeat center / contain;
}

/* Bitmap-fallback: geen mask, dus ook geen kleurwissel. */
.hinke-linkrij__icon--bitmap {
	background: none;
	object-fit: contain;
	-webkit-mask: none;
	mask: none;
}

.hinke-linkrij__label {
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 20px;
	line-height: 25px;
	text-transform: uppercase;
	/* Zonder min-width mag een flex-item niet onder zijn langste woord krimpen;
	   op smallere kaarten zou het label dan buiten de kaart lopen. */
	min-width: 0;
	/* En als één woord alsnog breder is dan de kaart (op 360px is er na icoon,
	   gaten en zijruimte 208px over voor het label), breekt het binnen de kaart
	   af in plaats van eruit te lopen. */
	overflow-wrap: anywhere;
}

/* Zelfde afspraak als bij de FAQ (blocks/faq.css): wie minder beweging wil,
   krijgt de kleurwissel zonder overgang. */
@media (prefers-reduced-motion: reduce) {
	.hinke-linkrij__card,
	.hinke-linkrij__icon {
		transition: none;
	}
}

/* =============================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1400px) {
	.hinke-linkrij {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}

	/* Kaarten smaller dan 426: het icoon+label-blok van 320px past niet meer op
	   één regel, dus mag het label afbreken en krimpt het icoon mee. */
	.hinke-linkrij__card {
		gap: 16px;
	}

	.hinke-linkrij__icon {
		width: 48px;
		height: 48px;
	}

	.hinke-linkrij__label {
		font-size: 18px;
	}
}

/* Eén kolom pas onder 700px, niet al onder 900. Op 768px gaf de oude 900-grens
   kaarten van 720×142 met een label van 215px in het midden: ruim 250px leeg grijs
   aan beide kanten. Twee kolommen leveren daar 349,5px op — dicht bij de 426 uit
   het ontwerp — en icoon + label (48 + 16 + 215 = 279 plus 40 zijruimte) passen
   nog steeds op één regel. Onder de 700px is voor twee kolommen geen ruimte meer:
   dan is het één kolom van 312px op een 360-scherm, met een tweeregelig label.
   De auto-fit hierboven zou vanaf 541px al twee kolommen willen maken; deze regel
   houdt dat tegen, want kaarten van 260px worden voor icoon + label te krap. */
@media (max-width: 700px) {
	.hinke-linkrij {
		grid-template-columns: minmax(0, 1fr);
	}
}