/* Elementor retains the source URL and responsive frame geometry. Both layers
   inherit that same URL, including after image replacement. No extra JS or file. */
.mrp-event-image--contain > .elementor-widget-wrap,
.mrp-event-image--contain > .mrp-event-image__frame {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.mrp-event-image--contain > .elementor-widget-wrap::before,
.mrp-event-image--contain > .elementor-widget-wrap::after,
.mrp-event-image--contain > .mrp-event-image__frame::before {
    content: "";
    display: block;
    position: absolute;
    pointer-events: none;
    background-image: inherit;
    background-position: center;
    background-repeat: no-repeat;
    clear: none;
}

.mrp-event-image--contain > .elementor-widget-wrap::before,
.mrp-event-image--contain > .mrp-event-image__frame::before {
    inset: -24px;
    z-index: 0;
    background-size: cover;
    filter: blur(18px) brightness(.8);
}

.mrp-event-image--contain > .elementor-widget-wrap::after {
    inset: 0;
    z-index: 1;
    background-size: contain;
}

/* Existing shortcode dimensions; Elementor columns keep their own dimensions. */
.mrp-event-image__frame {
    border-radius: 15px 0 0 0;
    background-position: center;
    background-size: cover;
}
.mrp-event-image__frame > img.event-header-image {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 400px;
    border-radius: inherit;
    object-fit: cover;
}
.mrp-event-image--contain > .mrp-event-image__frame > img.event-header-image {
    object-fit: contain;
}
/* Stack through tablet width: no very narrow information column beside a tall
   image. The frame follows its available width, instead of a fixed 200px strip. */
@media (max-width: 1024px) {
    .elementor-column.mrp-event-image--contain,
    .elementor-column.mrp-event-image--cover,
    .elementor-column.mrp-event-image--contain + .elementor-column,
    .elementor-column.mrp-event-image--cover + .elementor-column {
        width: 100%;
    }
    .elementor .elementor-column.mrp-event-image--contain > .elementor-widget-wrap,
    .elementor .elementor-column.mrp-event-image--cover > .elementor-widget-wrap,
    .elementor .elementor-column.mrp-event-image--contain + .elementor-column > .elementor-widget-wrap,
    .elementor .elementor-column.mrp-event-image--cover + .elementor-column > .elementor-widget-wrap {
        border-radius: 0;
    }
    .elementor .elementor-column.mrp-event-image--contain + .elementor-column > .elementor-widget-wrap,
    .elementor .elementor-column.mrp-event-image--cover + .elementor-column > .elementor-widget-wrap {
        padding: 25px;
    }
    .elementor-column.mrp-event-image--contain .elementor-spacer-inner,
    .elementor-column.mrp-event-image--cover .elementor-spacer-inner {
        height: auto;
        aspect-ratio: 16 / 9;
        max-height: 400px;
    }
    .mrp-event-image__frame { border-radius: 0; }
    .mrp-event-image__frame > img.event-header-image {
        height: auto;
        aspect-ratio: 16 / 9;
        max-height: 400px;
    }
}