/* ═══════════════ 9wickets Video Gallery — premium dark-gold ═══════════════ */
.vg-archive, .vg-shortcode{
    --vg-gold:#E9C46A; --vg-gold-bright:#FFD970; --vg-ink:#F3ECDA; --vg-muted:#A99E7C;
    --vg-surface:#15110A; --vg-surface-2:#0E0B05; --vg-line:rgba(233,196,106,.18);
    font-family:'Inter','Anek Bangla','Hind Siliguri','Noto Sans Bengali',system-ui,sans-serif;
    color:var(--vg-ink); box-sizing:border-box;
}
.vg-archive *, .vg-shortcode *{ box-sizing:border-box; }

/* archive page is full-width dark. html-prefix raises specificity above the
   theme's body.vk:not(.vk-home) cream rule (which loads later). */
html body.vk.post-type-archive-wvg_video,
html body.post-type-archive-wvg_video{ background:#0a0703 !important; }

/* ── hero ── */
.vg-hero{ position:relative; overflow:hidden; padding:clamp(40px,7vw,84px) 20px clamp(30px,4vw,48px);
    background:radial-gradient(70% 90% at 50% 0%, rgba(233,196,106,.10), rgba(233,196,106,0) 60%), linear-gradient(180deg,#16110a,#0a0703);
    border-bottom:1px solid var(--vg-line); text-align:center; }
/* Soft radial glow — no filter:blur (a blur layer under the sticky header
   caused the menu to re-rasterize / blink on scroll). Gradient is soft enough. */
.vg-hero-glow{ position:absolute; inset:-30% 18% auto 18%; height:340px; pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(255,199,44,.15), rgba(255,199,44,.05) 45%, transparent 72%); }
.vg-hero-inner{ position:relative; max-width:760px; margin:0 auto; }
.vg-hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:999px;
    background:linear-gradient(135deg,rgba(233,196,106,.12),rgba(233,196,106,.03)); border:1px solid rgba(233,196,106,.3);
    color:#E4BE72; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.2em; }
.vg-hero-dot{ width:7px; height:7px; border-radius:50%; background:#FF5C5C; box-shadow:0 0 9px rgba(255,92,92,.8); animation:vg-pulse 1.2s ease-in-out infinite; }
@keyframes vg-pulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:.5} }
.vg-hero-title{ margin:18px 0 10px; font-weight:800; font-size:clamp(30px,5vw,56px); line-height:1.1; color:var(--vg-ink); }
.vg-hero-highlight{ background:linear-gradient(100deg,#FBEFC8,#FFD970 40%,#E9C46A 75%,#FBEFC8);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.vg-hero-sub{ color:#C3B795; font-size:clamp(14px,1.5vw,16px); line-height:1.65; margin:0 auto; max-width:620px; }
.vg-hero-count{ display:inline-flex; align-items:center; gap:8px; margin-top:20px; padding:8px 16px; border-radius:999px;
    background:rgba(8,6,2,.55); border:1px solid rgba(233,196,106,.22); color:#E4BE72; font-size:13px; font-weight:600; }

/* ── container + grid ── */
.vg-archive-container{ max-width:1200px; margin:0 auto; padding:clamp(28px,4vw,52px) 20px 64px; }
.vg-sc-title{ color:var(--vg-ink); font-size:clamp(22px,3vw,30px); font-weight:800; margin:0 0 22px; }
.vg-grid{ display:grid; grid-template-columns:repeat(var(--vg-cols,3),1fr); gap:clamp(16px,2vw,26px); }
@media(max-width:900px){ .vg-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .vg-grid{ grid-template-columns:1fr; } }

/* ── card ── */
.vg-card{ display:flex; flex-direction:column; text-align:left; padding:0; cursor:pointer; overflow:hidden;
    background:linear-gradient(180deg,var(--vg-surface),var(--vg-surface-2)); border:1px solid var(--vg-line);
    border-radius:18px; color:var(--vg-ink); font:inherit; width:100%;
    transition:transform .25s ease, box-shadow .3s ease, border-color .3s ease; }
.vg-card:hover{ transform:translateY(-5px); border-color:rgba(233,196,106,.45);
    box-shadow:0 26px 54px -24px rgba(0,0,0,.85), 0 0 44px -16px rgba(233,196,106,.4); }
.vg-card:focus-visible{ outline:2px solid var(--vg-gold); outline-offset:2px; }

.vg-card-thumb{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#0c0904; }
.vg-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.vg-card:hover .vg-card-thumb img{ transform:scale(1.06); }
.vg-card-overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,6,3,.05) 40%,rgba(8,6,3,.55)); }
.vg-card-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#FBEFC8,#E9C46A); color:#1A1306; box-shadow:0 10px 30px -8px rgba(233,196,106,.7);
    transition:transform .25s ease, box-shadow .25s ease; }
.vg-card-play svg{ width:26px; height:26px; margin-left:3px; }
.vg-card:hover .vg-card-play{ transform:translate(-50%,-50%) scale(1.12); box-shadow:0 14px 38px -8px rgba(233,196,106,.9); }
.vg-card-provider{ position:absolute; top:12px; right:12px; padding:4px 10px; border-radius:999px;
    background:rgba(8,6,2,.78); border:1px solid rgba(233,196,106,.3); color:#F0D98C; font-size:10.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:.08em; }

.vg-card-body{ display:flex; flex-direction:column; gap:6px; padding:16px 18px 18px; }
.vg-card-title{ font-weight:700; font-size:16px; line-height:1.35; color:var(--vg-ink); }
.vg-card-desc{ font-size:13px; line-height:1.55; color:var(--vg-muted);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── empty ── */
.vg-empty{ text-align:center; padding:60px 20px; color:#C3B795; }
.vg-empty-icon{ font-size:42px; display:block; margin-bottom:12px; }

/* ── pagination ── */
.vg-archive-container .pagination, .vg-archive-container .nav-links{ display:flex; gap:8px; justify-content:center; margin-top:40px; flex-wrap:wrap; }
.vg-archive-container .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px;
    border-radius:10px; background:rgba(233,196,106,.06); border:1px solid rgba(233,196,106,.24); color:#F0D98C; text-decoration:none; font-weight:600; }
.vg-archive-container .page-numbers.current{ background:linear-gradient(135deg,#F4D98B,#E9C46A); color:#1A1306; border-color:rgba(255,224,122,.6); }

/* ═══════════════ modal / lightbox ═══════════════ */
.vg-modal{ position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center; padding:24px; }
.vg-modal.is-open{ display:flex; }
.vg-modal-backdrop{ position:absolute; inset:0; background:radial-gradient(circle at 50% 40%, rgba(20,14,5,.86), rgba(5,3,1,.96));
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); animation:vg-fade .25s ease; }
@keyframes vg-fade{ from{opacity:0} to{opacity:1} }
.vg-modal-dialog{ position:relative; width:min(92vw,960px); animation:vg-pop .3s cubic-bezier(.2,.9,.3,1.2); }
@keyframes vg-pop{ from{opacity:0; transform:translateY(16px) scale(.97)} to{opacity:1; transform:none} }
.vg-modal-stage{ position:relative; width:100%; border-radius:16px; overflow:hidden; line-height:0;
    background:#000; border:1px solid rgba(233,196,106,.32); box-shadow:0 40px 110px -30px rgba(0,0,0,.9), 0 0 60px -14px rgba(233,196,106,.28); }
/* aspect-ratio on the replaced element itself — reliable everywhere (no
   percentage-height resolution needed, unlike position:absolute + height:100%). */
.vg-player-iframe, .vg-player-video{ display:block; width:100%; aspect-ratio:16/9; height:auto; border:0; background:#000; }
.vg-player-video{ object-fit:contain; }
.vg-player-error{ color:#FCA5A5; text-align:center; padding-top:40%; }
.vg-modal-caption{ margin-top:14px; text-align:center; color:#F3ECDA; font-weight:600; font-size:16px;
    font-family:'Inter','Anek Bangla','Noto Sans Bengali',sans-serif; }
.vg-watch-link{ display:inline-flex; align-items:center; gap:6px; margin:10px auto 0; padding:8px 16px;
    border-radius:999px; background:rgba(233,196,106,.10); border:1px solid rgba(233,196,106,.34);
    color:#F0D98C; font-size:13px; font-weight:600; text-decoration:none;
    font-family:'Inter','Anek Bangla','Noto Sans Bengali',sans-serif; transition:background .2s ease, border-color .2s ease; }
.vg-watch-link:hover{ background:rgba(233,196,106,.18); border-color:rgba(233,196,106,.6); color:#FFE9B0; }
/* centre caption + watch link without flex (flex made the stage's padding-box
   height indefinite, so the iframe couldn't take height:100%). */
.vg-modal-dialog{ text-align:center; }
.vg-modal-close{ position:absolute; top:-14px; right:-14px; width:42px; height:42px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    background:linear-gradient(135deg,#F4D98B,#E9C46A); color:#1A1306; border:0; box-shadow:0 8px 22px -6px rgba(0,0,0,.7); }
.vg-modal-close svg{ width:20px; height:20px; }
.vg-modal-close:hover{ transform:rotate(90deg); transition:transform .25s ease; }
@media(max-width:560px){ .vg-modal-close{ top:-50px; right:0; } }

/* The theme forces `body.vk h1{color:#1a1813!important}`, turning the non-
   gradient title words near-black. Beat it with higher specificity + !important;
   keep the highlight span as the gold gradient. */
html body.vk .vg-hero-title{ color:#F3ECDA !important; -webkit-text-fill-color:#F3ECDA !important; }
html body.vk .vg-hero-title .vg-hero-highlight{
    color:transparent !important; -webkit-text-fill-color:transparent !important;
    background:linear-gradient(100deg,#FBEFC8,#FFD970 40%,#E9C46A 75%,#FBEFC8) !important;
    -webkit-background-clip:text !important; background-clip:text !important;
}

/* Theme override fixes:
   - style.css `button{padding:.6em 1em .4em}` distorted the round close button
     (asymmetric padding pushed the ✕ off-centre and made the circle an ellipse).
   - `body.vk a{color:inherit}` (specificity beats .vg-watch-link) darkened the
     "Watch on …" link to near-black. */
.vg-modal-close{ padding:0 !important; box-sizing:border-box !important; line-height:1 !important; }
.vg-watch-link, body.vk .vg-watch-link{ color:#F0D98C !important; }
.vg-watch-link:hover, body.vk .vg-watch-link:hover{ color:#FFE9B0 !important; }

/* Pin the close button to the viewport corner so it's never clipped when the
   modal is taller than the screen (was offset to the dialog corner). */
.vg-modal-close{ position:fixed !important; top:18px !important; right:18px !important; left:auto !important; bottom:auto !important; z-index:100000 !important; }
@media(max-width:560px){ .vg-modal-close{ top:12px !important; right:12px !important; } }