/* Eigen spoor (.dps-kb-spoor, niet .v2-sl-spoor): zo hangen de gedeelde sleephandlers
   uit v2-header.js en v2-slider.js er niet aan. Die drie vochten om dezelfde muis
   (haperen, blijven hangen). Speler: assets/js/dps-kb-slider.js. Tijdens slepen
   geen snap en geen smooth, in rust zacht snappen. */
.v2-dd-tips .dps-kb-spoor{
  display:flex; gap:clamp(12px, 1.67vw, 24px); overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; scroll-behavior:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; touch-action:pan-x pan-y; will-change:scroll-position;
  padding:8px 0 34px; margin-bottom:-34px;            /* ruimte voor de lift en de schaduw bij hover */
}
.v2-dd-tips .dps-kb-spoor::-webkit-scrollbar{ display:none; }
.v2-dd-tips .v2-sl-bar{ position:relative; z-index:3; }   /* boven de onderrand van het spoor, anders vangt het spoor de dot-klik */
.v2-dd-tips .dps-kb-spoor .dps-kb-kaart{ scroll-snap-align:start; }
.v2-dd-tips .dps-kb-spoor.is-slepen{ scroll-snap-type:none; user-select:none; }
/* de wereldbolcursor van de andere sliders (klasse v2-sleep zet het JS): eigen muisaanwijzer uit */
@media (hover:hover) and (pointer:fine){ .v2-dd-tips .dps-kb-spoor.v2-sleep, .v2-dd-tips .dps-kb-spoor.v2-sleep a{ cursor:none; } }
.v2-dd-tips .dps-kb-spoor.is-slepen .dps-kb-kaart{ transition:none; }
.v2-dd-tips .dps-kb-spoor.is-slepen .dps-kb-kaart:hover{ transform:none; }
.v2-dd-tips .dps-kb-spoor.is-slepen .dps-kb-kaart:hover img{ transform:none; }
.v2-dd-tips .dps-kb-spoor:focus-visible{ outline:2px solid #219DF2; outline-offset:4px; }
/* DPS Media, artikelpagina's: de slider "Meer uit de kennisbank" in de stijl van de
   homepage-casekaarten (21-09-2026): foto vult de kaart, hoeken 0/37,5px, pill
   linksboven, titel wit op de foto met donker verloop, leestijd rechtsonder.
   De hub van de reeks staat vooraan als brede kaart. Gevuld door
   dpsmedia-werkmap/bouw-meer-uit-kennisbank.py. Eigen bestand, niets gedeelds geraakt. */
.v2-dd-tips .v2-sl-kaart.dps-kb-kaart{
  --kb-b:clamp(250px, 27.4vw, 395px); --kb-h:clamp(230px, 20.5vw, 296px);
  flex:0 0 var(--kb-b); width:var(--kb-b); height:var(--kb-h);
  padding:0; gap:0; background:#0a0824; border-radius:0 37.5px; overflow:hidden;
  position:relative; display:block;
  box-shadow:0 18px 40px -22px rgba(10,8,36,.55);
  transition:transform .55s cubic-bezier(.22,.61,.36,1), box-shadow .55s cubic-bezier(.22,.61,.36,1);
}
.v2-dd-tips .dps-kb-kaart:hover{ transform:translateY(-4px); box-shadow:0 26px 48px -22px rgba(10,8,36,.7); }
.v2-dd-tips .dps-kb-kaart > a{ position:absolute; inset:0; display:block; color:#fff; text-decoration:none; }
.v2-dd-tips .dps-kb-kaart > a:focus-visible{ outline:3px solid #219DF2; outline-offset:-3px; border-radius:0 37.5px; }
.v2-dd-tips .dps-kb-kaart img{
  position:absolute; inset:0; width:100% !important; height:100% !important; max-width:none;
  object-fit:cover; object-position:center; display:block; border-radius:0;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.v2-dd-tips .dps-kb-kaart:hover img{ transform:scale(1.045); }
.v2-dd-tips .dps-kb-kaart > a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:58%; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(0,2,29,.9), rgba(0,2,29,.45) 55%, transparent);
}
.v2-dd-tips .dps-kb-pill{
  position:absolute; left:20px; top:20px; z-index:2;
  padding:7px 16px; border-radius:999px;
  background:linear-gradient(90deg,#6121DF,#911CEA);
  color:#fff; font-size:13px; font-weight:700; line-height:1.2; white-space:nowrap;
}
.v2-dd-tips .dps-kb-pill.is-hub{ background:linear-gradient(90deg,#219DF2,#4A42DD); }
.v2-dd-tips .dps-kb-onder{
  position:absolute; left:24px; right:24px; bottom:18px; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px; color:#fff;
}
.v2-dd-tips .dps-kb-kaart h3{
  margin:0 !important; color:#fff !important; font-size:16px; font-weight:800; line-height:1.25;
  letter-spacing:-.01em; text-align:left; max-width:26ch; text-wrap:balance;
}
.v2-dd-tips .dps-kb-meta{ flex:none; font-size:12px; font-weight:700; color:rgba(255,255,255,.75); white-space:nowrap; padding-bottom:2px; }
@media (max-width:767px){
  .v2-dd-tips .v2-sl-kaart.dps-kb-kaart{ --kb-b:84vw; --kb-h:60vw; }
  .v2-dd-tips .dps-kb-onder{ left:16px; right:16px; bottom:14px; }
  .v2-dd-tips .dps-kb-pill{ left:14px; top:14px; }
}
@media (prefers-reduced-motion:reduce){
  .v2-dd-tips .dps-kb-kaart, .v2-dd-tips .dps-kb-kaart img{ transition:none; }
  .v2-dd-tips .dps-kb-kaart:hover{ transform:none; } .v2-dd-tips .dps-kb-kaart:hover img{ transform:none; }
}

/* link naar de reekspagina onder de kop van de slider (21-09) */
.v2-dd-tips .dps-kb-alle{ display:inline-block; margin:-14px 0 20px; font-size:14px; font-weight:700; color:#4A42DD; text-decoration:none; }
.v2-dd-tips .dps-kb-alle:hover{ text-decoration:underline; }