/* ============================================================
   cf-logos.css — blok 2 van /chatfunctie-op-je-website/.
   Bouwt op widgets/shared/bconnect-cf.css (handle `bconnect-cf`).

   DE WEERGAVE KOMT VAN DE LOGOBALK OP DE HOMEPAGINA (03-09-2026), die
   in `bconnect_hero` zit als `.hh-logobar-section--dark`. Gemeten daar in
   de browser en hier onder eigen namen overgenomen:

     item   padding 0 40px, min-height 62px, width auto, margin 0
            -> gerenderd 125px breed, dus een gelijkmatige rij
     img    height 45px, max-height 45px, width auto, max-width 101px,
            object-fit contain
     kleur  filter: brightness(0) invert(1) bij opacity .82
     band   de merkgradient onder de logo's
     duur   4s per logo, hier via --cf-mq-duration uit de PHP

   WAAROM brightness(0) invert(1) EN NIET grayscale
   grayscale() laat elk logo zijn eigen luminantie houden. Op de eerste
   opzet van deze balk gaf dat vier automerken in vier verschillende
   grijswaarden, een zwart blokje voor Belisol, leesbare tagline-tekst bij
   Select Windows, en een veel lichtere Brugman en Bruynzeel.
   brightness(0) maakt alles zwart, invert(1) maakt er wit van: één
   silhouet, ongeacht wat er in het bestand zit. Dat werkt alleen op een
   donkere ondergrond, vandaar de gradientband.

   NIETS HIERVAN IS EEN CLASS UIT hero.css OF hero-split.css. Die
   stylesheets laden alleen waar de herowidget staat; een class daaruit
   lenen zou deze balk stil laten vallen op elke pagina zonder hero. Het
   keyframe heet `cf-logo-marquee` en niet `logo-marquee`, want die naam
   bestaat al in hero.css én lg-hero.css.

   De sectie draagt `cf-logobar` en NIET `cf-sec`: eigen ritme en geen
   achtergrondwas. Daarmee raakt hij de reveal-regels van bconnect-cf.css
   ook niet, en dat klopt: deze balk revealt niet, hij staat er meteen.
   ============================================================ */

.cf-logobar { display: block; width: 100%; box-sizing: border-box; padding: clamp(26px, 3vw, 40px) 0; background: #f5f4fb; overflow: hidden; }
.cf-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; }
.cf-logobar-kop .accent { background: var(--cf-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* De gradientband waar de witte silhouetten op staan. Zelfde opbouw als de
   homepagina: twee radiale glans-lagen over het merkverloop. */
.cf-marquee { position: relative; width: 100%; 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%); }

/* `width: max-content` en niet 200%: de track bevat vier identieke reeksen,
   dus -50% is precies twee reeksen opschuiven en de sprong is naadloos,
   ongeacht hoeveel logo's erin staan. Haal je reeksen uit de PHP weg, dan
   springt de balk. --cf-mq-duration komt uit de PHP: 4s per logo. */
.cf-marquee-track { display: flex; align-items: center; gap: 0; width: max-content; animation: cf-logo-marquee var(--cf-mq-duration, 44s) linear infinite; will-change: transform; }
.cf-marquee:hover .cf-marquee-track { animation-play-state: paused; }
.cf-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; }

@keyframes cf-logo-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

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

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

   Dit is het scherpste geval van de familie. `.cf-marquee-item img` staat
   in de bron 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 hier 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_cf_logos`
   komt het op (0,2,1) en staat de uitkomst vast.

   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_cf_logos .cf-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_cf_logos .cf-marquee-item:hover img {
	filter: brightness(0) invert(1);
	opacity: 1;
}