/* =============================================================================
   Hinke. Trendstore — blok "team" (node 2199:8880, "Ons team").

   Ontwerp op canvas 1920:
     rij      x=182 … 1738  → 1556 breed (bewust breder dan de 1320-container)
     open     731 × 494
     dicht    263 × 494     (731 + 3×263 + 3×12 gap = 1556)
     open lid foto met zwart 30% eroverheen; naam (Outfit Bold 20, wit, uppercase,
              h=25) en bio (Outfit 400 14/26, wit, 578×130) samen verticaal
              gecentreerd — 165px marge boven én onder.

   Alles in het open lid staat gecentreerd: node 2199:9003 (naam) en 2199:9015
   (bio) hebben beide text-align center, en hun horizontale midden ligt op x=548
   — precies het midden van de kaart (182 + 731/2 = 547,5).

   Let op: het ontwerp heeft GEEN functie-regel onder de naam. Alleen naam + bio,
   met 9px ertussen (naam eindigt op y=722, bio begint op y=731). De opmaak van
   .hinke-team__functie blijft hieronder staan omdat het ACF-veld optioneel is,
   maar zodra die gevuld wordt schuift de inhoud 26px op en klopt de 165px
   uit het ontwerp niet meer.

   Openklappen is CSS (:hover en :focus-within) zodat het zonder JS werkt; de
   eerste collega krijgt .is-open mee uit de markup en JS verplaatst die klasse
   bij klik/tap. Zie assets/js/blocks-interactief.js.
   ========================================================================== */

/* Eigen maat: dit blok is breder dan .hinke-measure (1320) uit pages/page.css. */
.hinke-team__measure {
	width: min(100% - (2 * var(--hinke-gutter)), 1556px);
	margin-inline: auto;
}

.hinke-team {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hinke-team__lid {
	position: relative;
	min-width: 0;
	height: 420px;
	overflow: hidden;
	background: var(--hinke-band);
}

.hinke-team__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * HET HOOFD MOET IN BEELD BLIJVEN.
	 *
	 * `cover` sneed hier standaard vanuit het midden, en dat gaat mis zodra een kaart
	 * OPEN staat: dicht is een kaart 232×494 (staand, dus bij een staande foto valt er
	 * verticaal niets weg — gemeten: 0px), open is hij 645×494 (liggend). Bij de
	 * paginagrote foto van Hinke (5488×8232) betekent dat 237px eraf boven én onder —
	 * precies het stuk waar het hoofd zit.
	 *
	 * 25% houdt het gezicht boven de tekstoverlay. Bij 50% (de standaard) is het hoofd
	 * weg; bij 15% zakt het gezicht juist achter de naam en de bio. Alle drie naast
	 * elkaar bekeken op de echte foto.
	 *
	 * Dit raakt alleen de open kaart: dicht wordt er verticaal niks weggesneden, dus
	 * de foto verspringt niet bij het openklappen.
	 */
	object-position: center 25%;
}

/* De knop bedekt de hele kaart: klikbaar op touch, bereikbaar met Tab. */
.hinke-team__knop {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.hinke-team__knop:focus-visible {
	outline: 2px solid var(--hinke-focus-op-kleur);
	outline-offset: -4px;
}

/* -----------------------------------------------------------------------------
   Info van de open collega
   -------------------------------------------------------------------------- */

.hinke-team__info {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-inline: 12px;
	text-align: center;
	pointer-events: none; /* klikken gaat door naar de knop eronder. */
}

/* Zwart 30% over de foto — hoort bij het open lid, dus in de info-laag. */
.hinke-team__info::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--hinke-ink);
	opacity: .3;
}

.hinke-team__naam,
.hinke-team__functie,
.hinke-team__bio,
.hinke-team__links {
	position: relative;
	z-index: 1;
}

.hinke-team__naam {
	margin: 0;
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 20px;
	line-height: 25px;
	color: var(--hinke-white);
	text-transform: uppercase;
}

.hinke-team__functie {
	margin: 2px 0 0;
	font-family: var(--hinke-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 19px;
	color: var(--hinke-white);
}

/* Ontwerp: 9px onder de naam, tekstvlak 578 breed (5 regels van 26 = 130). */
.hinke-team__bio {
	width: 578px;
	max-width: 100%;
	margin: 0;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 26px;
	color: var(--hinke-white);
}

.hinke-team__naam + .hinke-team__bio {
	margin-top: 9px;
}

.hinke-team__functie + .hinke-team__bio {
	margin-top: 7px;
}

/* Een lege regel in het bio-veld wordt door wpautop een tweede alinea. In het
   ontwerp is een lege regel letterlijk één lege tekstregel (node 2199:9002 zet
   daar een leeg <p> van 26px tussen), dus is de tussenruimte hier één regelhoogte
   — 26px, niet een eigen alinea-afstand. Zo blijft het regelritme van 14/26 heel. */
.hinke-team__bio p {
	margin: 0 0 26px;
}

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

.hinke-team__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 20px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--hinke-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 19px;
}

.hinke-team__links a {
	color: var(--hinke-white);
	text-decoration: underline;
	pointer-events: auto; /* uitzondering op de info-laag. */
}

.hinke-team__links a:hover,
.hinke-team__links a:focus-visible {
	color: var(--hinke-gold);
}

/* -----------------------------------------------------------------------------
   Smal — kaarten onder elkaar, info altijd zichtbaar
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

	/* Hier staat de info altijd open (zie de regels hieronder vanaf 901px), dus
	   valt er niets uit te klappen en heeft de knop die de hele kaart bedekt geen
	   functie meer. Hij is hier zelfs schadelijk:
	     - een tap erop verandert niets zichtbaars — een dood aanraakvlak van
	       342×420 midden in de pagina;
	     - hij ligt over de bio (elementFromPoint op de bio gaf
	       button.hinke-team__knop), dus je kunt de tekst niet selecteren;
	     - hij meldt aan een screenreader "Meer over Femke, ingeklapt" terwijl de
	       bio er al staat, en dat is gewoon niet waar;
	     - hij kost vier tabstops zonder dat er iets gebeurt.
	   Daarom weg op smalle schermen. De links ín de info blijven bereikbaar. */
	.hinke-team__knop {
		display: none;
	}

	/* Zonder knop eronder hoeft de info-laag de aanwijzer niet meer door te laten;
	   zo is de bio ook echt te selecteren en te kopiëren. */
	.hinke-team__info {
		pointer-events: auto;
	}

	/* De kaart is 420px hoog met `overflow: hidden`, en de bio staat er hier altijd
	   volledig in beeld. Bij de huidige teksten past dat ruim (gemeten op 360px: de
	   langste bio vult 294 van de 420px, dus 126px lucht), maar een langere bio zou
	   er stil afgesneden worden. Daarom groeit de kaart hier mee in plaats van te
	   klippen; bij de huidige inhoud verandert er niets. */
	.hinke-team__lid {
		height: auto;
		min-height: 420px;
	}
}

/* -----------------------------------------------------------------------------
   Het uitklappen — alleen vanaf de breedte waarop de rij past.

   Onder 901px staan de kaarten onder elkaar met de info altijd zichtbaar; daar
   valt niets uit te klappen en is de bio dus per definitie leesbaar.
   -------------------------------------------------------------------------- */

@media (min-width: 901px) {

	.hinke-team {
		flex-direction: row;
	}

	/*
	 * DE MATEN VOLGEN HET AANTAL LEDEN, niet een vast getal.
	 *
	 * Het ontwerp (Figma 2199:9002, canvas 1556 met 12px gaps) geeft een open kaart van
	 * 731 naast gesloten kaarten van 263 — een verhouding van 263/731 = 0,3598. Die
	 * stond hier uitgerekend voor VIER leden (`3 * 12px`, `/1520`). Bij vijf leden vroeg
	 * de rij 731 + 4×263 + 4×12 = 1831px in een container van 1377, en drukte
	 * flex-shrink alles plat: het openklappen gaf toen nauwelijks verschil — precies de
	 * klacht "hij heeft moeite met openen".
	 *
	 * Nu: alle gaps eraf, en de rest verdelen volgens die verhouding. Bij vier leden
	 * komen er exact dezelfde 263 en 731 uit als voorheen (nagemeten), bij vijf of zes
	 * schuift het netjes mee zonder samen te drukken.
	 *
	 * `--hinke-team-leden` zet het template (template-parts/blocks/team.php); staat hij
	 * er niet, dan valt het terug op de vier van het ontwerp.
	 */
	.hinke-team {
		--hinke-team-n: var(--hinke-team-leden, 4);
		--hinke-team-verhouding: 0.359781; /* 263 / 731 */
		--hinke-team-ruimte: calc(100% - ((var(--hinke-team-n) - 1) * 12px));
		--hinke-team-open: calc(var(--hinke-team-ruimte) / (1 + ((var(--hinke-team-n) - 1) * var(--hinke-team-verhouding))));
		--hinke-team-dicht: calc(var(--hinke-team-open) * var(--hinke-team-verhouding));
	}

	.hinke-team__lid {
		flex: 0 1 var(--hinke-team-dicht);
		height: 494px;
		transition: flex-basis 420ms ease;
	}

	.hinke-team__info {
		opacity: 0;
		visibility: hidden;
		transition: opacity 260ms ease, visibility 0s linear 420ms;
	}

	/* Open: het lid met .is-open (standaard de eerste; JS verplaatst hem bij
	   klik/tap) of het lid waarin de focus staat. Dit werkt op élk apparaat, dus
	   ook op een tablet van 1024 waar de rij-indeling geldt maar hover niet
	   bestaat: daar is de tap op de knop de enige manier, en die is getest. */
	.hinke-team__lid.is-open,
	.hinke-team__lid:focus-within {
		flex-basis: var(--hinke-team-open);
	}

	.hinke-team__lid.is-open > .hinke-team__info,
	.hinke-team__lid:focus-within > .hinke-team__info {
		opacity: 1;
		visibility: visible;
		transition: opacity 260ms ease 60ms, visibility 0s;
	}

	/* Staat de focus in een lid, dan sluit al het overige — inclusief het lid dat
	   standaard open stond. */
	.hinke-team:has(> .hinke-team__lid:focus-within) > .hinke-team__lid:not(:focus-within) {
		flex-basis: var(--hinke-team-dicht);
	}

	.hinke-team:has(> .hinke-team__lid:focus-within) > .hinke-team__lid:not(:focus-within) > .hinke-team__info {
		opacity: 0;
		visibility: hidden;
		transition: opacity 260ms ease, visibility 0s linear 420ms;
	}
}

/* Hover-uitklappen alleen daar waar hover ook echt bestaat.

   Waarom die gate: op een touchscreen laat Blink de :hover-toestand ná een tap op
   de aangetikte kaart STAAN. Samen met de :has()-regels leverde dat een rij op
   waarin niets meer open stond. Gemeten op 1024px met touch-emulatie: tap kaart 4
   (Lotte blijft :hover), daarna de focus naar kaart 2 → kaart 2 had wel .is-open
   en :focus-within, maar `:has(> :hover) > :not(:hover)` sloot hem alsnog, en
   kaart 4 werd door `:has(> :focus-within) > :not(:focus-within)` gesloten. Alle
   vier de kaarten 163px breed, alle info op opacity 0, en een gat van ~288px in
   de rij. Op touch bestaan deze regels nu niet meer en beslist alleen .is-open /
   :focus-within, wat de JS deterministisch bijhoudt.
   -------------------------------------------------------------------------- */

@media (min-width: 901px) and (hover: hover) {

	.hinke-team__lid:hover {
		flex-basis: var(--hinke-team-open);
	}

	.hinke-team__lid:hover > .hinke-team__info {
		opacity: 1;
		visibility: visible;
		transition: opacity 260ms ease 60ms, visibility 0s;
	}

	/*
	 * WIJST DE BEZOEKER IETS AAN, DAN BESLIST DAT — ook als er nog focus ergens staat.
	 *
	 * Hier stond een `:not(:has(> .hinke-team__lid:focus-within))` op de sluit-regel,
	 * zodat focus won van hover. Gevolg: na één klik op een collega bleef die kaart
	 * gefocust, en wees je daarna een ándere aan, dan gingen ze BEIDE open. Twee open
	 * kaarten vragen meer breedte dan de rij heeft, dus drukte flex-shrink alles samen
	 * en groeide de aangewezen kaart nauwelijks — dat is de "moeite met openen".
	 *
	 * Nu wint op een muis-apparaat de hover, en dat moet in de selector zelf gebeuren:
	 * de sluit-regel van de focus hierboven is (0,5,0), dus een korte `:hover`-regel
	 * (0,2,0) zou daar niet bovenuit komen en de aangewezen kaart zou dicht blijven.
	 * Deze twee regels hebben dezelfde vorm (en staan later in het bestand), dus is de
	 * uitkomst eenduidig: precies één kaart open, degene die je aanwijst.
	 *
	 * Op een aanraakscherm bestaat deze hele mediaquery niet, dus daar blijft het bij
	 * .is-open en :focus-within — de klem die hierboven beschreven staat, blijft dus
	 * opgelost.
	 */
	.hinke-team:has(> .hinke-team__lid:hover) > .hinke-team__lid:hover {
		flex-basis: var(--hinke-team-open);
	}

	.hinke-team:has(> .hinke-team__lid:hover) > .hinke-team__lid:not(:hover) {
		flex-basis: var(--hinke-team-dicht);
	}

	.hinke-team:has(> .hinke-team__lid:hover) > .hinke-team__lid:hover > .hinke-team__info {
		opacity: 1;
		visibility: visible;
		transition: opacity 260ms ease 60ms, visibility 0s;
	}

	.hinke-team:has(> .hinke-team__lid:hover) > .hinke-team__lid:not(:hover) > .hinke-team__info {
		opacity: 0;
		visibility: hidden;
		transition: opacity 260ms ease, visibility 0s linear 420ms;
	}
}

/* Geen breedte-animatie voor wie beweging liever niet heeft: direct wisselen.

   De selectoren staan hier één op één zoals hierboven, inclusief de
   :not(:has(…))-gate. Dat is geen kopieerwerk om het kopiëren: een kortere
   selector heeft een lagere specificiteit dan de gated hover-regel en zou de
   transition er dan niet meer af krijgen. Gelijke specificiteit + later in het
   bestand = deze wint. */
@media (prefers-reduced-motion: reduce) {

	.hinke-team__lid,
	.hinke-team__info,
	.hinke-team__lid.is-open > .hinke-team__info,
	.hinke-team__lid:hover > .hinke-team__info,
	.hinke-team__lid:focus-within > .hinke-team__info,
	/* Meebewegen met de hover-regels hierboven: die zijn niet meer 'gated' op focus,
	   dus staan ze hier ook zonder die :not(:has(…)). */
	.hinke-team:has(> .hinke-team__lid:hover) > .hinke-team__lid:hover > .hinke-team__info,
	.hinke-team:has(> .hinke-team__lid:hover) > .hinke-team__lid:not(:hover) > .hinke-team__info,
	.hinke-team:has(> .hinke-team__lid:focus-within) > .hinke-team__lid:not(:focus-within) > .hinke-team__info {
		transition: none;
	}
}