/* ============================================================
   lu-track.css — sectie 10 van /live-chat-uitbesteden/.
   Bouwt op widgets/shared/bconnect-lu.css (handle `bconnect-lu`).
   Bron: upgrade-uitbesteden.css, "9 TRACK RECORD".

   `.lu-card` en `.lu-linkline` staan in de gedeelde stylesheet. Hier het
   raster van drie en de klantkaart met zijn logoblok.
   ============================================================ */

.lu-clients { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: clamp(32px, 3.6vw, 44px); }
.lu-client { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 28px 32px; }
.lu-client-logo { display: flex; width: 100%; height: 56px; align-items: center; justify-content: center; gap: 18px; box-sizing: border-box; }
.lu-client h3,
.lu-client-role { width: 100%; max-width: none; }
.lu-client-role { display: block; font-size: 13px; color: var(--c-text-soft); margin-top: 6px; }
.lu-client p { max-width: 34ch; margin-top: 14px; }

@media (max-width: 1024px) {
	.lu-clients { grid-template-columns: 1fr; }
}

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

   `.lu-client-logo img` staat op (0,1,1) — 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.

   Het verschil is hier zichtbaar: de vier logo's moeten optisch even
   zwaar staan binnen een blok van 56px hoog, en twee ervan (Jaguar en
   Land Rover) staan naast elkaar in één kaart. Wint
   `.elementor img { height: auto }`, dan bepaalt de beeldverhouding de
   hoogte en staat Land Rover naast een half zo hoge Jaguar. Onder
   `.elementor-widget-bconnect_lu_track` komt het op (0,2,1) en staat de
   uitkomst vast.

   `.is-hedin` is de uitzondering: dat logo staat op twee regels met een
   tagline eronder, dus het beeldvlak is voor een groot deel wit en het
   merk oogt kleiner. Het mag daarom hoger en breder. Die regel staat op
   (0,3,1) en wint dus van de regel erboven.

   GEEN `transform: scale(1.35)` OP is-hedin, ANDERS DAN DE BRON.
   Gemeten op 1440px, 23-09-2026: met de schaal uit de bron rendert het
   Hedin-logo 143x76 terwijl `.lu-client-logo` 56px hoog is. Een
   transform verandert alleen de weergave en niet de layoutdoos, dus die
   20px extra loopt door over de kop eronder:

     kaart 0 (Jaguar/Land Rover)  ruimte tot de H3  +6,0px
     kaart 1 (Hedin, met scale)   ruimte tot de H3  -9,8px  << overlap
     kaart 2 (Bowerkt)            ruimte tot de H3  +6,0px

   Zonder de schaal rendert Hedin 106x56 en is de ruimte 0,0px: hij vult
   het blok precies, en dat is wat `max-height: 56px` hier al doet. De
   schaal was er dus een tweede keer bovenop.

   Oogt het merk daarna nog te klein, dan is het antwoord een hoger
   `.lu-client-logo` voor alle drie de kaarten — niet een transform op
   één ervan, want dan lopen de drie koppen niet meer gelijk.

   Meet de computed waarden in de browser, lees ze niet uit deze bron.
   ============================================================ */
.elementor-widget-bconnect_lu_track .lu-client-logo img {
	display: block;
	box-sizing: border-box;
	max-height: 44px;
	max-width: 160px;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 0;
	background: transparent;
	filter: grayscale(100%);
	opacity: .85;
}

.elementor-widget-bconnect_lu_track .lu-client-logo.is-hedin img {
	max-height: 56px;
	max-width: 180px;
}