@import url("./layered-image--header-and-section-tweaks.2c9fe11f30aa.css");
@import url("./layered-image--fix-raw-image-size.351b182362f1.css");

/* TODO: Integrate into Core-CMS */
/* TODO: Pull component to right LIKE DESIGN (or use o-offset-content) */
/* CAVEAT: Does NOT yet support the offset of main image as shown in design */
/* https://xd.adobe.com/view/dabaec5a-cc31-4c5c-876e-56d6d8cc359e-8fe9/screen/c0898d6b-2fd9-472a-bcd7-1ae9d4f9a015/specs/ */




/* BASE */

/* So top of `.align-left` decal image aligns with top of <h1> */
/* FAQ: To limit style to specific context, consider: `.col`, `:only-child` */
.layered-image, [class*="layered-image--"] {
    --h1-offset: 0;

    margin-top: var(--h1-offset);
}

/* So child images can be positioned */
.layered-image, [class*="layered-image--"] {
    /* So children can `position: absolute` */
    position: relative;

    /* So background image is centered without `transform: translate(…)` */
    /* FAQ: The `transform` prop is already used to scale images (see @media) */
    /* FAQ: To combine conditional `transform` values with `var()` is complex */
    /* FAQ: To use `scale` prop would work... except on Samsung Internet */
    display: grid;
    justify-items: center;
}



/* ELEMENTS */

/* So images can be positioned */
:is(.layered-image, [class*="layered-image--"])
> :is(.align-left, .align-left--oversized, .align-right, .align-center) {
    position: absolute;
}
:is(.layered-image, [class*="layered-image--"])
> :is(.align-left, .align-right) {
    float: unset; /* undo core-cms.css */
    max-width: unset; /* undo core-cms.css */
}

/* To position images at standard anchor points */
:is(.layered-image, [class*="layered-image--"]) > .align-left,
:is(.layered-image, [class*="layered-image--"]) > .align-left--oversized {
    left: calc(var(--global-space--grid-gap) / 2);
}
:is(.layered-image, [class*="layered-image--"]) > .align-right {
    right: calc(var(--global-space--grid-gap) / 2);
}
:is(.layered-image, [class*="layered-image--"]) > .align-left--oversized {
    top: -12%;
    left: -7%;
}
:is(.layered-image, [class*="layered-image--"]) > .align-center {
    /* User must set top inline, because designs are few and inconsistent */
    /* https://xd.adobe.com/view/dabaec5a-cc31-4c5c-876e-56d6d8cc359e-8fe9/screen/032918ef-38c1-4cd2-bd3b-c38a5af710da/specs/ */
    /* https://xd.adobe.com/view/dabaec5a-cc31-4c5c-876e-56d6d8cc359e-8fe9/screen/3f3faa5d-3bca-41ed-9c13-0f94a4caae93/specs/ */
    top: 0;
}
@media (max-width: 575px) /* ✅ 2023-01-27 16:00 */  {
    /* To position images at standard anchor points */
    :is(.layered-image, [class*="layered-image--"]) > .align-left,
    :is(.layered-image, [class*="layered-image--"]) > .align-left--oversized {
        top: -8.8%;
        left: calc(var(--global-space--grid-gap) / 2);
    }
    :is(.layered-image, [class*="layered-image--"]) > .align-right {
        bottom: -9.25%;
        right: calc(var(--global-space--grid-gap) / 2);
    }
}
@media (min-width: 576px) and (max-width: 991px) /* ✅ 2023-01-27 16:00 */ {
    :is(.layered-image, [class*="layered-image--"]) > .align-left {
        top: -8.8%;
        left: -3.4%;
    }
    :is(.layered-image, [class*="layered-image--"]) > .align-right {
        bottom: -9.25%;
        right: -5%;
    }
}
@media (min-width: 992px) and (max-width: 1199px) /* ✅ 2023-01-27 16:00 */ {
    :is(.layered-image, [class*="layered-image--"]) > .align-left {
        top: -7.5%;
        left: -3%;
    }
    :is(.layered-image, [class*="layered-image--"]) > .align-right {
        bottom: -7.75%;
        right: -4.35%;
    }
}
@media (min-width: 1200px) and (max-width: 1679px) /* ✅ 2023-01-27 16:00 */ {
    :is(.layered-image, [class*="layered-image--"]) > .align-left {
        top: -8.8%;
        left: -3.4%;
    }
    :is(.layered-image, [class*="layered-image--"]) > .align-right {
        bottom: -9.25%;
        right: -5%;
    }
}
@media (min-width: 1680px) and (max-width: 1919px) /* ✅ 2023-01-27 16:00 */ {
    :is(.layered-image, [class*="layered-image--"]) > .align-left {
        top: -7.5%;
        left: -3%;
    }
    :is(.layered-image, [class*="layered-image--"]) > .align-right {
        bottom: -7.75%;
        right: -4.35%;
    }
}
@media (min-width: 1920px) /* ✅ 2023-01-27 16:00 */ {
    :is(.layered-image, [class*="layered-image--"]) > .align-left {
        top: -6.5%;
        left: -3.6%;
    }
    :is(.layered-image, [class*="layered-image--"]) > .align-right {
        bottom: -6.5%;
        right: -4.9%;
    }
}

/* To reverse z-index of stacked images (so CMS user can layer intuitively) */
/* CAVEAT: This works by accident, but designer loves it, so maintain this */
:is(.layered-image, [class*="layered-image--"])
> :not([class*="align-"], :only-child) {
    position: relative;
}
:is(.layered-image, [class*="layered-image--"])
> :is(.align-left, .align-left--oversized, .align-right, :not([class*="align-"], :only-child)) {
    z-index: 1;
}
:is(.layered-image, [class*="layered-image--"])
> :is(.align-left--oversized, .align-center) {
    z-index: 0;
}

/* Undo specific `core-styles.cms.css` .align-… margin */
:is(.layered-image, [class*="layered-image--"]) > .align-left {
    margin-right: unset;
    margin-bottom: unset;
}
:is(.layered-image, [class*="layered-image--"]) > .align-right {
    margin-left: unset;
    margin-bottom: unset;
}
:is(.layered-image, [class*="layered-image--"]) > .align-center {
    margin-inline: unset;
}

/* To set origin for scaling decal and background images */
:is(.layered-image, [class*="layered-image--"]) > .align-left {
    transform-origin: top left;
}
:is(.layered-image, [class*="layered-image--"]) > .align-left--oversized {
    transform-origin: top left;
}
:is(.layered-image, [class*="layered-image--"]) > .align-right {
    transform-origin: bottom right;
}
:is(.layered-image, [class*="layered-image--"]) > .align-center {
    transform-origin: top;
}

/* TODO: Once in Core-CMS, use existing @custom-media */
/* https://xd.adobe.com/view/dabaec5a-cc31-4c5c-876e-56d6d8cc359e-8fe9/screen/4906fef4-4665-473a-8ad3-459a4fab23c8/specs/ */
@media (max-width: 575px) {
    /* To pull pattern to edge of container when container has no max-width */
    :has(> .layered-image), .has-layered-image {
        overflow-x: clip;
    }
    .layered-image, [class*="layered-image--"] {
        margin-inline: calc( -1 * var(--global-space--bootstrap-gap) );
    }
}
@media (max-width: 767px) {
    /* To hide background images when pattern flows vertical with content */
    :is(.layered-image, [class*="layered-image--"]) > .align-center {
        display: none;
    }
}



/* EDGE CASES */

/* For a no-modifier, layered image with a single, un-aligned image */
.layered-image :not([class*="align-"]):only-child {
    /* To negate .layered-image`'s alignment with <h1> via `margin-top` */
    /* FAQ: Can NOT just undo parent because Firefox does not support `:has` */
    margin-top: calc( -1 * var(--h1-offset) );
}