/* Masonry Gallery Styles */

/* Fix for WordPress gallery block */
.wp-block-gallery {
    display: block !important; /* Override WordPress flex display */
}

.masonry-gallery {
    margin: 0 auto;
    display: block !important; /* Override WordPress flex display */
}

.masonry-gallery:after {
    content: '';
    display: block;
    clear: both;
}

.masonry-gallery .masonry-item,
.wp-block-gallery .wp-block-image,
.wp-block-gallery figure {
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
    float: left; /* Required for masonry layout */
    margin: 0 !important; /* Override WordPress margins */
}

/* Responsive grid sizing */
@media screen and (min-width: 768px) {
    .masonry-gallery.columns-2 .masonry-item,
    .masonry-gallery.columns-default .masonry-item,
    .wp-block-gallery.columns-2 .wp-block-image,
    .wp-block-gallery.columns-2 figure {
        width: 50%;
    }
    
    .masonry-gallery.columns-3 .masonry-item,
    .wp-block-gallery.columns-3 .wp-block-image,
    .wp-block-gallery.columns-3 figure {
        width: 33.33%;
    }
    
    .masonry-gallery.columns-4 .masonry-item,
    .wp-block-gallery.columns-4 .wp-block-image,
    .wp-block-gallery.columns-4 figure {
        width: 25%;
    }
    
    .masonry-gallery.columns-5 .masonry-item,
    .wp-block-gallery.columns-5 .wp-block-image,
    .wp-block-gallery.columns-5 figure {
        width: 20%;
    }
    
    .masonry-gallery.columns-6 .masonry-item,
    .wp-block-gallery.columns-6 .wp-block-image,
    .wp-block-gallery.columns-6 figure {
        width: 16.66%;
    }
    
    .masonry-gallery.columns-7 .masonry-item,
    .wp-block-gallery.columns-7 .wp-block-image,
    .wp-block-gallery.columns-7 figure {
        width: 14.28%;
    }
    
    .masonry-gallery.columns-8 .masonry-item,
    .wp-block-gallery.columns-8 .wp-block-image,
    .wp-block-gallery.columns-8 figure {
        width: 12.5%;
    }
}

/* Image styling */
.masonry-gallery .masonry-item img,
.wp-block-gallery .wp-block-image img,
.wp-block-gallery figure img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
}

.masonry-gallery .masonry-item a:hover img,
.wp-block-gallery .wp-block-image a:hover img,
.wp-block-gallery figure a:hover img {
    opacity: 0.85;
}

/* Caption styling */
.masonry-gallery .masonry-item figcaption,
.wp-block-gallery .wp-block-image figcaption,
.wp-block-gallery figure figcaption {
    margin-top: 5px;
    font-size: 0.9em;
    text-align: center;
}