/* ============================================================
   NearU — For Customers HERO override
   Feathered-merge: paint the supplied photo into the right panel,
   melt its LEFT edge into the blush hero background, and keep the
   four floating feature cards on top — matching the mockup.

   Scoped entirely to .nearu-cust-hero. Declares NO :root.
   Loaded AFTER customers.css so it wins. No markup is changed
   (the existing <img> is hidden; the photo is painted as the
   panel background, so .is-empty is also overridden).
   ============================================================ */

/* The photo panel becomes the image-only slider, melted on its left edge. */
.nearu-cust-hero .nearu-cust-hero-photo,
.nearu-cust-hero .nearu-cust-hero-photo.is-empty {
    background-color: transparent !important;
    position: relative;
    min-height: 380px !important;
    box-shadow: none !important;                 /* feathered edge has no hard box */
    border-radius: 0 var(--radius-panel) var(--radius-panel) 0 !important;
    overflow: hidden;
    /* Fade the LEFT edge to transparent so the blush page background
       shows through and the photo melts into the copy on the left. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 42%, #000 100%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 42%, #000 100%);
}

.nearu-cust-hero .nearu-cust-hero-slider {
    display: flex;
    width: 200%;
    min-height: inherit;
    height: 100%;
    animation: nearuCustomerHeroSlide 14s infinite;
}

.nearu-cust-hero .nearu-cust-hero-slide {
    flex: 0 0 50%;
    min-width: 0;
    min-height: inherit;
}

.nearu-cust-hero .nearu-cust-hero-photo img {
    opacity: 1 !important;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    display: block;
}

.nearu-cust-hero .nearu-cust-hero-photo.is-empty {
    background: linear-gradient(135deg, #f7d9cf, #f3c6b5) !important;
}

@keyframes nearuCustomerHeroSlide {
    0%, 38% {
        transform: translateX(0);
    }
    50%, 88% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Soft warm wash over the left fade so the seam reads as one surface. */
.nearu-cust-hero .nearu-cust-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(253, 240, 244, .85) 0%,
        rgba(253, 243, 236, .35) 22%,
        rgba(253, 243, 236, 0) 44%);
}

/*
 * Keep feature cards around the edge of the desktop image, leaving the
 * people in the centre visible. The regular stacked card layout remains
 * in place below the desktop breakpoint.
 */
@media (min-width: 992px) {
    .nearu-cust-hero .nearu-cust-hero-cards {
        position: absolute;
        inset: 0;
        display: block;
        width: auto;
        max-width: none;
        z-index: 3;
        pointer-events: none;
    }

    .nearu-cust-hero .nearu-cust-hero-card {
        position: absolute;
        width: min(39%, 210px);
        padding: 9px 11px;
        will-change: transform;
        animation: nearuCustomerHeroCardFloat 5.5s ease-in-out infinite;
    }

    .nearu-cust-hero .nearu-cust-hero-card:nth-child(1) {
        top: 8%;
        left: 3%;
        animation-delay: -1.1s;
    }

    .nearu-cust-hero .nearu-cust-hero-card:nth-child(2) {
        top: 8%;
        right: 3%;
        animation-delay: -3.8s;
    }

    .nearu-cust-hero .nearu-cust-hero-card:nth-child(3) {
        bottom: 8%;
        left: 3%;
        animation-delay: -2.5s;
    }

    .nearu-cust-hero .nearu-cust-hero-card:nth-child(4) {
        right: 3%;
        bottom: 8%;
        animation-delay: -4.9s;
    }
}

@keyframes nearuCustomerHeroCardFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -7px, 0); }
}

/* ------------------------------------------------------------
   Responsive: on stacked layouts the photo sits above the cards,
   so drop the feather and restore a normal rounded, shadowed card.
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .nearu-cust-hero .nearu-cust-hero-photo,
    .nearu-cust-hero .nearu-cust-hero-photo.is-empty {
        border-radius: var(--radius-panel) !important;
        box-shadow: 0 18px 44px rgba(26, 27, 46, .12) !important;
        -webkit-mask-image: none !important;
                mask-image: none !important;
        min-height: 300px !important;
    }
    .nearu-cust-hero .nearu-cust-hero-photo::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .nearu-cust-hero .nearu-cust-hero-slider {
        width: 100%;
        animation: none;
    }

    .nearu-cust-hero .nearu-cust-hero-slide {
        flex-basis: 100%;
    }

    .nearu-cust-hero .nearu-cust-hero-slide:not(:first-child) {
        display: none;
    }

    .nearu-cust-hero .nearu-cust-hero-card {
        animation: none;
    }
}