/* Page styles: video-gallery */
/* ── VIDEO GRID ── */
.video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.video-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,.09); transition:.25s; }
.video-card:hover { transform:translateY(-5px); box-shadow:0 14px 32px rgba(0,0,0,.14); }
.video-thumb { position:relative; height:210px; overflow:hidden; cursor:pointer; background:#5c1414; }
.video-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s, opacity .3s; }
.video-card:hover .video-thumb img { transform:scale(1.05); opacity:.82; }
.play-btn { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.play-btn span { width:60px; height:60px; background:rgba(245,166,35,.92); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; box-shadow:0 4px 18px rgba(0,0,0,.35); transition:transform .25s; }
.video-card:hover .play-btn span { transform:scale(1.15); }
.video-duration { position:absolute; bottom:10px; right:12px; background:rgba(0,0,0,.7); color:#fff; font-size:11px; font-weight:600; padding:3px 8px; border-radius:5px; }
.video-cat-badge { position:absolute; top:12px; left:12px; background:#f5a623; color:#fff; font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px; }
.video-body { padding:16px 18px; }
.video-body h3 { font-size:15px; font-weight:700; color:#5c1414; margin-bottom:6px; line-height:1.4; }
.video-meta { display:flex; gap:14px; font-size:12px; color:#aaa; }
.video-meta span { display:flex; align-items:center; gap:5px; }
.video-meta i { color:#f5a623; }

/* ── VIDEO MODAL ── */
.vmodal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:9999; align-items:center; justify-content:center; padding:20px; }
.vmodal-overlay.open { display:flex; }
.vmodal-box { width:100%; max-width:860px; position:relative; }
.vmodal-close { position:absolute; top:-44px; right:0; background:none; border:none; color:#fff; font-size:28px; cursor:pointer; transition:.2s; }
.vmodal-close:hover { color:#f5a623; }
.vmodal-title { color:#fff; font-size:15px; font-weight:600; margin-bottom:10px; }
.video-embed-wrap { position:relative; padding-bottom:56.25%; height:0; border-radius:12px; overflow:hidden; background:#000; }
.video-embed-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }

/* ── FEATURED VIDEO ── */
.featured-video { position:relative; border-radius:16px; overflow:hidden; height:420px; cursor:pointer; margin-bottom:16px; }
.featured-video img { width:100%; height:100%; object-fit:cover; }
.featured-video .fv-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(92,20,20,.88) 35%,transparent 70%); }
.featured-video .fv-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.fv-play-btn { width:80px; height:80px; background:rgba(245,166,35,.9); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:30px; color:#fff; box-shadow:0 6px 24px rgba(0,0,0,.35); transition:transform .25s; }
.featured-video:hover .fv-play-btn { transform:scale(1.12); }
.fv-info { position:absolute; bottom:24px; left:28px; right:28px; }
.fv-info h2 { font-size:26px; font-weight:800; color:#fff; margin-bottom:8px; }
.fv-info .fv-meta { display:flex; gap:16px; font-size:13px; color:rgba(255,255,255,.75); flex-wrap:wrap; }
.fv-info .fv-meta i { color:#f5a623; }

/* ── STATS ── */
.vstats { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:48px; }
.vstat { background:#fff; border-radius:12px; padding:22px; text-align:center; box-shadow:0 2px 12px rgba(0,0,0,.07); }
.vstat .num { font-size:30px; font-weight:800; color:#f5a623; }
.vstat p { font-size:13px; color:#666; margin-top:4px; }

/* ── PLAYLIST SIDEBAR ── */
.video-layout { display:grid; grid-template-columns:1fr 300px; gap:28px; align-items:start; }
.playlist { background:#fff; border-radius:14px; box-shadow:0 3px 14px rgba(0,0,0,.08); overflow:hidden; }
.playlist-head { background:#5c1414; color:#fff; padding:14px 18px; font-size:14px; font-weight:700; }
.playlist-head span { color:#f5a623; }
.playlist-item { display:flex; gap:12px; padding:13px 16px; border-bottom:1px solid #f5f5f5; cursor:pointer; transition:background .2s; align-items:center; }
.playlist-item:hover, .playlist-item.active { background:#fdf7f7; }
.playlist-item.active { border-left:3px solid #f5a623; }
.playlist-item img { width:72px; height:52px; object-fit:cover; border-radius:7px; flex-shrink:0; }
.playlist-item .pi-info h5 { font-size:12px; font-weight:700; color:#5c1414; line-height:1.35; margin-bottom:3px; }
.playlist-item .pi-dur { font-size:11px; color:#aaa; display:flex; align-items:center; gap:4px; }
.playlist-item .pi-play { font-size:18px; color:#f5a623; margin-left:auto; flex-shrink:0; }

@media(max-width:1000px){ .video-grid{grid-template-columns:1fr 1fr;} .video-layout{grid-template-columns:1fr;} }
@media(max-width:640px){ .video-grid{grid-template-columns:1fr;} .vstats{grid-template-columns:1fr 1fr;} .featured-video{height:260px;} .fv-info h2{font-size:18px;} }