/* =========================================================================
   Shiv Shakti — the photo gallery (/gallery and /gallery/{slug})

   Builds on the tokens in css/common.css and the page furniture in
   css/pages.css (.pg-hero, .pg-sec, .cta-banner, .reveal, .sr-only).
   Nothing here is used by another page, so it is loaded only by this view.

   Pair with:  <link rel="stylesheet" href="/css/pages.css">
               <link rel="stylesheet" href="/css/page-banner.css">
               <link rel="stylesheet" href="/css/gallery.css">
               <script src="/js/pages.js" defer></script>
               <script src="/js/gallery.js" defer></script>
   ========================================================================= */

/* ===================== Album chips + search ===================== */
.gl-bar{
  position:relative; z-index:5;
  background:var(--cream-050); border-bottom:1px solid var(--line);
}
.gl-bar-in{display:flex; align-items:center; gap:18px; padding:14px 0; min-width:0;}
.gl-chips{display:flex; gap:9px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; padding:2px 0;}
.gl-chips::-webkit-scrollbar{display:none;}
.gl-chip{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  border:1px solid var(--line); background:var(--cream-050); color:var(--ink-soft);
  padding:9px 16px; border-radius:999px; font-size:.82rem; font-weight:600; white-space:nowrap;
  transition:background .25s, color .25s, border-color .25s, transform .3s var(--pg-ease);
}
.gl-chip i{font-size:.76rem; color:var(--gold-600); transition:color .25s;}
.gl-chip .n{
  font-size:.7rem; font-weight:700; color:#a99b8f;
  background:var(--paper); border-radius:999px; padding:1px 7px;
}
.gl-chip:hover{border-color:var(--gold-500); color:var(--maroon-700); transform:translateY(-2px);}
.gl-chip.is-on{background:var(--maroon-700); border-color:var(--maroon-700); color:var(--cream-100);}
.gl-chip.is-on i{color:var(--gold-300);}
.gl-chip.is-on .n{background:rgba(255,255,255,.16); color:#f3e2b4;}

.gl-search{position:relative; flex:none; width:290px;}
.gl-search > i{position:absolute; left:15px; top:50%; transform:translateY(-50%); color:#a08a72; font-size:.82rem;}
.gl-search input{
  width:100%; border:1px solid var(--line); border-radius:999px; padding:11px 92px 11px 40px;
  font-family:inherit; font-size:.85rem; background:var(--paper); color:var(--ink);
}
.gl-search input:focus{border-color:var(--maroon-500); background:var(--cream-050); outline:none;}
.gl-search button{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  border:0; border-radius:999px; padding:8px 16px;
  background:var(--maroon-700); color:var(--cream-100);
  font-size:.76rem; font-weight:600; letter-spacing:.02em;
  transition:background .25s;
}
.gl-search button:hover{background:var(--maroon-600);}

/* ===================== What this album is ===================== */
.gl-about{
  padding:clamp(22px,3vw,34px);
  background:var(--cream-050); border:1px solid var(--line); border-radius:var(--radius-l);
  box-shadow:0 24px 48px -34px rgba(58,10,17,.45);
}
.gl-about p{margin:0; font-family:var(--serif); font-size:clamp(1.02rem,1.5vw,1.16rem); line-height:1.75; color:var(--ink-soft);}
.gl-about-meta{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line);}
.gl-about-meta li{display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:600; color:var(--maroon-700);}
.gl-about-meta i{color:var(--gold-600); font-size:.82rem;}

/* ===================== The featured album ===================== */
.gl-lead{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,3.4vw,50px); align-items:center;
  padding:clamp(24px,3vw,40px);
  background:linear-gradient(150deg,var(--maroon-950),var(--maroon-800) 62%,var(--maroon-900));
  border:1px solid rgba(217,176,74,.3); border-radius:var(--radius-l);
  overflow:hidden;
}
.gl-lead-img{border-radius:var(--radius-m); overflow:hidden; box-shadow:0 26px 52px -26px rgba(0,0,0,.7);}
.gl-lead-img img{width:100%; height:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .9s var(--pg-ease);}
.gl-lead:hover .gl-lead-img img{transform:scale(1.045);}
.gl-lead-kicker{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 12px;
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-300);
}
.gl-lead-copy h2{
  margin:0 0 12px; font-family:var(--display); font-weight:600;
  font-size:clamp(1.5rem,2.6vw,2.05rem); line-height:1.25; color:var(--cream-100);
}
.gl-lead-copy > p{margin:0; font-family:var(--serif); font-size:1.06rem; line-height:1.7; color:#dcc6a8;}
.gl-lead-meta{display:flex; flex-wrap:wrap; gap:8px 20px; margin:18px 0 0;}
.gl-lead-meta li{display:inline-flex; align-items:center; gap:8px; font-size:.8rem; color:#c8b193;}
.gl-lead-meta i{color:var(--gold-400); font-size:.78rem;}
.gl-lead-cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:22px;
  font-size:.84rem; font-weight:700; letter-spacing:.03em; color:var(--gold-300);
}
.gl-lead-cta i{transition:transform .35s var(--pg-ease);}
.gl-lead:hover .gl-lead-cta i{transform:translateX(5px);}

/* ===================== Section heading row ===================== */
.gl-head-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-bottom:clamp(18px,2.4vw,28px);
}
.gl-head-row h2{
  margin:0; font-family:var(--display); font-weight:600;
  font-size:clamp(1.28rem,2.2vw,1.72rem); color:var(--maroon-800);
}
.gl-head-row .count{font-size:.8rem; color:var(--ink-soft);}

/* ===================== The mosaic =====================
   A plain grid rather than a masonry column layout: the reading order, the
   tab order and the light box's "next picture" then all agree with each
   other, and a wide picture simply takes two columns. */
.gl-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  gap:clamp(12px,1.4vw,20px);
}
.gl-tile{
  position:relative; margin:0; display:flex; flex-direction:column;
  background:var(--cream-050); border:1px solid var(--line); border-radius:var(--radius-m);
  overflow:hidden;
  transition:transform .4s var(--pg-ease), box-shadow .4s, border-color .3s;
}
.gl-tile:hover{transform:translateY(-4px); border-color:var(--gold-500); box-shadow:0 24px 44px -26px rgba(58,10,17,.6);}
.gl-tile.is-wide{grid-column:span 2;}

.gl-open{display:block; position:relative; overflow:hidden; background:var(--paper);}
.gl-open img{width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .8s var(--pg-ease);}
.gl-tile.is-wide .gl-open img{aspect-ratio:16/9;}
.gl-tile:hover .gl-open img{transform:scale(1.06);}
.gl-open::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(40,5,9,0) 45%,rgba(40,5,9,.5));
  opacity:0; transition:opacity .35s;
}
.gl-tile:hover .gl-open::after{opacity:1;}
.gl-open:focus-visible{outline:3px solid var(--gold-400); outline-offset:-3px;}

.gl-zoom{
  position:absolute; right:12px; bottom:12px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:50%; background:rgba(40,5,9,.62); color:var(--gold-300); font-size:.8rem;
  backdrop-filter:blur(3px);
  opacity:0; transform:translateY(6px); transition:opacity .3s, transform .35s var(--pg-ease);
}
.gl-tile:hover .gl-zoom,
.gl-open:focus-visible .gl-zoom{opacity:1; transform:none;}

.gl-tile-album{
  position:absolute; left:12px; top:12px; z-index:2;
  display:inline-flex; align-items:center; gap:7px; max-width:calc(100% - 24px);
  padding:6px 12px; border-radius:999px;
  background:rgba(40,5,9,.66); color:var(--cream-100); font-size:.7rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  backdrop-filter:blur(3px); transition:background .25s, color .25s;
}
.gl-tile-album i{color:var(--gold-300); font-size:.7rem;}
.gl-tile-album:hover{background:var(--maroon-700); color:#fff;}

.gl-tile figcaption{padding:14px 16px 16px;}
.gl-tile figcaption b{
  display:block; font-family:var(--display); font-weight:600; font-size:.95rem;
  line-height:1.35; color:var(--maroon-800);
}
.gl-tile figcaption span{display:block; margin-top:6px; font-size:.8rem; line-height:1.6; color:var(--ink-soft);}

.gl-empty{
  padding:clamp(38px,6vw,70px) 26px; text-align:center;
  background:var(--cream-050); border:1px dashed var(--line); border-radius:var(--radius-l);
}
.gl-empty i{font-size:2rem; color:var(--gold-500);}
.gl-empty p{margin:16px 0 0; font-size:.95rem; line-height:1.8; color:var(--ink-soft);}
.gl-empty a{color:var(--maroon-700); font-weight:600; text-decoration:underline;}

/* ===================== Album cards ===================== */
.gl-albums{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:clamp(16px,2vw,26px);}
.gl-album{
  display:flex; flex-direction:column;
  background:var(--cream-050); border:1px solid var(--line); border-radius:var(--radius-l);
  overflow:hidden;
  transition:transform .4s var(--pg-ease), box-shadow .4s, border-color .3s;
}
.gl-album:hover{transform:translateY(-5px); border-color:var(--gold-500); box-shadow:0 26px 48px -28px rgba(58,10,17,.6);}
.gl-album-img{position:relative; overflow:hidden; background:var(--paper);}
.gl-album-img img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .8s var(--pg-ease);}
.gl-album:hover .gl-album-img img{transform:scale(1.06);}
.gl-album-none{
  display:flex; align-items:center; justify-content:center; aspect-ratio:4/3;
  color:rgba(169,121,31,.45); font-size:1.8rem;
}
.gl-album-n{
  position:absolute; right:12px; top:12px;
  min-width:30px; padding:4px 10px; border-radius:999px;
  background:rgba(40,5,9,.68); color:var(--gold-300);
  font-size:.74rem; font-weight:700; text-align:center; backdrop-filter:blur(3px);
}
.gl-album-copy{padding:16px 18px 20px; display:flex; flex-direction:column; gap:8px;}
.gl-album-copy h3{
  display:flex; align-items:center; gap:9px; margin:0;
  font-family:var(--display); font-weight:600; font-size:1.02rem; line-height:1.35; color:var(--maroon-800);
}
.gl-album-copy h3 i{color:var(--gold-600); font-size:.86rem;}
.gl-album-copy p{margin:0; font-size:.83rem; line-height:1.65; color:var(--ink-soft);}
.gl-album-place{display:inline-flex; align-items:center; gap:7px; font-size:.75rem; color:#8a7461;}
.gl-album-place i{color:var(--gold-600);}

/* ===================== Light box =====================
   Hidden until gallery.js opens it; [hidden] is enforced in common.css. */
.gl-box{position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;}
.gl-box-bg{position:absolute; inset:0; background:rgba(22,3,6,.93); backdrop-filter:blur(4px);}
.gl-box.is-open .gl-box-in{animation:glIn .4s var(--pg-ease) both;}
@keyframes glIn{from{opacity:0; transform:scale(.97) translateY(10px);} to{opacity:1; transform:none;}}

.gl-box-in{
  position:relative; z-index:2; margin:0;
  display:grid; grid-template-columns:minmax(0,1fr) 330px; align-items:stretch;
  width:min(1200px,92vw); max-height:88vh;
  background:var(--maroon-950); border:1px solid rgba(217,176,74,.32); border-radius:var(--radius-l);
  overflow:hidden;
}
.gl-box-stage{display:flex; align-items:center; justify-content:center; background:#140206; min-height:0;}
.gl-box-stage img{max-width:100%; max-height:88vh; width:auto; height:auto; object-fit:contain;}

.gl-box-cap{
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  padding:clamp(20px,2.4vw,30px); overflow-y:auto;
  border-left:1px solid rgba(217,176,74,.22);
}
.gl-box-album{display:flex; align-items:center; gap:9px; margin:0; font-size:.74rem; color:#c8b193;}
.gl-box-album i{color:var(--gold-400);}
.gl-box-album a{color:var(--gold-300); font-weight:600;}
.gl-box-album a:hover{text-decoration:underline;}
.gl-box-count{margin-left:auto; color:#9c8570; font-variant-numeric:tabular-nums;}
.gl-box-cap h3{
  margin:0; font-family:var(--display); font-weight:600;
  font-size:clamp(1.1rem,1.8vw,1.35rem); line-height:1.35; color:var(--cream-100);
}
#glBoxText{margin:0; font-family:var(--serif); font-size:1rem; line-height:1.75; color:#dcc6a8;}
#glBoxText:empty{display:none;}
.gl-box-credit{margin:0; font-size:.74rem; color:#9c8570;}
.gl-box-credit:empty{display:none;}
.gl-box-cap .btn{margin-top:6px;}

.gl-box-x,
.gl-box-nav{
  position:absolute; z-index:4;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid rgba(217,176,74,.32); border-radius:50%;
  background:rgba(40,5,9,.72); color:var(--gold-300); font-size:.95rem;
  transition:background .25s, color .25s, transform .3s var(--pg-ease);
}
.gl-box-x:hover,
.gl-box-nav:hover{background:var(--maroon-700); color:#fff;}
.gl-box-x:focus-visible,
.gl-box-nav:focus-visible,
.gl-box-cap a:focus-visible{outline:3px solid var(--gold-400); outline-offset:3px;}
.gl-box-x{top:18px; right:18px;}
.gl-box-nav{top:50%; margin-top:-22px;}
.gl-box-nav.prev{left:18px;}
.gl-box-nav.next{right:18px;}
.gl-box-nav[disabled]{opacity:.3; pointer-events:none;}
/* the page behind must not scroll while the light box is open */
body.gl-locked{overflow:hidden;}

/* ===================== Responsive ===================== */
@media (max-width:1100px){
  .gl-box-in{grid-template-columns:minmax(0,1fr) 290px;}
}
@media (max-width:980px){
  .gl-lead{grid-template-columns:1fr;}
  .gl-box-in{grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto;}
  .gl-box-stage img{max-height:52vh;}
  .gl-box-cap{border-left:0; border-top:1px solid rgba(217,176,74,.22); max-height:34vh;}
  .gl-box-nav{width:40px; height:40px; margin-top:-20px;}
  .gl-box-nav.prev{left:10px;}
  .gl-box-nav.next{right:10px;}
}
@media (max-width:880px){
  .gl-bar-in{flex-direction:column; align-items:stretch; gap:12px;}
  .gl-search{width:100%;}
}
@media (max-width:620px){
  .gl-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
  .gl-tile.is-wide{grid-column:span 2;}
  .gl-tile figcaption{padding:11px 12px 13px;}
  .gl-tile figcaption span{display:none;}
  .gl-albums{grid-template-columns:1fr;}
  .gl-box-in{width:96vw; max-height:92vh;}
  .gl-box-x{top:10px; right:10px; width:38px; height:38px;}
}

@media (prefers-reduced-motion:reduce){
  .gl-tile, .gl-album, .gl-open img, .gl-album-img img, .gl-lead-img img, .gl-zoom, .gl-lead-cta i{transition:none;}
  .gl-box.is-open .gl-box-in{animation:none;}
}