/* H4H Step 4I.8 — homepage news 5:4 media + 65% hero panel + unified slide motion.
   CSS only. h4h-public.js remains the sole 6000ms Hero / 7000ms opinions controller. */

/* Scope to the homepage's NEWS mode, not the standalone News or Events pages.
   The image cannot enlarge its frame through its intrinsic proportions. */
body.h4h-public-home .h4h-home-news-i8 .h4h-event-image {
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    aspect-ratio: 5 / 4 !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
}

body.h4h-public-home .h4h-home-news-i8 .h4h-event-image > img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Background alpha only. No opacity reduction is applied to text or buttons.
   Existing side/bottom placement and all Hero dimensions remain unchanged. */
body.h4h-public-home [data-h4h-hero-motion-i8] .h4h-hero-shade::after {
    background: rgba(247, 161, 30, .65);
}

body.h4h-public-home [data-h4h-hero-motion-i8] .h4h-hero-panel {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .38);
}

/* Animate the ARTICLE containing image, shade and both text groups as ONE unit.
   The existing .is-active changes drive this; no new JavaScript timer is needed.
   Slides before the active one rest at -48px; slides after it at +48px.
   This also makes reverse/manual navigation coherent, mirrored in RTL. */
body.h4h-public-home [data-h4h-hero-motion-i8] {
    --h4h-i8-enter-x: 48px;
    --h4h-i8-exit-x: -48px;
}

html[dir="rtl"] body.h4h-public-home [data-h4h-hero-motion-i8] {
    --h4h-i8-enter-x: -48px;
    --h4h-i8-exit-x: 48px;
}

body.h4h-public-home [data-h4h-hero-motion-i8] > .h4h-hero-track > [data-h4h-slide] {
    transform: translate3d(var(--h4h-i8-exit-x), 0, 0);
    transition: transform .65s cubic-bezier(.22, .61, .36, 1), opacity .65s ease, visibility 0s linear .65s;
    will-change: transform, opacity;
}

body.h4h-public-home [data-h4h-hero-motion-i8] > .h4h-hero-track > [data-h4h-slide].is-active ~ [data-h4h-slide] {
    transform: translate3d(var(--h4h-i8-enter-x), 0, 0);
}

body.h4h-public-home [data-h4h-hero-motion-i8] > .h4h-hero-track > [data-h4h-slide].is-active {
    transform: translate3d(0, 0, 0);
    transition-delay: 0s, 0s, 0s;
}

/* Reduce visual motion without creating/changing the site's existing timers. */
@media (prefers-reduced-motion: reduce) {
    body.h4h-public-home [data-h4h-hero-motion-i8] > .h4h-hero-track > [data-h4h-slide],
    body.h4h-public-home [data-h4h-hero-motion-i8] > .h4h-hero-track > [data-h4h-slide].is-active,
    body.h4h-public-home [data-h4h-hero-motion-i8] > .h4h-hero-track > [data-h4h-slide].is-active ~ [data-h4h-slide] {
        transform: none;
        transition: none;
        animation: none;
        will-change: auto;
    }
}