/* ---------- Galerie Layout ---------- */
.masonry-gallery-section {
  background:#fff;
  padding:80px 5%;
  text-align:center;
}

.gallery-title{
  font-size:2.2rem;
  font-weight:700;
  margin-bottom:50px;
}

.gallery-grid{
  column-count:3;
  column-gap:18px;
  max-width:1300px;
  margin:0 auto;
}

.gallery-grid img{
  width:100%;
  display:block;
  margin-bottom:18px;
  border-radius:12px;
  cursor:pointer;
  transition:transform .3s ease, box-shadow .3s ease;
  break-inside:avoid;
  box-shadow:0 6px 16px rgba(0,0,0,.1);
}

.gallery-grid img:hover{
  transform:scale(1.03);
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}

/* ---------- Lightbox ---------- */
#lightbox-overlay{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  display:none;
  justify-content:center;
  align-items:center;
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(12px) brightness(.8);
  z-index:99999;
}

#lightbox-overlay.active{
  display:flex;
  animation:fadeIn .3s ease forwards;
}

@keyframes fadeIn{
  from{opacity:0;} to{opacity:1;}
}

#lightbox-overlay img{
  max-width:90%;
  max-height:85%;
  border-radius:10px;
  box-shadow:0 0 30px rgba(0,0,0,.6);
  animation:zoomIn .3s ease;
}

@keyframes zoomIn{
  from{transform:scale(.9);opacity:0;}
  to{transform:scale(1);opacity:1;}
}

#lightbox-close{
  position:absolute;
  top:25px;
  right:40px;
  font-size:44px;
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
  z-index:100000;
  transition:color .3s ease;
}

#lightbox-close:hover{color:#00aaff;}

/* ---------- Navigation Scroll Fix ---------- */
html{
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}

/* ---------- Responsive ---------- */
@media(max-width:1024px){.gallery-grid{column-count:2;}}
@media(max-width:700px){.gallery-grid{column-count:1;}}