/* ==========================================================================
   Stacked Images with Background Colour variant
   ========================================================================== */

/* Background panel — spans behind text column and partially behind images */
.style-alt-stacked-images-background .media-text-container {
    position: relative;
    display: grid;
    align-items: center;
    justify-content: center;
}

/* Image-right: text first, image second */
.style-alt-stacked-images-background.style-image-right .media-text-container {
    grid-template-columns: 38% auto;
}
.style-alt-stacked-images-background .media-text-container .column-image {
    max-width: 500px;
}

/* Image-left: image first, text second */
.style-alt-stacked-images-background.style-image-left .media-text-container {
    grid-template-columns: auto 38%;
}

/* Background panel — positioned inside column-textarea, overflows toward images */
.style-alt-stacked-images-background .column-textarea {
    position: relative;
    height: 100%;
    overflow: visible;
}

.style-alt-stacked-images-background .media-text-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
}

/* Image-left (text on right): bg extends left toward images */
.style-alt-stacked-images-background.style-image-left .media-text-bg {
    right: 0;
    left: -30%;
}

/* Image-right (text on left): bg extends right toward images */
.style-alt-stacked-images-background.style-image-right .media-text-bg {
    left: 0;
    right: -30%;
}

/* Ensure text content sits above the bg panel */
.style-alt-stacked-images-background .column-textarea > *:not(.media-text-bg) {
    position: relative;
    z-index: 1;
}

.style-alt-stacked-images-background .column-image {
    position: relative;
    z-index: 2;
}

/* Stacked images layout */
.style-alt-stacked-images-background .stacked-images .images-container-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
}

.style-alt-stacked-images-background .stacked-images .image img {
    width: 100%;
    height: auto;
    max-height: 420px;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--border-radius);
    overflow: hidden;
}

/* Add padding to the text column so content sits within the bg panel */
.block.style-alt-stacked-images-background .column-textarea {
    padding-top: var(--gutter-xl);
    padding-bottom: var(--gutter-xl);
}

/* Outer-edge padding so text doesn't sit flush against bg panel edge */
.block.style-alt-stacked-images-background.style-image-right .media-text-container .column-textarea {
    padding-left: var(--gutter-xl);
    padding-right: var(--gutter-xl);
}
.block.style-alt-stacked-images-background.style-image-left .media-text-container .column-textarea {
    padding-right: var(--gutter-xl);
    padding-left: var(--gutter-xl);
}

/* Vertically center stacked images with padding top/bottom */
.style-alt-stacked-images-background .stacked-images {
    display: flex;
    align-items: center;
    padding-top: var(--gutter-xl);
    padding-bottom: var(--gutter-xl);
}
.style-alt-stacked-images-background.style-image-left .stacked-images {
	margin-right: 0;
	margin-left: auto;
}

/* Responsive — stack to single column below 900px */
@media all and (max-width: 900px) {
    .style-alt-stacked-images-background .media-text-bg {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        height: auto;
        min-height: 50%;
    }

    .style-alt-stacked-images-background .media-text-container {
        display: flex;
        flex-direction: column;
    }

    .style-alt-stacked-images-background .stacked-images .images-container-wrap {
        gap: var(--gutter);
    }

    .style-alt-stacked-images-background .column-textarea {
        padding: var(--gutter-xl);
    }

    .style-alt-stacked-images-background .stacked-images {
        padding-top: 0;
        padding-bottom: 0;
    }
}