/* ******************************************** */
/** HERO EVENTS
/* ******************************************** */

.c-events{
    position: relative;
    background-color: var(--color-primary);
}

.c-events:before {
    content: "";
    width: 100%;
    height: 250px;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--bg-gradient);
    z-index: 1;
}

.c-events__carousel .tns-inner{
    direction: ltr !important;
}

.c-events__title,
.c-events__link,
.c-events__carousel{
    position: relative;
    z-index: 2;
}

.c-event-card__title-link{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.c-events__bg{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.c-events__list{
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
}

.c-events__link{
    color: var(--color-lightest);
}

.c-events .tns-controls button{
    left: 4px;
}

.c-events .tns-controls button[data-controls="next"]{
    right: 4px;
    left: auto;
}

.c-events__item{
    max-width: 500px;
}

/* CARD */

.c-event-card__padding{
    height: 100%;
    padding-bottom: 30px;
    border-radius: 35px 35px 0 0;
}

.c-event-card__holder{
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    box-shadow: rgb(0 0 0 / 80%) 0px 20px 20px -15px;
    border-radius: 35px;
}

.c-event-card__image{
    position: relative;
    aspect-ratio: 335/250;
    border-radius: 35px 35px 0 0;
    overflow: hidden;
}

.c-event-card__info{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    height: 100%;
    padding: 30px 30px 40px;
    background-color: rgb(var(--color-darkest-rgb)/75%);
    color: var(--color-lightest);
    gap: 2.4em;
    border-radius: 0 0 35px 35px;
    overflow: hidden;
}

.c-event-card__title{
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.4;
}

.c-event-card__data{
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    font-size: 1.8rem;
    color: var(--color-gray);
}

.c-event-card__data:not(:first-of-type){
    margin-top: 1em;
}

.c-event-card__data:first-of-type{
    margin-top: 1.4em;
}

.c-event-card__data-icon{
    font-size: 1.5em;
    color: var(--color-gold);
    margin-top: -3px;
}

.c-event-card__link{
    color: var(--color-lightest);
    font-size: 1.8rem;
}


/* ********************** MOBILE LANDSCAPE ********************** */

@media (orientation: landscape) and (min-width: 500px) and (max-width: 767px) {

    .c-events .tns-controls[style*="display"] ~ .tns-ovh{
        padding-inline-start: var(--space-x);
    }

}



/* ********************** de Mobile a TABLET ********************** */

@media (min-width: 768px) {

    .c-events .tns-controls button{
        left: calc(var(--space-x)/2);
    }

    .c-events .tns-controls button[data-controls="next"]{
        right: calc(var(--space-x)/2);
    }

    .c-events .tns-controls[style*="display"] ~ .tns-ovh{
        padding-inline-start: var(--space-x);
    }
}


/* ********************** de Tablet a DESKTOP ********************** */

@media (min-width: 980px) {

    .c-event-card__image{
        transition: filter 300ms ease-out;
    }

    .c-event-card__image:is(:hover,:focus){
        filter: brightness(0.5);
        transition: filter 300ms ease-out;
    }

}


/* ********************** de Desktop a DESKTOP 2 ********************** */

@media (min-width: 1200px) {

    .c-events .tns-controls button{
        left: 65px;
    }

    .c-event-card__title{
        font-size: 2.1rem;
    }
}


/* ********************** de Desktop 2 a HD ********************** */

@media (min-width: 1440px) {

    .c-events .tns-controls button{
        left: 175px;
    }

    .c-event-card__title{
        font-size: 2.3rem;
    }
}


/* ********************** de Hd a FULL HD ********************** */

@media (min-width: 1600px) {

    .c-events .tns-controls[style*="display"] ~ .tns-ovh {
        padding-inline-start: calc(50% - 750px);
    }

}



@media (min-width: 1800px) {

    .c-events .tns-controls button {
        left: 375px;
    }
}