/* ============================================================
   NearU - Contact HERO refinement (Contact page only)
   ------------------------------------------------------------
   Restyles ONLY the Contact hero so the girl-with-phone image merges
   smoothly into the left content (feathered blend), matching the
   approved mockup - instead of sitting in a hard rectangular box.
   Uses the new contact-hero-banner.jpg.

   HARDENED VERSION: each rule is scoped under .nearu-contact-hero and
   the properties that fight the base contact.css use !important, so
   this wins regardless of stylesheet load order. Consumes global
   tokens; declares NO :root.
   ============================================================ */

/* Soft near-white hero atmosphere to match the mockup. */
.nearu-contact .nearu-contact-hero,
section.nearu-contact-hero {
    background: linear-gradient(115deg, #fdf2f1 0%, #fdf7f2 45%, #ffffff 78%) !important;
}

/* ------------------------------------------------------------
   IMAGE - painted as a cover background so its LEFT edge can be
   feathered into the content. The new photo fills the right column.
   ------------------------------------------------------------ */
.nearu-contact-hero .nearu-contact-hero-photo {
    position: relative !important;
    overflow: visible !important;
    box-shadow: none !important;                 /* drop the hard card shadow */
    min-height: 380px !important;
    background-image: url("../../images/contact/contact-hero-banner.png") !important;
    background-size: cover !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
    /* round only the outer corners; the left edge dissolves via the feather */
    border-radius: 0 var(--radius-panel) var(--radius-panel) 0 !important;
}

/* Keep the markup's <img> for accessibility (alt) but let the
   background image show; hide the old jpg if it loads. */
.nearu-contact-hero .nearu-contact-hero-photo img {
    opacity: 0 !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* If the old jpg errored and added .is-empty, still show the new image. */
.nearu-contact-hero .nearu-contact-hero-photo.is-empty {
    background-image: url("../../images/contact/contact-hero-banner.png") !important;
    background-size: cover !important;
    background-position: right center !important;
}

/* ------------------------------------------------------------
   LEFT-EDGE FEATHER - dissolves the photo into the hero background so
   the image and the left content read as one connected composition.
   ------------------------------------------------------------ */
.nearu-contact-hero .nearu-contact-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #fdf3f1 0%,
        #fdf3f1 6%,
        rgba(253, 243, 241, .86) 16%,
        rgba(253, 245, 242, .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%);
}

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

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

/* ============================================================
   OVERLAPPING QUICK-CONTACT CARDS  [match mockup]
   ------------------------------------------------------------
   The 3 quick-contact cards live inside .nearu-contact-hero already.
   Pull them UP so they overlap the bottom of the hero image and anchor
   to the banner (instead of sitting as a separate band far below).
   The lower portion straddles onto the page below, like the mockup.
   ============================================================ */
.nearu-contact-hero { padding-bottom: 0 !important; }

.nearu-contact-hero .nearu-contact-quick-row {
    position: relative;
    z-index: 5;
    margin-top: -56px !important;     /* overlap the hero image's lower edge */
    margin-bottom: -46px !important;  /* lower half straddles onto white below */
}

/* Solid white cards with a lifted shadow so they read on top of the image. */
.nearu-contact-hero .nearu-quick-card {
    background: #fff !important;
    box-shadow: 0 16px 40px rgba(26, 27, 46, .12) !important;
}

/* On stacked layouts, don't overlap (the image is above the cards there);
   keep a normal, comfortable gap. */
@media (max-width: 991.98px) {
    .nearu-contact-hero .nearu-contact-quick-row {
        margin-top: 22px !important;
        margin-bottom: 0 !important;
    }
}