/* Lightbox Gallery - Frontend Styles */

.lightbox-gallery-grid {
    /* CSS vars set inline by PHP */
    --min-thumbnail-width: 150px;
    --cols: 4;

    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(var(--min-thumbnail-width), 1fr));
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.lightbox-gallery-grid > a {
    display: block;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.12);
    aspect-ratio: 1 / 1;
    transition: transform .2s, box-shadow .2s;
}

.lightbox-gallery-grid > a:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.lightbox-gallery-grid > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 600px) {
    .lightbox-gallery-grid {
        --cols: 2 !important;
    }
}



.fancybox-wrap .fancybox-skin {
    background: transparent;
    box-shadow: none;
}


.fancybox-wrap.fancybox-opened .fancybox-skin {
    background: transparent;
    box-shadow: none;
}