/* ═══════════════════════════════════════════
   GALLERY.CSS — Shatabdi Pavers (gallery.html ONLY)
   Styles for: the filter tabs and the full photo grid.

   ✏️ Photo content (images/captions/categories) is in
      js/shared.js, not here. This file only controls
      how the grid LOOKS.
   🔒 The full-screen lightbox viewer styles live in
      css/shared.css (.lightbox classes) since it's
      reused by other pages too — not duplicated here.
   ═══════════════════════════════════════════ */

.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:44px}
.ftab{padding:8px 20px;border-radius:24px;font-size:12.5px;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:transparent;color:var(--taupe);transition:all var(--t);font-family:'Outfit',sans-serif}
.ftab:hover,.ftab.on{background:var(--terra);color:white;border-color:var(--terra)}

/* the main photo grid — masonry-ish via auto-fill, fixed aspect ratio tiles */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}

.gtile{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;aspect-ratio:4/3;background:var(--border);border:1px solid var(--border)}
.gtile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t)}
.gtile:hover img{transform:scale(1.08)}

.gtile-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,0) 55%);opacity:0;transition:opacity var(--t);display:flex;flex-direction:column;justify-content:flex-end;padding:14px}
.gtile:hover .gtile-overlay{opacity:1}
.gtile-cap{color:#fff;font-size:13px;font-weight:500;line-height:1.4}
.gtile-cat{display:inline-block;margin-top:6px;padding:2px 9px;border-radius:14px;background:var(--terra);color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;width:fit-content}

/* "no photos in this category yet" empty state */
.gal-empty{text-align:center;padding:60px 20px;color:var(--taupe);font-size:14px}