/* ==========================================================================
   Page Banner Section (inner-page hero)
   Layout: page_banner
   Ported from HTML/families.html lines 285-298, 374-383. rem→px at 16px base.
   ========================================================================== */

section.page-banner {
    position: relative;
    background: linear-gradient(180deg, var(--color-blue-tint), var(--color-white));
    padding: 65px 0 65px;
    min-height: 565px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Reset default .flexible-section padding — this section handles its own. */
}

.page-banner-inner {
    position: relative;
    z-index: 2;
}

.page-banner-crumbs {
    font-size: 16px;
    color: var(--color-gray-d);
    margin-bottom: 16px;
    line-height: 1.4;
}
.page-banner-crumbs a {
    color: var(--color-blue);
    font-weight: 700;
    text-decoration: none;
}
.page-banner-crumbs a:hover {
    text-decoration: underline;
}

.page-banner .eyebrow {
    display: block;
    margin-bottom: 15px;
}

.page-banner-heading {
    font-size: 50px;
    font-size: clamp(2.125rem, 1.2788rem + 1.5385vw, 3.125rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--color-blue-deep);
    max-width: 34ch;
    margin: 0 auto;
}
.page-banner-heading em {
    font-style: normal;
    color: var(--color-green-deep);
}

.page-banner-lead {
    font-size: var(--font-size-22px);
    color: #4a4f57;
    max-width: 58ch;
    margin: 20px auto 0;
    line-height: 1.5;
}

.page-banner-badges {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 22px;
}

/* ---- .hasbg variant — activated when background_options=image is set. ---- */
section.page-banner.hasbg {
    overflow: hidden;
}
section.page-banner.min-height-auto{
    min-height: auto;
}
.page-banner-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .4;
}
section.page-banner.hasbg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(243, 247, 253, .42), rgba(255, 255, 255, .6));
    pointer-events: none;
}

@media (max-width: 780px) {
    /* .page-banner-heading {
        font-size: 32px;
    } */
    section.page-banner {
        min-height: auto;
        padding: 40px 0;
    }
    .page-banner-heading br{
        display: none;
    }
}

/* @media (max-width: 480px) {
    .page-banner-heading {
        font-size: 28px;
    }
    .page-banner-lead {
        font-size: 16px;
    }
} */

/* @media (min-width: 1200px) {
    section.faqs_banner{
        min-height: 720px;
    }
} */

/*=========================*/
/* 
section.contact_banner{
    min-height: 440px;
}
section.resources_banner{
    min-height: 450px;
}

section.families_banner .page-banner-bg{
    background-size: 141% !important;
    background-position: 30% 0% !important;
}

section.providers_banner .page-banner-bg{
    background-size: contain !important;
    background-position: 0% 7% !important;
}

section.faqs_banner .page-banner-bg{
    background-size: contain !important;
    background-position: 84% 58% !important;
}

section.how_banner .page-banner-bg{
    background-size: 60% !important;
    background-position: 100% 100% !important;
}

section.services_banner .page-banner-bg{
    background-size: cover !important;
    background-position: 50% 22% !important;
}

section.resources_banner .page-banner-bg{
    background-size: cover !important;
    background-position: 47% 18% !important;
}
section.contact_banner .page-banner-bg{
    background-position: 50% 22% !important;
} */