/* ============================================================
   MADHU MAKHI PALAN — Gallery Page
   ============================================================ */

/* ── Filter Bar ── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-10);
}

.filter-btn {
  background: transparent;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.55em 1.4em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: var(--transition-base);
  white-space: nowrap;
}

.filter-btn:hover {
  border-color: var(--color-golden);
  color: var(--color-golden-dark);
  background: rgba(245, 166, 35, 0.06);
}

.filter-btn.active {
  background: var(--color-golden);
  border-color: var(--color-golden);
  color: var(--color-black);
  box-shadow: var(--shadow-gold);
}

/* ── Gallery Grid (Isotope) ── */
.gallery-section { background: var(--color-gray-100); }

.gallery-grid {
  margin: 0 -var(--space-2);
}

.gallery-sizer {
  width: 33.333%;
}

.gallery-item {
  width: 33.333%;
  padding: var(--space-2);
  float: left;
}

.gallery-item-inner {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: block;
}

.gallery-item-inner img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.gallery-item.large-item .gallery-item-inner img {
  height: 340px;
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(26, 26, 26, 0.88) 0%,
    rgba(245, 166, 35, 0.20) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5);
}

.gallery-overlay-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-golden);
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

.gallery-overlay-caption {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-cream);
  text-align: center;
  line-height: 1.4;
}

/* Video items */
.gallery-item.video-item .gallery-item-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.35);
  z-index: 1;
  transition: background 0.3s ease;
}

.gallery-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-golden);
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  z-index: 2;
  transition: var(--transition-base);
  box-shadow: var(--shadow-gold);
  padding-left: 4px;
}

.gallery-item.video-item:hover .gallery-play-btn {
  transform: translate(-50%, -50%) scale(1.15);
  background: var(--color-golden-dark);
}

/* Hover effects */
.gallery-item-inner:hover img {
  transform: scale(1.07);
}

.gallery-item-inner:hover .gallery-overlay {
  opacity: 1;
}

.gallery-item-inner:hover .gallery-overlay-icon {
  transform: scale(1);
}

/* Touch: keep overlay visible */
@media (hover: none) {
  .gallery-overlay { opacity: 1; }
  .gallery-overlay-icon { transform: scale(1); }
}

/* ── GLightbox Overrides ── */
.glightbox-clean .gslide-title {
  font-family: var(--font-heading);
  color: var(--color-golden);
  font-size: 1.1rem;
}

.glightbox-clean .gnext,
.glightbox-clean .gprev {
  background-color: var(--color-golden);
  color: var(--color-black);
}

.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover {
  background-color: var(--color-golden-dark);
}

.glightbox-clean .gclose svg path {
  fill: var(--color-golden);
}

/* ── Gallery Load More ── */
.gallery-load-more {
  text-align: center;
  margin-top: var(--space-10);
  clear: both;
}

/* ── Responsive ── */
@media (max-width: 1023px) {
  .gallery-sizer,
  .gallery-item { width: 50%; }
  .gallery-item.large-item { width: 100%; }
}

@media (max-width: 599px) {
  .gallery-sizer,
  .gallery-item { width: 100%; }
  .gallery-item-inner img { height: 220px; }
  .filter-bar { gap: var(--space-2); }
  .filter-btn { padding: 0.45em 1em; font-size: var(--text-xs); }
}