/*=========================================================
=                          HERO                           =
=========================================================*/

/*---------- Section ----------*/

.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    isolation:isolate;
}

/*---------- Background ----------*/

.hero__background{
    position:absolute;
    inset:0;
    z-index:-3;
}

.hero__image{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 35%;
}

/*---------- Overlay ----------*/

.hero__overlay{
    position:absolute;
    inset:0;
    z-index:-2;
    background:
        linear-gradient(
            100deg,
            rgba(20,26,17,.92) 0%,
            rgba(24,30,19,.72) 42%,
            rgba(24,30,19,.42) 68%,
            rgba(24,30,19,.18) 100%
        ),
        linear-gradient(
            0deg,
            rgba(20,26,17,.92) 0%,
            rgba(24,30,19,.72) 42%,
            rgba(24,30,19,.42) 68%,
            rgba(24,30,19,.18) 100%
        );
}

/*---------- Container ----------*/

.hero__container{
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:100vh;
    padding-block:7.5rem 3rem;
    padding:5.5rem
}

/*---------- Content ----------*/

.hero__content{
    max-width:40rem;
    color:var(--text-invert);
}

.hero__logo{
    width:11rem;
    margin-bottom:1.75rem;
    filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));
}

.hero__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    margin-bottom:1.25rem;

    font-family:var(--font-title);
    letter-spacing:.4em;
    font-size:.72rem;
    font-weight:var(--fw-medium);
    text-transform:uppercase;
    color:var(--sunflower);
}

.hero__eyebrow::before{
    content:"";
    width:28px;
    height:1px;
    background:var(--sunflower);
}

.hero__title{
    margin-bottom:1.5rem;
    font-family:var(--font-title);
    font-weight:var(--fw-semibold);
    font-size:clamp(2.8rem,6.4vw,5.2rem);
    line-height:.98;
    text-transform:uppercase;
    letter-spacing:.01em;
}

.hero__description{
    max-width:32rem;
    margin-bottom:2.5rem;
    font-size:1.15rem;
    line-height:1.7;
    color:rgba(251,249,242,.85);
}

/*---------- Actions ----------*/

.hero__actions{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
}

/*---------- Footer ----------*/

.hero__details{
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:rgba(251,249,242,.75);
    font-family:var(--font-title);
    font-size:.75rem;
    font-weight:var(--fw-medium);
    letter-spacing:.25em;
    text-transform:uppercase;
    border-top:1px solid rgba(251,249,242,.2);
    padding-top:1.25rem;
}

/*---------- Responsive ----------*/

@media(max-width:768px){

    .hero{
        min-height:92vh;
    }

    .hero__container{
        padding-block:7rem 2rem;
    }

    .hero__logo{
        width:8rem;
    }

    .hero__title{
        font-size:clamp(2.5rem,12vw,4rem);
    }

    .hero__description{
        font-size:1rem;
    }

    .hero__details{
        flex-direction:column;
        align-items:flex-start;
        gap:.5rem;
    }

}