/* =========================================================
   MAMAHOOD — HOME
   ========================================================= */
/*
 * Mechanical migration from the approved current Additional CSS.
 * No visual changes intended.
 */

/* =========================================================
   MAMAHOOD HOMEPAGE
   ========================================================= */


/* ---------------------------------------------------------
   HERO BUTTON
   Raspberry → darker raspberry on hover
   --------------------------------------------------------- */

.hero-cta .wp-block-button__link {
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.hero-cta .wp-block-button__link:hover,
.hero-cta .wp-block-button__link:focus {
    background-color: #C91F5A !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   HOMEPAGE HERO — DESKTOP
   --------------------------------------------------------- */

.home-hero .kt-row-layout-inner,
.home-hero .kt-row-column-wrap {
    min-height: 700px !important;
}

.home-hero .kt-row-column-wrap {
    align-items: stretch !important;
}


/* Soft stone veil over LEFT hero column */

.home-hero .hero-veil {
    align-self: stretch !important;
    min-height: 700px !important;

    background: linear-gradient(
        90deg,
        rgba(248, 243, 236, 0.90) 0%,
        rgba(248, 243, 236, 0.82) 48%,
        rgba(248, 243, 236, 0.55) 70%,
        rgba(248, 243, 236, 0.22) 88%,
        rgba(248, 243, 236, 0) 100%
    ) !important;
}

.home-hero .hero-veil > .kt-inside-inner-col {
    min-height: 700px !important;
    height: 100% !important;
}


/* ---------------------------------------------------------
   HOMEPAGE HERO — TABLET
   --------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {

    .home-hero .hero-veil > .kt-inside-inner-col {
        padding-top: 28px !important;
    }

}


/* ---------------------------------------------------------
   HOMEPAGE HERO — MOBILE
   Veil fades DOWN instead of ACROSS
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .home-hero .hero-veil {
        background: linear-gradient(
            180deg,
            rgba(248, 243, 236, 0.95) 0%,
            rgba(248, 243, 236, 0.90) 48%,
            rgba(248, 243, 236, 0.66) 70%,
            rgba(248, 243, 236, 0.20) 88%,
            rgba(248, 243, 236, 0) 100%
        ) !important;
    }

    .home-hero .hero-veil > .kt-inside-inner-col {
        padding: 44px 24px 28px !important;
    }

    .home-hero .kt-row-layout-inner {
        background-position: 68% center !important;
    }

    /* Compact mobile proof card — 500,000+ */
    .home-hero .mh-home-stat-card {
        width: 238px !important;
        max-width: calc(100% - 40px) !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: 20px !important;
        box-sizing: border-box !important;
    }

    .home-hero .mh-home-stat-card > .kt-inside-inner-col {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

}