.lha-banner {
    position: relative;
    overflow: hidden;
    padding: 3rem 0;
    animation: lhaBannerFadeIn .65s cubic-bezier(.22,.68,0,1.2) both;
    box-shadow: 0 6px 32px rgba(0,0,0,.32);
}

.lha-banner--announcement {
    background: linear-gradient(135deg, #065D8F 0%, #022d4a 100%);
    --lha-accent:      #7dd3fc;
    --lha-badge-bg:    #0ea5e9;
    --lha-badge-color: #fff;
    --lha-btn-bg:      #fff;
    --lha-btn-color:   #022d4a;  /* 15.3:1 — WCAG AAA */
}
.lha-banner--success {
    background: linear-gradient(135deg, #166534 0%, #052e16 100%);
    --lha-accent:      #fbbf24;
    --lha-badge-bg:    #b45309;
    --lha-badge-color: #fff;
    --lha-btn-bg:      #fff;
    --lha-btn-color:   #052e16;  /* 14.7:1 — WCAG AAA */
}
.lha-banner--alert {
    background: linear-gradient(135deg, #b45309 0%, #78350f 100%);
    --lha-accent:      #fde68a;
    --lha-badge-bg:    #92400e;
    --lha-badge-color: #fff;
    --lha-btn-bg:      #fff;
    --lha-btn-color:   #78350f;  /* 11.9:1 — WCAG AAA */
}
.lha-banner--emergency {
    background: linear-gradient(135deg, #be123c 0%, #7f1d1d 100%);
    --lha-accent:      #fca5a5;
    --lha-badge-bg:    #9f1239;
    --lha-badge-color: #fff;
    --lha-btn-bg:      #fff;
    --lha-btn-color:   #7f1d1d;  /* 10.4:1 — WCAG AAA */
}
.lha-banner--event {
    background: linear-gradient(135deg, #4338ca 0%, #1e1b4b 100%);
    --lha-accent:      #c4b5fd;
    --lha-badge-bg:    #5b21b6;
    --lha-badge-color: #fff;
    --lha-btn-bg:      #fff;
    --lha-btn-color:   #1e1b4b;  /* 15.8:1 — WCAG AAA */
}

/* left accent stripe */
.lha-banner::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    background: var(--lha-accent, rgba(255,255,255,.5));
}

/* diagonal overlay — right panel */
.lha-banner::before {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 42%;
    background: rgba(255,255,255,.035);
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
    pointer-events: none;
}

/* large watermark */
.lha-banner__watermark {
    position: absolute;
    right: 3.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13rem;
    opacity: .09;
    color: #fff;
    pointer-events: none;
    line-height: 1;
    z-index: 0;
}

/* keep content above the watermark at every breakpoint */
.lha-banner > .container {
    position: relative;
    z-index: 1;
}

/* circular icon container */
.lha-banner__icon-wrap {
    width: 5.25rem;
    height: 5.25rem;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 2px solid rgba(255,255,255,.22);
    box-shadow: 0 0 0 7px rgba(255,255,255,.05);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lha-banner__icon {
    font-size: 2.1rem;
    color: var(--lha-accent, #fff);
    filter: drop-shadow(0 0 10px rgba(255,255,255,.25));
}

/* badge pill */
.lha-banner__badge {
    display: inline-flex;
    align-items: center;
    padding: .28rem .85rem;
    border-radius: 50rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--lha-badge-bg, rgba(255,255,255,.22));
    color: var(--lha-badge-color, #fff);
    margin-bottom: .65rem;
}

/* eyebrow header */
.lha-banner__header {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255,255,255,.92) !important;
    margin-bottom: .3rem;
}

/* main title */
.lha-banner__title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff !important;
    line-height: 1.35;
    margin-bottom: 0;
    text-shadow: 0 1px 6px rgba(0,0,0,.3);
}

/* subtitle */
.lha-banner__subtitle {
    font-size: .925rem;
    color: rgba(255,255,255,.92) !important;
    margin-top: .5rem;
    margin-bottom: 0;
}

/* CTA button — WCAG AAA compliant via per-style --lha-btn-* variables */
.lha-banner .lha-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
    font-weight: 700;
    font-size: .875rem;
    padding: .7rem 1.65rem;
    border-radius: .4rem;
    background: var(--lha-btn-bg, #fff);
    color: var(--lha-btn-color, #0f172a) !important;
    text-decoration: none;
    border: none;
    box-shadow: 0 2px 14px rgba(0,0,0,.22);
    transition: opacity .2s ease, transform .15s ease;
}
.lha-banner .lha-banner__cta:hover {
    opacity: .87;
    transform: translateY(-2px);
    color: var(--lha-btn-color, #0f172a) !important;
    text-decoration: none;
}

/* force inline links to white — exclude the CTA button */
.lha-banner a:not(.lha-banner__cta),
.lha-banner a:not(.lha-banner__cta):visited,
.lha-banner a:not(.lha-banner__cta):hover { color: #fff !important; }

/* link-wrap (when whole banner is clickable) */
.lha-banner__link-wrap {
    display: block;
    text-decoration: none;
    color: #fff !important;
}
.lha-banner__link-wrap:hover .lha-banner__title {
    text-decoration: underline;
    text-underline-offset: 4px;
}

@keyframes lhaBannerFadeIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0);     }
}

/* mobile: shrink decorative elements so they don't clutter the narrower content column */
@media (max-width: 767.98px) {
    .lha-banner {
        padding: 2rem 0;
    }

    .lha-banner::before {
        display: none;
    }

    .lha-banner__watermark {
        display: none;
    }

    .lha-banner__icon-wrap {
        width: 4rem;
        height: 4rem;
    }

    .lha-banner__icon {
        font-size: 1.6rem;
    }

    .lha-banner__title {
        font-size: 1.15rem;
    }

    .lha-banner__subtitle {
        font-size: .85rem;
    }

    .lha-banner .lha-banner__cta {
        width: 100%;
        justify-content: center;
    }
}