/* ======================= 4. GALLERY / MOODBOARD ======================= */
.gallery{background:var(--bg-2)}
.gallery-filter{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.filter-btn{
  padding:9px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:transparent;
  color:var(--muted);font-family:inherit;font-weight:600;font-size:.88rem;cursor:pointer;transition:.2s;
}
.filter-btn.active,.filter-btn:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
.masonry{columns:4 220px;column-gap:14px}
.g-item{break-inside:avoid;margin-bottom:14px;border-radius:14px;overflow:hidden;position:relative;cursor:zoom-in;background:var(--bg-3)}
.g-item img,.g-item .ph{width:100%;transition:transform .4s}
.g-item .ph{font-size:1.6rem}
.g-item:hover img,.g-item:hover .ph{transform:scale(1.05)}
.g-item .cap{position:absolute;inset:auto 0 0 0;padding:28px 14px 12px;font-size:.85rem;font-weight:600;background:linear-gradient(transparent,rgba(0,0,0,.8));opacity:0;transition:.3s}
.g-item:hover .cap{opacity:1}
.g-item.hide{display:none}
.palette{display:flex;justify-content:center;gap:12px;margin-top:36px;flex-wrap:wrap}
.swatch{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted)}
.swatch i{width:26px;height:26px;border-radius:8px;border:1px solid rgba(255,255,255,.15)}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.lightbox.open{display:flex}
.lightbox img{max-height:85vh;max-width:100%;border-radius:12px}
.lightbox button{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;font-size:2.2rem;cursor:pointer}

@media (max-width:560px){
  .masonry{columns:2;column-gap:10px}
  .g-item{margin-bottom:10px}
}