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

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

	/* 1520 = 1556 − 3×12 gap; zo levert 100% = 1556px exact 263 en 731 op en
	   schaalt de rij daaronder vloeiend mee. flex-shrink blijft 1 zodat er nooit
	   iets buiten de container valt als er twee leden open zouden staan. */
	.hinke-team__lid {
		flex: 0 1 calc((100% - (3 * 12px)) * 263 / 1520);
		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: calc((100% - (3 * 12px)) * 731 / 1520);
	}

	.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: calc((100% - (3 * 12px)) * 263 / 1520);
	}

	.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: calc((100% - (3 * 12px)) * 731 / 1520);
	}

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

	/* Hovert de bezoeker een ánder lid, dan sluit al het overige. Maar niet zolang
	   er ergens focus staat: dan wint de focus. Anders houden een hangende hover en
	   een toetsenbordfocus op twee verschillende kaarten elkaar in de tang en gaat
	   er niets open — precies de klem die hierboven beschreven staat, die ook met
	   een muis optreedt zodra je een kaart aanwijst terwijl de focus elders staat. */
	.hinke-team:has(> .hinke-team__lid:hover):not(:has(> .hinke-team__lid:focus-within)) > .hinke-team__lid:not(:hover) {
		flex-basis: calc((100% - (3 * 12px)) * 263 / 1520);
	}

	.hinke-team:has(> .hinke-team__lid:hover):not(:has(> .hinke-team__lid:focus-within)) > .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,
	.hinke-team:has(> .hinke-team__lid:hover):not(:has(> .hinke-team__lid:focus-within)) > .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;
	}
}