/*
 * Head images always fill the width of their container.
 *
 * Hero context = a slider marked by Media/Type/Swiper.html or a gallery inside .stage on
 * normal pages (not .stagetop, that is the header):
 * .is-hero-fullwidth = explicit ss_hero (also applies on hero layout pages),
 * .is-fullwidth-auto = full width after imagewidth >= 1200 (normal pages only).
 * Pages with a designed hero layout (body.is-hero) are excluded from the .stage and
 * .is-fullwidth-auto rules, because there the layout CSS sets the fixed height and the
 * image fills it via object-fit.
 *
 * width: 100% and never 100vw: 100vw includes the scrollbar and overflows.
 * Large displays scale the largest file via CSS; files are never recalculated.
 * The slider keeps the aspect ratio of its images (width/height attributes),
 * object-fit: cover keeps slides of a different ratio from distorting.
 */
.swiper-container.is-hero-fullwidth,
body:not(.is-hero) .swiper-container.is-fullwidth-auto,
body:not(.is-hero) .stage .swiper-container {
    /* !important beats the plain inline style="width:{imagewidth}px" that Swiper.html writes for fixed sliders (it carries no !important on purpose) */
    width: 100% !important;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

.is-hero-fullwidth picture,
body:not(.is-hero) .is-fullwidth-auto picture,
body:not(.is-hero) .stage .ce-gallery picture {
    display: block;
    width: 100%;
}

.is-hero-fullwidth img,
body:not(.is-hero) .is-fullwidth-auto img,
body:not(.is-hero) .stage .ce-gallery img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

.is-hero-fullwidth figure,
body:not(.is-hero) .is-fullwidth-auto figure,
body:not(.is-hero) .stage .ce-gallery figure {
    width: 100%;
    max-width: none;
    margin: 0;
}

/*
 * global.css gives #wrapper 1rem side padding between 40.063em and 1441px (except on the
 * hero page layouts, which are excluded here). A stage with a head image takes that padding
 * back, so the image spans the full viewport there as well (same breakpoints and value as
 * global.css).
 */
@media only screen and (min-width: 40.063em) and (max-width: 1441px) {
    body:not(.is-hero) .stage:has(.is-hero-fullwidth),
    body:not(.is-hero) .stage:has(.is-fullwidth-auto),
    body:not(.is-hero) .stage:has(.ce-gallery img) {
        margin-left: -1rem;
        margin-right: -1rem;
    }
}

/*
 * Centered gallery wrappers (fluid_styled_content .ce-center) shrink-wrap their content, so a
 * 100% wide image cannot fill them: they take the full width of the stage instead.
 */
body:not(.is-hero) .stage .ce-gallery .ce-outer,
body:not(.is-hero) .stage .ce-gallery .ce-inner {
    float: none;
    position: static;
    width: 100%;
}

/*
 * The grid gutter compensation (negative side margin of .grid-margin-x) has no counterpart in
 * a head image cell without margins, so it is removed in the stage gallery.
 */
body:not(.is-hero) .stage .ce-gallery .grid-x.grid-margin-x {
    margin-left: 0;
    margin-right: 0;
}