/* ============================================================
   NearU - For Merchants HERO refinement (Merchants page only)
   ------------------------------------------------------------
   Restyles ONLY the Merchants hero banner so the merchant slideshow
   merges smoothly into the left content (feathered/curved blend),
   instead of sitting in a hard rectangular box. Loaded AFTER
   merchants.css so it wins.

   Scope: only .nearu-mer-hero* selectors. The benefits strip, badges,
   copy, and every other section/page are untouched. Consumes global
   tokens; declares NO :root.
   ============================================================ */

/* Soft blush hero atmosphere (already set by merchants.css; re-asserted). */
.nearu-mer-hero { background: var(--brand-gradient-soft); }

/* ------------------------------------------------------------
   BANNER - painted as a cover background so its LEFT edge can be
   feathered into the content. The new collage fills the right column.
   ------------------------------------------------------------ */
.nearu-mer-hero-visual { position: relative; }

.nearu-mer-hero-photo {
    position: relative;
    overflow: hidden;
    box-shadow: none;                  /* drop the hard card shadow for a merged look */
    border-radius: var(--radius-panel);
    min-height: 380px;
    /* round only the outer corners; the left edge dissolves via the feather */
    border-radius: 0 var(--radius-panel) var(--radius-panel) 0;
}

/* Keep the PHP image-only slider visible; this file loads after merchants.css. */
.nearu-mer-hero-slider,
.nearu-mer-hero-slide {
    min-height: inherit;
}

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

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

/* ------------------------------------------------------------
   LEFT-EDGE FEATHER - dissolves the banner into the blush bg so the
   image and the left content read as one connected composition.
   A warm-blush -> transparent horizontal wash, softened by a gentle
   curved mask on the inner edge.
   ------------------------------------------------------------ */
.nearu-mer-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #fdeef0 0%,
        #fdeef0 6%,
        rgba(253, 238, 240, .86) 16%,
        rgba(253, 240, 236, .46) 28%,
        rgba(255, 255, 255, .14) 40%,
        rgba(255, 255, 255, 0) 50%
    );
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 46%, transparent 62%);
    mask-image: linear-gradient(90deg, #000 0%, #000 46%, transparent 62%);
}

/* Floating category badges sit above the feather and drift independently. */
.nearu-mer-hero-badge {
    z-index: 3;
    will-change: transform;
    animation: nearuMerchantHeroBadgeFloat 5.5s ease-in-out infinite;
}

.nearu-mer-hero-badge-a { animation-delay: -1.2s; }
.nearu-mer-hero-badge-b { animation-delay: -3.6s; }
.nearu-mer-hero-badge-c { animation-delay: -2.4s; }
.nearu-mer-hero-badge-d { animation-delay: -4.8s; }

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

/* ============================================================
   RESPONSIVE - on stacked layouts the banner becomes a normal
   rounded image (no side feather, which only suits the 2-col view).
   ============================================================ */
@media (max-width: 991.98px) {
    .nearu-mer-hero-photo {
        border-radius: var(--radius-panel);
        box-shadow: 0 18px 44px rgba(26, 27, 46, .12);
        min-height: 300px;
    }
    .nearu-mer-hero-photo::after { display: none; }
}

@media (max-width: 575.98px) {
    .nearu-mer-hero-photo { min-height: 230px; }

    .nearu-mer-hero-badge {
        font-size: 10px;
        padding: 5px 10px 5px 6px;
        animation-name: nearuMerchantHeroBadgeFloatMobile;
    }

    .nearu-mer-hero-badge-icon {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }

    .nearu-mer-hero-badge-a { top: 8%; left: 3%; }
    .nearu-mer-hero-badge-b { top: 8%; right: 3%; }
    .nearu-mer-hero-badge-c { bottom: 8%; left: 3%; }
    .nearu-mer-hero-badge-d { bottom: 8%; right: 3%; }
}

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

@media (prefers-reduced-motion: reduce) {
    .nearu-mer-hero-badge {
        animation: none;
    }
}