/* ==========================================================================
   LRI — klantlogo's: doorlopende band en raster
   --------------------------------------------------------------------------
   Kleuren en maten zijn variabelen, dus aan te passen via Elementor Custom CSS:
     .lri-kl{ --lri-kl-hoogte:60px; }
   ========================================================================== */

.lri-kl{
  --lri-kl-hoogte:48px;
  --lri-kl-zichtbaar:6;
  --lri-kl-cols:5;
  --lri-kl-duur:45s;
  --lri-kl-gap:0px;
  --lri-kl-line:#E3E7EB;
  --lri-kl-paper:#FFFFFF;
}

/* ---------- cel ---------- */
.lri-kl-cel{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 22px;
  background:var(--lri-kl-paper);
  min-height:calc(var(--lri-kl-hoogte) + 44px);
  overflow:hidden;
}
/* De hoogte is leidend, de breedte volgt uit de eigen verhouding van het logo.
   width:auto voorkomt dat een thema-regel als img{width:100%} het logo uitrekt;
   object-fit:contain vangt af wat er bij extreem brede logo's overblijft. */
.lri-kl .lri-kl-cel img{
  height:var(--lri-kl-hoogte) !important;
  width:auto !important;
  max-width:100% !important;
  max-height:var(--lri-kl-hoogte) !important;
  min-width:0;
  object-fit:contain !important;
  object-position:center center;
  display:block;
  border-radius:0;
  transition:filter .25s ease, opacity .25s ease;
}
.lri-kl--grijs .lri-kl-cel img{ filter:grayscale(100%); opacity:.6; }
.lri-kl--grijs .lri-kl-cel:hover img{ filter:none; opacity:1; }

/* ==========================================================================
   Doorlopende band
   ========================================================================== */
.lri-kl--band{
  position:relative;
  overflow:hidden;
  width:100%;
}

/* zachte randen links en rechts, zodat logo's niet hard afgesneden lijken */
.lri-kl--band::before,
.lri-kl--band::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  width:70px;
  z-index:2;
  pointer-events:none;
}
.lri-kl--band::before{ left:0;  background:linear-gradient(90deg,var(--lri-kl-paper),rgba(255,255,255,0)); }
.lri-kl--band::after{  right:0; background:linear-gradient(270deg,var(--lri-kl-paper),rgba(255,255,255,0)); }

.lri-kl-spoor{
  display:flex;
  align-items:center;
  width:max-content;
  animation:lri-kl-schuif var(--lri-kl-duur) linear infinite;
}
.lri-kl--band:hover .lri-kl-spoor,
.lri-kl--band:focus-within .lri-kl-spoor{ animation-play-state:paused; }

.lri-kl--band .lri-kl-cel{
  flex:0 0 auto;
  width:calc(100vw / var(--lri-kl-zichtbaar));
  max-width:280px;
}

@keyframes lri-kl-schuif{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* Nog niet gedupliceerd door het script: dan niet schuiven, anders schokt het. */
.lri-kl--band:not(.lri-kl-klaar) .lri-kl-spoor{ animation:none; }

/* ==========================================================================
   Raster
   ========================================================================== */
.lri-kl--raster{
  display:grid;
  grid-template-columns:repeat(var(--lri-kl-cols),minmax(0,1fr));
  gap:1px;
  background:var(--lri-kl-line);
  border:1px solid var(--lri-kl-line);
}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .lri-kl--band .lri-kl-cel{ width:calc(100vw / 4); }
  .lri-kl--raster{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:640px){
  .lri-kl--band .lri-kl-cel{ width:calc(100vw / 2.2); }
  .lri-kl--band::before,
  .lri-kl--band::after{ width:34px; }
  .lri-kl--raster{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ---------- beperkte beweging: geen animatie, wel handmatig scrollen ---------- */
@media(prefers-reduced-motion:reduce){
  .lri-kl-spoor{ animation:none!important; }
  .lri-kl--band{ overflow-x:auto; }
  .lri-kl-cel img{ transition:none; }
}