/*
 * Stable media layout contract
 *
 * The media file owns only its intrinsic width/height. The frame owns the
 * rendered geometry before the file is downloaded. Use responsive custom
 * properties or one of the presets below; never copy slot dimensions into the
 * img width/height attributes.
 */
.media-frame {
    --media-frame-fit: contain;
    --media-frame-position: center;
    position: relative;
    inline-size: var(--media-frame-width-desktop, 100%);
    max-inline-size: 100%;
    min-inline-size: 0;
    block-size: var(--media-frame-height-desktop, auto);
    min-block-size: var(--media-frame-min-height-desktop, 0);
    aspect-ratio: var(--media-frame-ratio-desktop, auto);
    overflow: visible;
}

/*
 * A grid item and its media frame are deliberately separate boxes. Grid
 * placement/aspect belongs to .media-grid-slot; the SEO/CLS frame may only
 * fill that slot and must never become the grid item itself.
 */
.media-grid-slot {
    min-inline-size: 0;
    min-block-size: 0;
}

.media-grid-slot > .media-frame {
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: 100%;
}

/* Only an explicit non-asset owner may crop content to a reserved box. */
.media-frame:is([data-media-geometry="component"], [data-media-geometry="grid"], [data-media-geometry="content"]),
.media-frame--fill,
.media-frame--banner-wide,
.media-frame--banner-contained,
.media-frame--video,
.media-frame--square,
.media-frame--portrait {
    overflow: hidden;
}

.media-frame--fill {
    --media-frame-height-desktop: 100%;
    --media-frame-height-tablet: 100%;
    --media-frame-height-mobile: 100%;
}

/*
 * Background media is paint, not layout. Its positioned parent owns the
 * section height; keeping this frame out of normal flow prevents the asset's
 * intrinsic ratio from changing a hero/grid/container geometry after load.
 */
.media-frame--background {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    min-inline-size: 0;
    min-block-size: 0;
}

.media-frame--background :is(img, video) {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    max-block-size: none;
    object-fit: var(--media-frame-fit);
    object-position: var(--media-frame-position);
}

/*
 * Type 101 hero layering contract. The section/content define layout; the
 * background media is only a paint layer and can never push overlay content
 * below itself, regardless of the video's intrinsic dimensions.
 */
.hero_38 {
    isolation: isolate;
}

.hero_38 > .hero_38__background {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero_38 > .hero_38__content {
    position: relative;
    z-index: 20;
}

.media-frame--banner-wide {
    --media-frame-height-desktop: 400px;
    --media-frame-height-tablet: 300px;
    --media-frame-height-mobile: 200px;
}

.media-frame--banner-contained {
    --media-frame-height-desktop: 300px;
    --media-frame-height-tablet: 240px;
    --media-frame-height-mobile: 200px;
}

.media-frame--video {
    --media-frame-ratio-desktop: 16 / 9;
    --media-frame-ratio-tablet: 16 / 9;
    --media-frame-ratio-mobile: 16 / 9;
}

.media-frame--square {
    --media-frame-ratio-desktop: 1 / 1;
    --media-frame-ratio-tablet: 1 / 1;
    --media-frame-ratio-mobile: 1 / 1;
}

.media-frame--portrait {
    --media-frame-ratio-desktop: 3 / 4;
    --media-frame-ratio-tablet: 3 / 4;
    --media-frame-ratio-mobile: 3 / 4;
}

.media-frame:is([data-media-geometry="component"], [data-media-geometry="grid"], [data-media-geometry="content"]) > a,
.media-frame:is([data-media-geometry="component"], [data-media-geometry="grid"], [data-media-geometry="content"]) > picture,
.media-frame--fill > :is(a, picture),
.media-frame--banner-wide > :is(a, picture),
.media-frame--banner-contained > :is(a, picture),
.media-frame--video > :is(a, picture),
.media-frame--square > :is(a, picture),
.media-frame--portrait > :is(a, picture) {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.media-frame:is([data-media-geometry="component"], [data-media-geometry="grid"], [data-media-geometry="content"]) > :is(img, video),
.media-frame:is([data-media-geometry="component"], [data-media-geometry="grid"], [data-media-geometry="content"]) > a > :is(img, video, picture),
.media-frame:is([data-media-geometry="component"], [data-media-geometry="grid"], [data-media-geometry="content"]) > picture > img,
.media-frame--fill :is(img, video),
.media-frame--banner-wide :is(img, video),
.media-frame--banner-contained :is(img, video),
.media-frame--video :is(img, video),
.media-frame--square :is(img, video),
.media-frame--portrait :is(img, video) {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    max-block-size: none;
    object-fit: var(--media-frame-fit);
    object-position: var(--media-frame-position);
}

/* Asset-owned media keeps its own ratio. Explicit width/height attributes
   reserve that ratio in HTML but never become rendered CSS dimensions. */
.media-frame[data-media-geometry="asset"] > :is(img, video),
.media-frame[data-media-geometry="asset"] > a > :is(img, video),
.media-frame[data-media-geometry="asset"] > picture > img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    max-inline-size: 100%;
    object-fit: contain;
    object-position: var(--media-frame-position);
}

.media-frame--fill > .swiper-wrapper,
.media-frame--fill > .swiper-wrapper > .swiper-slide {
    block-size: 100%;
}

.media-frame--fill :is(.banner-img, .background-video, .single-video) {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: var(--media-frame-fit);
    object-position: var(--media-frame-position);
}

.media-frame .el51-primary-media-link,
.media-frame .el51-primary-media {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.media-frame .el51-primary-media {
    object-fit: var(--media-frame-fit);
    object-position: var(--media-frame-position);
}

video.media-video-layout {
    aspect-ratio: var(--media-video-ratio, auto);
}

@media (max-width: 991.98px) {
    .media-frame {
        inline-size: var(--media-frame-width-tablet, var(--media-frame-width-desktop, 100%));
        block-size: var(--media-frame-height-tablet, var(--media-frame-height-desktop, auto));
        min-block-size: var(--media-frame-min-height-tablet, var(--media-frame-min-height-desktop, 0));
        aspect-ratio: var(--media-frame-ratio-tablet, var(--media-frame-ratio-desktop, auto));
    }
}

@media (max-width: 767.98px) {
    .media-frame {
        inline-size: var(--media-frame-width-mobile, var(--media-frame-width-tablet, var(--media-frame-width-desktop, 100%)));
        block-size: var(--media-frame-height-mobile, var(--media-frame-height-tablet, var(--media-frame-height-desktop, auto)));
        min-block-size: var(--media-frame-min-height-mobile, var(--media-frame-min-height-tablet, var(--media-frame-min-height-desktop, 0)));
        aspect-ratio: var(--media-frame-ratio-mobile, var(--media-frame-ratio-tablet, var(--media-frame-ratio-desktop, auto)));
    }
}