/* ==========================================================
   gallery.css — page-specific styles for gallery.html
   Extracted from inline <style> — see site.css for shared rules
   ========================================================== */

/* ══════════════════════════════════════════
   GALLERY PAGE — Dhuleva Group
══════════════════════════════════════════ */

/* ── HERO ── */
.gl-hero{
  position:relative; min-height:52svh; overflow:hidden;
  display:flex; align-items:flex-end; padding-top:var(--nav-h);
  background:var(--char);
}
.gl-hero-reel{
  position:absolute; inset:0; display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr; gap:3px;
}
.gl-hero-reel-img{
  overflow:hidden; position:relative;
}
.gl-hero-reel-img img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(20%) brightness(.55);
  transition:transform 12s ease-in-out;
  animation:reelZoom 12s ease-in-out infinite alternate;
}
.gl-hero-reel-img:nth-child(2) img{animation-delay:-3s}
.gl-hero-reel-img:nth-child(3) img{animation-delay:-6s}
.gl-hero-reel-img:nth-child(4) img{animation-delay:-9s}
@keyframes reelZoom{from{transform:scale(1)}to{transform:scale(1.1)}}

.gl-hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(37,37,37,.88) 0%,rgba(37,37,37,.3) 60%,transparent 100%);
}
.gl-hero-content{
  position:relative; z-index:2; width:100%; max-width:var(--maxw);
  margin:0 auto; padding:0 clamp(28px,6vw,96px) clamp(48px,6vw,72px);
  display:flex; flex-direction:column; gap:20px;
}
.gl-hero-kicker{
  font-family:var(--sans); font-weight:700; font-size:.6rem; letter-spacing:.38em; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; gap:12px;
}
.gl-hero-kicker::before{content:''; width:28px; height:1px; background:var(--gold)}
.gl-hero-h{
  font-family:var(--serif); font-weight:400; color:var(--white);
  font-size:clamp(2.4rem,5vw,5rem); line-height:1.02; letter-spacing:-.03em; margin:0;
}
.gl-hero-h em{color:var(--gold-soft); font-style:normal}
.gl-hero-meta{
  font-family:var(--sans); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.4); display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.gl-hero-meta span{display:flex; align-items:center; gap:6px}
.gl-hero-meta span::before{content:''; width:4px; height:4px; border-radius:50%; background:var(--gold); flex-shrink:0}
.gl-hero-meta span:first-child::before{display:none}

/* ── FILTER BAR ── */
.gl-filter-bar{
  background:var(--white); border-bottom:1px solid var(--hairline);
  position:sticky; top:var(--nav-h); z-index:90;
}
.gl-filter-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 clamp(28px,6vw,96px);
  display:flex; align-items:center; gap:8px; height:60px;
  overflow-x:auto; scrollbar-width:none;
}
.gl-filter-inner::-webkit-scrollbar{display:none}
.gl-chip{
  flex-shrink:0; height:34px; padding:0 18px; border-radius:9999px;
  border:1.5px solid var(--hairline); background:transparent;
  font-family:var(--sans); font-size:.82rem; font-weight:500;
  color:var(--body); cursor:pointer; transition:all .2s var(--ease); white-space:nowrap;
}
.gl-chip.active{background:var(--gold); border-color:var(--gold); color:var(--white)}
.gl-chip:hover:not(.active){border-color:var(--gold-soft); color:var(--ink)}
.gl-count{
  margin-left:auto; flex-shrink:0;
  font-family:var(--sans); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}

/* ── GALLERY GRID — CSS columns masonry ── */
.gl-section{
  background:var(--ivory); padding:clamp(48px,6vw,72px) 0 clamp(80px,10vw,120px);
}
.gl-grid-wrap{
  max-width:var(--maxw); margin:0 auto; padding:0 clamp(28px,6vw,96px);
}

/* Masonry via CSS columns */
.gl-grid{
  columns:3; column-gap:16px;
}
.gl-item{
  break-inside:avoid; margin-bottom:16px; position:relative; overflow:hidden;
  cursor:pointer;
  background:var(--char);
}
.gl-item img,
.gl-item video{
  width:100%; display:block; object-fit:cover;
  transition:transform .65s var(--ease), filter .4s;
  filter:brightness(.97);
}
/* Different heights for masonry rhythm */
.gl-item:nth-child(3n+1) .gl-item-media{aspect-ratio:4/3}
.gl-item:nth-child(3n+2) .gl-item-media{aspect-ratio:3/4}
.gl-item:nth-child(3n)   .gl-item-media{aspect-ratio:1/1}
.gl-item:nth-child(5n)   .gl-item-media{aspect-ratio:16/9}
.gl-item:nth-child(7n)   .gl-item-media{aspect-ratio:3/2}

/* Hover overlay */
.gl-item-overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(37,37,37,.75) 0%,transparent 55%);
  opacity:0; transition:opacity .4s var(--ease);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:20px;
}
.gl-item:hover .gl-item-overlay{opacity:1}
.gl-item:hover .gl-item-media{transform:scale(1.05); filter:brightness(.85)}
.gl-item-title{
  font-family:var(--serif); font-weight:400; color:var(--white);
  font-size:clamp(.88rem,1.1vw,1.05rem); line-height:1.25; margin-bottom:4px;
}
.gl-item-cat{
  font-family:var(--sans); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-soft);
}
/* Zoom icon */
.gl-item-zoom{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.18); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.7); transition:all .35s var(--ease);
}
.gl-item:hover .gl-item-zoom{opacity:1; transform:scale(1)}
.gl-item-zoom svg{width:14px;height:14px;stroke:#fff;stroke-width:2;fill:none}
.gl-video-badge,
.gl-play-badge{
  position:absolute; z-index:2;
}
.gl-video-badge{
  top:14px; left:14px; padding:6px 10px; border-radius:9999px;
  background:rgba(37,37,37,.72); color:var(--white);
  font-family:var(--sans); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
}
.gl-play-badge{
  inset:50% auto auto 50%; transform:translate(-50%, -50%);
  width:62px; height:62px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(8px);
}
.gl-play-badge svg{width:22px; height:22px; fill:#fff; stroke:none; margin-left:3px}

/* No results */
.gl-no-results{
  text-align:center; padding:80px 24px; color:var(--muted); display:none; column-span:all;
}

/* Load more */
.gl-load-wrap{text-align:center; margin-top:clamp(40px,5vw,64px)}
.gl-load-wrap.is-hidden{display:none}
.gl-load-btn.is-hidden{display:none}
.gl-load-btn{
  display:inline-flex; align-items:center; gap:10px; height:50px; padding:0 32px;
  border-radius:9999px; border:1.5px solid var(--hairline); background:transparent;
  font-family:var(--sans); font-size:.9rem; font-weight:500; color:var(--body);
  cursor:pointer; transition:all .3s var(--ease);
}
.gl-load-btn:hover{border-color:var(--gold); color:var(--ink)}
.gl-load-btn:disabled{opacity:.65; cursor:wait}
.gl-load-btn.is-loading svg{animation:glSpin 1s linear infinite}
.gl-load-btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
@keyframes glSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ── LIGHTBOX ── */
.gl-lb{
  position:fixed; inset:0; z-index:2000; background:rgba(10,9,7,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
  backdrop-filter:blur(12px);
}
.gl-lb.open{opacity:1; pointer-events:all}
.gl-lb-inner{
  position:relative; max-width:90vw; max-height:90svh;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.gl-lb-img{
  max-width:85vw; max-height:78svh; object-fit:contain;
  border-radius:12px; display:block;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
  transition:opacity .3s, transform .3s;
}
.gl-lb-video{
  max-width:85vw; max-height:78svh; display:none; border-radius:12px;
  box-shadow:0 24px 80px rgba(0,0,0,.5); background:#000;
}
.gl-lb-caption{
  text-align:center;
}
.gl-lb-title{
  font-family:var(--serif); font-size:clamp(1rem,1.4vw,1.2rem); color:rgba(255,255,255,.9);
  font-weight:400; line-height:1.25; margin-bottom:4px;
}
.gl-lb-meta{
  font-family:var(--sans); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.gl-lb-close{
  position:fixed; top:24px; right:24px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(8px); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .25s; z-index:10;
}
.gl-lb-close:hover{background:rgba(255,255,255,.2)}
.gl-lb-close svg{width:16px;height:16px;stroke:#fff;stroke-width:2;fill:none}
.gl-lb-nav{
  position:fixed; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(8px); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .25s; z-index:10;
}
.gl-lb-nav:hover{background:rgba(207,173,102,.2); border-color:rgba(207,173,102,.4)}
.gl-lb-nav svg{width:18px;height:18px;stroke:#fff;stroke-width:2;fill:none}
.gl-lb-prev{left:20px}
.gl-lb-next{right:20px}
.gl-lb-counter{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  font-family:var(--sans); font-size:.65rem; letter-spacing:.2em;
  color:rgba(255,255,255,.4); z-index:10;
}
.gl-lb-dots{
  display:flex; gap:6px; justify-content:center;
}
.gl-lb-dot{
  width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.25);
  transition:all .25s;
}
.gl-lb-dot.active{background:var(--gold); width:16px; border-radius:2px}

/* ── RESPONSIVE ── */
@media(max-width:980px){ .gl-grid{columns:2} .gl-hero-reel{grid-template-columns:1fr 1fr} }
@media(max-width:640px){ .gl-grid{columns:2; column-gap:10px} .gl-item{margin-bottom:10px} .gl-hero-reel{grid-template-columns:1fr 1fr} .gl-hero-h{font-size:2.4rem} .gl-lb-nav{display:none} }
@media(max-width:380px){ .gl-grid{columns:1} .gl-hero-h{font-size:2rem} }
@media(max-width:320px){ .gl-hero-h{font-size:1.7rem} .gl-filter-inner{gap:4px} .gl-chip{height:28px;padding:0 10px;font-size:.74rem} }