/* ==========================================================================
   WAI Membership – hero banner (WWP-style)
   ========================================================================== */

.waim-banner {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #003161;      /* navy fallback + solid color when no image */
    background-size: cover;
    background-position: right center;   /* subject sits on the right, like What We Do */
    background-repeat: no-repeat;
    overflow: hidden;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

/* Solid navy gradient when no background image is supplied */
.waim-banner.no-image {
    background-image: linear-gradient(120deg, #003161 0%, #06427f 100%);
}

/* Image mode: exact overlay from the What We Do plugin — solid navy on the
   left behind the text, fading to reveal the photo on the right. */
.waim-banner.has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #003161 0%, #003161 40%, rgba(0,49,97,.55) 70%, rgba(0,49,97,0) 100%);
    z-index: 0;
}

/* Optional flat wash instead of the diagonal fade */
.waim-banner.has-image.waim-banner-solid::before {
    background: rgba(0, 49, 97, var(--waim-overlay, .6));
}

.waim-banner-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 24px;
    box-sizing: border-box;
}

.waim-banner-text {
    max-width: 560px;
}

.waim-banner-align-center .waim-banner-inner {
    display: flex;
    justify-content: center;
    text-align: center;
}

.waim-banner-align-center .waim-banner-text {
    margin: 0 auto;
}

.waim-banner-heading {
    margin: 0 0 18px;
    color: #fff;
    font-size: 2.5rem;      /* ~36-40px, matches the WWP hero h1 */
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.waim-banner-sub {
    margin: 0 0 28px;
    color: #eaf1f8;
    font-size: 1.08rem;
    line-height: 1.6;
}

.waim-banner-btn {
    display: inline-block;
    padding: 14px 34px;
    border-radius: 999px;
    background: #b5121b;    /* WAI red, same as the DONATE button */
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .02em;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

.waim-banner-btn:hover {
    background: #920e16;
    color: #fff;
    transform: translateY(-1px);
}

.waim-banner-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .waim-banner-inner {
        padding: 48px 20px;
    }
    .waim-banner-heading {
        font-size: 1.9rem;
    }
    .waim-banner-sub {
        font-size: 1rem;
    }
}