/* stap 2: Media. Alleen de agent van stap 2 schrijft hier; tokens uit css/tokens.css, patronen uit css/studio.css.
   Raster van thumbnails (drie tegelmaten) naast een vast detailpaneel, lightbox, sleepzone, mediakiezer-paneel. */

/* ---------- tabs, balk, splitsing ---------- */
.md-tabs{margin-top:-4px}
.md-tabs .mono{font-size:13px;color:var(--n500);margin-left:2px}
.md-tabs button.on .mono{color:var(--plum)}
.md-bar select{height:32px;border:1px solid var(--n300);border-radius:var(--r);background:var(--n0);padding:0 8px;font-size:15px;color:var(--n900);min-width:0}
.md-bar .setsum{margin-left:auto}
.md-split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start}
.md-main{min-width:0}
.md-meer{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 0 4px}

/* ---------- raster ---------- */
.md-grid{display:grid;gap:8px;--mt:176px}
.md-grid.maat-s{--mt:124px;gap:6px}
.md-grid.maat-l{--mt:252px;gap:10px}
.md-grid{grid-template-columns:repeat(auto-fill,minmax(var(--mt),1fr))}
.mt{display:flex;flex-direction:column;gap:4px;border:1px solid var(--n200);border-radius:var(--r2);background:var(--n0);padding:5px 5px 7px;text-align:left;color:var(--n900);min-width:0;position:relative}
.mt:hover{border-color:var(--n400);background:var(--n50)}
.mt.on{border-color:var(--plum);box-shadow:inset 0 0 0 1px var(--plum)}
.mt .mn{font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px;font-weight:500}
.mt .mm{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--n500);padding:0 2px;min-height:14px}
.mt .mm .gebr{margin-left:auto}
.mt .mm .tag{font-size:12px;padding:0 5px}
.maat-s .mt .mm .tag,.maat-s .mt .mm .gebr{display:none}
.mi{display:block;aspect-ratio:16/9;border-radius:3px;background:var(--n100);position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.mi img{width:100%;height:100%;object-fit:cover;display:block}
.mi.ruit img{object-fit:contain;padding:8%}
.mi.ruit{background:var(--n100) repeating-conic-gradient(var(--n200) 0 25%,transparent 0 50%) 0 0/14px 14px}
.mi .kapot-ic,.mi .speel,.mi .duur{position:absolute;display:none}
.mi.kapot img{visibility:hidden}
.mi.kapot .kapot-ic{display:grid;inset:0;place-items:center;color:var(--n400)}
.mi .speel{display:grid;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:rgba(20,10,30,.6);color:#fff;place-items:center}
.mi .speel .ic{width:20px;height:20px;margin-left:2px}
.mi .duur{display:block;right:4px;bottom:4px;font-size:12px;color:#fff;background:rgba(20,10,30,.6);padding:1px 5px;border-radius:3px}
.mi.ic-thumb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--n500)}
.mi.ic-thumb .ic{width:28px;height:28px}
.mi.ic-thumb small{font-size:12px;color:var(--n500)}
.mi.letter{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:34px;line-height:1;color:var(--n900);gap:2px}
.mi.letter small{font-size:14px;color:var(--n500)}
.maat-s .mi.letter{font-size:30px}
.mi.groot{aspect-ratio:16/9}
.mi.groot.letter{font-size:56px}
.mi.groot.ic-thumb .ic{width:32px;height:32px}

/* lijstweergave */
.md-tabel .mi{width:44px;height:26px;aspect-ratio:auto;border-radius:3px}
.md-tabel .mi.letter{font-size:16px}
.md-tabel .mi.letter small,.md-tabel .mi.ic-thumb small,.md-tabel .mi .duur,.md-tabel .mi .speel{display:none}
.md-tabel .mi.ic-thumb .ic{width:20px;height:20px}
.md-tabel td:first-child{width:52px;padding-right:0}
.md-tabel td{white-space:nowrap}
.md-tabel td:nth-child(2){white-space:normal;min-width:220px}
.md-tabel td:nth-child(2) .note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}
.md-tabel .md-naam{display:block;max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-tabel tr.click:focus-visible td{background:var(--n100)}
.md-lijstkaart{padding:6px 8px 10px}

/* ---------- detailpaneel ---------- */
.md-detail{position:sticky;top:calc(var(--barH) + 14px);display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - var(--barH) - 28px);overflow:auto}
.md-detail h2{margin-bottom:0}
.md-prev{display:block;width:100%;padding:0;border:1px solid var(--n200);border-radius:var(--r2);background:var(--n50);overflow:hidden;position:relative;text-align:left}
.md-prev .mi{border-radius:0;box-shadow:none}
.md-prev .md-prev-lbl{position:absolute;right:6px;bottom:6px;display:inline-flex;align-items:center;gap:5px;font-size:13px;color:#fff;background:rgba(20,10,30,.62);padding:3px 8px;border-radius:3px;opacity:0;transition:opacity .12s}
.md-prev:hover .md-prev-lbl,.md-prev:focus-visible .md-prev-lbl{opacity:1}
.md-prev.audio{padding:0 0 8px;display:flex;flex-direction:column;gap:6px;cursor:default}
.md-prev.audio audio{width:calc(100% - 16px);margin:0 8px;height:32px}
.md-let{display:flex;gap:8px;align-items:flex-start;font-size:14px;padding:8px 10px;border-radius:var(--r);background:var(--warn-100);color:var(--warn);flex-wrap:wrap}
.md-let b{color:var(--n900);width:100%}
.md-let span{color:var(--n700);flex:1;min-width:0}
.md-let .btn{margin-left:auto}
.md-let.ok{background:var(--ok-100);color:var(--ok);flex-wrap:nowrap}
.md-let.warn .ic{flex:none;margin-top:1px}
.md-lic{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.md-feiten{grid-template-columns:92px 1fr;font-size:14px}
.md-feiten dd .note{display:block}
.md-feiten select{height:28px;border:1px solid var(--n300);border-radius:var(--r);background:var(--n0);padding:0 6px;font-size:14px;width:100%}
.md-tags .chip{display:inline-flex;align-items:center;gap:4px;padding-right:4px}
.md-tags .chip button{border:0;background:none;padding:0;width:16px;height:16px;display:grid;place-items:center;color:var(--n500);border-radius:50%}
.md-tags .chip button:hover{background:var(--n200);color:var(--n900)}
.md-tags .chip button .ic{width:16px;height:16px}
.md-tagform{display:flex;gap:6px;margin-top:6px}
.md-tagform input{flex:1;min-width:0;height:28px;border:1px solid var(--n300);border-radius:var(--r);padding:0 8px;font-size:14px;background:var(--n0)}
.md-tagform input:focus{border-color:var(--plum);outline:none;box-shadow:0 0 0 2px var(--plum-100)}
.md-gebruik{display:flex;flex-direction:column;gap:2px}
.md-gebruik button,.md-gebruik div{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:0 6px;height:var(--rij);border-radius:var(--r);text-align:left;color:var(--n900);font-size:14px;min-width:0}
.md-gebruik button:hover{background:var(--n100)}
.md-gebruik .ic{color:var(--n500)}
.md-gebruik span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-gebruik small{font:13px var(--font-mono);color:var(--n500);white-space:nowrap}
.md-detail h3{margin-bottom:4px}
.md-confirm{border:1px solid var(--err);border-radius:var(--r2);padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-size:14px;background:var(--err-100)}
.md-confirm b{color:var(--err)}
.md-confirm ul{margin:0;padding-left:18px;color:var(--n700)}
.md-confirm .s-actions{margin-top:4px}
.md-acties{border-top:1px solid var(--n200);padding-top:10px}
.md-acties a.btn{text-decoration:none}

/* ---------- lightbox ---------- */
.md-lb{position:fixed;inset:0;z-index:65;background:rgba(10,7,19,.82);display:flex;flex-direction:column;padding:16px 24px;gap:10px}
.md-lb-top,.md-lb-foot{display:flex;align-items:center;gap:10px;color:#f1edf7;font-size:15px;min-height:32px}
.md-lb-top b{font:600 16px var(--font-kop);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48vw}
.md-lb-top .note,.md-lb-foot .note{color:#b9a9d4}
.md-lb .spacer{flex:1}
.md-lb-top .btn{background:transparent;color:#f1edf7;border-color:#4a3a6a}
.md-lb-top .btn:hover{background:#2d2344}
.md-lb-foot .chip{background:transparent;color:#cfc6da;border-color:#4a3a6a}
.md-lb-body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
.md-lb-body img,.md-lb-body video{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r2);background:#000}
.md-lb-body img.ruit{background:repeating-conic-gradient(#3a3450 0 25%,#2a2538 0 50%) 0 0/24px 24px;padding:24px}
.md-lb-body.kapot img{display:none}
.md-lb-body .kapot-txt{display:none}
.md-lb-body.kapot .kapot-txt{display:flex}
.md-lb-pdf,.md-lb-yt{width:min(100%,1100px);height:100%;border:0;border-radius:var(--r2);background:#fff}
.md-lb-yt{aspect-ratio:16/9;height:auto;max-height:100%}
.md-lb-leeg{display:flex;flex-direction:column;align-items:center;gap:10px;color:#b9a9d4;font-size:16px}
.md-lb-leeg .ic{width:32px;height:32px}
.md-lb-audio{display:flex;flex-direction:column;gap:14px;width:min(100%,900px)}
.md-lb-audio .golf{width:100%;height:120px;border-radius:var(--r2);background:#1b1724;display:block;object-fit:fill}
.md-lb-audio .golf.leeg{display:grid;place-items:center;color:#b9a9d4;font-size:14px}
.md-lb-audio audio{width:100%}
.md-lb-font{background:var(--n0);color:var(--n900);border-radius:var(--r2);padding:32px 40px;width:min(100%,960px);display:flex;flex-direction:column;gap:18px}
.md-lb-font .groot{font-size:96px;line-height:1}
.md-lb-font .alfabet{font-size:26px;line-height:1.4;color:var(--n700)}
.md-lb-font .zin{font-size:28px;line-height:1.3}
.md-lb-font .zin.klein{font-size:17px;color:var(--n500)}

/* ---------- slepen ---------- */
.md-drop,.mk-drop{display:none}
body.md-sleept .md-drop{display:flex;position:fixed;inset:0;z-index:64;background:rgba(43,26,73,.28);align-items:center;justify-content:center;pointer-events:none}
.md-drop>div{background:var(--n0);border:2px dashed var(--plum);border-radius:var(--r2);padding:28px 40px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--n900);font-size:15px}
.md-drop .ic{width:28px;height:28px;color:var(--plum)}
.md-drop b{font:600 17px var(--font-kop)}
.md-drop span{color:var(--n500)}
body.md-sleept .panel .mk-drop{display:flex;position:absolute;inset:48px 0 56px;z-index:2;background:rgba(43,26,73,.18);align-items:center;justify-content:center;flex-direction:column;gap:6px;color:var(--plum);font-weight:600;font-size:15px;pointer-events:none;border:2px dashed var(--plum);margin:8px}
.panel .mk-drop .ic{width:28px;height:28px}

/* ---------- mediakiezer-paneel ---------- */
.panel .body:has(.mk-grid){position:relative}
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px}
.mk-grid .mt .mm{min-height:0}
.panel .chips .chip{cursor:pointer}

/* ---------- smal ---------- */
@media (max-width:1180px){
  .md-split{grid-template-columns:1fr}
  .md-detail{position:static;max-height:none}
}

/* ---------- v5 (pakket V): Media met grote beelden. Tegels minstens 240 px, 16:9, naam eronder, detail rechts met lucht ---------- */
.md-tabs{margin-top:0}
.md-bar select{height:var(--v5-tik);padding:0 12px;border-color:var(--n200)}
.md-split{grid-template-columns:minmax(0,1fr) 380px;gap:var(--blok)}
.md-meer{gap:16px;padding:24px 0 8px}
.md-grid{gap:20px;--mt:var(--v5-tegel-min)}
.md-grid.maat-s{--mt:180px;gap:14px}
.md-grid.maat-l{--mt:340px;gap:24px}
.mt{padding:0 0 12px;gap:6px;border-color:var(--lijn-zacht);border-radius:var(--r2);overflow:hidden}
.mt:hover{border-color:var(--n300);background:var(--n0)}
.mt.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.mt .mn{font-size:15px;padding:4px 14px 0}
.mt .mm{font-size:13px;padding:0 14px;gap:8px}
.mi{border-radius:0;box-shadow:none}
.mi .speel{width:44px;height:44px;margin:-22px 0 0 -22px}
.mi .speel .ic{width:20px;height:20px}
.mi .duur{right:8px;bottom:8px;font-size:12px;padding:2px 8px;border-radius:4px}
.mi.ic-thumb .ic{width:32px;height:32px}
.md-tabel .mi{width:64px;height:36px;border-radius:6px}
.md-tabel td:first-child{width:80px}
.md-lijstkaart{padding:8px 12px 12px}
.md-detail{top:calc(var(--barH) + 24px);gap:20px;max-height:calc(100vh - var(--barH) - 48px)}
.md-prev{border-color:var(--lijn-zacht)}
.md-let{padding:14px 16px;gap:12px;font-size:14px}
.md-feiten{grid-template-columns:110px 1fr;font-size:15px}
.md-feiten select,.md-tagform input{height:var(--v5-tik);padding:0 12px;border-color:var(--n200)}
.md-tagform{gap:8px;margin-top:10px}
.md-tags .chip button{width:28px;height:28px;min-height:28px}
.md-gebruik{gap:4px}
.md-gebruik button,.md-gebruik div{padding:0 10px;gap:12px;font-size:15px}
.md-acties{border-top-color:var(--lijn-zacht);padding-top:16px}
.mk-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
@media (max-width:1180px){ .md-split{grid-template-columns:1fr} }