/* =========================================================
   HOMEPAGE HERO - FIXED VERSION
========================================================= */


/* =========================================================
   1. HERO CONTAINER
========================================================= */

body.home .hero,
body.front-page .hero {

    position: relative !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    width: 100% !important;

    min-height: 680px !important;

    height: auto !important;

    padding: 70px 0 !important;

    box-sizing: border-box !important;

    background-size: cover !important;

    background-position: center center !important;

    background-repeat: no-repeat !important;

    background-color: #f7f2ea !important;

    overflow: visible !important;
}


/* =========================================================
   2. LEFT GRADIENT OVERLAY
========================================================= */

body.home .hero::before,
body.front-page .hero::before {

    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    background: linear-gradient(
        90deg,
        rgba(247, 242, 234, 0.96) 0%,
        rgba(247, 242, 234, 0.88) 26%,
        rgba(247, 242, 234, 0.58) 43%,
        rgba(247, 242, 234, 0.15) 60%,
        rgba(247, 242, 234, 0) 76%
    ) !important;

    z-index: 1 !important;

    pointer-events: none !important;
}


/* =========================================================
   3. HERO CONTENT
========================================================= */

body.home .hero .hero-content,
body.front-page .hero .hero-content {

    position: relative !important;

    z-index: 2 !important;

    width: 46% !important;

    max-width: 650px !important;

    min-width: 0 !important;

    margin: 0 !important;

    margin-left: clamp(50px, 6vw, 110px) !important;

    padding: 0 !important;

    text-align: left !important;

    box-sizing: border-box !important;
}


/* =========================================================
   4. EYEBROW
========================================================= */

body.home .hero .eyebrow,
body.front-page .hero .eyebrow {

    display: block !important;

    margin: 0 0 18px 0 !important;

    font-size: 13px !important;

    line-height: 1.4 !important;

    letter-spacing: 0.20em !important;

    text-transform: uppercase !important;

    color: #9b7843 !important;

    font-weight: 600 !important;
}


/* =========================================================
   5. HERO TITLE
========================================================= */

body.home .hero h1,
body.front-page .hero h1 {

    max-width: 650px !important;

    margin: 0 0 26px 0 !important;

    padding: 0 !important;

    font-family: Georgia, "Times New Roman", serif !important;

    font-size: clamp(58px, 5.2vw, 82px) !important;

    line-height: 0.98 !important;

    letter-spacing: -0.025em !important;

    font-weight: 400 !important;

    color: #171717 !important;
}


/* =========================================================
   6. SUBTITLE
========================================================= */

body.home .hero .hero-subtitle,
body.front-page .hero .hero-subtitle {

    display: block !important;

    max-width: 540px !important;

    margin: 0 0 34px 0 !important;

    font-size: 18px !important;

    line-height: 1.7 !important;

    color: #555 !important;
}


/* =========================================================
   7. BUTTONS
========================================================= */

body.home .hero .hero-actions,
body.front-page .hero .hero-actions {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: wrap !important;

    align-items: center !important;

    justify-content: flex-start !important;

    gap: 16px !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: visible !important;
}


body.home .hero .hero-actions .button,
body.front-page .hero .hero-actions .button {

    width: auto !important;

    min-height: 50px !important;

    padding: 14px 28px !important;

    box-sizing: border-box !important;

    white-space: nowrap !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    body.home .hero,
    body.front-page .hero {

        min-height: 640px !important;

        padding-top: 60px !important;

        padding-bottom: 60px !important;

        background-position: 60% center !important;
    }


    body.home .hero .hero-content,
    body.front-page .hero .hero-content {

        width: 52% !important;

        margin-left: clamp(35px, 5vw, 70px) !important;
    }


    body.home .hero h1,
    body.front-page .hero h1 {

        font-size: clamp(52px, 5.5vw, 72px) !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    body.home .hero,
    body.front-page .hero {

        min-height: auto !important;

        padding: 80px 7% !important;

        background-position: center !important;
    }


    body.home .hero::before,
    body.front-page .hero::before {

        background: rgba(247, 242, 234, 0.88) !important;
    }


    body.home .hero .hero-content,
    body.front-page .hero .hero-content {

        width: 100% !important;

        max-width: none !important;

        margin: 0 !important;
    }


    body.home .hero h1,
    body.front-page .hero h1 {

        font-size: clamp(46px, 12vw, 64px) !important;

        line-height: 1 !important;
    }


    body.home .hero .hero-actions,
    body.front-page .hero .hero-actions {

        flex-direction: column !important;

        align-items: stretch !important;
    }


    body.home .hero .hero-actions .button,
    body.front-page .hero .hero-actions .button {

        width: 100% !important;
    }

}