/* =========================================================================
   Shiv Shakti — the video gallery (/videos and /videos/{topic})

   Builds on the tokens in css/common.css and the page furniture in
   css/pages.css (.pg-hero, .pg-sec, .section-head, .cta-banner, .reveal)
   and re-uses the .pagination from common.css. Nothing here is used by
   another page, so it is loaded only by this view.

   Every poster is a still picture until the visitor presses play — the
   player (an iframe, or a <video> for a film we host ourselves) is only
   then put into .vd-frame, replacing the picture. So the grid costs one
   image per card, not one YouTube player per card.

   Pair with:  <link rel="stylesheet" href="/css/pages.css">
               <link rel="stylesheet" href="/css/page-banner.css">
               <link rel="stylesheet" href="/css/videos.css">
               <script src="/js/pages.js" defer></script>
               <script src="/js/videos.js" defer></script>
   ========================================================================= */

/* ===================== Topic bar ===================== */
.vd-bar{
  position:relative; z-index:5;
  background:var(--cream-050); border-bottom:1px solid var(--line);
}
.vd-bar-in{display:flex; align-items:center; gap:18px; padding:14px 0; min-width:0;}
.vd-chips{display:flex; gap:9px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; padding:2px 0;}
.vd-chips::-webkit-scrollbar{display:none;}
.vd-chip{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  border:1px solid var(--line); background:var(--cream-050); color:var(--ink-soft);
  padding:9px 16px; border-radius:999px; font-size:.82rem; font-weight:600; white-space:nowrap;
  transition:background .25s, color .25s, border-color .25s, transform .3s;
}
.vd-chip i{font-size:.76rem; color:var(--gold-600); transition:color .25s;}
.vd-chip .n{font-size:.7rem; font-weight:700; color:#a99b8f; background:var(--paper); border-radius:999px; padding:1px 7px;}
.vd-chip:hover{border-color:var(--gold-500); color:var(--maroon-700); transform:translateY(-2px);}
.vd-chip.is-on{background:var(--maroon-700); border-color:var(--maroon-700); color:var(--cream-100);}
.vd-chip.is-on i{color:var(--gold-300);}
.vd-chip.is-on .n{background:rgba(255,255,255,.16); color:#f3e2b4;}

.vd-search{position:relative; flex:none; width:250px;}
.vd-search > i{position:absolute; left:15px; top:50%; transform:translateY(-50%); color:#a08a72; font-size:.82rem;}
.vd-search input{
  width:100%; border:1px solid var(--line); border-radius:999px; padding:11px 16px 11px 40px;
  font-family:inherit; font-size:.85rem; background:var(--paper); color:var(--ink);
}
.vd-search input:focus{border-color:var(--maroon-500); background:var(--cream-050); outline:none;}

/* ===================== The poster / player box ===================== */
/* One 16:9 box that holds the still picture first and the player afterwards. */
.vd-frame{
  position:relative; overflow:hidden; isolation:isolate;
  aspect-ratio:16/9; background:var(--maroon-950);
  border-radius:var(--radius-m); border:1px solid rgba(217,176,74,.34);
}
.vd-frame > img{
  width:100%; height:100%; object-fit:cover; display:block;      /* crops YouTube's letterbox bars away */
  transition:transform .6s ease, opacity .4s;
}
.vd-frame iframe, .vd-frame video{
  position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; display:block;
}
.vd-noposter{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--maroon-900),var(--maroon-700));
  color:rgba(232,200,118,.45); font-size:2.4rem;
}

/* the play button sits over the whole picture, so the entire poster is clickable */
.vd-play{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;
  background:linear-gradient(180deg,rgba(40,5,9,.05),rgba(40,5,9,.55));
  transition:background .3s;
}
.vd-play-ui{
  display:grid; place-items:center;
  width:60px; height:60px; border-radius:50%;
  background:rgba(251,245,232,.94); color:var(--maroon-700);
  box-shadow:0 14px 30px -12px rgba(40,5,9,.8);
  transition:transform .3s, background .3s, color .3s;
}
.vd-play-ui i{font-size:1.06rem; margin-left:3px;}               /* the triangle reads centred when nudged */
.vd-play-lg .vd-play-ui{width:78px; height:78px;}
.vd-play-lg .vd-play-ui i{font-size:1.4rem;}
.vd-play:hover{background:linear-gradient(180deg,rgba(40,5,9,.02),rgba(40,5,9,.42));}
.vd-play:hover .vd-play-ui{transform:scale(1.08); background:var(--gold-300); color:var(--maroon-900);}
.vd-play:focus-visible{outline:3px solid var(--gold-400); outline-offset:-3px;}
.vd-frame.is-playing .vd-play, .vd-frame.is-playing > img, .vd-frame.is-playing .vd-time, .vd-frame.is-playing .vd-badge{display:none;}

.vd-time{
  position:absolute; right:10px; bottom:10px; z-index:3;
  background:rgba(40,5,9,.82); color:var(--cream-100);
  font-size:.7rem; font-weight:600; letter-spacing:.03em;
  padding:3px 8px; border-radius:6px; font-variant-numeric:tabular-nums;
}
.vd-badge{
  position:absolute; left:10px; top:10px; z-index:3;
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:rgba(40,5,9,.72); color:var(--cream-100); font-size:.74rem;
}

/* ===================== Featured film ===================== */
.vd-lead{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(26px,3.6vw,52px); align-items:center;
  padding:clamp(26px,3.4vw,44px);
  background:linear-gradient(150deg,var(--maroon-950),var(--maroon-800) 62%,var(--maroon-900));
  border:1px solid rgba(217,176,74,.3); border-radius:var(--radius-l);
  position:relative; overflow:hidden; isolation:isolate;
}
.vd-lead::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background:radial-gradient(circle at 88% 14%,rgba(232,200,118,.24),transparent 52%);
}
.vd-lead-media .vd-frame{border-color:rgba(217,176,74,.42); box-shadow:0 30px 60px -34px rgba(0,0,0,.9);}
.vd-lead-copy .kicker{
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-300); margin:0 0 12px;
}
.vd-lead-copy .kicker a{color:inherit;}
.vd-lead-copy .kicker a:hover{text-decoration:underline;}
.vd-lead-copy h2{
  font-family:var(--display); color:var(--cream-100); margin:0 0 14px;
  font-size:clamp(1.5rem,2.6vw,2.05rem); line-height:1.24;
}
.vd-lead-copy > p{color:#d9c6ad; font-size:.95rem; line-height:1.8; margin:0 0 22px;}
.vd-lead-actions{display:flex; flex-wrap:wrap; gap:12px;}
.vd-lead-date{margin:18px 0 0; font-size:.76rem; color:#b49f86;}

@media (max-width:920px){
  .vd-lead{grid-template-columns:minmax(0,1fr);}
}

/* ===================== The grid ===================== */
.vd-head-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  margin:0 0 10px; flex-wrap:wrap;
}
.vd-head-row h2{font-family:var(--display); font-size:clamp(1.3rem,2.2vw,1.7rem); color:var(--ink); margin:0;}
.vd-head-row .count{font-size:.78rem; color:var(--ink-soft);}
.vd-topic-note{margin:0 0 26px; max-width:70ch; font-size:.92rem; line-height:1.8; color:var(--ink-soft);}
.vd-head-row + .vd-grid{margin-top:26px;}

.vd-grid{display:grid; gap:24px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
.vd-card{
  display:flex; flex-direction:column;
  background:var(--cream-050); border:1px solid var(--line); border-radius:var(--radius-l);
  overflow:hidden; transition:transform .35s, box-shadow .35s, border-color .25s;
}
.vd-card:hover{transform:translateY(-4px); border-color:rgba(217,176,74,.7); box-shadow:0 26px 46px -30px rgba(58,10,17,.5);}
.vd-card .vd-frame{border-radius:0; border:0; border-bottom:1px solid var(--line);}
.vd-card:hover .vd-frame > img{transform:scale(1.04);}
.vd-card[hidden]{display:none;}

.vd-body{display:flex; flex-direction:column; gap:9px; padding:clamp(16px,1.9vw,22px);}
.vd-topic{margin:0;}
.vd-topic a{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.72rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--maroon-700);
}
.vd-topic a i{font-size:.74rem; color:var(--gold-600);}
.vd-topic a:hover{text-decoration:underline;}
.vd-body h3{margin:0; font-family:var(--display); font-size:1.03rem; line-height:1.4;}
.vd-body h3 a{color:var(--ink);}
.vd-body h3 a:hover{color:var(--maroon-700);}
.vd-desc{margin:0; font-size:.86rem; line-height:1.72; color:var(--ink-soft);}

.vd-foot{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:auto; padding-top:12px; border-top:1px solid var(--line);
  font-size:.74rem; color:#8a7461;
}
.vd-sharebtn{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:.74rem; font-weight:600; color:var(--maroon-700);
}
.vd-sharebtn i{font-size:.7rem;}
.vd-sharebtn:hover{text-decoration:underline;}
.vd-sharebtn.is-done{color:#2f6b45;}

.vd-empty{
  margin:34px auto 0; max-width:540px; text-align:center;
  font-size:.92rem; color:var(--ink-soft); line-height:1.8;
}
.vd-empty i{display:block; font-size:1.9rem; color:var(--gold-600); margin-bottom:14px;}
.vd-empty a{color:var(--maroon-700); font-weight:600; text-decoration:underline;}

@media (max-width:760px){
  .vd-search{width:100%;}
  .vd-bar-in{flex-wrap:wrap;}
  .vd-grid{grid-template-columns:minmax(0,1fr);}
}

/* ===================== The player overlay ===================== */
/* The overlay is sized from the height that is going on screen, not from a fixed
   width: the picture is 16:9, so a wide box is also a tall one, and on a laptop a
   1000px-wide player plus its caption is taller than the window. --vd-copy is what
   the caption needs; whatever height is left after that and the margins decides how
   wide the player may be, so the whole thing always lands inside the window and
   there is nothing to scroll. */
.vd-modal{
  --vd-pad:clamp(12px,2.4vh,26px);
  --vd-copy:200px;                       /* the caption block's own height, reserved up front */
  position:fixed; inset:0; z-index:1200;
  display:grid; place-items:center; padding:var(--vd-pad);
}
.vd-modal[hidden]{display:none;}
.vd-modal-back{position:absolute; inset:0; background:rgba(18,3,6,.86); backdrop-filter:blur(3px);}
.vd-modal-in{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  width:min(820px, 100%, max(300px, calc((100vh - var(--vd-copy) - 2 * var(--vd-pad)) * 16 / 9)));
  width:min(820px, 100%, max(300px, calc((100dvh - var(--vd-copy) - 2 * var(--vd-pad)) * 16 / 9)));
  max-height:calc(100vh - 2 * var(--vd-pad));
  max-height:calc(100dvh - 2 * var(--vd-pad));
  overflow:hidden;
  background:linear-gradient(150deg,var(--maroon-950),var(--maroon-800) 70%);
  border:1px solid rgba(217,176,74,.34); border-radius:var(--radius-l);
  box-shadow:0 40px 90px -40px #000;
  animation:vdIn .28s ease both;
}
@keyframes vdIn{from{opacity:0; transform:translateY(14px) scale(.985);} to{opacity:1; transform:none;}}

.vd-modal-x{
  position:absolute; top:9px; right:9px; z-index:4; cursor:pointer;
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(232,200,118,.3);
  background:rgba(40,5,9,.72); color:var(--cream-100); font-size:.94rem;
  display:grid; place-items:center; transition:background .25s, transform .25s;
}
.vd-modal-x:hover{background:var(--maroon-600); transform:rotate(90deg);}

.vd-modal-stage{position:relative; flex:0 0 auto; aspect-ratio:16/9; background:#000; overflow:hidden;}
.vd-modal-stage iframe, .vd-modal-stage video{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}

/* if a caption ever runs longer than the space kept for it, it scrolls on its own —
   the picture above it is never pushed off the screen */
.vd-modal-copy{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:14px clamp(16px,2.2vw,24px) 15px;}
.vd-modal-topic{
  margin:0 0 5px; font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-300);
}
.vd-modal-topic a{color:inherit;}
.vd-modal-topic a:hover{text-decoration:underline;}
.vd-modal-copy h2{
  margin:0 0 6px; font-family:var(--display); color:var(--cream-100);
  font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vd-modal-desc{
  margin:0; font-size:.82rem; line-height:1.62; color:#d9c6ad;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vd-modal-desc:empty{display:none;}

.vd-modal-actions{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:12px; padding-top:11px; border-top:1px solid rgba(232,200,118,.2);
}
.vd-modal-nav{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  background:none; border:1px solid rgba(232,200,118,.32); border-radius:999px;
  padding:6px 14px; font:inherit; font-size:.76rem; font-weight:600; color:var(--cream-100);
  transition:background .25s, border-color .25s, opacity .25s;
}
.vd-modal-nav:hover{background:rgba(232,200,118,.14); border-color:var(--gold-400);}
.vd-modal-nav[disabled]{opacity:.35; cursor:not-allowed;}
.vd-modal-nav i{font-size:.66rem;}
.vd-modal-out{
  display:inline-flex; align-items:center; gap:6px; margin:0 auto;
  font-size:.76rem; font-weight:600; color:var(--gold-300);
}
.vd-modal-out:hover{text-decoration:underline;}
.vd-modal-out i{font-size:.7rem;}

body.vd-locked{overflow:hidden;}

/* a short window (a laptop in a small browser, or a phone held sideways): the
   description is the first thing to go, and the caption keeps less room for itself */
@media (max-height:600px){
  .vd-modal{--vd-copy:150px;}
  .vd-modal-desc{display:none;}
}

@media (max-width:620px){
  .vd-modal{padding:0; --vd-copy:190px;}
  .vd-modal-in{width:100%; max-height:100dvh; border-radius:0; border:0;}
  .vd-modal-actions{justify-content:space-between;}
  .vd-modal-out{order:3; width:100%; margin:0; justify-content:center;}
}

@media (prefers-reduced-motion:reduce){
  .vd-card, .vd-chip, .vd-play, .vd-play-ui, .vd-frame > img, .vd-modal-x{transition-duration:.01ms;}
  .vd-modal-in{animation:none;}
}