/* ===== GALLERY PAGE STYLES ===== */
.gallery-filter-bar {
  background:var(--white); padding:16px 5%; display:flex;
  flex-wrap:wrap; gap:10px; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,0.06);
  position:sticky; top:80px; z-index:900; border-bottom:1px solid #e0ddd4;
}
.filter-btn {
  padding:8px 20px; border:2px solid var(--navy); background:var(--white);
  color:var(--navy); border-radius:25px; font-size:13px; font-weight:600;
  cursor:pointer; transition:all 0.25s ease; white-space:nowrap;
  font-family:var(--font-body);
}
.filter-btn:hover { background:var(--navy); color:var(--white); }
.filter-btn.active { background:var(--gold); border-color:var(--gold); color:var(--navy); }

.gallery-page-wrap { max-width:1200px; margin:40px auto 60px; padding:0 20px; }

.gallery-cat-section { margin-bottom:55px; }
.cat-heading { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.cat-icon {
  width:46px; height:46px; background:var(--navy); border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0;
}
.cat-heading h3 { font-size:22px; color:var(--navy); font-weight:700; font-family:var(--font-display); }
.cat-line { flex:1; height:2px; background:linear-gradient(to right,var(--gold),transparent); }

.photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.photo-item {
  position:relative; overflow:hidden; border-radius:10px;
  aspect-ratio:4/3; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
.photo-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease; display:block; }
.photo-item:hover img { transform:scale(1.08); }
.photo-overlay {
  position:absolute; inset:0;
  background:linear-gradient(transparent 50%,rgba(0,51,102,0.85) 100%);
  opacity:0; transition:opacity 0.3s ease;
  display:flex; align-items:flex-end; padding:14px;
}
.photo-item:hover .photo-overlay { opacity:1; }
.photo-overlay span { color:white; font-size:13px; font-weight:600; }

/* Lightbox caption */
.lightbox-caption { color:#ddd; margin-top:14px; font-size:15px; text-align:center; }

@media(max-width:768px){
  .photo-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
  .gallery-filter-bar { top:64px; }
}