/* ==========================================================================
   LRI Video's — carousel
   --------------------------------------------------------------------------
   Aanpassen kan via Elementor > Site Settings > Custom CSS, bijvoorbeeld:
     .lri-vid{ --lri-vid-accent:#FFC53D; --lri-vid-gap:20px; }
   ========================================================================== */

.lri-vid{
  --lri-vid-cols:3;
  --lri-vid-gap:10px;
  --lri-vid-ratio:16/9;
  --lri-vid-accent:#3E9CD9;
  --lri-vid-radius:4px;
  --lri-vid-donker:#0C2438;

  position:relative;
}

.lri-vid--stappen{ padding:0 56px; }

.lri-vid-venster{ overflow:hidden; }

/* ==========================================================================
   Doorlopende band (standaard)
   ========================================================================== */
.lri-vid--band{ padding:0; }

/* volle schermbreedte, ook binnen een Elementor-container */
.lri-vid--vol{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

.lri-vid--band .lri-vid-venster{ overflow:hidden; }

.lri-vid--band .lri-vid-spoor{
  display:flex;
  width:max-content;
  margin:0;
  transition:none;
  animation:lri-vid-schuif var(--lri-vid-duur,60s) linear infinite;
  animation-play-state:paused;
}
/* pas laten lopen als het script de rij heeft verdubbeld, anders schokt het */
.lri-vid--band.is-klaar .lri-vid-spoor{ animation-play-state:running; }

.lri-vid--band .lri-vid-slide{
  flex:0 0 auto;
  width:calc(100vw / var(--lri-vid-cols));
  padding:0;
  margin-right:var(--lri-vid-gap);
}

.lri-vid--band .lri-vid-kader{ border-radius:0; }

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

/* ==========================================================================
   Stapsgewijze slider
   ========================================================================== */
.lri-vid--stappen .lri-vid-spoor{
  display:flex;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
  will-change:transform;
  margin:0 calc(var(--lri-vid-gap) / -2);
}

.lri-vid--stappen .lri-vid-slide{
  flex:0 0 calc(100% / var(--lri-vid-cols));
  min-width:0;
  padding:0 calc(var(--lri-vid-gap) / 2);
}

/* ---------- videotegel ---------- */
.lri-vid-kader{
  position:relative;
  aspect-ratio:var(--lri-vid-ratio);
  border-radius:var(--lri-vid-radius);
  overflow:hidden;
  background:var(--lri-vid-donker) center/cover no-repeat;
}

.lri-vid-kader video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* knop over de hele tegel, zodat overal klikken werkt */
.lri-vid-knop{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  background:rgba(6,18,31,0);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease;
}
.lri-vid-kader:hover .lri-vid-knop{ background:rgba(6,18,31,.24); }
.lri-vid-knop:focus-visible{ outline:3px solid var(--lri-vid-accent); outline-offset:-3px; }

.lri-vid-play{
  width:60px;height:60px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--lri-vid-donker);
  padding-left:3px;
  opacity:0;
  transform:scale(.9);
  transition:opacity .2s ease, transform .2s ease;
}
.lri-vid-kader:hover .lri-vid-play,
.lri-vid-knop:focus-visible .lri-vid-play{ opacity:1; transform:scale(1); }

/* video's die niet vanzelf spelen: knop altijd zichtbaar */
.lri-vid-kader.is-poster .lri-vid-play{ opacity:1; transform:scale(1); }
.lri-vid-kader.is-poster .lri-vid-knop{ background:rgba(6,18,31,.28); }
.lri-vid-kader.is-poster:hover .lri-vid-knop{ background:rgba(6,18,31,.42); }

.lri-vid-titel{
  margin:12px 0 0;
  font-size:.95rem;
  line-height:1.5;
  color:#5B6B7C;
}

/* ---------- pijlen ---------- */
.lri-vid-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid #E3E7EB;
  border-radius:50%;
  background:#fff;
  color:#3A4550;
  cursor:pointer;
  padding:0;
  z-index:2;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.lri-vid-nav:hover{ background:var(--lri-vid-accent); border-color:var(--lri-vid-accent); color:#fff; }
.lri-vid-vorige{ left:0; }
.lri-vid-volgende{ right:0; }
.lri-vid-nav:focus-visible{ outline:3px solid var(--lri-vid-accent); outline-offset:3px; }

/* ---------- bolletjes ---------- */
.lri-vid-bolletjes{
  --lri-vid-bol:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:24px;
  line-height:0;
}
.lri-vid .lri-vid-bolletjes button{
  flex:0 0 var(--lri-vid-bol);
  width:var(--lri-vid-bol);
  height:var(--lri-vid-bol);
  min-width:var(--lri-vid-bol);
  min-height:var(--lri-vid-bol);
  max-width:var(--lri-vid-bol);
  max-height:var(--lri-vid-bol);
  aspect-ratio:1/1;
  padding:0;margin:0;border:0;
  border-radius:50%;
  background:#C7D0D9;
  box-shadow:none;
  font-size:0;line-height:0;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:background .18s ease;
}
.lri-vid .lri-vid-bolletjes button[aria-selected="true"]{ background:var(--lri-vid-accent); }

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lri-vid-lightbox{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  background:rgba(6,18,31,.93);
}
.lri-vid-lightbox.open{ display:flex; }
body.lri-vid-open{ overflow:hidden; }

.lri-vid-lightbox-inhoud{
  position:relative;
  width:min(1100px,92vw);
  max-height:86vh;
}
.lri-vid-lightbox-inhoud video{
  width:100%;
  max-height:86vh;
  display:block;
  border-radius:3px;
  background:#000;
}
.lri-vid-lightbox-kader{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  max-height:86vh;
}
.lri-vid-lightbox-kader iframe{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  border:0;
  border-radius:3px;
  background:#000;
}
.lri-vid-sluiten{
  position:absolute;
  top:-52px;right:0;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#fff;
  cursor:pointer;
}
.lri-vid-sluiten:hover{ background:rgba(255,255,255,.28); }

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .lri-vid{ --lri-vid-cols:2; }
  .lri-vid--stappen{ padding:0 44px; }
}
@media(max-width:640px){
  .lri-vid{ --lri-vid-cols:1.15; }
  .lri-vid--stappen{ --lri-vid-cols:1; padding:0 12px; }
  .lri-vid-nav{ display:none; }
  .lri-vid-play{ width:50px;height:50px; opacity:1; transform:none; }
  .lri-vid-sluiten{ top:-46px; }
}

@media(prefers-reduced-motion:reduce){
  .lri-vid--stappen .lri-vid-spoor{ transition:none; }
  .lri-vid--band .lri-vid-spoor{ animation:none!important; }
  .lri-vid--band .lri-vid-venster{ overflow-x:auto; }
  .lri-vid-play,.lri-vid-knop,.lri-vid-nav{ transition:none; }
}