/* ============================================================
   Zo klinken wij — de jukebox
   ============================================================ */
.muziek-body{background:var(--blue-950)}

.mz-kop{position:relative;padding:clamp(7rem,14vh,9.5rem) 0 clamp(1.6rem,4vh,2.6rem);overflow:hidden}
.mz-kop h1{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(2.2rem,6vw,4.6rem);line-height:1;margin:.6rem 0 .9rem;
}
.mz-kop .lead{max-width:54ch}
.mz-stats{display:flex;flex-wrap:wrap;gap:clamp(1.2rem,4vw,2.6rem);margin-top:1.6rem}
.mz-stats b{
  display:block;font-family:var(--font-display);font-size:clamp(1.6rem,3.2vw,2.4rem);
  color:var(--yellow);line-height:1;
}
.mz-stats span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}

.mz-vlak{padding:0 0 clamp(4rem,9vh,6rem)}
.mz-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(1.2rem,3vw,2.4rem);align-items:start}
@media (max-width:980px){ .mz-grid{grid-template-columns:1fr} }

/* ---- de speler ---- */
.mz-speler{position:sticky;top:92px}
.mz-doek{
  position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,var(--blue-850),var(--blue-950));
  box-shadow:0 30px 70px rgba(3,5,28,.55),inset 0 0 0 1px rgba(255,255,255,.1);
}
.mz-doek img{width:100%;height:100%;object-fit:cover;display:block;opacity:.62;transition:opacity .4s var(--ease),transform 1s var(--ease)}
.mz-doek:hover img{opacity:.72;transform:scale(1.03)}
.mz-doek iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:20px;z-index:2}
.mz-doek.speelt img,.mz-doek.speelt .mz-play,.mz-doek.speelt .mz-doekinfo{display:none}

.mz-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(64px,9vw,92px);aspect-ratio:1;border:0;border-radius:50%;cursor:pointer;
  background:var(--yellow);color:var(--ink);
  box-shadow:0 14px 40px rgba(255,224,27,.35);
  display:grid;place-items:center;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.mz-play{text-decoration:none}
.mz-play svg{width:52%;height:52%;fill:currentColor}
.mz-play:hover{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 18px 50px rgba(255,224,27,.5)}
.mz-doekinfo{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(.9rem,2.4vw,1.4rem);
  background:linear-gradient(180deg,transparent,rgba(4,7,32,.92));
  display:grid;gap:.2rem;pointer-events:none;
}
.mz-jaar{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}
.mz-doekinfo b{font-family:var(--font-display);font-size:clamp(1.1rem,2.6vw,1.9rem);line-height:1.05;text-transform:uppercase}

.mz-privacy{margin:.9rem 0 0;font-size:.76rem;color:rgba(255,255,255,.45);max-width:52ch}
.mz-knoppen{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}

/* ---- de setlijst ---- */
.mz-zoek{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem}
.mz-zoek input{
  flex:1;min-width:0;padding:.7rem 1rem;border-radius:12px;border:0;
  background:rgba(255,255,255,.07);color:#fff;font:inherit;font-size:.95rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.mz-zoek input::placeholder{color:rgba(255,255,255,.4)}
.mz-zoek input:focus{outline:2px solid var(--yellow);outline-offset:2px}
.mz-zoek span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap}

.mz-lijst{
  list-style:none;margin:0;padding:.3rem;display:flex;flex-direction:column;gap:.2rem;
  max-height:min(62vh,640px);overflow:auto;overscroll-behavior:contain;
  border-radius:16px;background:rgba(255,255,255,.03);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.mz-lijst a{
  display:grid;grid-template-columns:2rem 1fr auto;align-items:center;gap:.8rem;
  width:100%;text-align:left;padding:.6rem .8rem;border:0;border-radius:10px;cursor:pointer;
  background:none;color:#fff;font:inherit;text-decoration:none;transition:background .16s;
}
.mz-lijst a:hover{background:rgba(255,255,255,.08)}
.mz-lijst a:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.mz-lijst .nr{font-family:var(--font-display);font-size:.85rem;color:rgba(255,255,255,.35)}
.mz-lijst .naam{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem}
.mz-lijst .duur{font-size:.78rem;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums}
.mz-lijst li.aan a{background:rgba(255,224,27,.16)}
.mz-lijst li.aan .nr{color:var(--yellow)}
.mz-lijst li.aan .naam{font-weight:700}
.mz-leeg{padding:1.4rem;text-align:center;color:rgba(255,255,255,.5);font-size:.9rem}

/* ---- blokje op de startpagina ---- */
.mz-teaser{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;margin-bottom:2rem}
.mz-teaser a{
  position:relative;display:block;border-radius:var(--r-md);overflow:hidden;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.mz-teaser a:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--yellow),var(--shadow-2)}
.mz-teaser .beeld{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--blue-850)}
.mz-teaser img{width:100%;height:100%;object-fit:cover;opacity:.7;transition:transform 1s var(--ease),opacity .4s}
.mz-teaser a:hover img{transform:scale(1.06);opacity:.9}
.mz-teaser .tekst{display:block;padding:.8rem 1rem 1rem}
.mz-teaser b{display:block;font-family:var(--font-display);text-transform:uppercase;font-size:1.05rem;line-height:1.1}
.mz-teaser .meta{display:block;margin-top:.25rem;font-size:.76rem;color:rgba(255,255,255,.55)}
.mz-teaser .knop{
  position:absolute;right:.8rem;top:.8rem;width:38px;height:38px;border-radius:50%;
  background:var(--yellow);color:var(--ink);display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(255,224,27,.3);
}
.mz-teaser .knop svg{width:52%;height:52%;fill:currentColor}

@media (max-width:640px){
  .mz-speler{position:static}
  .mz-lijst{max-height:none}
}

/* kijken zonder insluiten: het beeld blijft staan, met een grote knop erop */
.mz-doek.uitwijk img{opacity:.28;transform:scale(1.04)}
.mz-doek.uitwijk .mz-play,.mz-doek.uitwijk .mz-doekinfo{display:none}
.mz-doek.uitwijk .mz-hapert{background:linear-gradient(160deg,rgba(6,10,43,.72),rgba(4,7,32,.86))}
.mz-uittitel{margin:0}
.mz-uittitel b{
  font-family:var(--font-display);text-transform:uppercase;line-height:1.05;
  font-size:clamp(1.2rem,3vw,2.1rem);
}
.mz-hapert .btn .ico{margin-right:.15rem}
.mz-opnieuw{display:block;margin:.5rem auto 0;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:.8rem;color:rgba(255,255,255,.55);text-decoration:underline}
.mz-opnieuw:hover{color:var(--yellow)}

/* als YouTube het insluiten weigert (adblocker, privacyinstelling) */
.mz-hapert{
  position:absolute;inset:0;z-index:3;display:grid;place-content:center;gap:.7rem;
  overflow:auto;
  padding:clamp(1rem,3vw,2rem);text-align:center;
  background:linear-gradient(160deg,rgba(6,10,43,.94),rgba(4,7,32,.97));
}
.mz-hapert p{margin:0;color:rgba(255,255,255,.85)}
.mz-hapert b{color:var(--yellow);font-family:var(--font-display);text-transform:uppercase}
.mz-hapert .waarom{font-size:.84rem;color:rgba(255,255,255,.55);max-width:40ch;margin-inline:auto}
.mz-hapert .btn{justify-self:center;margin-top:.4rem}

@media (max-width:640px){
  .mz-hapert{gap:.4rem;padding:.8rem}
  .mz-uittitel b{font-size:1.15rem}
  .mz-hapert .waarom{font-size:.72rem;line-height:1.4}
  .mz-hapert .btn{padding-block:.5rem}
}