/*==================================================
EVENTS
==================================================*/

.events{
    position:relative;
}

.events__container{}

.events__banner{
    position:relative;
    overflow:hidden;
    min-height:620px;
    border-radius:var(--radius-xl);
    background:var(--bg-alt);
    box-shadow:var(--shadow-lg);
    isolation:isolate;
}

/*==============================
IMAGE
==============================*/

.events__image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s ease;
}

.events__banner:hover .events__image{
    transform:scale(1.03);
}

/*==============================
OVERLAY
==============================*/

.events__overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(247,245,238,.92) 0%,
            rgba(247,245,238,.82) 28%,
            rgba(247,245,238,.55) 48%,
            rgba(247,245,238,.12) 72%,
            rgba(247,245,238,0) 100%
        );
}

/*==============================
CONTENT
==============================*/

.events__content{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;

    width:min(620px,100%);
    min-height:620px;

    padding:5rem;

    backdrop-filter:blur(5px);
}

/*==============================
TYPOGRAPHY
==============================*/

.events__subtitle{
    display:inline-flex;
    align-items:center;
    gap:.7rem;

    margin-bottom:1.4rem;
    padding:.55rem 1.2rem;

    border-radius:999px;

    background:rgba(255,255,255,.65);
    border:1px solid rgba(47,110,69,.15);

    color:var(--primary);

    font-size:var(--fs-xs);
    font-weight:var(--fw-semibold);
    letter-spacing:.15em;
    text-transform:uppercase;
}

.events__subtitle::before{
    content:"";
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--sunflower);
}

.events__title{

    margin-bottom:1.5rem;

    color:var(--primary);

    font-family:var(--font-title);
    font-size:clamp(3rem,5vw,4.7rem);
    line-height:.92;
    letter-spacing:.02em;

    max-width:520px;
}

.events__description{

    margin-bottom:2.4rem;

    color:var(--text-soft);

    font-size:1.05rem;
    line-height:1.9;

    max-width:520px;
}

/*==============================
FEATURES
==============================*/

.events__features{

    display:flex;
    flex-wrap:wrap;
    gap:.9rem;

    margin-bottom:2.8rem;
}

.events__feature{

    padding:.75rem 1.15rem;

    border-radius:999px;

    background:rgba(255,255,255,.8);

    border:1px solid var(--border);

    color:var(--text);

    font-size:.95rem;
    font-weight:600;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);
}

.events__feature:hover{
    transform:translateY(-3px);
    border-color:var(--sunflower);
}

/*==============================
BUTTONS
==============================*/

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

/*==============================
DECORATION
==============================*/

.events__banner::after{

    content:"";

    position:absolute;
    left:5rem;
    bottom:2rem;

    width:180px;
    height:60px;

    background:var(--sprig);

    opacity:.55;

    pointer-events:none;
}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:900px){

    .events__banner{
        min-height:700px;
    }

    .events__overlay{

        background:

        linear-gradient(

            180deg,

            rgba(247,245,238,.88) 0%,
            rgba(247,245,238,.68) 45%,
            rgba(247,245,238,.25) 72%,
            rgba(247,245,238,.05) 100%

        );
    }

    .events__content{

        width:100%;
        min-height:700px;

        padding:3rem;
    }

    .events__banner::after{

        left:3rem;
        bottom:2rem;
    }

}

@media(max-width:600px){

    .events__banner{

        min-height:650px;
        border-radius:var(--radius-lg);
    }

    .events__content{

        min-height:650px;
        padding:2rem;
    }

    .events__title{

        font-size:2.4rem;
    }

    .events__description{

        font-size:.98rem;
    }

    .events__features{

        flex-direction:column;
        align-items:flex-start;
    }

    .events__feature{

        width:100%;
    }

    .events__actions{

        width:100%;
        flex-direction:column;
    }

    .events__actions .button{

        width:100%;
        justify-content:center;
    }

    .events__banner::after{

        left:2rem;
        width:140px;
    }

}

.events__feature{
    display:flex;
    align-items:center;
    gap:.7rem;
}

.events__feature::before{
    content:"✓";
    color:var(--success);
    font-weight:700;
}