/* ========================================= */
/* DEFAULT / DESKTOP             */
/* ========================================= */

/* Masonry Layout */
.masonry-grid {
    column-count: 3; /* Default for Desktop */
    column-gap: 1rem;
}

/* Prevent images from breaking across columns */
.masonry-item {
    break-inside: avoid;
    margin-bottom: 1rem;
}

/* Hover Effect */
.masonry-item img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.masonry-item img:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
}

/* Lightbox Styling */
#lightboxImage {
    max-height: 90vh;
    max-width: 100%;
    object-fit: contain;
}

.z-index-modal {
    z-index: 1055;
}


/* ========================================= */
/* TABLET STYLES (768px - 991px)   */
/* ========================================= */
@media (max-width: 991px) {
    .masonry-grid {
        column-count: 2; /* Drop to 2 columns */
    }
}


/* ========================================= */
/* MOBILE STYLES (< 768px)         */
/* ========================================= */
@media (max-width: 767px) {
    .masonry-grid {
        column-count: 1; /* Drop to 1 column */
    }

    /* Disable the 'lift' hover effect on mobile 
       (makes touch interaction smoother) */
    .masonry-item img:hover {
        transform: none;
        box-shadow: none !important;
    }
    
    /* Add a bit more bottom spacing for scrolling */
    .masonry-item {
        margin-bottom: 1.5rem;
    }
}