/* Gallery grid */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.gallery-item{position:relative;cursor:pointer;border-radius:8px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,0.08)}
.gallery-item img{width:100%;height:220px;object-fit:cover;display:block;transition:transform .3s ease}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item figcaption{padding:10px;background:var(--white);font-weight:600;text-align:center}


/* Lightbox backdrop */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.65);z-index:9999;padding:20px}
.lightbox[aria-hidden="false"]{display:flex}
.lb-shell{max-width:1000px;width:100%;display:flex;align-items:center;justify-content:center}


/* lb-content contains image and buttons overlayed inside it */
.lb-content{position:relative;width:100%;max-width:900px;background:transparent;border-radius:10px;display:flex;flex-direction:column;align-items:center}
.lb-content img{width:75%;max-width:700px;height:auto;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,0.4);opacity:0;transform:scale(.98);transition:opacity .35s ease, transform .35s ease}
.lb-content img.show{opacity:1;transform:scale(1)}
.lb-caption{color:var(--white);margin-top:12px;font-size:18px;text-align:center}


/* Buttons placed inside the image area (overlay) */
/* Lightbox button alignment fix */
.lb-close {
  position: absolute;
  top: -20px;
  right: 100px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  font-size: 24px;
  padding: 8px 12px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s ease;
}

.lb-prev,
.lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  font-size: 30px;
  padding: 10px 15px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s ease;
}

/* Button positions */
.lb-prev { left: 90px; }
.lb-next { right:90px; }

/* Hover effects */
.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
  background: rgba(0,0,0,0.85);
}

/* Responsive alignment for small screens */
@media (max-width: 600px) {
  .lb-close {
    top: -20px;
    right: 8px;
    font-size: 20px;
    padding: 6px 8px;
  }

  .lb-prev, .lb-next {
    font-size: 22px;
    padding: 8px 10px;
  }

  .lb-prev { left: 15px; }
  .lb-next { right: 15px; }
}


/* Make buttons slightly larger on big screens and closer on small screens */
@media(min-width:1200px){ .lb-prev,.lb-next{padding:14px 16px;font-size:34px} }
@media(max-width:800px){
.gallery-grid{grid-template-columns:repeat(2,1fr)}
.lb-content img{width:80%;max-width:520px}
.lb-prev{left:4%}
.lb-next{right:4%}
}
@media(max-width:600px){
.gallery-grid{grid-template-columns:repeat(1,1fr)}
.gallery-item img{height:160px}
.lb-content img{width:92%;max-width:320px}
.lb-prev{left:6%}
.lb-next{right:6%}
.lb-close{top:6px;right:6px;padding:6px 8px;font-size:20px}
}


/* small touch target improvements */
.lb-close:focus,.lb-prev:focus,.lb-next:focus{outline:2px solid rgba(11,110,246,0.6)}