/* 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:-.035em;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:-.02em;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
}
.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}

#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)}