/* VS News Studio – Slider CSS v2 */
.vsns-slider-wrap{margin:10px 0}
.vsns-slider-heading{font-weight:800;font-size:20px;margin:0 0 8px 4px}

.vsns-slider{
  --vsns-radius: 14px;
  --vsns-shadow: 0 8px 28px rgba(0,0,0,.10);
  --vsns-brand: #2563eb;
  --vsns-gap: 12px;
  position: relative;
  border-radius: var(--vsns-radius);
  box-shadow: var(--vsns-shadow);
  overflow: hidden;
  background: #fff;
}

.vsns-slider-viewport{position: relative; width: 100%; overflow: hidden;}
/* ratio fallback; JS zet padding-top of vaste hoogte */
.vsns-slider-viewport::before{
  content:""; display:block; width:100%; padding-top:56.25%;
}

.vsns-slides{
  position:absolute; inset:0;
  display:flex; align-items:stretch;
  transition: transform .45s ease;
  gap: var(--vsns-gap);
  padding: 0 calc(var(--vsns-gap) / 2);
}

.vsns-slide{
  position: relative;
  flex: 0 0 auto; /* breedte via JS: 100%/perView minus gap-compensatie */
  height: 100%;
  border-radius: 12px; overflow: hidden;
  background:#000;
}

.vsns-slide-media{position:absolute; inset:0;}
.vsns-slide-media img{width:100%; height:100%; object-fit:cover; display:block}
.vsns-slide-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  color:#6b7280; font-weight:600;
}

/* Overlay: compact, met titel-chip die een hover achtergrond krijgt */
.vsns-slide-overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 12px 12px;
  color:#fff; pointer-events:none;
}
.vsns-slide-title-wrap{
  display:inline-block; max-width:95%;
  padding:6px 10px; border-radius:10px;
  background: rgba(0,0,0,.35); /* basis zichtbaar */
  transition: background .2s ease;
}
.vsns-slide:hover .vsns-slide-title-wrap{
  /* echte hoverkleur wordt inline via CSS var gezet door JS */
  background: var(--vsns-hover-bg, rgba(0,0,0,.55));
}
.vsns-slide-title{
  margin:0; font-size: clamp(15px, 1.6vw, 18px); font-weight:800; line-height:1.25;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.vsns-slide-meta{
  margin-top:6px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  font-size: 13px; opacity:.95; pointer-events:none;
}
.vsns-more{ margin-left:auto; font-weight:600; opacity:.95 }

/* Controls */
.vsns-prev, .vsns-next{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:5; width:36px; height:36px; border-radius:999px; border:0;
  background: rgba(255,255,255,.9); color:#0f172a; cursor:pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.vsns-prev{ left:6px } .vsns-next{ right:6px }
.vsns-prev:hover, .vsns-next:hover{ background:#fff }

/* Dots */
.vsns-dots{ position:absolute; left:0; right:0; bottom:8px; display:flex; gap:8px; justify-content:center; z-index:5; }
.vsns-dots button{
  width:10px; height:10px; border-radius:999px; border:0;
  background: rgba(255,255,255,.65); cursor:pointer;
}
.vsns-dots button[aria-selected="true"]{ background: var(--vsns-brand); }

/* Empty */
.vsns-slider--empty{ padding:14px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; }

/* Titel-chip */
.vsns-slide-title-wrap {
  display:inline-block; 
  max-width:95%;
  padding:6px 10px; 
  border-radius:10px;
  background: rgba(255,255,255,.85); /* <-- standaard lichte achtergrond */
  transition: background .2s ease, color .2s ease;
}

.vsns-slide-title {
  margin:0; 
  font-size: clamp(15px, 1.6vw, 18px); 
  font-weight:800; 
  line-height:1.25;
  color:#111; /* zwarte tekst ipv wit */
  text-shadow:none; /* geen donkere schaduw nodig meer */
}

.vsns-slide:hover .vsns-slide-title-wrap {
  background: rgba(255,255,255,.95); /* bij hover nog witter */
}

/* Titel in lichte bubble zodat altijd leesbaar */
.vsns-slide-title-wrap {
  display:inline-block;
  max-width:95%;
  padding:6px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.88);
  transition:background .2s ease;
}
.vsns-slide-title {
  margin:0;
  font-weight:800;
  line-height:1.25;
  color:#111;
  text-shadow:none;
}
.vsns-slide:hover .vsns-slide-title-wrap {
  background:rgba(255,255,255,.96);
}

/* Overlay onderin */
.vsns-slide-overlay {
  position:absolute;
  left:0; right:0; bottom:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px 14px;
  background:linear-gradient(to top, rgba(0,0,0,.16), rgba(0,0,0,0) 60%);
}

/* Dots onder de slider */
.vsns-dots {
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top:10px;
}
.vsns-dot {
  width:8px; height:8px;
  border-radius:50%;
  background:#cbd5e1;
}
.vsns-dot.is-active {
  background:#2563eb;
}

/* Pijlen kleiner en buiten de kaart */
.vsns-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:34px; height:34px;
  border-radius:50%;
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:3;
}
.vsns-arrow--prev { left:-8px; }
.vsns-arrow--next { right:-8px; }
.vsns-arrow:hover { background:#f8fafc; }

/* Mobiel: 1 brede kaart per view */
@media (max-width: 780px) {
  .vsns-slider { padding-inline:8px; }
  .vsns-track { gap:12px; }

  .vsns-slide {
    min-width:82%;
    max-width:82%;
    height:280px;
    border-radius:14px;
  }
  .vsns-slide img {
    object-fit:cover;
    width:100%;
    height:100%;
    border-radius:14px;
  }

  .vsns-slide-title { font-size:16px; }
  .vsns-slide-title-wrap { padding:6px 10px; }

  .vsns-arrow {
    width:30px; height:30px;
    top:46%;
    box-shadow:0 4px 14px rgba(0,0,0,.08);
  }
  .vsns-arrow--prev { left:-4px; }
  .vsns-arrow--next { right:-4px; }

  .vsns-dots { margin-top:12px; }
}

@media (max-width: 420px) {
  .vsns-slide { min-width:86%; max-width:86%; height:260px; }
  .vsns-slide-title { font-size:15px; }
}