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"); 
    }
});

// Fix: Make sure we are targeting the toggle correctly
modalImg.addEventListener('click', function(e) {
    e.stopPropagation(); // Prevents clicking the image from closing the whole thing
    console.log("Image clicked! Toggling zoom..."); 
    this.classList.toggle("zoomed");
});

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