/* =============================================================================
   Blok: FAQ-accordeon.

   Ontwerp: frame "Veelgestelde vragen" (node 2197:5692).
   Opgemeten in Figma, niet geschat:

   - kolommen      : x=300 en x=972, elk 650 breed -> 22px ertussen
                     (650 + 22 + 650 = 1322 in een 1320-container, zie hieronder)
   - rij           : 650 x 46, GEVULD vlak #f5f5f5 (node 2197:5968), radius 0,
                     GEEN scheidingslijn — pitch 61 dus 15px lucht tussen de rijen
   - vraagtekst    : Outfit Regular 14px, #4e4e4e (node 2197:5990),
                     x=313 -> 13px links; icoon x=924..939 -> 11px rechts
   - icoon         : frame "Add" 15x15, gouden schijf #d3bb6c met uitgesneden
                     plus (node 2197:6009) — dus GEEN chevron
   - categoriekop  : Outfit BOLD 20px / regelhoogte 53, UPPERCASE, #4e4e4e
                     (node 2197:6097) — dus NIET het serif-font en NIET roze
   - kop -> 1e rij : kop y=335 h=53 eindigt op 388 = bovenkant eerste rij,
                     dus geen marge onder de kop
   - groep -> kop  : laatste rij kolom 1 eindigt op 678, volgende kop begint op
                     709 -> 31px (in kolom 2 tekende de ontwerper 38px; we volgen
                     de 31 uit kolom 1 als bedoelde waarde)

   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.
   ========================================================================== */

.hinke-faq {
	display: grid;
	/* Het ontwerp tekent 2 x 650 + 22 = 1322, 2px breder dan de 1320-container.
	   Met 1fr-kolommen wordt elke kolom 649 en klopt de 22px tussenruimte wel
	   exact; die 1px per kolom is ontwerp-afrondig, geen bedoelde maat. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 22px;
	/* 31px tussen de laatste rij van een groep en de volgende categoriekop. */
	row-gap: 31px;
	align-items: start;
}

/* Kop sluit in het ontwerp direct aan op de eerste rij: geen marge ertussen. */
.hinke-faq__kop {
	margin: 0;
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 20px;
	line-height: 53px;
	text-transform: uppercase;
	/* Node 2197:6097 zegt #4e4e4e — hetzelfde grijs als de bodytekst, niet roze. */
	color: var(--hinke-body);
}

/* Elke rij is een gevuld lichtgrijs vlak, geen lijntje. */
.hinke-faq__item {
	background: var(--hinke-band);
}

/* 15px lucht tussen de rijen (pitch 61 - rijhoogte 46). */
.hinke-faq__item + .hinke-faq__item {
	margin-top: 15px;
}

.hinke-faq__vraag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	/* Rijhoogte 46 bij één regel; met padding groeit de rij netjes mee als een
	   lange vraag toch afbreekt op een smal scherm. Deze 46 is tegelijk het
	   aanraakdoel van de hele rij (de summary vult het grijze vlak), en dus de
	   ondergrens van 44px uit WCAG 2.5.8 — niet verder verlagen. Gemeten @360:
	   rijen van 46px bij één regel en 64px bij twee. */
	min-height: 46px;
	padding: 12px 11px 12px 13px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: var(--hinke-body);
	cursor: pointer;
	list-style: none;
}

.hinke-faq__vraag::-webkit-details-marker {
	display: none;
}

/* Zelfde reden als bij de accordeon op de productpagina (pages/product.css): iOS legt
   bij een tik een grijs vlak over de rij. Hier valt dat minder op omdat de rij al grijs
   is, maar het is dezelfde tik op hetzelfde soort element. */
.hinke-faq__vraag {
	/* Zelfde paar als bij de swatches hierboven: geen dubbeltik-zoom op de rij, dan
	   opent één tik ook echt in één keer. */
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* De vraag is een flex-item en mag standaard niet krimpen onder de breedte van
   zijn langste woord. Op 360px liep een lange samenstelling daardoor het grijze
   vlak uit: de tekst eindigde op x=378,8 terwijl de rij op 366 stopt, en het
   plus-icoon werd naar x=394,8 buiten de rij geduwd — de hele pagina werd
   horizontaal versleepbaar (layout-venster 390 → 410). min-width:0 laat het
   flex-item wél krimpen en `anywhere` breekt zo'n woord af binnen de rij,
   waardoor het icoon op zijn plek blijft. */
.hinke-faq__tekst {
	min-width: 0;
	overflow-wrap: anywhere;
}

.hinke-faq__vraag:focus-visible {
	outline: 2px solid var(--hinke-focus);
	outline-offset: -2px;
}

/*
 * Gouden schijf met uitgesneden plus, die bij openen een MIN wordt.
 *
 * Het ontwerp toont alleen de dichte staat (het icoon "Add", node 2197:6009), geen
 * open variant. Eerder draaide deze schijf een achtste slag, waardoor de plus een
 * kruisje werd; dat las als "sluiten/annuleren" in plaats van "inklappen" en is er op
 * verzoek uit. Nu verdwijnt alleen de verticale balk: plus wordt min.
 *
 * Waarom twee lagen in plaats van één mask dat wisselt: `mask-image` is niet te
 * animeren, dus zou de plus hard omslaan. Daarom is dit vlak nu een leeg doosje van
 * 15×15 met twee schijven eroverheen — ::before de plus, ::after de min. De min ligt
 * bovenop en verschijnt met opacity, en omdat cirkel en horizontale balk in beide
 * bestanden op exact dezelfde coordinaten staan, is het enige dat je ziet gebeuren de
 * verticale balk die wegloopt. Geen dimmende cirkel, geen sprong.
 *
 * De laag eronder blijft altijd volledig dekkend: de min-schijf dekt de verticale
 * uitsnijding af met goud. Een pseudo-element in het gemaskeerde vlak zelf kon niet —
 * dat wordt door hetzelfde mask geknipt en zou de balk nooit kunnen vullen.
 */
.hinke-faq__plus {
	position: relative;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
}

.hinke-faq__plus::before,
.hinke-faq__plus::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--hinke-gold);
}

/* Via mask + background blijft de uitsnijding transparant, zodat de
   rijachtergrond erdoor schijnt zoals in het ontwerp. */
.hinke-faq__plus::before {
	-webkit-mask: url('../../img/icons/plus-circle.svg') no-repeat center / 15px 15px;
	mask: url('../../img/icons/plus-circle.svg') no-repeat center / 15px 15px;
}

.hinke-faq__plus::after {
	opacity: 0;
	transition: opacity .2s ease;
	-webkit-mask: url('../../img/icons/minus-circle.svg') no-repeat center / 15px 15px;
	mask: url('../../img/icons/minus-circle.svg') no-repeat center / 15px 15px;
}

.hinke-faq__item[open] .hinke-faq__plus::after {
	opacity: 1;
}

/* Het antwoord staat in het ontwerp niet uitgeklapt. We houden het binnen het
   grijze vlak met dezelfde 13px zijmarge als de vraag, zodat de rij één blok
   blijft. */
.hinke-faq__antwoord {
	padding: 0 13px 14px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	color: var(--hinke-body);
}

.hinke-faq__antwoord > :first-child {
	margin-top: 0;
}

.hinke-faq__antwoord > :last-child {
	margin-bottom: 0;
}

/*
 * Open- en dichtklappen met een overgang: de beweging staat in motion.css en wordt
 * door hinke.js (§12) aangestuurd.
 *
 * Hier stond een CSS-only versie met `interpolate-size` + `::details-content`. Die
 * werkt alleen in Chromium: op een iPhone (Safari) klapte een vraag nog steeds in
 * één frame open. De JS-route meet de hoogte en animeert die, en dat kan elke
 * browser — én die kan het zusje in dezelfde groep meesluiten, wat met de
 * `name`-regel van de browser niet te animeren was.
 */

@media (prefers-reduced-motion: reduce) {
	/* De overgang van het plus/min-tekentje zit op de min-schijf (::after). */
	.hinke-faq__plus::after {
		transition: none;
	}
}

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

/* Eén kolom zodra twee kolommen van 650 niet meer passen. Op 768px levert dat
   rijen van 720px op — vrijwel de 650 uit het ontwerp, dus de getekende rij komt
   op een tablet in zijn eigen maat terug in plaats van in twee halve kolommen.
   Gemeten @360: rijen van 312×46 (64 bij een tweeregelige vraag), plus-icoon op
   x=310 dus 11px van de rechterrand, precies zoals op desktop. */
@media (max-width: 900px) {
	.hinke-faq {
		grid-template-columns: minmax(0, 1fr);
	}
}