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

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

.ad-titel{margin:0 0 18px;font-size:clamp(2rem,5vw,3.4rem);line-height:1.08;}
.ad-meta{display:flex;flex-wrap:wrap;gap:10px 26px;font-weight:600;
    color:rgba(255,255,255,.95);margin:0;}
.ad-meta span{display:inline-flex;align-items:center;gap:8px;}
.ad-meta .tz-ico{color:var(--yellow);}

.ad-status{display:inline-flex;align-items:center;gap:9px;border-radius:50px;
    padding:9px 20px;font-family:'Fredoka',sans-serif;font-weight:600;
    font-size:.88rem;margin:0 0 16px;}
.ad-status-afgelast,.ad-status-geannuleerd{background:#b53434;color:#fff;}
.ad-status-verplaatst,.ad-status-uitgesteld{background:#fff;color:#8a5a00;}
.ad-status-online{background:var(--teal);color:#fff;}

/* ---------- INHOUD ---------- */
.ad-main{background:var(--cream);padding:56px 0 64px;}
.ad-blok{background:#fff;border-radius:20px;padding:32px;margin-bottom:26px;
    box-shadow:0 12px 30px rgba(0,0,0,.07);}
.ad-h2{font-family:'Fredoka',sans-serif;font-weight:700;color:var(--magenta);
    text-transform:uppercase;letter-spacing:.5px;font-size:1.25rem;
    margin:0 0 18px;display:flex;align-items:center;gap:10px;}
.ad-tekst{font-weight:500;line-height:1.8;color:#4a3a44;}

/* ---------- PROGRAMMA ---------- */
.ad-programma{list-style:none;padding:0;margin:0;border-radius:14px;overflow:hidden;
    border:2px solid #f0e8dc;}
.ad-programma li{display:flex;align-items:center;gap:18px;padding:14px 18px;
    border-bottom:1px solid #f0e8dc;border-left:5px solid transparent;}
.ad-programma li:last-child{border-bottom:0;}
.ad-programma li.is-twizt{border-left-color:var(--magenta);background:rgba(190,42,126,.06);}
.ad-tijd{flex:0 0 108px;font-family:'Fredoka',sans-serif;font-weight:700;
    color:var(--magenta);font-size:1rem;}
.ad-artiest{font-weight:600;color:var(--ink);}
.ad-programma li.is-twizt .ad-artiest{color:var(--magenta);}

/* ---------- INFOKAART ---------- */
.ad-kaart{background:#fff;border-radius:20px;padding:26px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);border-top:7px solid var(--magenta);
    position:sticky;top:calc(var(--header-h) + 18px);}
.ad-prijs{background:var(--yellow);border-radius:14px;padding:16px;text-align:center;
    margin-bottom:22px;border-bottom:4px solid #d9a200;}
.ad-prijs strong{display:block;font-family:'Fredoka',sans-serif;font-weight:700;
    color:var(--magenta);font-size:1.5rem;line-height:1.1;margin-top:4px;}
.ad-label{font-size:.68rem;text-transform:uppercase;letter-spacing:1.2px;
    font-weight:700;color:#8a7a84;}
.ad-regel{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px;}
.ad-ico{flex:0 0 38px;height:38px;border-radius:10px;background:var(--cream);
    color:var(--magenta);display:flex;align-items:center;justify-content:center;font-size:1.1rem;}
.ad-regel p{margin:2px 0 0;font-weight:600;color:var(--ink);}
.ad-adres{font-size:.86rem;color:#8a7a84 !important;font-weight:500 !important;margin-bottom:10px !important;}
.ad-knoppen{display:flex;flex-direction:column;gap:10px;margin-top:24px;}
.ad-knoppen .pill{justify-content:center;}

/* ---------- ANDERE OPTREDENS ---------- */
.ad-meer{background:var(--yellow);padding:54px 0 62px;}
.ad-meer .ad-h2 .sticker{color:var(--magenta);}
.ad-meer .singles-head{margin-bottom:30px;}
.ad-kaartje{display:block;background:#fff;border-radius:16px;padding:22px;height:100%;
    box-shadow:0 8px 20px rgba(0,0,0,.1);transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease;}
.ad-kaartje:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(0,0,0,.16);}
.ad-kaartje-datum{font-size:.7rem;text-transform:uppercase;letter-spacing:1.2px;
    font-weight:700;color:var(--magenta);}
.ad-kaartje h3{font-family:'Fredoka',sans-serif;font-weight:700;color:var(--ink);
    font-size:1.05rem;margin:7px 0 6px;line-height:1.2;}
.ad-kaartje p{margin:0;font-weight:600;font-size:.88rem;color:#8a7a84;
    display:flex;align-items:center;gap:7px;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:991px){
    .ad-kaart{position:static;margin-top:8px;}
    .ad-blok{padding:24px;}
    .ad-tijd{flex-basis:88px;font-size:.92rem;}
}
@media(max-width:575px){
    .ad-programma li{gap:12px;padding:12px 14px;}
    .ad-tijd{flex-basis:76px;font-size:.85rem;}
}

/* ---------- Optreden niet gevonden ---------- */
.ad-leeg{background:var(--orange);color:#fff;padding:90px 0 100px;text-align:center;}
.ad-leeg h1{font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(1.5rem,4vw,2.4rem);margin:0 0 14px;}
.ad-leeg p{font-weight:600;color:rgba(255,255,255,.92);margin-bottom:28px;}