/* Photo-first gallery — shared by the homepage teaser and the /work page.
   Uses the CSS variables each page defines (--forest, --paper, etc.). */

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
}
@media (min-width:760px){ .gallery-grid{ grid-template-columns:repeat(3, 1fr); gap:14px; } }

.g-tile{
  position:relative;
  aspect-ratio:1 / 1;
  overflow:hidden;
  border-radius:8px;
  background:var(--sage-pale);
  border:0;
  padding:0;
  width:100%;
  display:block;
}
.g-tile img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .4s ease;
}
.g-click{ cursor:pointer; }
.g-click:hover img{ transform:scale(1.05); }
.g-click:focus-visible{ outline:2px solid var(--forest); outline-offset:2px; }

.g-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--sage); }
.g-ph svg{ width:36px; height:36px; opacity:.6; }

.g-cat{
  position:absolute; top:10px; left:10px; z-index:2;
  font-family:var(--body); font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--forest); background:rgba(245,242,232,.92);
  padding:3px 9px; border-radius:999px;
}
.g-count{
  position:absolute; top:10px; right:10px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600; color:#fff;
  background:rgba(46,52,39,.72); padding:3px 9px; border-radius:999px;
}
.g-count svg{ width:14px; height:14px; }
.g-ba{
  position:absolute; bottom:10px; right:10px; z-index:2;
  font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:var(--sage); padding:3px 8px; border-radius:999px;
}
.g-title{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:30px 12px 11px; text-align:left;
  font-family:var(--display); font-size:15px; font-weight:500; color:#fff;
  background:linear-gradient(to top, rgba(20,24,16,.8), rgba(20,24,16,0));
  opacity:0; transition:opacity .25s;
}
.g-tile:hover .g-title, .g-click:focus-visible .g-title{ opacity:1; }
/* placeholder tiles (no photo yet): clean, centered, nothing overlapping */
.g-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:18px; text-align:center; background:var(--sage-pale); }
.g-empty .g-ph{ position:static; }
.g-empty .g-ph svg{ width:30px; height:30px; opacity:.5; }
.g-empty .g-cat{ position:static; background:none; padding:0; color:var(--sage); }
.g-empty .g-title{ position:static; opacity:1; background:none; color:var(--ink); padding:0; font-size:14px; font-weight:500; }

/* category filters (used on the /work page) */
.gallery-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.g-filter{
  font-family:var(--body); font-size:14px; color:var(--muted);
  background:transparent; border:1px solid var(--sage-line);
  border-radius:999px; padding:7px 15px; cursor:pointer; transition:all .16s;
}
.g-filter:hover{ border-color:var(--sage); color:var(--forest); }
.g-filter.active{ background:var(--forest); color:var(--paper); border-color:var(--forest); }

/* lightbox */
.glb{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; background:rgba(30,34,25,.94); padding:24px; }
.glb.open{ display:flex; }
.glb-img{ max-width:min(1100px,94vw); max-height:86vh; width:auto; height:auto; border-radius:6px; object-fit:contain; }
.glb-btn{ position:absolute; background:rgba(245,242,232,.12); color:#fff; border:1px solid rgba(245,242,232,.3); border-radius:50%; width:46px; height:46px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s; }
.glb-btn:hover{ background:rgba(245,242,232,.24); }
.glb-btn svg{ width:24px; height:24px; }
.glb-close{ top:20px; right:20px; }
.glb-prev{ left:20px; top:50%; transform:translateY(-50%); }
.glb-next{ right:20px; top:50%; transform:translateY(-50%); }
.glb-cap{ position:absolute; bottom:20px; left:0; right:0; text-align:center; color:#fff; font-size:14px; }
@media (max-width:620px){ .glb-prev{ left:10px; } .glb-next{ right:10px; } .glb-btn{ width:40px; height:40px; } }