/* NuoVelo Video Hub: front-end styles. All rules are scoped under .nv-vid.
   Colours, fonts, sizes come from CSS variables (--nvv-*) that the plugin prints from Videos -> Settings. */
.nv-vid{
  --nvv-accent:#A89058; --nvv-accent-lt:#C9AE74; --nvv-stage:#16263D; --nvv-panel:rgba(255,255,255,.03);
  --nvv-border:rgba(255,255,255,.14); --nvv-text:#fff; --nvv-muted:rgba(255,255,255,.7);
  --nvv-hover:rgba(255,255,255,.05); --nvv-active:rgba(201,174,116,.08); --nvv-sep:rgba(255,255,255,.08);
  --nvv-poster-soon:.35; --nvv-radius:0px; --nvv-bw:1px; --nvv-ts:1rem;
  --nvv-ft:"Cinzel","Times New Roman",serif; --nvv-fl:"Montserrat","Helvetica Neue",Arial,sans-serif;
  font-family:var(--nvv-fl); color:var(--nvv-text);
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(20px,2.5vw,34px)}
.nv-vid *{box-sizing:border-box}
.nv-vid.lay-right .panel:first-child{order:2}
@media(max-width:860px){.nv-vid{grid-template-columns:1fr}.nv-vid.lay-right .panel:first-child{order:0}}

/* panel frame + header bar */
.nv-vid .panel{position:relative; border:var(--nvv-bw) solid var(--nvv-border); border-radius:var(--nvv-radius); background:var(--nvv-panel);
  display:flex; flex-direction:column; min-width:0; overflow:hidden}
.nv-vid .head{display:flex; align-items:center; gap:.8rem; padding:1rem 1.2rem; border-bottom:var(--nvv-bw) solid var(--nvv-border);
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--nvv-muted)}
.nv-vid .head > span:not(.st){min-width:0; flex:1 1 auto}
.nv-vid .head a{color:inherit; text-decoration:none}
.nv-vid .head a:hover{color:var(--nvv-text)}
.nv-vid .head svg{width:18px; height:18px; color:var(--nvv-accent-lt); flex:none}
.nv-vid .head .st{margin-left:auto; color:var(--nvv-accent); font-size:.6rem; letter-spacing:.16em; white-space:nowrap}

/* LEFT: player stage (16:9) */
.nv-vid .stage{position:relative; aspect-ratio:16/9; background:var(--nvv-stage); overflow:hidden}
.nv-vid .stage > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:var(--nvv-poster-soon); transition:opacity .4s ease}
.nv-vid .stage.live > img{opacity:.85}
.nv-vid .stage::after{content:""; position:absolute; left:0; right:0; bottom:0; height:45%; pointer-events:none;
  background:linear-gradient(to top, rgba(8,14,24,.55), rgba(8,14,24,0))}
.nv-vid .stage button.go{position:absolute; inset:0; width:100%; height:100%; border:0; background:none; padding:0; cursor:pointer; display:grid; place-items:center; color:inherit; z-index:2}
.nv-vid .stage.soon button.go{cursor:default}
.nv-vid .play{position:relative; width:72px; height:72px; border-radius:50%; border:1px solid var(--nvv-accent); display:grid; place-items:center;
  color:var(--nvv-accent-lt); background:rgba(11,22,38,.5); transition:background .3s ease, color .3s ease, transform .3s ease}
.nv-vid .play svg{width:22px; height:22px; margin-left:3px}
.nv-vid .stage.live button.go:hover .play{background:var(--nvv-accent); color:#0B1626; transform:scale(1.06)}
.nv-vid .note{position:absolute; bottom:1.1rem; left:1.2rem; right:1.2rem; z-index:3; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.85); font-weight:600; text-align:left; pointer-events:none; overflow-wrap:anywhere}
.nv-vid .ytlink{position:absolute; top:.8rem; right:.8rem; z-index:4; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:#fff; text-decoration:none; background:rgba(11,22,38,.6); padding:.45rem .7rem; border:1px solid rgba(255,255,255,.25)}
.nv-vid .ytlink:hover{background:var(--nvv-accent); color:#0B1626; border-color:var(--nvv-accent)}
.nv-vid .stage.soon .ytlink{display:none}
.nv-vid .stage iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:5}

/* RIGHT: video list; scrolls inside, so the panel never grows taller than the player */
.nv-vid .listwrap{position:relative; flex:1; min-height:0}
.nv-vid .list{position:absolute; inset:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(168,144,88,.45) transparent}
.nv-vid .item{display:flex; gap:1rem; align-items:center; width:100%; text-align:left; white-space:normal; padding:.85rem 1.2rem; border:0; border-bottom:1px solid var(--nvv-sep);
  border-left:2px solid transparent; background:none; color:inherit; font:inherit; cursor:pointer; transition:background .3s ease, border-color .3s ease}
.nv-vid .item:last-child{border-bottom:0}
.nv-vid .item:hover{background:var(--nvv-hover)}
.nv-vid .item.on{background:var(--nvv-active); border-left-color:var(--nvv-accent)}
.nv-vid .item.soon{cursor:default}
.nv-vid .item.soon:hover{background:none}
.nv-vid .thumb{position:relative; flex:none; width:clamp(104px,10vw,140px); aspect-ratio:16/9; background:var(--nvv-stage); overflow:hidden}
.nv-vid .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.nv-vid .item.soon .thumb img{opacity:.3}
.nv-vid .thumb i{position:absolute; inset:0; display:grid; place-items:center; color:#fff; background:rgba(11,22,38,.25); transition:background .3s ease}
.nv-vid .thumb i svg{width:20px; height:20px; filter:drop-shadow(0 1px 4px rgba(0,0,0,.6))}
.nv-vid .item:hover .thumb i{background:rgba(11,22,38,.05)}
.nv-vid .dur{position:absolute; right:4px; bottom:4px; z-index:2; font-size:.6rem; font-weight:600; letter-spacing:.04em; color:#fff; background:rgba(8,14,24,.78); padding:.12rem .35rem}
.nv-vid .txt{flex:1 1 auto; min-width:0}
.nv-vid .ttl{display:block; font-family:var(--nvv-ft); font-size:var(--nvv-ts); line-height:1.3; color:var(--nvv-text); font-weight:500;
  white-space:normal; overflow-wrap:anywhere}
.nv-vid .meta{display:block; margin-top:.4rem; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--nvv-accent)}
.nv-vid .item.soon .ttl{opacity:.65}

/* tablets and phones: blocks stacked */
@media(max-width:860px){
  .nv-vid .listwrap{flex:none}
  .nv-vid .list{position:static; max-height:var(--nvv-list-h,430px)}
}

/* phones (Elementor "mobile" breakpoint); the on/off options come from Videos -> Settings -> Mobile */
@media(max-width:767px){
  .nv-vid .head{padding:.85rem 1rem; letter-spacing:.14em; font-size:.62rem}
  .nv-vid .item{padding:.75rem 1rem; gap:.8rem}
  .nv-vid .thumb{width:clamp(92px,28vw,120px)}
  .nv-vid .note{left:1rem; right:1rem; bottom:.8rem; font-size:.6rem; letter-spacing:.1em}
  .nv-vid .play{width:60px; height:60px}
  .nv-vid.m-hide-head .head{display:none}
  .nv-vid.m-hide-status .head .st{display:none}
  .nv-vid.m-hide-note .note{display:none}
  .nv-vid.m-hide-meta .meta{display:none}
  .nv-vid.m-hide-ytlink .ytlink{display:none}
}