/* ============================================
   GALLERY PAGE — page-specific styles
   ============================================ */

/* ===================================================
   GALLERY
   =================================================== */
.gallery {
  padding: var(--section-py) 0;
  background: var(--gray-50);
  position: relative;
}
.gallery-filters {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.filter-btn {
  padding: .5rem 1.25rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--gray-500);
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-full);
  transition: all .3s var(--ease);
}
.filter-btn:hover { border-color: var(--blue-300); color: var(--blue-600); }
.filter-btn.active {
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: var(--white);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
.gallery-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4/3;
  box-shadow: var(--shadow-md);
  transition: box-shadow .4s var(--ease);
}
.gallery-item:hover { box-shadow: var(--shadow-xl); }
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.gallery-item .placeholder-img {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
  transition: transform .5s var(--ease);
}
.gallery-item:hover .placeholder-img,
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item .g-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
  opacity: 0;
  transition: opacity .35s var(--ease);
  display: flex; align-items: flex-end;
  padding: 1.25rem;
}
.gallery-item:hover .g-overlay { opacity: 1; }
.gallery-item .g-overlay span {
  color: var(--white);
  font-size: .9rem;
  font-weight: 600;
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.9);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.lightbox.active { display: flex; }
.lightbox-content {
  max-width: 900px;
  max-height: 80vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.lightbox-content .placeholder-img {
  width: 100%; min-height: 400px;
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem;
}
.lightbox-close {
  position: absolute;
  top: 2rem; right: 2rem;
  width: 44px; height: 44px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  color: var(--white);
  font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s;
}
.lightbox-close:hover { background: rgba(255,255,255,.25); }
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  color: var(--white);
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s;
}
.lightbox-nav:hover  { background: rgba(255,255,255,.25); }
.lightbox-nav.prev   { left: 2rem; }
.lightbox-nav.next   { right: 2rem; }
.lightbox-caption {
  text-align: center;
  color: var(--white);
  margin-top: 1rem;
  font-size: .95rem;
}

/* Gallery placeholder colours */
.ph-1 { background: linear-gradient(135deg, #bfdbfe, #93c5fd); }
.ph-2 { background: linear-gradient(135deg, #d1fae5, #6ee7b7); }
.ph-3 { background: linear-gradient(135deg, #fef3c7, #fbbf24); }
.ph-4 { background: linear-gradient(135deg, #ede9fe, #a78bfa); }
.ph-5 { background: linear-gradient(135deg, #ffe4e6, #fda4af); }
.ph-6 { background: linear-gradient(135deg, #ccfbf1, #5eead4); }
.ph-7 { background: linear-gradient(135deg, #dbeafe, #60a5fa); }
.ph-8 { background: linear-gradient(135deg, #fef9c3, #facc15); }
.ph-9 { background: linear-gradient(135deg, #e0e7ff, #818cf8); }

/* ===================================================
   RESPONSIVE — gallery page
   =================================================== */
@media (max-width: 768px) {
  .gallery-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: .4rem;
    max-width: 400px;
    margin: 0 auto 2rem;
  }
  .filter-btn {
    font-size: .78rem;
    padding: .5rem .5rem;
    text-align: center;
    min-height: 40px;
  }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
  }
}

@media (max-width: 480px) {
  .gallery-grid              { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .gallery-item .g-overlay   { padding: .75rem; }
  .gallery-item .g-overlay span { font-size: .78rem; }
}

@media (max-width: 360px) {
  .gallery-grid { grid-template-columns: 1fr; }
}