/* Final Programs directory stability fixes. */
html,
html body,
html body #programs-content {
    background: #f1f5f9 !important;
    background-image: none !important;
}

/* The directory is a width-limited shell, not a second surface panel. */
html body #programs-content .programs-directory.shell,
html body #programs-content .directory-heading,
html body #programs-content .program-card-grid {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

html body #programs-content,
html body #programs-content .programs-directory,
html body #programs-content .program-card-grid {
    overflow: visible;
}

html body #programs-content .program-search,
html body #programs-content .program-search:focus-within {
    border-color: #d4dee5 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

html body #programs-content .program-search input:focus {
    outline: 0 !important;
    box-shadow: none !important;
}

html body #programs-content .program-card-grid {
    align-items: stretch;
    grid-auto-rows: 1fr;
}

html body #programs-content .program-card {
    height: 100%;
}

html body #programs-content .program-card-body {
    min-width: 0;
}

html body #programs-content .program-card p {
    margin-bottom: 18px;
}

/* Compact Programs landing introduction. */
html body #programs-content .programs-hero-grid{min-height:300px!important;padding-block:30px 34px!important}
html body #programs-content .programs-hero-copy .section-label{margin-bottom:11px!important;font-size:12px!important;letter-spacing:.13em!important}
html body #programs-content .programs-hero h1{max-width:900px!important;margin:0 0 14px!important;font-size:clamp(2.5rem,4vw,3.6rem)!important;line-height:1.08!important}
html body #programs-content .programs-hero-copy>p{max-width:830px!important;margin:0!important;font-size:16px!important;line-height:1.6!important}
@media(max-width:700px){html body #programs-content .programs-hero-grid{min-height:0!important;padding-block:26px 30px!important}html body #programs-content .programs-hero h1{font-size:clamp(2rem,10vw,2.8rem)!important;margin-bottom:12px!important}html body #programs-content .programs-hero-copy>p{font-size:14px!important;line-height:1.55!important}}

/* Global reveal helpers must never hide or displace directory content. */
html body #programs-content .program-card.scroll-reveal,
html body #programs-content .programs-summary.scroll-reveal,
html body #programs-content .programs-feedback.scroll-reveal,
html body #programs-content .scroll-reveal:not(.is-revealed),
html body #programs-content .scroll-reveal.is-revealed {
    opacity: 1 !important;
    transform: none !important;
}

@media (max-width: 700px) {
    html body #programs-content .program-card-grid {
        grid-auto-rows: auto;
    }
}

/* Match the homepage primary-button interaction language. */
html body #programs-content :is(.program-card a, .programs-feedback > a) {
    border-color: var(--municipal-button-primary, #003e70) !important;
    background: var(--municipal-button-primary, #003e70) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
    transition:
        background-color 160ms ease-out,
        border-color 160ms ease-out,
        color 160ms ease-out !important;
}

html body #programs-content :is(.program-card a, .programs-feedback > a):hover {
    border-color: var(--municipal-button-primary-hover, #07578f) !important;
    background: var(--municipal-button-primary-hover, #07578f) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
}

html body #programs-content :is(.program-card a, .programs-feedback > a):active {
    border-color: var(--municipal-button-primary-active, #002f57) !important;
    background: var(--municipal-button-primary-active, #002f57) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    transform: none !important;
}

html body #programs-content :is(.program-card a, .programs-feedback > a):focus-visible {
    border-color: var(--municipal-button-primary-hover, #07578f) !important;
    background: var(--municipal-button-primary, #003e70) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    outline: 2px solid #fff !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px var(--municipal-button-focus, rgba(8, 122, 199, .24)) !important;
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    html body #programs-content :is(.program-card a, .programs-feedback > a) {
        transition: none !important;
    }
}

/* Programs directory reference layout. */
html,
html body,
html body #programs-content {
    background: #fff !important;
}

html body #programs-content .programs-directory.shell {
    width: min(1440px, calc(100% - 48px));
    padding: 54px 36px 48px !important;
    border: 1px solid #e1e7eb;
    background: #fff !important;
}

html body #programs-content .directory-heading {
    align-items: center;
    margin-bottom: 24px;
}

html body #programs-content .directory-heading .section-label {
    color: #008247 !important;
    font-size: .72rem;
    letter-spacing: .08em;
}

html body #programs-content .directory-heading h2 {
    margin-top: 6px;
    font-size: 1.55rem;
}

html body #programs-content .program-search {
    width: 335px;
    min-height: 54px;
    padding: 0 18px;
    border-radius: 6px;
    background: #fff !important;
}

html body #programs-content .program-search input {
    font-size: .78rem;
}

html body #programs-content .program-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

html body #programs-content .program-card {
    grid-template-columns: 42% minmax(0, 58%);
    min-height: 240px;
    overflow: hidden;
    border: 1px solid #dce4e9;
    border-radius: 8px;
    background: #fff !important;
}

html body #programs-content .program-card:hover {
    border-color: #cbd8e0;
    background: #fff !important;
}

html body #programs-content .program-visual {
    min-height: 100%;
    border-right: 1px solid #dce4e9;
    background: #f8faf9 !important;
}

html body #programs-content .program-visual::after,
html body #programs-content .program-orb {
    display: none !important;
}

html body #programs-content .program-visual > svg {
    width: 86px;
    height: 86px;
    filter: none !important;
}

html body #programs-content .program-card-body {
    min-height: 240px;
    padding: 20px;
}

html body #programs-content .program-chip {
    padding: 5px 10px;
}

html body #programs-content .program-card h3 {
    margin: 12px 0 7px;
    font-size: 1.15rem;
    line-height: 1.18;
}

html body #programs-content .program-card p {
    margin-bottom: 16px;
    font-size: .72rem;
    line-height: 1.58;
}

html body #programs-content .program-card a {
    min-width: 126px;
    min-height: 40px;
    padding-inline: 18px;
}

@media (max-width: 980px) {
    html body #programs-content .program-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    html body #programs-content .programs-directory.shell {
        width: min(100% - 24px, 1440px);
        padding: 32px 16px 38px !important;
    }

    html body #programs-content .directory-heading {
        align-items: stretch;
        text-align: left;
    }

    html body #programs-content .program-search {
        width: 100%;
        max-width: none;
    }

    html body #programs-content .program-card-grid {
        grid-template-columns: 1fr;
    }

    html body #programs-content .program-card {
        grid-template-columns: 40% minmax(0, 60%);
        min-height: 230px;
    }

    html body #programs-content .program-card-body {
        align-items: flex-start;
        min-height: 230px;
        padding: 21px 18px;
        text-align: left;
    }

    html body #programs-content .program-chip,
    html body #programs-content .program-card a {
        align-self: flex-start;
    }
}

@media (max-width: 500px) {
    html body #programs-content .program-card {
        grid-template-columns: 1fr;
    }

    html body #programs-content .program-visual {
        min-height: 145px;
        border-right: 0;
        border-bottom: 1px solid #dce4e9;
    }

    html body #programs-content .program-card-body {
        min-height: 210px;
    }
}