/* Gallery section — recent work. Reuses the site's CSS custom properties
   (--gold, --charcoal, --ink, --white, --pale, --line, --muted) defined in
   styles.css; this file only adds what styles.css doesn't already cover. */

.gallery-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}

.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gallery-item{margin:0}
.gallery-item[hidden]{display:none}

.gallery-thumb{display:block;position:relative;width:100%;aspect-ratio:3/4;padding:0;margin:0;border:0;background:var(--pale);overflow:hidden;cursor:zoom-in}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .35s ease}
.gallery-thumb:hover img,.gallery-thumb:focus-visible img{transform:scale(1.045)}
.gallery-thumb:after{content:'';position:absolute;inset:0;background:linear-gradient(#00000000 60%,#27272766);opacity:0;transition:opacity .25s ease}
.gallery-thumb:hover:after,.gallery-thumb:focus-visible:after{opacity:1}

.gallery-item--featured{grid-column:span 2}
.gallery-item--featured .gallery-thumb{aspect-ratio:16/11}

@media(min-width:560px){
  .gallery-grid{grid-template-columns:repeat(3,1fr);gap:16px}
}
@media(min-width:900px){
  .gallery-grid{grid-template-columns:repeat(4,1fr);gap:20px}
}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox-backdrop{position:absolute;inset:0;background:#171616e8}
.lightbox-dialog{position:relative;z-index:1;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:64px 16px}
.lightbox-figure{position:relative;margin:0;max-width:min(1100px,92vw);max-height:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.lightbox-img{max-width:100%;max-height:74vh;width:auto;height:auto;object-fit:contain;background:#0000;box-shadow:0 25px 60px #00000066}
.lightbox-caption{color:#f1f0f0;font-size:13px;text-align:center;max-width:640px;line-height:1.6}

.lightbox-btn{position:absolute;display:flex;align-items:center;justify-content:center;background:#ffffff14;color:#fff;border:1px solid #ffffff40;border-radius:999px;cursor:pointer;line-height:1}
.lightbox-btn:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.lightbox-close{top:16px;right:16px;width:44px;height:44px;font-size:26px}
.lightbox-prev,.lightbox-next{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:30px}
.lightbox-prev{left:12px}
.lightbox-next{right:12px}

@media(max-width:640px){
  .lightbox-dialog{padding:56px 8px}
  .lightbox-img{max-height:64vh}
  .lightbox-prev,.lightbox-next{width:42px;height:42px;font-size:24px}
  .lightbox-prev{left:4px}
  .lightbox-next{right:4px}
  .lightbox-close{top:8px;right:8px}
}