/* Split banner (parent resources) — YMCA Midsize 2026
   312px band: blue-dk panel (837/1440) w/ corner chevrons, photo right (603/1440). */

/* Site-wide max content width — keep in sync with theme.json contentSize */
:root {
    --bmg-content-width: 1240px;
}

.bmg-split-banner {
    min-height: 312px;
    align-items: stretch;
}

.bmg-split-banner__panel {
    position: relative;
    flex: 0 0 58.125%; 
    justify-content: center;
    overflow: hidden;

    /* Left edge of text aligns with the left edge of centered max-content containers.
       Formula: (100vw - contentWidth) / 2
       max() prevents it collapsing below 40px on viewports narrower than contentWidth. */
    padding-left: max(40px, calc((100vw - var(--bmg-content-width)) / 2)) !important;
}

/* corner chevron accents */
.bmg-split-banner__panel::before,
.bmg-split-banner__panel::after {
    content: "";
    position: absolute;
    width: 95px;
    height: 164px;
    pointer-events: none;
}

/* bottom-left: blue-md + cyan diagonal corner shards (mirror of top-right).
   Right-angle at the bottom-left corner, hypotenuse running up to the seam. */
.bmg-split-banner__panel::before {
    left: 0 !important;
    bottom: 0 !important;
    right: unset !important;
    top: unset !important;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95 164"><polygon fill="%230089d0" points="95,164 0,164 0,0"/><polygon fill="%2300aeef" points="69,164 0,164 0,46"/></svg>');
    background-size: 95px 164px;
    background-repeat: no-repeat;
}

/* top-right: blue-md + cyan diagonal corner shards at the photo seam.
   Right-angle at the top-right (seam) corner, hypotenuse running down-left. */
.bmg-split-banner__panel::after {
    right: 0 !important;
    top: 0 !important;
    left: unset !important;
    bottom: unset !important;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95 164"><polygon fill="%230089d0" points="0,0 95,0 95,164"/><polygon fill="%2300aeef" points="26,0 95,0 95,118"/></svg>');
    background-size: 95px 164px;
    background-repeat: no-repeat;
}

.bmg-split-banner__panel > * {
    position: relative;
    z-index: 1;
}

.bmg-split-banner__copy {
    max-width: 608px;
}

.bmg-split-banner__photo {
    flex: 1;
    margin: 0;
}

.bmg-split-banner__photo img {
    width: 100%;
    height: 100%;
    min-height: 312px;
    object-fit: cover;
    display: block;
}

/*mobile (out of 2026 desktop scope — keep usable)*/

@media (max-width: 900px) {
    .bmg-split-banner {
        flex-wrap: wrap !important;
    }

    .bmg-split-banner__panel {
        flex: 1 1 100%;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .bmg-split-banner__photo {
        flex: 1 1 100%;
    }

    /* stacked on mobile — drop the 312px desktop floor so the photo is a
       shorter banner strip instead of a tall block */
    .bmg-split-banner__photo img {
        height: 200px;
        min-height: 0;
    }
}