/* ===== Videos — cinematic backdrop + count-adaptive video wall + YouTube modal ===== */
body{background:#000}

/* full-screen darkened backdrop (current playlist's top video thumbnail, blurred, slow zoom) */
#vbg{position:fixed;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;
  filter:blur(14px) saturate(1.05);transform:scale(1.16);opacity:1;transition:opacity .32s ease;
  animation:vbgZoom 34s ease-in-out infinite alternate}
#vbg.swap{opacity:0}
@keyframes vbgZoom{from{transform:scale(1.12)}to{transform:scale(1.22)}}
.vbg-ov{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.5) 34%,rgba(0,0,0,.5) 62%,rgba(0,0,0,.78) 100%)}
@media(prefers-reduced-motion:reduce){#vbg{animation:none;transform:scale(1.14)}}

/* floating control (ported from photos): the big VIDEOS label IS the playlist dropdown */
.phbar{position:fixed;top:118px;left:50%;transform:translateX(-50%);z-index:50;width:max-content;max-width:min(92vw,420px);
  display:flex;flex-direction:column;align-items:center;gap:4px;background:rgba(0,0,0,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:11px 22px 13px;border-radius:22px;box-shadow:0 4px 18px rgba(0,0,0,.55)}
.phbar .lbl{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:5px;font-size:30px;color:var(--leaf);transition:color .2s ease}
.sel{position:relative;max-width:100%}
.selbtn{appearance:none;-webkit-appearance:none;background:transparent;border:0;outline:none;box-shadow:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto;max-width:100%;padding:2px 8px}
.selbtn:hover .lbl{color:var(--orange)}
.selbtn svg{flex:0 0 auto;width:15px;height:10px;transition:transform .3s cubic-bezier(.2,.7,.3,1.2)}
.sel.open .selbtn svg{transform:rotate(180deg)}
/* one (or no) playlist: keep the VIDEOS label, disable the dropdown */
.sel.single .selbtn{cursor:default;pointer-events:none}
.sel.single .selbtn svg{display:none}
.sellist{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,-8px);z-index:60;
  width:max-content;min-width:100%;max-width:88vw;max-height:52vh;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(40,152,81,.5) transparent;
  background:rgba(0,0,0,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:15px;padding:7px;box-shadow:0 14px 40px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s cubic-bezier(.2,.7,.3,1)}
.sel.open .sellist{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.selopt{display:block;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
  font-family:var(--data);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:14px;color:var(--cream);
  padding:11px 26px;border-radius:10px;transition:background .2s ease,color .2s ease}
.selopt:hover{background:rgba(40,152,81,.3)}
.selopt.on{color:var(--leaf)}

/* content — vertically centred over the backdrop when it fits (safe center = top-aligns when tall);
   padding-top set by JS to clear the floating phbar; bottom clears the menu + mini pill */
.vwall-wrap{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;align-items:center;
  padding:280px 22px 220px}   /* top-aligned; padding-top set by JS to clear the phbar, bottom clears the pills */

.vwall{display:grid;gap:20px;width:100%;margin:0 auto;align-items:start;transition:opacity .22s ease,transform .22s ease}   /* max-width set by JS (caps tile size by column count) */
.vwall.out{opacity:0;transform:translateY(16px)}
.vtile{appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0;margin:0;cursor:pointer;text-align:left;display:block;
  opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}
.vtile.in{opacity:1;transform:none}
.vthumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#1a1a1a;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 16px 40px rgba(0,0,0,.5)}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.vtile:hover .vthumb img{transform:scale(1.06)}
.vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;
  background:rgba(17,40,27,.66);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(0,0,0,.5);transition:background .25s ease,transform .25s ease}
.vplay svg{width:28px;height:28px;fill:#fff;margin-left:3px}
.vtile:hover .vplay{background:var(--leaf);transform:translate(-50%,-50%) scale(1.08)}
/* every caption reserves the SAME height (2 lines, longer ones clamped) so tiles align cleanly regardless of title length */
.vcap{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  margin-top:12px;min-height:2.64em;font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  font-size:15px;line-height:1.32;color:var(--cream);opacity:.95;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.vtile:hover .vcap{color:#fff}

.vempty{text-align:center;max-width:520px;margin:0 auto;font-family:var(--body);font-size:17px;line-height:1.6;color:var(--cream)}
.vempty a{color:var(--orange);text-decoration:none}
.vempty a:hover{text-decoration:underline}

/* modal player — responsive 16:9 */
.vmodal{position:fixed;inset:0;z-index:130;display:none}
.vmodal.open{display:block}
.vmbg{position:absolute;inset:0;background:rgba(0,0,0,.93);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.vmstage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;pointer-events:none}
.vmframe{position:relative;width:min(92vw,calc((88vh - 64px) * 16 / 9));aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.85);pointer-events:auto}
.vmframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vmcap{margin-top:16px;max-width:min(92vw,900px);text-align:center;pointer-events:none;
  font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:clamp(14px,1.6vw,18px);color:var(--cream)}
.vmx{position:absolute;top:calc(16px + env(safe-area-inset-top));right:18px;z-index:3;appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
  font-size:22px;color:var(--cream);background:rgba(0,0,0,.5);width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .25s ease}
.vmx:hover{background:rgba(243,146,0,.65);transform:rotate(90deg)}

@media(max-width:700px){
  .phbar .lbl{font-size:24px;letter-spacing:4px}
  .vwall{gap:16px}
}
@media(prefers-reduced-motion:reduce){
  .vtile,.vwall,.vthumb img,.vplay{transition:none}
  .vtile{opacity:1;transform:none}
}