/* Blok: Logostrook */
.logo-strip{ display:flex; flex-direction:column; gap:var(--sp-3); align-items:center; text-align:center; }
.logo-strip__title{ color:var(--ink-mute); }
.logo-strip__list{
	/* Een raster in plaats van een rij met vaste vakken: elk logo krijgt een
	   gelijk deel van de beschikbare breedte. Bij een breed woordmerk is de
	   breedte namelijk de beperkende maat, niet de hoogte — met een vast vak
	   van pakweg 180px blijft zo'n merk dus klein, hoe hoog het vak ook is.
	   Zo groeien ze mee met de container en met het aantal logo's. */
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(var(--logo-min), 1fr));
	gap:var(--logo-gap, clamp(1.5rem, 4vw, 3rem));
	justify-items:center; align-items:center;
	width:100%; margin:0; padding:0; list-style:none;
}
.logo-strip__list li{
	display:flex; align-items:center; justify-content:center;
	width:100%; max-width:var(--logo-max); height:var(--logo-h);
}
.logo-strip__list li > a{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.logo-strip__list img{
	max-width:100%; max-height:100%;
	width:auto; height:auto; object-fit:contain; display:block;
}

.logo-strip--small{
	--logo-min:110px; --logo-max:170px; --logo-h:52px;
	--logo-gap:clamp(1.2rem, 3vw, 2.4rem);
}
.logo-strip--normal{
	--logo-min:150px; --logo-max:250px; --logo-h:78px;
}
.logo-strip--large{
	/* Geen breedtelimiet: groot mag de hele kolom vullen. Met vier brede
	   woordmerken naast elkaar is de kolombreedte dan de grens — meer dan dat
	   past er in één rij nu eenmaal niet. */
	--logo-min:190px; --logo-max:none; --logo-h:110px;
	--logo-gap:clamp(1.5rem, 3vw, 2.5rem);
}

.logo-strip--gray img{
	filter:grayscale(1); opacity:.62;
	transition:filter .25s var(--ease), opacity .25s var(--ease);
}
.logo-strip--gray a:hover img{ filter:none; opacity:1; }
.band .logo-strip--gray img{ filter:grayscale(1) brightness(3); opacity:.7; }