/* Split banner (Parent Resources) — YMCA 2026 Option B (node 150:516)
   376px band: photo LEFT (708/1440), purple-dk panel RIGHT (732/1440) with
   decorative corner chevrons. Panel: white eyebrow + H1-size white heading +
   white body + cyan "Read More" CTA. (.bmg-eyebrow is shared, in defaults.css.) */

:where(.bmg-split-banner) {
    min-height: 376px;
    align-items: stretch;
}

.bmg-split-banner__photo {
    flex: 0 0 49.167%; /* 708 / 1440 */
    margin: 0;
}

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

/* Panel = the comp's vertical gradient (Rectangle 77: purple-md -> purple-dk),
   no corner decorations. */
.bmg-split-banner__panel {
    position: relative;
    flex: 0 0 50.833%; /* 732 / 1440 */
    justify-content: center;
    overflow: hidden;
    background-image: linear-gradient(180deg, var(--purple-md) 0%, var(--purple-dk) 100%);
}

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

/* eyebrow runs bigger in this section (comp: 22.5px / lh 28) */
.bmg-split-banner__panel .bmg-eyebrow:not(.has-h-5-size-font-size) {
    margin-bottom: 4px;
    font-size: 22.5px;
    line-height: 1.24;
}

.bmg-split-banner__copy {
    max-width: 527px;
    margin-top: 9px;
}

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

@media (max-width: 900px) {
    .bmg-split-banner {
        flex-direction: column-reverse;
    }

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

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