/* ============================================================
   NearU - About Page HERO refinement (About page only)
   ------------------------------------------------------------
   Restyles ONLY the About hero (.nearu-about-hero) into a modern
   two-column section with a curved/gradient blend where the left
   content area flows into the right banner image. Uses the new
   aboutus-banner.png. Loaded AFTER about.css so it wins the cascade.

   Scope: every selector is under .nearu-about-hero (or .nearu-about
   for the hero only). Touches NOTHING else on the page - Vision,
   Mission, Purpose, principles, story, values, build cards, CTA,
   header and footer are all untouched. Consumes global tokens; NO :root.
   ============================================================ */

/* ============================================================
   1. SECTION SHELL - contained card, soft warm blush base
   ============================================================ */
.nearu-about .nearu-about-hero {
    position: relative;
    /* Soft warm blush base (not pure white), consistent with the brand. */
    background: linear-gradient(120deg, #fdf0f4 0%, #fdf6ec 60%, #ffffff 100%);
    /* border-radius: 28px; */
    overflow: hidden;
    padding: 0;                       /* inner row controls spacing */
    /* margin-top: 28px; */
    /* Contain within the site width (matches .container rhythm). */
    /* max-width: 1200px; */
    margin-left: auto;
    margin-right: auto;
}

/* Row fills the card; remove the default gutter so the image can bleed
   to the card's right/top/bottom edges. */
.nearu-about .nearu-about-hero .row {
    --bs-gutter-x: 0;
    align-items: stretch;
    min-height: 460px;
}

/* ============================================================
   2. LEFT CONTENT - sits on the blush area, padded
   ============================================================ */
.nearu-about .nearu-about-hero .col-lg-5 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    /* padding: clamp(32px, 4vw, 64px);
    padding-right: clamp(20px, 3vw, 40px); */
}

/* ============================================================
   3. RIGHT IMAGE - full-height panel, banner as cover image,
   with a curved + gradient blend feathering its LEFT edge into
   the content area.
   ============================================================ */
.nearu-about .nearu-about-hero .col-lg-7 {
    position: relative;
    z-index: 1;
    padding: 0;
    min-height: 560px;
}

/* Replace the old boxed photo with a full-bleed cover image that fills
   the right column and follows the card's rounded corners. */
.nearu-about .nearu-about-hero .nearu-about-hero-photo {
    position: absolute;
    inset: 0;
    border-radius: 20px;                 /* the card's overflow clips corners */
    box-shadow: none;
    min-height: 0;
    background-image: url("../../images/about/aboutus-banner.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* Hide the original <img> (we paint the banner via background so we can
   feather its edge); keep markup intact for accessibility/fallback. */
.nearu-about .nearu-about-hero .nearu-about-hero-photo img {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
/* Graceful fallback tint if the background image is missing. */
.nearu-about .nearu-about-hero .nearu-about-hero-photo.is-empty {
    background: linear-gradient(135deg, #f7d9cf, #f3c6b5);
}

/* Curved + gradient blend on the image's LEFT edge: a white-to-transparent
   wash clipped by a soft vertical S-curve, so the photo melts into the
   blush content area instead of meeting it at a hard line. */
.nearu-about .nearu-about-hero .nearu-about-hero-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        #fdf0f4 0%,
        rgba(253, 240, 244, .92) 14%,
        rgba(253, 244, 247, .55) 26%,
        rgba(255, 255, 255, .18) 38%,
        rgba(255, 255, 255, 0) 50%
    );
    /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpath d='M0 0 H42 C36 26 50 50 40 74 C34 88 40 96 36 100 H0 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpath d='M0 0 H42 C36 26 50 50 40 74 C34 88 40 96 36 100 H0 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat; */
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* ============================================================
   4. TYPOGRAPHY - unchanged tokens; just ensure the eyebrow/heading
   read cleanly on the blush area. (Inherits sizes from about.css.)
   ============================================================ */
.nearu-about .nearu-about-hero .nearu-about-hero-text { max-width: 460px; }

/* ============================================================
   5. RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
    .nearu-about .nearu-about-hero {
        margin-top: 16px;
        max-width: calc(100% - 32px);
        border-radius: 22px;
    }
    .nearu-about .nearu-about-hero .row { min-height: 0; }
    /* Stack: image becomes a top banner, copy below it. */
    .nearu-about .nearu-about-hero .col-lg-7 {
        order: -1;
        min-height: 260px;
    }
    .nearu-about .nearu-about-hero .nearu-about-hero-photo::before {
        /* Bottom fade into the copy instead of a side curve. */
        background: linear-gradient(180deg, rgba(255,255,255,0) 62%, #fdf0f4 100%);
        -webkit-mask-image: none;
        mask-image: none;
    }
    .nearu-about .nearu-about-hero .col-lg-5 {
        padding: clamp(24px, 5vw, 36px);
    }
}

@media (max-width: 575.98px) {
    .nearu-about .nearu-about-hero .col-lg-7 { min-height: 200px; }
}