/* SMV gallery: styles for the core Gallery block (Galleria / Gallery pages) */

.wp-block-gallery.has-nested-images {
    --wp--style--unstable-gallery-gap: 1.25rem;
    gap: 1.25rem;
}

/* Show titles (captions) below the image instead of overlaying it */
.wp-block-gallery.has-nested-images figure.wp-block-image {
    flex-direction: column;
    flex-grow: 0;
    background: #fff;
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .08);
}

.wp-block-gallery.has-nested-images figure.wp-block-image img,
.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .3s ease;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:hover img {
    transform: scale(1.03);
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
    position: static;
    background: none;
    color: var(--bs-dark, #212529);
    text-shadow: none;
    padding: .75rem 1rem;
    font-size: 1rem;
    text-align: left;
    max-height: none;
    overflow: visible;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before,
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption::before {
    display: none;
}

/* Option: "Hide titles" block style */
.wp-block-gallery.is-style-smv-hide-titles figure.wp-block-image figcaption,
.wp-block-gallery.is-style-smv-hide-titles > figcaption {
    display: none;
}

/* Explicit column widths (WP 7 sets the gap variable per gallery inline,
   so core's width formula no longer matches our 1.25rem gap) */
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
    width: calc((100% - 1.25rem) / 2);
}

@media (min-width: 600px) {
    .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image),
    .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
        width: calc((100% - 2 * 1.25rem) / 3);
    }
}