/* ============================================================
   Media / Videos page — media-videos.html
   Featured video block, video grid (.vid-card), channels grid.
   ============================================================ */

.si{max-width:1100px}
/* Footer styling is fully owned by global.css now — removed the stale
   4-column override that was forcing this page's footer narrower than
   every other template's. */

/* ── VIDEO GRID ── */
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.vid-card{background:#fff;border-radius:18px;overflow:hidden;border:1px solid rgba(13,27,62,0.08);box-shadow:0 4px 20px rgba(13,27,62,0.07);transition:transform .2s,box-shadow .2s;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.vid-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(13,27,62,0.12)}
.vid-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--navy),#1E3E78);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;flex-shrink:0}
.vid-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,0.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.015) 1px,transparent 1px);background-size:40px 40px}
.vid-play{width:56px;height:56px;background:rgba(201,151,58,0.9);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;transition:transform .2s,background .2s}
.vid-card:hover .vid-play{transform:scale(1.1);background:var(--gold)}
.vid-play::after{content:'';width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:18px solid var(--navy);margin-left:4px}
.vid-thumb-icon{position:absolute;font-size:52px;opacity:0.12;z-index:1}
.vid-dur{position:absolute;bottom:10px;right:12px;background:rgba(0,0,0,0.65);color:#fff;font-size:12px;font-weight:600;padding:3px 8px;border-radius:4px;z-index:2}
.vid-body{padding:22px 22px 18px;flex:1;display:flex;flex-direction:column;color:var(--gold)}
.vid-cat{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.vid-title{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;color:var(--navy);line-height:1.35;margin:0 0 8px}
.vid-desc{font-size:13.5px;color:#666;line-height:1.6;margin:0 0 12px;flex:1}
.vid-meta{font-size:12px;color:#aaa;margin-top:auto}
/* ── FEATURED VIDEO ── */
.featured-vid{background:var(--navy);border-radius:24px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 24px 64px rgba(13,27,62,0.25);border:1px solid rgba(201,151,58,0.18)}
.featured-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#0A1628,#1E3E78);display:flex;align-items:center;justify-content:center;position:relative;min-height:280px}
.featured-thumb.js-video-open{cursor:pointer}
.featured-thumb.js-video-open:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.featured-thumb::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px);background-size:40px 40px}
.featured-thumb-icon{font-size:80px;opacity:0.12;position:absolute}
.featured-play{width:72px;height:72px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;box-shadow:0 8px 28px rgba(201,151,58,0.4);cursor:pointer;transition:transform .2s}
.featured-play:hover{transform:scale(1.08)}
.featured-play::after{content:'';width:0;height:0;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:22px solid var(--navy);margin-left:5px}
.featured-info{padding:40px 44px;display:flex;flex-direction:column;justify-content:center}
.featured-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:rgba(201,151,58,0.12);color:var(--gold);border:1px solid rgba(201,151,58,0.3);border-radius:4px;padding:4px 12px;margin-bottom:16px}
.featured-title{font-family:'Playfair Display',serif;font-size:26px;font-weight:800;color:#fff;line-height:1.25;margin:0 0 12px}
.featured-desc{font-size:15px;color:rgba(255,255,255,0.65);line-height:1.75;margin-bottom:24px}

/* ── CHANNELS ── */
.channels-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ch-card{background:#fff;border-radius:16px;padding:26px 24px;border:1px solid rgba(13,27,62,0.08);text-align:center;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.ch-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(13,27,62,0.1)}
.ch-logo{width:60px;height:60px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 14px;background:rgba(201,151,58,0.1);color:var(--gold)}
.ch-name{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;color:var(--navy);margin:0 0 6px;line-height:1.25}
.ch-desc{font-size:14px;color:#666;line-height:1.6;margin-bottom:14px}
.ch-btn{display:inline-block;font-size:13px;font-weight:600;color:var(--gold);border:1px solid rgba(201,151,58,0.3);border-radius:6px;padding:6px 16px;text-decoration:none;transition:background .15s,color .15s}
.ch-btn:hover{background:var(--gold);color:var(--navy)}

@media(max-width:768px){
  .media-grid{grid-template-columns:1fr}
  .featured-vid{grid-template-columns:1fr}
  .featured-thumb{min-height:220px}
  .channels-grid{grid-template-columns:1fr}
}
@media(min-width:769px) and (max-width:1100px){
  .media-grid{grid-template-columns:repeat(2,1fr)}
  .channels-grid{grid-template-columns:1fr 1fr}
}

/* ── GALLERY ──
   4-column grid on desktop, 2 on tablet, 1 on phone. Each tile is square
   (1:1) so the grid stays visually even even when uploaded images have
   varied aspect ratios. Click → lightbox. */
.gallery-section{padding-top:64px}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:24px}
.gallery-item{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:14px;background:#0d1b3e;box-shadow:0 4px 14px rgba(13,27,62,.08);cursor:zoom-in;transition:transform .25s,box-shadow .25s}
.gallery-item:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(13,27,62,.18)}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s,filter .25s}
.gallery-item:hover img{transform:scale(1.06);filter:brightness(.85)}
.gallery-zoom{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.6);width:48px;height:48px;border-radius:50%;background:rgba(201,151,58,.92);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.gallery-item:hover .gallery-zoom{opacity:1;transform:translate(-50%,-50%) scale(1)}

@media(max-width:1100px){.gallery-grid{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(max-width:768px){.gallery-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:420px){.gallery-grid{grid-template-columns:1fr}}

/* ── LIGHTBOX ── */
.gallery-lightbox{position:fixed;inset:0;z-index:9998;background:rgba(9,21,42,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px}
.gallery-lightbox.open{display:flex}
.gallery-lb-stage{position:relative;max-width:min(1200px,94vw);max-height:88vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px}
.gallery-lb-img{max-width:100%;max-height:80vh;border-radius:10px;box-shadow:0 30px 70px rgba(0,0,0,.6);background:#000}
.gallery-lb-caption{color:rgba(255,255,255,.85);font-size:14.5px;text-align:center;line-height:1.5;max-width:760px}
.gallery-lb-counter{color:rgba(255,255,255,.5);font-size:12.5px;letter-spacing:.6px}
.gallery-lb-close,.gallery-lb-prev,.gallery-lb-next{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;line-height:1;z-index:2;transition:background .15s,transform .15s}
.gallery-lb-close:hover,.gallery-lb-prev:hover,.gallery-lb-next:hover{background:var(--gold);color:var(--navy);transform:scale(1.08)}
.gallery-lb-close{top:20px;right:20px;font-size:28px}
.gallery-lb-prev{left:20px;top:50%;transform:translateY(-50%)}
.gallery-lb-next{right:20px;top:50%;transform:translateY(-50%)}
.gallery-lb-prev:hover{transform:translateY(-50%) scale(1.08)}
.gallery-lb-next:hover{transform:translateY(-50%) scale(1.08)}
@media(max-width:600px){
  .gallery-lb-close{top:14px;right:14px;width:40px;height:40px;font-size:24px}
  .gallery-lb-prev,.gallery-lb-next{width:40px;height:40px;font-size:20px}
  .gallery-lb-prev{left:10px}.gallery-lb-next{right:10px}
}