/* ===== Gallery page (reuses styles.css variables/navbar/footer) ===== */
.gallery-hero{
  padding:calc(var(--nav-h) + 70px) 0 40px;text-align:center;
  background:radial-gradient(900px 420px at 50% -10%,rgba(0,168,232,.30),transparent 60%),linear-gradient(160deg,#1c2c47,var(--navy-deep) 75%);
}
.gallery-hero .tag{color:var(--cyan-light);font-weight:700;letter-spacing:3px;text-transform:uppercase;font-size:12.5px}
.gallery-hero h1{font-family:'Montserrat',sans-serif;color:#fff;font-weight:800;font-size:clamp(28px,4.4vw,46px);margin-top:10px}
.gallery-hero p{color:#aebbd2;margin-top:12px;font-size:16px}

/* Tabs */
.gtabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:30px 24px 10px;position:sticky;top:var(--nav-h);z-index:50;
  background:linear-gradient(180deg,var(--navy-deep) 70%,transparent)}
.gtab{cursor:pointer;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#cdd9ec;
  padding:9px 20px;border-radius:999px;font:600 14px/1 'Inter',sans-serif;transition:.25s}
.gtab:hover{border-color:rgba(0,168,232,.6);color:#fff}
.gtab.active{background:var(--cyan);border-color:var(--cyan);color:#04263a}
.gtab .n{opacity:.7;font-weight:500;margin-left:6px;font-size:12px}

/* Masonry grid */
.gwrap{max-width:1280px;margin:0 auto;padding:26px 18px 90px}
.gmasonry{column-count:4;column-gap:14px}
.gitem{break-inside:avoid;margin:0 0 14px;border-radius:12px;overflow:hidden;cursor:pointer;position:relative;background:#1b2a45;display:block}
.gitem img{width:100%;height:auto;display:block;transition:transform .5s ease,opacity .5s ease;opacity:0}
.gitem img.loaded{opacity:1}
.gitem::after{content:"";position:absolute;inset:0;background:rgba(0,168,232,0);transition:.3s}
.gitem:hover::after{background:rgba(0,168,232,.22)}
.gitem:hover img{transform:scale(1.05)}
.gcount{text-align:center;color:#8aa;font-size:13px;padding:10px 0 0}

/* Video category: 16:9 cards in a normal grid (not masonry) */
.gmasonry.videos{column-count:unset;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gmasonry.videos .gitem{margin:0;aspect-ratio:16/9}
.gmasonry.videos .gitem img{height:100%;object-fit:cover}
.gitem.video .gplay{position:absolute;inset:0;z-index:3;display:grid;place-items:center}
.gitem.video .gplay::before{content:"";width:60px;height:60px;border-radius:50%;background:rgba(0,168,232,.92);
  box-shadow:0 8px 26px rgba(0,0,0,.45);transition:.3s}
.gitem.video:hover .gplay::before{transform:scale(1.12);background:var(--cyan-light)}
.gitem.video .gplay::after{content:"";position:absolute;border-left:18px solid #04263a;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
@media(max-width:760px){.gmasonry.videos{grid-template-columns:1fr}}

/* Image lightbox */
.glb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(6,12,22,.95);backdrop-filter:blur(6px)}
.glb.open{display:flex;animation:fade .25s ease}
.glb img{max-width:92vw;max-height:84vh;border-radius:10px;box-shadow:var(--shadow);user-select:none}
.glb iframe{width:min(1000px,92vw);aspect-ratio:16/9;max-height:84vh;border:0;border-radius:10px;box-shadow:var(--shadow)}
.glb.single .glb-btn{display:none}
.glb-btn{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:26px;display:grid;place-items:center;transition:.2s}
.glb-btn:hover{background:var(--cyan);color:#04263a}
.glb-prev{left:22px}.glb-next{right:22px}
.glb-close{position:absolute;top:22px;right:22px;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;background:var(--cyan);color:#04263a;font-size:24px;display:grid;place-items:center;transition:.2s}
.glb-close:hover{transform:rotate(90deg)}
.glb-counter{position:absolute;top:30px;left:50%;transform:translateX(-50%);color:#cdd9ec;font-size:14px;letter-spacing:1px}

@media(max-width:1100px){.gmasonry{column-count:3}}
@media(max-width:760px){.gmasonry{column-count:2}.glb-btn{width:44px;height:44px;font-size:20px}.glb-prev{left:10px}.glb-next{right:10px}}
@media(max-width:430px){.gmasonry{column-count:1}}