/* =========================================================
   gallery.css — styles used only by gallery.php
   (filter tabs, photo grid, lightbox)

   Depends on the same color variables as style.css
   (--maroon, --gold, --ivory, --line, --shadow, etc).
   Load this file TOGETHER WITH style.css — it does not
   repeat shared layout classes like .wrap, .btn, .site-header,
   .page-banner, footer styles, etc.
   ========================================================= */

/* ---------- Filter tabs ---------- */
.gallery-section{background:var(--white);}

.gallery-filters{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; margin-bottom:40px;
}
.gallery-filters button{
  font-family:inherit; font-size:14px; font-weight:700;
  color:var(--maroon-dark); background:var(--ivory);
  border:1.5px solid var(--line); border-radius:30px;
  padding:9px 20px; transition:all 0.2s ease;
}
.gallery-filters button:hover{border-color:var(--gold);}
.gallery-filters button.active{
  background:var(--maroon); border-color:var(--maroon); color:var(--white);
}

/* ---------- Masonry-ish photo grid ---------- */
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.gallery-item{
  position:relative; overflow:hidden; border-radius:8px;
  border:1px solid var(--line); cursor:pointer;
  aspect-ratio:4/3; background:var(--ivory-deep);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.gallery-item:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.gallery-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 0.4s ease;
}
.gallery-item:hover img{transform:scale(1.06);}

.gallery-item .gallery-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:12px 14px 10px;
  background:linear-gradient(180deg, rgba(20,8,10,0) 0%, rgba(20,8,10,.82) 100%);
  color:var(--white);
}
.gallery-caption .g-title{font-size:13.5px; font-weight:700; display:block;}
.gallery-caption .g-tag{font-size:11.5px; color:var(--gold-light); display:block; margin-top:2px;}

.gallery-item .zoom-icon{
  position:absolute; top:10px; right:10px; z-index:2;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,0.85); display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 0.2s ease;
}
.gallery-item:hover .zoom-icon{opacity:1;}
.gallery-item .zoom-icon svg{width:15px; height:15px; color:var(--maroon-dark);}

.gallery-empty{
  text-align:center; padding:50px 20px; color:#6b584a; font-size:15px; display:none;
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(20,8,10,0.92);
  display:none; align-items:center; justify-content:center;
  padding:40px 20px;
}
.lightbox.open{display:flex;}
.lightbox-inner{
  position:relative; max-width:900px; width:100%;
  display:flex; flex-direction:column; align-items:center;
}
.lightbox-inner img{
  max-width:100%; max-height:72vh; border-radius:6px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-caption{
  color:var(--ivory-deep); text-align:center; margin-top:16px;
}
.lightbox-caption .lc-title{font-family:'Kavivanar',cursive; font-size:20px; color:var(--white); display:block;}
.lightbox-caption .lc-tag{font-size:13px; color:var(--gold-light); display:block; margin-top:4px;}

.lightbox-close{
  position:absolute; top:-6px; right:-6px; z-index:3;
  width:38px; height:38px; border-radius:50%; border:none;
  background:var(--white); color:var(--maroon-dark); font-size:20px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
@media (min-width:641px){
  .lightbox-close{top:0; right:0; transform:translate(50%,-50%);}
}

.lightbox-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.15); color:var(--white); font-size:24px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-arrow:hover{background:rgba(255,255,255,0.28);}
.lightbox-arrow.lb-prev{left:-4px;}
.lightbox-arrow.lb-next{right:-4px;}
@media (max-width:760px){
  .lightbox-arrow{width:36px; height:36px; font-size:20px;}
  .lightbox-arrow.lb-prev{left:2px;}
  .lightbox-arrow.lb-next{right:2px;}
}

/* ---------- Responsive grid ---------- */
@media (max-width:980px){
  .gallery-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
  .gallery-grid{grid-template-columns:repeat(2,1fr); gap:12px;}
  .gallery-filters{gap:8px;}
  .gallery-filters button{padding:8px 14px; font-size:13px;}
}