/* Masonry gallery using CSS columns + lightbox styles */
.masonry{
  column-count: 3;
  column-gap: 1rem;
}
.masonry-item{ 
  break-inside: avoid;
  margin-bottom: 1rem;
}
.masonry-item figure{ margin:0; }
.masonry-item img{ width:100%; display:block; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,0.12); }
.masonry-item figcaption{ font-size:12px; color:var(--bs-gray); margin-top:6px; }

@media (max-width: 992px){ .masonry{ column-count:2; } }
@media (max-width: 576px){ .masonry{ column-count:1; } }

/* Lightbox */
.lightbox{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; visibility:hidden; opacity:0; transition:opacity .25s ease; z-index:9999; }
.lightbox.show{ visibility:visible; opacity:1; }
.lightbox .lb-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.7); }
.lightbox .lb-content{ position:relative; max-width:90%; max-height:90%; z-index:2; display:flex; flex-direction:column; align-items:center; }
.lightbox .lb-img{ max-width:100%; max-height:80vh; border-radius:6px; }
.lightbox .lb-caption{ color:#fff; margin-top:8px; text-align:center; }
.lightbox .lb-close, .lightbox .lb-prev, .lightbox .lb-next{ position:fixed; background:transparent; border:0; color:#fff; font-size:28px; z-index:3; cursor:pointer; }
.lightbox .lb-close{ right:16px; top:16px; }
.lightbox .lb-prev{ left:16px; top:50%; transform:translateY(-50%); }
.lightbox .lb-next{ right:16px; top:50%; transform:translateY(-50%); }