/**
 * B612 Events
 */


 /* ==========================================================
    CONTENEUR PRINCIPAL
 ========================================================== */

 .b612-events {

     position: relative;

     display: grid;

     grid-template-columns:
         340px minmax(0, 1fr);

     align-items: center;

     gap: 55px;

     width: 100vw;

     max-width: none;

     margin-left: calc(50% - 50vw);

     padding:
         42px max(60px, calc((100vw - 1280px) / 2)) 34px;

     box-sizing: border-box;

     background: #17182c;

     color: #ffffff;

     overflow: hidden;
 }


/* ==========================================================
   COLONNE ÉDITORIALE
========================================================== */

.b612-events__intro {

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;

    padding: 0;
}


/* ----------------------------------------------------------
   Petit titre
---------------------------------------------------------- */

.b612-events__eyebrow {

    margin-bottom: 18px;

    font-family: 'Inter', sans-serif;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: .18em;

    text-transform: uppercase;

    opacity: .48;
}


/* ----------------------------------------------------------
   Grand titre
---------------------------------------------------------- */

.b612-events__heading {

    margin: 0;

    max-width: 520px;

    font-family:
        'Cormorant Garamond',
        Georgia,
        serif;

    font-size: 50px;

    line-height: .95;

    font-weight: 400;

    letter-spacing: -.02em;
}


/* ----------------------------------------------------------
   Bouton agenda
---------------------------------------------------------- */

.b612-events__agenda-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    width: fit-content;

    margin-top: 32px;

    padding: 10px 15px;

    border: 1px solid
        rgba(255, 255, 255, .18);

    border-radius: 8px;

    color: #ffffff;

    text-decoration: none;

    font-family: 'Inter', sans-serif;

    font-size: 11px;

    transition:
        background .2s ease,
        border-color .2s ease;
}


.b612-events__agenda-link:hover {

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

    border-color:
        rgba(255, 255, 255, .35);
}


.b612-events__agenda-link span {

    font-size: 15px;

    line-height: 1;
}

/* ==========================================================
   ZONE CARTES
========================================================== */

.b612-events__slider {

    position: relative;

    display: grid;

    grid-template-columns:
        42px minmax(0, 1fr) 42px;

    align-items: center;

    min-width: 0;

    width: 100%;

    box-sizing: border-box;

    column-gap: 8px;
}

/* ==========================================================
   CARTES
========================================================== */

.b612-events__cards {

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    gap: 20px;

    width: max-content;
}

/* ----------------------------------------------------------
   Carte individuelle
---------------------------------------------------------- */

.b612-event-card {

    flex: 0 0 185px;

    width: 185px;

    min-width: 0;

    border:
        1px solid
        rgba(255, 255, 255, .20);

    border-radius: 11px;

    overflow: hidden;

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

    transition:
        transform .25s ease,
        border-color .25s ease;
}


.b612-event-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(255, 255, 255, .40);
}


.b612-event-card__link {

    display: block;

    color: inherit;

    text-decoration: none;
}


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

.b612-event-card__media {

    position: relative;

    aspect-ratio: 1.45 / 1;

    overflow: hidden;

    background: #25263b;
}


.b612-event-card__image {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform .4s ease;
}


.b612-event-card:hover
.b612-event-card__image {

    transform:
        scale(1.04);
}


/* =========================================================
   DATE
   ========================================================= */

.b612-event-card__date {
    position: absolute;

    left: 14px;
    bottom: 14px;

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

    min-width: 52px;
    min-height: 52px;

    padding: 5px 8px;

    box-sizing: border-box;

    background: #17182d;

    color: #fff;
}


.b612-event-card__day {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1;
    font-weight: 500;
}


.b612-event-card__month {
    margin-top: 4px;

    font-family: "Inter", sans-serif;
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/* ==========================================================
   CORPS DE LA CARTE
========================================================== */

.b612-event-card__body {

    padding:
        12px 11px 13px;
}


.b612-event-card__title {

    margin: 0;

    font-family:
        'Cormorant Garamond',
        Georgia,
        serif;

    font-size: 23px;

    line-height: 1.05;

    font-weight: 500;
}


.b612-event-card__meta {

    display: flex;

    flex-wrap: wrap;

    gap: 4px 8px;

    margin-top: 12px;

    font-family:
        'Cormorant Garamond',
        Georgia,
        serif;

    font-size: 14px;

    line-height: 1.2;

    opacity: .55;
}

/* ==========================================================
   ZONES DE PROTECTION DES FLÈCHES
========================================================== */

.b612-events__slider::before,
.b612-events__slider::after {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    width: 58px;

    background: #17182c;

    z-index: 4;

    pointer-events: none;
}


/* ----------------------------------------------------------
   Protection gauche
---------------------------------------------------------- */

.b612-events__slider::before {

    left: 0;
}


/* ----------------------------------------------------------
   Protection droite
---------------------------------------------------------- */

.b612-events__slider::after {

    right: 0;
}


/* ==========================================================
   FLÈCHES
========================================================== */

.b612-events__prev,
.b612-events__next {

    position: static;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    padding: 0;

    box-sizing: border-box;

    border:
        1px solid
        rgba(255, 255, 255, .45);

    border-radius: 50%;

    background:
        rgba(23, 24, 44, .90);

    color: #ffffff;

    font-size: 18px;

    line-height: 1;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


/* ----------------------------------------------------------
   Positionnement dans la grille
---------------------------------------------------------- */

.b612-events__prev {

    grid-column: 1;
    grid-row: 1;

    justify-self: start;
}


.b612-events__next {

    grid-column: 3;
    grid-row: 1;

    justify-self: end;
}


.b612-events__prev:hover,
.b612-events__next:hover {

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

    border-color:
        rgba(255, 255, 255, .70);

    transform:
        scale(1.05);
}


/* ==========================================================
   PAGINATION
========================================================== */

.b612-events__pagination {

    grid-column: 2;

    grid-row: 2;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 5px;

    margin-top: 17px;
}

.b612-events__pagination span {

    width: 8px;
    height: 8px;

    border-radius: 50%;

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

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease;
}


.b612-events__pagination span:hover {

    transform: scale(1.35);

    background: rgba(255, 255, 255, .65);
}

.b612-events__pagination
span.is-active {

    background: #ffffff;
}

/* -------------------------------------------------
   Fenêtre de défilement des animations
------------------------------------------------- */

.b612-events__viewport {

    min-width: 0;

    width: 100%;

    box-sizing: border-box;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;
}


.b612-events__viewport::-webkit-scrollbar {

    display: none;
}

.b612-events__pagination span {
    cursor: pointer;
}

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

@media (max-width: 1200px) {

    .b612-events {

        grid-template-columns:
            300px minmax(0, 1fr);

        gap: 30px;

        padding:
            35px 40px;
    }


    .b612-events__heading {

        font-size: 44px;
    }


    .b612-event-card {

        flex-basis: 175px;

        width: 175px;
    }
}


/* ----------------------------------------------------------
   Tablette / petit desktop
---------------------------------------------------------- */

@media (max-width: 900px) {

    .b612-events {

        grid-template-columns:
            1fr;

        gap: 30px;

        padding:
            40px 35px;
    }


    .b612-events__intro {

        order: 1;
    }


    .b612-events__slider {

        order: 2;

        padding:
            0 45px;
    }


    .b612-events__heading {

        max-width: 600px;

        font-size: 42px;
    }
}


/* ----------------------------------------------------------
   Mobile
---------------------------------------------------------- */

@media (max-width: 760px) {

    .b612-events {

        display: block;

        padding:
            30px 20px;
    }


    .b612-events__intro {

        margin-bottom: 28px;
    }


    .b612-events__heading {

        max-width: none;

        font-size: 32px;
    }


    .b612-events__slider {

        padding: 0;

    }


    .b612-events__prev,
    .b612-events__next {

        display: flex;

        width: 34px;
        height: 34px;

        font-size: 16px;
    }


    .b612-events__prev {

        left: 8px;
    }


    .b612-events__next {

        right: 8px;
    }


    .b612-events__cards {

        gap: 14px;

        width: 100%;
    }

    .b612-event-card {

        flex: 0 0 100%;

        width: 100%;
    }
}