/* ============================================================
 * MH New Home Slider — mechanism-only stylesheet
 * ============================================================
 * Visual styling for the inner banner card, content, buttons,
 * TV badges, pagination dots, and responsive breakpoints all
 * inherit from the existing components/mh-home-banners/index.css
 * (enqueued alongside this file by the shortcode).
 *
 * This file ONLY defines:
 *   1. The outer container's overflow clipping
 *   2. The horizontal flex track + transform-based slide swap
 *   3. The minimum overrides needed to convert each
 *      .mh-home-banner from a grid-overlap item to a flex-track
 *      slide (grid-area unset, opacity 1, flex sizing).
 * ============================================================ */

.mh-new-home-banners {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.mh-new-home-banners-track {
    display: flex;
    width: 200%;                              /* 2 slides × 100% viewport */
    align-items: stretch;
    transition: transform 0.5s ease-in-out;
}

.mh-new-home-banners-track[data-current="0"] {
    transform: translateX(0);
}

.mh-new-home-banners-track[data-current="1"] {
    transform: translateX(-50%);              /* shift left by one slide-width */
}

/* Override the existing grid-overlap + opacity behavior so banners
   sit side-by-side as flex children of the track. All other
   .mh-home-banner / .mh-home-banner-content / .mh-home-banner-actions
   styling (including the [data-home] / [data-confidence] background
   gradient + image rules) inherits unchanged from the original CSS. */

.mh-new-home-banners-track .mh-home-banner {
    grid-area: unset;
    flex: 0 0 50%;                            /* each slide = 50% of 200% track */
    opacity: 1;
    pointer-events: auto;
}