/* OostendorpNieuws — frontend slider styles */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--ink:#000;--paper:#fff;--faint:rgba(0,0,0,.07);--f-h:'Arial Black',Arial,sans-serif;--f-b:'Helvetica Neue',Arial,sans-serif}
html,body{width:100%;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}

/* ── display shell ──────────────────────────── */
#dp{position:fixed;inset:0;overflow:hidden;background:var(--paper);z-index:1}
#trk{display:flex;width:100%;height:100%;will-change:transform}

/* ── slide base ─────────────────────────────── */
.sl,.sl-sp,.sl-io{
  min-width:100%;height:100%;
  background:var(--paper);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column
}

/* top rule */
.sl-rule{height:7px;background:var(--ink);flex-shrink:0}

/* inner content zone */
.sl-in{
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  overflow:hidden
}

/* category */
.cat{flex-shrink:0;display:flex;align-items:stretch;gap:.55em;margin-bottom:.8em}
.cat-bar{display:block;width:3px;flex-shrink:0;background:var(--ink);align-self:stretch;min-height:.9em}
.cat-txt{font-family:var(--f-b);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.28em;align-self:center;line-height:1}

/* headline */
.hl{flex-shrink:0;font-weight:900;letter-spacing:0;line-height:.93;word-break:break-word;hyphens:auto;margin-bottom:.32em}

/* body */
.bd{flex-shrink:0;font-family:var(--f-b);line-height:1.5;overflow:hidden}

/* progress */
.prog{position:absolute;bottom:0;left:0;height:4px;background:var(--ink);width:0}

/* ── split slide ────────────────────────────── */
.sl-sp{flex-direction:row}
.sp-txt{display:flex;flex-direction:column;overflow:hidden}
.sp-div{width:2px;flex-shrink:0;background:var(--ink)}
.sp-img{flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.sp-img img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;padding:3%}

@media(max-width:640px){
  .sl-sp{flex-direction:column}
  .sp-div{width:auto;height:2px}
  .sp-txt,.sp-img{flex-basis:auto !important}
  .sp-img{flex:1;padding:0}
  .sp-img img{padding:2%}
}

/* ── image-only slide ───────────────────────── */
.io-img{flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:2.5% 3%}
.io-img img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.io-ft{flex-shrink:0;border-top:2px solid var(--ink);padding:.7rem 1.6rem;display:flex;align-items:baseline;gap:1rem}
.io-cat{font-family:var(--f-b);font-size:clamp(.44rem,.9vmin,.72rem);font-weight:800;text-transform:uppercase;letter-spacing:.3em;opacity:.38;flex-shrink:0}
.io-ttl{font-size:clamp(.85rem,2vmin,1.45rem);font-weight:900;letter-spacing:0;line-height:1.1}

/* ── HUD ────────────────────────────────────── */
#ctr{
  position:fixed;bottom:1.6rem;right:1.9rem;
  font-family:var(--f-b);font-size:clamp(.58rem,1vw,.78rem);
  font-weight:800;letter-spacing:.14em;
  opacity:.18;z-index:30;user-select:none;pointer-events:none
}
.pause{
  position:fixed;right:1.7rem;top:1.4rem;
  width:2.6rem;height:2.6rem;
  display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:var(--ink);
  cursor:pointer;z-index:31;opacity:.18;
  transition:opacity .18s,background .18s;
  -webkit-tap-highlight-color:transparent
}
#dp:hover .pause,.pause:hover,.pause.on{opacity:.62;background:var(--faint)}
.pause svg{width:1.15rem;height:1.15rem}
.pause .ico-play{display:none}
.pause.on .ico-pause{display:none}
.pause.on .ico-play{display:block}
.snav{
  position:fixed;left:50%;bottom:1.45rem;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;gap:.48rem;
  max-width:min(76vw,46rem);z-index:31
}
.snav button{
  width:.58rem;height:.58rem;border-radius:999px;
  border:1.5px solid var(--ink);background:transparent;
  opacity:.2;cursor:pointer;padding:0;flex:0 0 auto;
  transition:opacity .16s,background .16s,transform .16s;
  -webkit-tap-highlight-color:transparent
}
#dp:hover .snav button{opacity:.32}
.snav button:hover{opacity:.7;transform:scale(1.2)}
.snav button.on{background:var(--ink);opacity:.55}
.nav{
  position:fixed;top:50%;transform:translateY(-50%);
  background:transparent;border:none;cursor:pointer;z-index:30;
  width:clamp(2.8rem,5vw,4.5rem);height:clamp(5rem,12vh,8rem);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s,background .18s;
  -webkit-tap-highlight-color:transparent
}
#dp:hover .nav{opacity:.16}
.nav:hover{opacity:.55 !important;background:var(--faint)}
.nav svg{width:1.5rem;height:1.5rem}
.nav.l{left:0}.nav.r{right:0}
@media(max-width:640px){
  .pause{right:1rem;top:1rem;width:2.35rem;height:2.35rem}
  .snav{bottom:1rem;gap:.4rem}
  .snav button{width:.52rem;height:.52rem}
  #ctr{right:1rem;bottom:2.35rem}
}

#ticker{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--ink);color:var(--paper);
  height:2.5rem;display:none;align-items:center;overflow:hidden;z-index:30
}
.ti{
  display:inline-block;white-space:nowrap;
  font-family:var(--f-b);font-size:clamp(.68rem,1.4vw,.9rem);
  font-weight:700;letter-spacing:.05em;
  animation:roll 50s linear infinite
}
@keyframes roll{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}

/* ── toast ──────────────────────────────────── */
#toast{
  position:fixed;top:1.1rem;right:1.2rem;
  background:var(--ink);color:var(--paper);
  font-family:var(--f-b);font-size:.74rem;font-weight:800;letter-spacing:.07em;
  padding:.56rem 1rem;z-index:9999;
  transform:translateY(-200%);
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
  pointer-events:none
}
#toast.on{transform:translateY(0)}