/* Batch 1: explicit image frames supersede legacy fixed-height hero rules.
   Keep every original asset unchanged; this is intentionally component-scoped. */
body .rota-image-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #05263d !important;
    color: #fff;
    overflow: visible !important;
}
body .rota-image-hero > .rota-hero-image,
body.home .final-hero-photo .rota-hero-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    border-radius: 0 !important;
}
body .rota-image-hero > .rota-hero-image { grid-area: 1 / 1; }
body .rota-image-hero::before,
body .rota-image-hero::after { display: none !important; }
body .rota-image-hero > div:not(.final-hero-photo):not(.final-hero-shade):not(.program-wide-overlay) {
    grid-area: 1 / 1;
    position: relative !important;
    align-self: center;
    display: block !important;
    width: min(1180px, 92%) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 32px 0 !important;
    min-height: 0 !important;
    height: auto !important;
    z-index: 2;
}
body .rota-image-hero .program-wide-content { padding: 0; }
body .rota-image-hero :is(.eyebrow, .assist-eyebrow),
body .rota-image-hero :is(.about-hero-inner, .contact-hero-content, .donate-hero-content, .hero-content, .si-wrap, .assist-hero-inner, .final-hero-copy, .program-wide-content) p {
    color: #fff !important;
}
body .rota-image-hero .program-wide-overlay {
    grid-area: 1 / 1;
    position: relative;
    inset: auto;
}
body .rota-image-hero:not(.final-hero):not(.program-wide-hero) > div {
    background: rgba(0, 43, 78, .84);
    border-radius: 8px;
    padding: 28px !important;
}
body .rota-image-hero.si-hero > .si-wrap { width: min(850px, 92%) !important; }
body.home .final-hero-photo {
    grid-area: 1 / 1;
    position: relative !important;
    inset: auto !important;
    z-index: 0;
    background: none !important;
    transform: none !important;
    animation: none !important;
}
body.home .final-hero-shade {
    grid-area: 1 / 1;
    position: relative !important;
    inset: auto !important;
    z-index: 1;
}



/* Separate the historical photographs so neither obscures the other's edges. */





/* Each carousel stage uses the active image ratio and caps portrait height. */













body .site-header .rota-mobile-menu-button:focus-visible {
    outline: 3px solid #003B73 !important;
    outline-offset: 3px;
}
@media (max-width: 1024px) {
    body .rota-image-hero > .rota-hero-image,
body.home .final-hero-photo { grid-area: 1 / 1; }
    body .rota-image-hero > div:not(.final-hero-photo):not(.final-hero-shade):not(.program-wide-overlay) {
        grid-area: 2 / 1;
        width: min(850px, 92%) !important;
        background: transparent;
        border-radius: 0;
        text-align: center !important;
    }
    body .rota-image-hero .program-wide-content { width: 100%; text-align: center; }
    body .rota-image-hero .program-wide-actions { justify-content: center; }
    body .rota-image-hero .program-wide-overlay,
body.home .final-hero-shade { display: none; }
    body.home .final-hero-inner { padding: 32px 0 !important; }
    body.home .site-header .main-nav,
body .site-header .main-nav {
        display: none !important;
        position: absolute !important;
        inset: 100% 0 auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(100dvh - 82px);
        overflow-y: auto;
        background: #fff;
        padding: 12px 20px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
    }
    body.home .site-header .main-nav.open,
body .site-header .main-nav.open { display: flex !important; }
    body .site-header .main-nav a { padding: 12px 4px !important; width: 100%; }
    body .site-header #menuButton { display: flex !important; }
    body .site-header .header-inner { position: relative; }
}