/* ============================================================
   gallery.css — CSS Grid masonry replacement + image effects
   Replaces: plugins.masonrythumbs.js (jQuery + Isotope)
   ============================================================ */

/* --- Masonry Grid (CSS Grid) --- */
.masonry-thumbs {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(4, 1fr);
}

.masonry-thumbs.grid-2,
.masonry-thumbs.grid-container.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.masonry-thumbs.grid-3,
.masonry-thumbs.grid-container.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.masonry-thumbs.grid-4,
.masonry-thumbs.grid-container.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* First item spans 2x2 in album galleries */
.masonry-thumbs[data-big="1"] > a:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.masonry-thumbs > a {
    display: block;
    overflow: hidden;
    border-radius: 2px;
    aspect-ratio: 1;
}

.masonry-thumbs > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.masonry-thumbs > a:hover > img {
    transform: scale(1.05);
}

/* Image fade effect (Canvas theme compat) */
.image_fade {
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.image_fade:hover,
a:hover .image_fade {
    opacity: 1;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .masonry-thumbs,
    .masonry-thumbs.grid-4,
    .masonry-thumbs.grid-container.grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767.98px) {
    .masonry-thumbs,
    .masonry-thumbs.grid-4,
    .masonry-thumbs.grid-container.grid-4,
    .masonry-thumbs.grid-3,
    .masonry-thumbs.grid-container.grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .masonry-thumbs {
        grid-template-columns: repeat(2, 1fr);
    }
    .masonry-thumbs[data-big="1"] > a:first-child {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* --- Splide overrides for this project --- */
.splide__slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Thumbnail slider */
.splide-thumbs .splide__slide {
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.splide-thumbs .splide__slide.is-active {
    opacity: 1;
    border: 2px solid var(--uv-gold, #c8a84e);
}

/* --- GLightbox description override --- */
.gslide-description {
    background: rgba(0, 0, 0, 0.7) !important;
}