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

/* 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-gold);
	outline-offset: -2px;
}

/* Gouden schijf met uitgesneden plus. Via mask + background blijft de plus
   transparant, zodat de rijachtergrond erdoor schijnt zoals in het ontwerp. */
.hinke-faq__plus {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	background: var(--hinke-gold);
	transition: transform .2s ease;
	-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;
}

/* Het ontwerp toont alleen de dichte staat (alle rijen gesloten, geen open
   variant van het icoon). We draaien daarom dezelfde schijf een achtste slag:
   de plus wordt een kruisje ("sluiten") terwijl de getekende cirkelvorm exact
   intact blijft — en het is in echte tijd te animeren. */
.hinke-faq__item[open] .hinke-faq__plus {
	transform: rotate(45deg);
}

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

/* Uitklap-animatie zonder JavaScript. Alleen in browsers die interpolate-size
   én ::details-content kennen; elders klapt het blok gewoon direct open. */
@supports (interpolate-size: allow-keywords) {
	.hinke-faq__item {
		interpolate-size: allow-keywords;
	}

	.hinke-faq__item::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size .2s ease, content-visibility .2s allow-discrete;
	}

	.hinke-faq__item[open]::details-content {
		block-size: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hinke-faq__plus,
	.hinke-faq__item::details-content {
		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);
	}
}