/**
 * Searchflow — Logo sectie
 *
 * Drie lagen, los van elkaar te gebruiken:
 *   .sf-logos        de band met achtergrond en padding  — alleen [sf_logo_section]
 *   .sf-logos__grid  de rij                              — [sf_logos]
 *   .sf-logos__slot  één logo                            — [sf_logo]
 *
 * Bouw je de band en de rij in Elementor, dan raakt alleen het .sf-logos__slot-
 * deel je opmaak. De rest kun je negeren.
 *
 * Tokens uit het design:
 *   band            #EDEFEF
 *   titel           #6B7280
 *   scheidingslijn  rgba(15,21,32,.09)
 *   logo rust       grayscale(1) opacity(.55)
 *   logo hover      volle kleur — 280ms
 *   crossfade       640ms cubic-bezier(.4,0,.2,1)
 */

:root {
	--sf-logos-line: rgba(15, 21, 32, .09);
	--sf-logos-h: 58px;
}

/* ─── Slot ──────────────────────────────────────────────────────────────── */

/**
 * De scheidingslijnen zitten als inset-schaduw op de cel zelf: links en boven,
 * onafhankelijk van elkaar. Een cel middenin een raster heeft ze allebei nodig
 * — met één box-shadow-regel per situatie zou dat een woud aan combinaties
 * geven, dus elke rand heeft een eigen variabele. Op 0 tekent de schaduw niets.
 */
.sf-logos__slot {
	--sf-line-left: 0;
	--sf-line-top: 0;

	/**
	 * Grid met één cel, geen flex: tijdens een wissel zitten het oude en het
	 * nieuwe logo allebei in cel 1/1 en liggen ze dus over elkaar heen. Dat maakt
	 * een echte crossfade mogelijk zonder absolute positionering, en de cel houdt
	 * gewoon zijn hoogte omdat beide lagen meetellen voor de maat.
	 */
	display: grid;
	grid-template-columns: 1fr;
	min-height: var(--sf-logos-h, 58px);
	padding: 0 14px;
	box-shadow:
		inset var(--sf-line-left) 0 0 var(--sf-logos-line),
		inset 0 var(--sf-line-top) 0 var(--sf-logos-line);
}

.sf-logos__link {
	grid-area: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	opacity: 1;
	/*
	 * Rustig verloop met een zachte in- en uitloop. Een lange fade mag hier,
	 * omdat er tijdens de wissel altijd iets zichtbaar is — de twee lagen liggen
	 * over elkaar. Het gat waar het eerder traag van werd zat in de volgorde,
	 * niet in de duur.
	 */
	transition: opacity 900ms cubic-bezier(.37, 0, .27, 1);
}

/* Het binnenkomende logo start onzichtbaar en fadet meteen in. */
.sf-logos__link.is-entering {
	opacity: 0;
}

/*
 * Het vertrekkende logo gaat sneller weg dan het nieuwe binnenkomt. Bij gelijke
 * duur staan ze een moment allebei half zichtbaar over elkaar en lijkt het een
 * dubbeldruk; zo blijft het schoon.
 */
.sf-logos__link.is-leaving {
	opacity: 0;
	transition-duration: 620ms;
}

.sf-logos__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	/* max-height staat inline per logo, uit de viewBox of het ACF-veld. */
	object-fit: contain;
	/**
	 * Standaard grijstinten. Dit is de veilige behandeling: een SVG met een wit
	 * achtergrondvlak (Shock Media, THO hebben dat) blijft wit en valt weg tegen
	 * de band. brightness(0) zou dat vlak zwart maken en het logo bedekken —
	 * daarom staat die alleen op logo's die er expliciet om vragen, zie --licht.
	 */
	filter: grayscale(1) opacity(.55);
	transition: filter 280ms ease;
}

.sf-logos__link:hover .sf-logos__img,
.sf-logos__link:focus-visible .sf-logos__img {
	filter: grayscale(0) opacity(1);
}

/**
 * Per logo te kiezen, via het ACF-veld logo_weergave.
 *
 * --licht  wit of licht logo op een transparante achtergrond. brightness(0)
 *          maakt élke kleur zwart, ook wit, dus het wordt zichtbaar. De PHP
 *          weigert deze behandeling als het bestand een dicht achtergrondvlak
 *          heeft, want dan krijg je een zwart blok.
 * --kleur  logo in eigen kleur. Altijd leesbaar, ongeacht wat er in het
 *          bestand zit. De ontsnappingsroute als de rest niet werkt.
 */
.sf-logos__img--licht {
	filter: brightness(0) opacity(.55);
}

.sf-logos__img--kleur {
	filter: opacity(.85);
}

.sf-logos__link:hover .sf-logos__img--licht,
.sf-logos__link:focus-visible .sf-logos__img--licht {
	filter: brightness(1) opacity(1);
}

.sf-logos__link:hover .sf-logos__img--kleur,
.sf-logos__link:focus-visible .sf-logos__img--kleur {
	filter: opacity(1);
}

a.sf-logos__link:focus-visible {
	outline: 2px solid #1F6FEB;
	outline-offset: 2px;
	border-radius: 4px;
}

/* Losse slot met [sf_logo separator="left"] in een eigen Elementor-kolom. */
.sf-logos__slot--sep {
	--sf-line-left: 1px;
}

/* ─── Rij ───────────────────────────────────────────────────────────────── */

.sf-logos__grid {
	display: grid;
	align-items: center;
	grid-template-columns: repeat(6, 1fr);
}

.sf-logos__grid--c2 { grid-template-columns: repeat(2, 1fr); }
.sf-logos__grid--c3 { grid-template-columns: repeat(3, 1fr); }
.sf-logos__grid--c4 { grid-template-columns: repeat(4, 1fr); }
.sf-logos__grid--c5 { grid-template-columns: repeat(5, 1fr); }
.sf-logos__grid--c6 { grid-template-columns: repeat(6, 1fr); }
.sf-logos__grid--c7 { grid-template-columns: repeat(7, 1fr); }
.sf-logos__grid--c8 { grid-template-columns: repeat(8, 1fr); }

/* Met lijnen geen tussenruimte, anders vallen ze in stukken uiteen. */
.sf-logos__grid--sep {
	gap: 0;
}

/* ─── Lijnen, desktop ───────────────────────────────────────────────────── */

/**
 * De drie breakpoints sluiten elkaar uit. Dat is bewust: anders zou een
 * desktopregel als `--sep.--c6 > .slot:not(...)` specifieker zijn dan een reset
 * op tablet, en bleef de verkeerde lijn staan. Nu geldt per schermbreedte
 * precies één set regels en is er niets te overschrijven.
 */
@media (min-width: 1025px) {

/* Verticaal: elke cel die niet als eerste in zijn rij staat. */
.sf-logos__grid--sep.sf-logos__grid--c2 > .sf-logos__slot:not(:nth-child(2n+1)),
.sf-logos__grid--sep.sf-logos__grid--c3 > .sf-logos__slot:not(:nth-child(3n+1)),
.sf-logos__grid--sep.sf-logos__grid--c4 > .sf-logos__slot:not(:nth-child(4n+1)),
.sf-logos__grid--sep.sf-logos__grid--c5 > .sf-logos__slot:not(:nth-child(5n+1)),
.sf-logos__grid--sep.sf-logos__grid--c6 > .sf-logos__slot:not(:nth-child(6n+1)),
.sf-logos__grid--sep.sf-logos__grid--c7 > .sf-logos__slot:not(:nth-child(7n+1)),
.sf-logos__grid--sep.sf-logos__grid--c8 > .sf-logos__slot:not(:nth-child(8n+1)) {
	--sf-line-left: 1px;
}

/* Horizontaal: alles voorbij de eerste rij. */
.sf-logos__grid--sep.sf-logos__grid--c2 > .sf-logos__slot:nth-child(n+3),
.sf-logos__grid--sep.sf-logos__grid--c3 > .sf-logos__slot:nth-child(n+4),
.sf-logos__grid--sep.sf-logos__grid--c4 > .sf-logos__slot:nth-child(n+5),
.sf-logos__grid--sep.sf-logos__grid--c5 > .sf-logos__slot:nth-child(n+6),
.sf-logos__grid--sep.sf-logos__grid--c6 > .sf-logos__slot:nth-child(n+7),
.sf-logos__grid--sep.sf-logos__grid--c7 > .sf-logos__slot:nth-child(n+8),
.sf-logos__grid--sep.sf-logos__grid--c8 > .sf-logos__slot:nth-child(n+9) {
	--sf-line-top: 1px;
}

}

/* ─── Band ──────────────────────────────────────────────────────────────── */

.sf-logos {
	background: #EDEFEF;
}

.sf-logos__inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 34px 48px 38px;
}

.sf-logos__title {
	margin: 0 0 26px;
	text-align: center;
	font: 600 14px/1 Manrope, system-ui, sans-serif;
	letter-spacing: .01em;
	color: #6B7280;
}

/* ─── Tablet ────────────────────────────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1024px) {
	.sf-logos__inner {
		padding: 30px 32px 34px;
	}

	.sf-logos__grid--t2 { grid-template-columns: repeat(2, 1fr); }
	.sf-logos__grid--t3 { grid-template-columns: repeat(3, 1fr); }
	.sf-logos__grid--t4 { grid-template-columns: repeat(4, 1fr); }

	.sf-logos__grid--sep.sf-logos__grid--t2 > .sf-logos__slot:not(:nth-child(2n+1)),
	.sf-logos__grid--sep.sf-logos__grid--t3 > .sf-logos__slot:not(:nth-child(3n+1)),
	.sf-logos__grid--sep.sf-logos__grid--t4 > .sf-logos__slot:not(:nth-child(4n+1)) {
		--sf-line-left: 1px;
	}

	.sf-logos__grid--sep.sf-logos__grid--t2 > .sf-logos__slot:nth-child(n+3),
	.sf-logos__grid--sep.sf-logos__grid--t3 > .sf-logos__slot:nth-child(n+4),
	.sf-logos__grid--sep.sf-logos__grid--t4 > .sf-logos__slot:nth-child(n+5) {
		--sf-line-top: 1px;
	}
}

/* ─── Mobiel ────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.sf-logos__inner {
		padding: 28px 20px 32px;
	}

	.sf-logos__title {
		margin: 0 0 22px;
		letter-spacing: 0;
	}

	.sf-logos__grid--m1 { grid-template-columns: 1fr; }
	.sf-logos__grid--m2 { grid-template-columns: repeat(2, 1fr); }
	.sf-logos__grid--m3 { grid-template-columns: repeat(3, 1fr); }

	.sf-logos__slot {
		min-height: 68px;
	}

	.sf-logos__img {
		filter: grayscale(1) opacity(.6);
	}

	.sf-logos__img--licht {
		filter: brightness(0) opacity(.6);
	}

	.sf-logos__img--kleur {
		filter: opacity(.9);
	}

	/*
	 * Bij vier logo's in twee kolommen levert dit een kruis op: de verticale
	 * lijn uit kolom 2, de horizontale uit rij 2. De rechteronderste cel krijgt
	 * ze allebei, want het zijn losse variabelen.
	 */
	.sf-logos__grid--sep.sf-logos__grid--m2 > .sf-logos__slot:not(:nth-child(2n+1)),
	.sf-logos__grid--sep.sf-logos__grid--m3 > .sf-logos__slot:not(:nth-child(3n+1)) {
		--sf-line-left: 1px;
	}

	.sf-logos__grid--sep.sf-logos__grid--m1 > .sf-logos__slot:nth-child(n+2),
	.sf-logos__grid--sep.sf-logos__grid--m2 > .sf-logos__slot:nth-child(n+3),
	.sf-logos__grid--sep.sf-logos__grid--m3 > .sf-logos__slot:nth-child(n+4) {
		--sf-line-top: 1px;
	}

	/* Slots die op mobiel wegvallen. De JS slaat ze automatisch over. */
	.sf-logos__grid--max1 > .sf-logos__slot:nth-child(n+2),
	.sf-logos__grid--max2 > .sf-logos__slot:nth-child(n+3),
	.sf-logos__grid--max3 > .sf-logos__slot:nth-child(n+4),
	.sf-logos__grid--max4 > .sf-logos__slot:nth-child(n+5),
	.sf-logos__grid--max5 > .sf-logos__slot:nth-child(n+6),
	.sf-logos__grid--max6 > .sf-logos__slot:nth-child(n+7),
	.sf-logos__grid--max7 > .sf-logos__slot:nth-child(n+8),
	.sf-logos__grid--max8 > .sf-logos__slot:nth-child(n+9) {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sf-logos__link,
	.sf-logos__img {
		transition: none;
	}
}