/* Ronde 12: (1) vaste speler als echt onderdeel (balk + lade met hoes, lijst en volle Spotify-speler),
   (2) "What to expect" op event.html. Beweging staat stil bij prefers-reduced-motion en .calm. */

/* ---------------------------------------------------------------- 1. SPELER */
:root{--pw-h:76px}
.pw{background:linear-gradient(180deg,var(--ma-purple),var(--ma-ink));border-top:3px solid var(--ma-yellow);border-radius:20px 20px 0 0;box-shadow:0 -12px 36px rgba(8,2,20,.6)}
.pw-in{gap:14px}
.pw-bar .pw-in{height:calc(var(--pw-h) - 3px)}
.pw-art{flex:none;width:52px;height:52px;border-radius:10px;border:2px solid var(--ma-white);box-shadow:3px 3px 0 var(--ma-magenta);object-fit:cover;display:block}
.pw-now{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pw-now b{font:800 1rem/1.15 var(--f-head);color:var(--ma-white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pw-now i{font:600 .8125rem/1.2 var(--f-body);font-style:normal;color:var(--ma-lilac);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pw-btn{width:48px;height:48px}
.pw-play{width:52px;height:52px}
.pw-btn:focus-visible,.pw-link:focus-visible,.pw-back:focus-visible,.pt:focus-visible{outline:3px solid var(--ma-white);outline-offset:2px;box-shadow:0 0 0 6px var(--ma-magenta)}

.pw-panel{height:0;overflow:hidden;visibility:hidden;transition:height .32s var(--ease),visibility 0s .32s}
.pw[data-open] .pw-panel{height:min(660px,calc(100dvh - var(--pw-h) - 24px));visibility:visible;transition:height .32s var(--ease),visibility 0s}
.pw-grid{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:clamp(16px,2.4vw,32px);height:100%;max-width:calc(1240px + 2*var(--gut));margin-inline:auto;padding:20px var(--gut);box-sizing:border-box}
.pw-side{display:flex;flex-direction:column;min-height:0;gap:16px}
.pw-head{display:flex;gap:16px;align-items:flex-end}
.pw-cover{flex:none;width:132px;height:132px;border-radius:14px;border:3px solid var(--ma-white);box-shadow:5px 5px 0 var(--ma-magenta);object-fit:cover}
.pw-meta{min-width:0}
.pw-meta p{margin:0}
.pw-kick{font:800 .75rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ma-yellow);margin-bottom:6px!important}
.pw-title{font:800 1.75rem/1.05 var(--f-head);letter-spacing:-.012em;color:var(--ma-white)}
.pw-count{font:600 .875rem/1.3 var(--f-body);color:var(--ma-lilac);margin-top:6px!important}
.pw-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pw-link,.pw-back{font:800 .75rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;padding:10px 14px;border-radius:999px;border:2px solid var(--ma-white);background:transparent;color:var(--ma-white)}
.pw-link{background:var(--ma-yellow);border-color:var(--ma-yellow);color:var(--ma-ink)}
.pw-link:hover,.pw-back:hover{background:var(--ma-white);color:var(--ma-ink);border-color:var(--ma-white)}
.pw-list{list-style:none;margin:0;padding:0;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;border-radius:14px;background:rgba(8,2,20,.42);border:2px solid rgba(234,223,247,.18);counter-reset:none;scrollbar-color:var(--ma-magenta) transparent}
.pt{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:9px 14px;border:0;border-bottom:1px solid rgba(234,223,247,.1);background:transparent;color:var(--ma-white);text-align:left;cursor:pointer;font:inherit}
.pt:hover{background:rgba(234,223,247,.1)}
.pt[aria-current="true"]{background:rgba(238,42,123,.28);box-shadow:inset 4px 0 0 var(--ma-yellow)}
.pt-n{font:700 .8125rem/1 var(--f-body);color:var(--ma-lilac);text-align:right}
.pt-t{min-width:0;display:flex;flex-direction:column;gap:2px}
.pt-t b{font:700 .9375rem/1.2 var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-t i{font:500 .8125rem/1.2 var(--f-body);font-style:normal;color:var(--ma-lilac);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-d{font:600 .8125rem/1 var(--f-body);color:var(--ma-lilac);font-variant-numeric:tabular-nums}
.pw-stage{height:100%;min-height:480px;width:auto;padding:0;border-radius:16px;overflow:hidden;background:var(--ma-ink);border:3px solid var(--ma-white);box-shadow:6px 6px 0 var(--ma-magenta);box-sizing:border-box}
.pw-stage iframe{display:block;width:100%;height:100%;border:0;border-radius:0}
.pw-wait{display:grid;place-items:center;height:100%;padding:24px;text-align:center;font:600 .9375rem/1.4 var(--f-body);color:var(--ma-lilac)}

@media(max-width:820px){
 :root{--pw-h:68px}
 .pw{border-radius:16px 16px 0 0}
 .pw-art{width:44px;height:44px}
 .pw-now b{font-size:.9375rem}
 .pw-btn{width:44px;height:44px}.pw-play{width:48px;height:48px}
 .pw-in{gap:10px}
 .pw[data-open] .pw-panel{height:calc(100dvh - var(--pw-h) - 16px)}
 .pw-grid{display:block;overflow-y:auto;overscroll-behavior:contain;padding:16px var(--gut)}
 .pw-cover{width:84px;height:84px;box-shadow:4px 4px 0 var(--ma-magenta)}
 .pw-title{font-size:1.375rem}
 .pw-head{align-items:center}
 .pw-acts{margin-top:8px}
 .pw-stage{height:168px;min-height:168px;margin-top:16px}
 .pw-side{display:contents}
 .pw-head{order:1}.pw-stage{order:2}
 .pw-list{margin-top:16px;max-height:none;overflow:visible}
 .pw-grid{display:flex;flex-direction:column}
 .pw-list{order:3;flex:none}
}
.calm .pw-panel,.calm .pw[data-open] .pw-panel{transition:none}
@media(prefers-reduced-motion:reduce){.pw-panel,.pw[data-open] .pw-panel{transition:none}}

/* ---------------------------------------------------------------- 2. WHAT TO EXPECT */
.xp-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-template-rows:1fr 1fr;gap:clamp(14px,2vw,24px);height:clamp(420px,46vw,620px)}
.xp-f{position:relative;margin:0;min-height:0}
.xp-a{grid-row:1/3}
.xp-f .slot{position:absolute;inset:0;aspect-ratio:auto;border-radius:18px}
.xp-b .slot{border-color:var(--ma-yellow)}
.xp-c{margin-left:clamp(0px,2.4vw,36px)}
.xp-c .slot{border-color:var(--ma-pink)}
.xp-f figcaption{position:absolute;left:14px;bottom:14px;z-index:2;max-width:calc(100% - 28px);padding:7px 12px;border-radius:999px;background:var(--ma-ink);color:var(--ma-white);border:2px solid var(--ma-yellow);font:800 .6875rem/1.25 var(--f-body);letter-spacing:.12em;text-transform:uppercase}
.xp-line{max-width:none;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:clamp(36px,5vw,64px) 0 0;padding-top:clamp(24px,3vw,36px);border-top:2px solid rgba(234,223,247,.18)}
.xp-pre{font:800 .875rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ma-yellow)}
.xp-st{display:flex;flex-wrap:wrap;gap:12px}
.xp-st b{display:inline-block;background:var(--ma-yellow);color:var(--ma-ink);border:3px solid var(--ma-white);padding:10px 22px;font:700 clamp(1.375rem,2.6vw,1.875rem)/1.1 var(--f-display);letter-spacing:.02em;text-transform:uppercase;box-shadow:4px 4px 0 var(--ma-magenta);transform:rotate(-1.4deg)}
.xp-st b:nth-child(2){transform:rotate(1.1deg)}
.xp-st b:nth-child(3){transform:rotate(-.7deg)}
.xp-st b::after{content:"✺";margin-left:14px;color:var(--ma-magenta)}
.xp-post{flex:1 1 260px;color:var(--ma-lilac);font-size:1.0625rem;line-height:1.5}
@media(max-width:700px){
 .xp-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;height:auto}
 .xp-a{grid-column:1/3;grid-row:auto;height:min(62vw,300px)}
 .xp-b,.xp-c{height:min(46vw,200px);margin-left:0}
 .xp-f figcaption{font-size:.625rem;left:8px;bottom:8px;max-width:calc(100% - 16px);letter-spacing:.08em}
 .xp-line{flex-direction:column;align-items:flex-start}
 .xp-st b{padding:8px 16px}
}