/* ==========================================================================
   SHOZI THE MCEE — Gallery page styles
   Assumes the theme's global stylesheet already defines these tokens:
   --ink, --paper, --paper-dim, --gold, --gold-bright, --wine, --grey,
   --line, --line-dark, --maxw, plus .wrap/.section/.page-hero/.btn/.eyebrow
   ========================================================================== */

/* ---------- Filter tabs ---------- */
.gallery-filters{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:44px;
}
.gallery-filter{
  font-family:'Jost',sans-serif; font-size:0.78rem; letter-spacing:0.1em;
  text-transform:uppercase; font-weight:500;
  padding:11px 22px; border:1px solid var(--line-dark);
  background:transparent; color:var(--ink); cursor:pointer;
  transition:all .2s ease;
}
.gallery-filter:hover{ border-color:var(--gold); color:var(--gold); }
.gallery-filter.is-active{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

/* ---------- Grid ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
@media(max-width:900px){ .gallery-grid{ grid-template-columns:repeat(3, 1fr); } }
@media(max-width:640px){ .gallery-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; } }

.gallery-item{
  position:relative; aspect-ratio:3/4; overflow:hidden;
  border:1px solid var(--line-dark); background:#1c1a17;
  padding:0; cursor:pointer; display:block; width:100%;
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease;
}
.gallery-item:hover img{ transform:scale(1.05); }
.gallery-item-overlay{
  position:absolute; inset:0;
  background:rgba(20,18,16,0);
  display:flex; align-items:center; justify-content:center;
  transition:background .25s ease;
}
.gallery-item:hover .gallery-item-overlay{ background:rgba(20,18,16,0.35); }
.gallery-item-plus{
  color:var(--paper); font-size:1.8rem; font-family:'Bebas Neue',sans-serif;
  opacity:0; transform:scale(0.8); transition:all .25s ease;
}
.gallery-item:hover .gallery-item-plus{ opacity:1; transform:scale(1); }

.gallery-empty{
  font-family:'Fraunces',serif; color:var(--grey); grid-column:1/-1;
  padding:40px 0; text-align:center;
}

/* ---------- Load more ---------- */
.gallery-load-more-wrap{
  display:flex; justify-content:center; margin-top:48px;
}
#gallery-load-more[disabled]{ opacity:0.5; cursor:default; }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(15,13,11,0.96);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 70px;
}
.lightbox[hidden]{ display:none; }
.lightbox img{
  max-width:100%; max-height:78vh; object-fit:contain;
  border:1px solid rgba(238,234,225,0.12);
}
.lightbox-caption{
  color:var(--paper-dim); font-family:'Fraunces',serif; font-style:italic;
  margin-top:18px; font-size:0.95rem; text-align:center; max-width:600px;
}
.lightbox-close{
  position:absolute; top:24px; right:28px;
  background:none; border:none; color:var(--paper);
  font-size:2.2rem; line-height:1; cursor:pointer;
}
.lightbox-close:hover{ color:var(--gold-bright); }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:1px solid rgba(238,234,225,0.3);
  color:var(--paper); font-size:1.8rem; width:48px; height:48px;
  border-radius:50%; cursor:pointer; transition:all .2s ease;
}
.lightbox-nav:hover{ border-color:var(--gold-bright); color:var(--gold-bright); }
.lightbox-prev{ left:20px; }
.lightbox-next{ right:20px; }
@media(max-width:640px){
  .lightbox{ padding:20px; }
  .lightbox-nav{ width:38px; height:38px; font-size:1.4rem; }
  .lightbox-prev{ left:6px; }
  .lightbox-next{ right:6px; }
}

/* ---------- Featured Moments slider ---------- */
.slider-section{ padding-bottom:70px; }
.slider-viewport{ position:relative; }
.slider-track{
  display:flex; gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:4px 4px 14px;
  margin:0 -4px;
  /* hide scrollbar — dots + arrows are the visible navigation */
  scrollbar-width:none;
}
.slider-track::-webkit-scrollbar{ display:none; }

.slider-slide{
  flex:0 0 auto;
  width:min(320px, 78vw);
  scroll-snap-align:start;
}
.slider-slide .gallery-item{
  aspect-ratio:3/4; width:100%; border:1px solid var(--line-dark);
  background:#1c1a17; position:relative; overflow:hidden; padding:0; cursor:pointer; display:block;
}
.slider-slide .gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.slider-slide .gallery-item:hover img{ transform:scale(1.05); }

.slider-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  background:var(--ink); border:1px solid rgba(238,234,225,0.25);
  color:var(--paper); font-size:1.6rem; line-height:1;
  cursor:pointer; z-index:5; transition:all .2s ease;
  display:flex; align-items:center; justify-content:center;
}
.slider-nav:hover{ border-color:var(--gold); color:var(--gold-bright); }
.slider-prev{ left:-22px; }
.slider-next{ right:-22px; }
@media(max-width:800px){
  .slider-nav{ width:38px; height:38px; font-size:1.3rem; }
  .slider-prev{ left:4px; }
  .slider-next{ right:4px; }
}

.slider-dots{
  display:flex; justify-content:center; gap:8px; margin-top:22px;
}
.slider-dot{
  width:8px; height:8px; border-radius:50%; padding:0;
  background:var(--line-dark); border:none; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.slider-dot:hover{ background:var(--gold); }
.slider-dot.is-active{ background:var(--gold); transform:scale(1.3); }

@media (prefers-reduced-motion: reduce){
  .gallery-item img, .gallery-item-overlay, .gallery-item-plus, .gallery-filter,
  .slider-track, .slider-nav, .slider-dot{
    transition:none; scroll-behavior:auto;
  }
}