/* ============================================================
   TWIZT — detailpagina van een single (/muziek/{slug})
   Bouwt voort op de variabelen uit css/twizt.css
   ============================================================ */

/* ---------- HERO ---------- */
.sg-hero{background:var(--magenta);padding:36px 0 60px;color:#fff;}
.sg-terug{display:inline-flex;align-items:center;gap:8px;color:#fff;opacity:.85;
    font-family:'Fredoka',sans-serif;font-weight:600;text-transform:uppercase;
    letter-spacing:1px;font-size:.78rem;margin-bottom:26px;}
.sg-terug:hover{opacity:1;color:var(--yellow);}

.sg-cover{position:relative;border-radius:18px;overflow:hidden;
    box-shadow:0 26px 50px rgba(0,0,0,.33);line-height:0;max-width:420px;}
.sg-cover img{width:100%;height:auto;display:block;aspect-ratio:1;object-fit:cover;}

.sg-titel{margin:16px 0 14px;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.05;}
.sg-titel .sticker-fill{background:linear-gradient(120deg,#FBC42A 0%,#FFD95E 55%,#FFF0B8 100%);
    color:var(--magenta);text-shadow:none;}
.sg-subtitel{font-family:'Fredoka',sans-serif;font-weight:600;color:var(--yellow);
    font-size:clamp(1rem,2vw,1.3rem);margin:0 0 16px;}
.sg-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-weight:600;
    color:rgba(255,255,255,.9);margin-bottom:24px;}
.sg-meta .tz-ico{color:var(--yellow);margin-right:2px;}
.sg-scheiding{opacity:.5;margin:0 4px;}

.sg-audio{width:100%;max-width:460px;margin-bottom:26px;display:block;}

/* ---------- STREAMINGDIENSTEN ---------- */
.sg-luister-kop{font-family:'Fredoka',sans-serif;font-weight:600;text-transform:uppercase;
    letter-spacing:1.5px;font-size:.76rem;color:rgba(255,255,255,.75);margin:0 0 12px;}
.sg-diensten{display:flex;flex-wrap:wrap;gap:12px;}
.sg-dienst{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--ink);
    border-radius:50px;padding:11px 22px;font-family:'Fredoka',sans-serif;font-weight:600;
    font-size:.92rem;transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease;
    box-shadow:0 5px 0 rgba(0,0,0,.18);}
.sg-dienst:hover{transform:translateY(-3px);box-shadow:0 8px 0 rgba(0,0,0,.18);color:var(--ink);}
.sg-dienst:active{transform:translateY(1px);box-shadow:0 3px 0 rgba(0,0,0,.18);}
.sg-dienst .tz-ico{font-size:1.25rem;}
.sg-spotify .tz-ico{color:#1DB954;}
.sg-apple   .tz-ico{color:#FA243C;}
.sg-deezer  .tz-ico{color:#A238FF;}
.sg-youtube .tz-ico{color:#FF0000;}

/* ---------- GEDEELDE KOP ---------- */
.sg-h2{font-size:clamp(1.5rem,3.4vw,2.2rem);margin:0 0 26px;line-height:1.05;}
.sg-spark{color:var(--magenta);font-size:.6em;vertical-align:middle;}

/* ---------- VIDEOCLIP ---------- */
.sg-clip{background:var(--teal);padding:58px 0 64px;}
.sg-clip .sg-h2 .sticker{color:var(--teal);}
.sg-video{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;
    background:#000;box-shadow:0 22px 46px rgba(0,0,0,.3);}
.sg-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---------- SONGTEKST ---------- */
.sg-tekst{background:var(--cream);padding:58px 0 64px;}
.sg-tekst-blok{background:#fff;border-radius:18px;padding:34px;max-width:720px;
    box-shadow:0 12px 30px rgba(0,0,0,.07);line-height:2;font-weight:500;color:#4a3a44;}

/* ---------- MEER VAN TWIZT ---------- */
.sg-meer{background:var(--yellow);padding:58px 0 66px;}
.sg-meer .sg-h2 .sticker{color:var(--magenta);}
.sg-meer .singles-head{margin-bottom:34px;}

/* ---------- SINGLE NIET GEVONDEN ---------- */
.sg-leeg{background:var(--magenta);color:#fff;padding:90px 0 100px;text-align:center;}
.sg-leeg h1{font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(1.6rem,4vw,2.6rem);margin:0 0 14px;}
.sg-leeg p{font-weight:600;color:rgba(255,255,255,.9);margin-bottom:28px;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:991px){
    .sg-hero{padding:26px 0 48px;}
    .sg-cover{margin:0 auto 10px;}
    .sg-meta{justify-content:center;}
    .sg-diensten{justify-content:center;}
    .sg-luister-kop{text-align:center;}
    .sg-titel,.sg-subtitel{text-align:center;}
    .sg-audio{margin-left:auto;margin-right:auto;}
    .sg-tekst-blok{padding:24px;}
}
@media(max-width:575px){
    .sg-dienst{padding:10px 16px;font-size:.84rem;}
}

/* ---------- Audiospeler ---------- */
.sg-speler{display:flex;align-items:center;gap:14px;margin-bottom:26px;max-width:520px;}
.sg-speler .sg-audio{flex:1;margin-bottom:0;}
.sg-duur{font-family:'Fredoka',sans-serif;font-weight:600;color:rgba(255,255,255,.8);font-size:.9rem;flex:none;}