/* gallery.css */

/* ── Filter tabs ── */
.gallery-filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding-bottom: 24px;
  justify-content: center;
}
.filter-btn {
  padding: 9px 20px;
  background: var(--white); border: 2px solid var(--parchment);
  border-radius: 24px;
  font-family: var(--font-devanagari); font-size: 0.9rem;
  color: var(--text-mid); cursor: pointer;
  transition: var(--transition);
}
.filter-btn:hover { border-color: var(--gold); color: var(--maroon); }
.filter-btn.active {
  background: var(--maroon); border-color: var(--maroon);
  color: var(--gold-light); font-weight: 600;
}

/* ── Masonry-style grid ── */
.gallery-masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 8px;
}
@media (max-width: 900px) { .gallery-masonry { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .gallery-masonry { grid-template-columns: 1fr; } }

.gitem {
  position: relative; overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 4/3;
  cursor: pointer;
  box-shadow: 0 3px 14px var(--shadow);
  border: 2px solid transparent;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.gitem-wide { grid-column: span 2; aspect-ratio: 16/9; }
@media (max-width: 540px) { .gitem-wide { grid-column: span 1; aspect-ratio: 4/3; } }

.gitem img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform 0.5s ease;
}
/* Portrait images — shift focus to top for paduka/utsav */
.gitem img[alt="मनोहर पादुका"],
.gitem img[alt="उत्सव मूर्ती"] { object-position: center top; }

.gitem:hover { transform: translateY(-4px); box-shadow: 0 10px 28px var(--shadow-deep); border-color: var(--gold); }
.gitem:hover img { transform: scale(1.04); }

.gitem-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(20,3,3,0.82));
  color: var(--gold-light); padding: 28px 12px 10px;
  font-family: var(--font-devanagari); font-size: 0.88rem;
  text-align: center; opacity: 0;
  transition: opacity 0.3s ease;
}
.gitem:hover .gitem-overlay { opacity: 1; }

/* hidden state for filter */
.gitem.hidden {
  display: none;
}

/* ── Lightbox ── */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(10,2,2,0.95);
  align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lb-content {
  max-width: 90vw; max-height: 90vh;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.lb-content img {
  max-width: 90vw; max-height: 80vh;
  object-fit: contain; border: 3px solid var(--gold);
  border-radius: 4px;
}
.lb-caption {
  font-family: var(--font-devanagari); font-size: 1rem;
  color: var(--gold-light); text-align: center;
}
.lb-close {
  position: fixed; top: 20px; right: 28px;
  background: none; border: 2px solid var(--gold); color: var(--gold-light);
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 1.2rem; cursor: pointer;
  transition: var(--transition);
}
.lb-close:hover { background: var(--gold); color: var(--white); }
.lb-prev, .lb-next {
  position: fixed; top: 50%; transform: translateY(-50%);
  background: rgba(92,26,26,0.7); border: 2px solid var(--gold);
  color: var(--gold-light); width: 50px; height: 50px;
  border-radius: 50%; font-size: 2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition); line-height: 1;
}
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-prev:hover, .lb-next:hover { background: var(--saffron); }