const modal = document.getElementById("imgModal");
const modalImg = document.getElementById("modalImg");
const galleryImgs = document.querySelectorAll(".gallery-img");

galleryImgs.forEach(img => {
    img.onclick = function() {
        modal.style.display = "flex";
        modalImg.src = this.src;
        modalImg.classList.remove("zoomed"); // Reset zoom on new open
    }
});

modalImg.onclick = function(e) {
    e.stopPropagation(); // Prevents the modal from closing when clicking image
    this.classList.toggle("zoomed");
}

// Close modal when clicking anywhere else (the background)
modal.onclick = function() {
    modal.style.display = "none";
    modalImg.classList.remove("zoomed");
}