/* ============================================================
   lu-logos.css — sectie 2 van /live-chat-uitbesteden/.
   Bouwt op widgets/shared/bconnect-lu.css (handle `bconnect-lu`).
   Bron: upgrade-uitbesteden.css, "logobalk".

   SINDS 3.3.25 DE STANDAARDBAND (30-09-2026). Tot 3.3.24 was dit een
   witte balk met randlijnen, een kop van 15px in grijs en zwarte logo's
   op .55. Nu dezelfde band als cf-logos, om-logos en de logobalk in
   dk-hero: lavendel vlak, kop "Werkt voor elk merk" met accent, witte
   silhouetten op de gradientband. De waarden komen van cf-logos, op
   30-09-2026 in de browser gemeten en hier onder eigen namen gezet:

     sectie  #f5f4fb, padding clamp (26px, 3vw, 40px) 0
     kop     26px / 600, navy, regelhoogte 1.6, accent via --brand-gradient
     band    padding 26px 0, twee glanslagen over het merkverloop
     item    padding 0 40px, min-height 62px, gerenderd 125 x 62
     img     45px hoog, max 101px breed, brightness(0) invert(1) op .82

   GEEN class uit cf-, om- of dk-: die stylesheets laden alleen waar hun
   eigen widget staat. De assets staan al in widgets/lu-logos/assets/.

   De balk staat NIET op `.lu-sec`: eigen ritme en geen achtergrondwas,
   en daarmee ook geen reveal. De beweging komt volledig uit CSS.
   ============================================================ */

.lu-logobar { position: relative; display: block; width: 100%; box-sizing: border-box; padding: clamp(26px, 3vw, 40px) 0; background: #f5f4fb; overflow: hidden; }
.lu-logobar-kop { text-align: center; font-family: var(--font-head); font-weight: var(--fw-semibold, 600); font-size: 26px; line-height: 1.6; letter-spacing: -.01em; color: var(--c-navy); margin: 0 0 20px; }
.lu-logobar-kop .accent { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* De gradientband waar de witte silhouetten op staan: twee radiale
   glanslagen over het merkverloop, gelijk aan cf-logos.

   135deg EN NIET --brand-gradient. Het token staat in tokens.css op 90deg;
   de drie bestaande banden (cf-logos, om-logos, dk-hero) staan alle drie
   hardgecodeerd op 135deg. Met het token zou deze band als enige anders
   lopen. Besluit 30-09-2026: gelijk aan de andere drie. Staat als los
   eindje in DOCUMENTATIE.md.

   De mask-image van vóór 3.3.25 (fade aan de randen) is weg: op een
   gradientband is er geen wit vlak om naar te faden. */
.lu-marquee { position: relative; display: block; width: 100%; box-sizing: border-box; overflow: hidden; padding: 26px 0; background: radial-gradient(70% 150% at 10% -20%, rgba(88, 208, 245, .15) 0%, transparent 55%), radial-gradient(60% 130% at 94% 120%, rgba(255, 255, 255, .09) 0%, transparent 58%), linear-gradient(135deg, #2301fb 0%, #a80290 100%); }

/* GEEN width op de track. `width: max-content` is hier functioneel: de
   track moet breder zijn dan het scherm, anders is er niets om langs te
   schuiven. Een `width: 100%` erbij laat hem inklappen en zet de marquee
   stil. Dat is eerder misgegaan; vandaar deze noot.

   De rondetijd komt als --lu-mq-duration uit de widget (seconden per logo
   maal het aantal logo's, 4 x 11 = 44s). De 44s hieronder is alleen de
   terugval voor het geval de inline style wegvalt. */
.lu-marquee-track { display: flex; align-items: center; gap: 0; width: max-content; box-sizing: border-box; animation: lu-logobar-marquee var(--lu-mq-duration, 44s) linear infinite; will-change: transform; }
.lu-marquee:hover .lu-marquee-track { animation-play-state: paused; }
.lu-marquee-item { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: auto; min-width: auto; min-height: 62px; height: auto; margin: 0; padding: 0 40px; box-sizing: border-box; }

/* Eigen keyframe-naam: `logo-marquee` bestaat al in hero.css, lg-hero.css,
   mr-hero.css en au-hero.css. */
@keyframes lu-logobar-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
	.lu-marquee-track { animation: none; }
}

/* ============================================================
   HARDENING

   Dit is het scherpste geval van de familie, net als bij cf-logos.
   `.lu-marquee-item img` staat op (0,1,1) — één klasse plus één type,
   precies zoveel als `.elementor img`, dat `max-width: 100%`,
   `height: auto` én `border-radius: 0` zet. Bij gelijke specificiteit
   beslist de bronvolgorde, en die verandert zodra er een handle bij komt
   of een dependency verschuift.

   Het verschil is zichtbaar en groot: de logo's moeten 45px hoog staan
   binnen een koker van 125px. Wint `.elementor img { height: auto }`,
   dan bepaalt de beeldverhouding de hoogte en staan de elf merken niet
   meer op één optische maat. Onder `.elementor-widget-bconnect_lu_logos`
   komt het op (0,2,1) en staat de uitkomst vast.

   DE FILTER IS brightness(0) invert(1) OP .82: witte silhouetten op de
   gradientband, gelijk aan cf-logos en de homepagina. brightness(0) maakt
   elk logo zwart, invert(1) maakt er wit van: één silhouet, ongeacht de
   kleuren in het bestand. `grayscale(100%)` valt af omdat elk logo dan
   zijn eigen luminantie houdt — zie de kop van class-lu-logos-widget.php.

   Meet de computed waarden in de browser, lees ze niet uit deze bron: dat
   is de enige manier om te zien wie er werkelijk wint.
   ============================================================ */
.elementor-widget-bconnect_lu_logos .lu-marquee-item img {
	display: block;
	box-sizing: border-box;
	height: 45px;
	max-height: 45px;
	width: auto;
	max-width: 101px;
	object-fit: contain;
	border-radius: 0;
	background: transparent;
	filter: brightness(0) invert(1);
	opacity: .82;
	mix-blend-mode: normal;
	transition: opacity .25s var(--ease);
}

.elementor-widget-bconnect_lu_logos .lu-marquee-item:hover img {
	filter: brightness(0) invert(1);
	opacity: 1;
}