/* gallery.css — Gallery page */

.page-hero { height:380px; }
.hero-bg {
  background:
    linear-gradient(to bottom, rgba(13,27,42,.35) 0%, rgba(13,27,42,.92) 100%),
    url('images/13235517_1030713307015361_5965369839386780652_o.jpg') center/cover no-repeat;
}

/* ── FILTER BAR ── */
.filter-bar { position:sticky; top:68px; z-index:100; background:var(--white); border-bottom:1px solid var(--border); padding:.875rem 5vw; display:flex; align-items:center; gap:.625rem; flex-wrap:wrap; }
.filter-label { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); margin-right:.25rem; }
.filter-btn { padding:.4rem 1rem; border-radius:100px; border:1.5px solid var(--border); font-family:inherit; font-size:.8125rem; font-weight:600; color:var(--gray); cursor:pointer; background:var(--white); transition:border-color .18s,background .18s,color .18s; white-space:nowrap; }
.filter-btn:hover { border-color:var(--mist); color:var(--navy); }
.filter-btn.active { background:var(--navy); border-color:var(--navy); color:var(--white); }
.photo-count { margin-left:auto; font-size:.8125rem; color:var(--gray); }
.photo-count strong { color:var(--navy); }

/* ── MASONRY ── */
.gallery-wrap { padding:2.5rem 5vw 5rem; max-width:1400px; margin:0 auto; }
.masonry { columns:4 260px; column-gap:1rem; }
.gallery-item { break-inside:avoid; margin-bottom:1rem; border-radius:12px; overflow:hidden; position:relative; cursor:pointer; background:var(--border); }
.gallery-item img { width:100%; display:block; transition:transform .4s ease; }
.gallery-item:hover img { transform:scale(1.04); }
.gallery-item-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(13,27,42,.75) 0%,transparent 55%); opacity:0; transition:opacity .25s; display:flex; align-items:flex-end; padding:.875rem; }
.gallery-item:hover .gallery-item-overlay { opacity:1; }
.overlay-tag { font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:rgba(79,195,247,.2); border:1px solid rgba(79,195,247,.4); color:var(--mist); padding:3px 10px; border-radius:100px; }
.zoom-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.7); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.15); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; color:var(--white); font-size:1.25rem; opacity:0; transition:opacity .25s,transform .25s; }
.gallery-item:hover .zoom-icon { opacity:1; transform:translate(-50%,-50%) scale(1); }
.gallery-item.hidden { display:none; }
.gallery-empty { display:none; text-align:center; padding:4rem; color:var(--gray); }
.gallery-empty.visible { display:block; }
.gallery-empty .icon { font-size:3rem; margin-bottom:1rem; }

/* ── LIGHTBOX ── */
#lightbox { display:none; position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.94); align-items:center; justify-content:center; }
#lightbox.open { display:flex; }
.lb-inner { position:relative; max-width:92vw; max-height:92vh; display:flex; flex-direction:column; align-items:center; gap:.875rem; }
#lb-img { max-width:100%; max-height:82vh; border-radius:10px; object-fit:contain; display:block; box-shadow:0 24px 60px rgba(0,0,0,.6); }
.lb-meta { display:flex; align-items:center; gap:1rem; }
.lb-tag { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:rgba(79,195,247,.15); border:1px solid rgba(79,195,247,.3); color:var(--mist); padding:3px 12px; border-radius:100px; }
.lb-counter { font-size:.8125rem; color:rgba(255,255,255,.5); }
.lb-close { position:fixed; top:1.25rem; right:1.5rem; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:1.25rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.lb-close:hover { background:rgba(255,255,255,.2); }
.lb-prev, .lb-next { position:fixed; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:1.25rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.lb-prev:hover, .lb-next:hover { background:rgba(255,255,255,.2); }
.lb-prev { left:1.5rem; }
.lb-next { right:1.5rem; }

/* ── CTA ── */
.gallery-cta { background:var(--light); padding:4rem 5vw; text-align:center; }
.gallery-cta h2 { font-family:'Playfair Display',serif; font-size:clamp(1.5rem,3.5vw,2.25rem); color:var(--navy); margin-bottom:.75rem; }
.gallery-cta p { font-size:.9375rem; color:var(--gray); max-width:480px; margin:0 auto 1.75rem; }
.cta-row { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.btn-teal { display:inline-flex; align-items:center; gap:8px; background:var(--teal); color:var(--white); text-decoration:none; font-weight:700; font-size:.9375rem; padding:.75rem 1.75rem; border-radius:8px; transition:background .2s,transform .15s; }
.btn-teal:hover { background:#00a896; transform:translateY(-1px); }
.btn-outline { display:inline-flex; align-items:center; gap:8px; border:2px solid var(--border); color:var(--navy); text-decoration:none; font-weight:600; font-size:.9375rem; padding:.75rem 1.75rem; border-radius:8px; transition:border-color .2s,background .2s; }
.btn-outline:hover { border-color:var(--mist); background:var(--white); }

/* ── RESPONSIVE ── */
@media (max-width:640px) {
  .masonry { columns:2 140px; }
  .lb-prev { left:.5rem; }
  .lb-next { right:.5rem; }
}