/* VVRI publications slider
   Loaded after site.css, so the scoped !important rules below are the ones
   that win over the generic .publication-* rules in site.css. */

.publication-slider{
  margin-top:4px;
}

/* ---------- head: label + controls ---------- */
.publication-slider-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 0 18px;
}
.publication-slider-head p{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:5px;
  color:#6a7d8f;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.02em;
}
.publication-hint{
  color:#0c5fa8;
  font-size:.95rem;
  font-weight:800;
  letter-spacing:0;
}
.publication-hint b{
  font-weight:900;
}
.publication-slider-controls{
  display:none;
  align-items:center;
  gap:9px;
}
.publication-slider.is-enhanced .publication-slider-controls{
  display:flex;
}
.publication-slider-controls button{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:0 20px;
  border:1px solid #cfe0ee;
  border-radius:999px;
  background:#fff;
  color:#123b68;
  font:inherit;
  font-size:.95rem;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 7px 18px rgba(18,59,104,.07);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.publication-slider-controls .publication-next{
  border-color:#0c5fa8;
  background:#0c5fa8;
  color:#fff;
  box-shadow:0 10px 24px rgba(12,95,168,.28);
}
.publication-slider-controls button:hover:not(:disabled){
  transform:translateY(-1px);
  border-color:#b9cedf;
  box-shadow:0 11px 22px rgba(18,59,104,.12);
}
.publication-slider-controls .publication-next:hover:not(:disabled){
  border-color:#0a4e8c;
  background:#0a4e8c;
  box-shadow:0 14px 30px rgba(12,95,168,.34);
}
.publication-slider-controls button:disabled{
  opacity:.32;
  cursor:default;
  box-shadow:none;
}
.publication-count{
  min-width:62px;
  text-align:center;
  color:#123b68;
  font-size:1rem;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

/* ---------- track: one publication per view ---------- */
.publication-track{
  display:flex;
  align-items:stretch;
  gap:20px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:inline mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding:3px 2px 6px;
}
.publication-track::-webkit-scrollbar{
  display:none;
}
.publication-track:focus-visible{
  outline:2px solid #0c5fa8;
  outline-offset:4px;
  border-radius:18px;
}
.publication-track .publication-card{
  flex:0 0 100%;
  width:100%;
  max-width:100%;
  min-width:0;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

/* ---------- card: media beside copy on desktop ---------- */
@media(min-width:900px){
  .publication-track .publication-card{
    display:grid!important;
    grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
    align-items:stretch;
  }
  .publication-track .publication-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:34px 38px!important;
  }
  .publication-track .publication-copy h3{
    font-size:1.65rem!important;
  }
  .publication-track .publication-copy p{
    font-size:1rem!important;
    margin-bottom:0;
  }
}

.publication-track .publication-media{
  justify-content:center;
  min-height:0!important;
  padding:18px 18px 0;
}
.publication-track .publication-image{
  width:100%;
  height:420px!important;
  min-height:0!important;
  padding:0!important;
  background:transparent!important;
  overflow:hidden;
}
.publication-track .publication-image img{
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
}
.publication-track .publication-media .btn-viewer{
  margin:16px 0 18px!important;
}

/* "Nieuw" badge */
.publication-new{
  position:relative;
}
.publication-new::after{
  content:"Nieuw";
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  padding:6px 9px;
  border-radius:999px;
  background:#123b68;
  color:#fff;
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  box-shadow:0 5px 14px rgba(18,59,104,.18);
}

@media(max-width:899px){
  .publication-track .publication-image{
    height:320px!important;
  }
}
@media(max-width:760px){
  .publication-slider-head{
    align-items:flex-end;
  }
  .publication-slider-head p{
    max-width:54%;
  }
  .publication-track{
    gap:14px;
  }
  .publication-track .publication-media{
    padding:14px 14px 0;
  }
  .publication-track .publication-image{
    height:250px!important;
  }
}
@media(max-width:420px){
  .publication-slider-controls button{
    width:40px;
    height:40px;
  }
  .publication-track .publication-image{
    height:215px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .publication-track{
    scroll-behavior:auto;
  }
}


/* ---------- viewport: overlay arrows + peek of the next slide ---------- */
.publication-viewport{
  position:relative;
}

/* A sliver of the following card is the clearest signal that there is more
   to see, so the card stops short of the full track width. */
@media(min-width:760px){
  .publication-track .publication-card{
    flex-basis:94%;
    width:94%;
  }
}
@media(max-width:759px){
  .publication-track .publication-card{
    flex-basis:89%;
    width:89%;
  }
}

.publication-nav{
  position:absolute;
  top:calc(50% - 26px);
  z-index:3;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  background:rgba(12,47,89,.9);
  color:#fff;
  font:inherit;
  font-size:1.5rem;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(12,47,89,.34);
  transition:transform .18s ease,background .18s ease,opacity .18s ease;
}
.publication-nav span{
  transform:translateY(-1px);
}
.publication-nav-prev{
  left:14px;
}
.publication-nav-next{
  right:14px;
}
.publication-nav:hover:not(:disabled){
  background:#0c2f59;
  transform:scale(1.07);
}
.publication-nav:disabled{
  opacity:0;
  pointer-events:none;
}

/* Controls are a progressive enhancement; without the script they do nothing. */
.publication-nav{
  display:none;
}
.publication-slider.is-enhanced .publication-nav{
  display:grid;
}

/* ---------- progress rail ---------- */
.publication-progress{
  height:5px;
  margin-top:16px;
  border-radius:999px;
  background:#e3edf6;
  overflow:hidden;
}
.publication-progress span{
  display:block;
  height:100%;
  width:6.25%;
  border-radius:999px;
  background:linear-gradient(90deg,#1495ff,#0c2f59);
  transition:width .3s ease;
}

@media(max-width:900px){
  .publication-slider-head{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
  }
  .publication-slider-head p{
    max-width:none;
  }
  .publication-slider-controls{
    justify-content:space-between;
  }
  .publication-slider-controls button{
    flex:1;
    justify-content:center;
  }
  /* Below this width the card stacks media over copy, so a vertically
     centred overlay arrow lands on the text. Swiping and the full-width
     buttons above cover navigation here. */
  .publication-slider.is-enhanced .publication-nav{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .publication-nav,
  .publication-progress span{
    transition:none;
  }
}