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"; // Show the modal
        modalImg.src = this.src;     // Load the clicked image
        modalImg.classList.remove("zoomed"); // Reset zoom state
    }
});

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

// Close logic when clicking the dark area
modal.onclick = function() {
    this.style.display = "none";
    modalImg.classList.remove("zoomed");
}