/**
 * Fichier  : /pages/sport-business/event/assets/css/day.css
 * Fonction : déroulé vertical et progressif du jour J
 */


/* ==================================================
   SECTION
================================================== */

.event .day {
    box-sizing: border-box;
    padding: 0 6em 4em;
}

.event .day {
    background: #f4f3f0;
}


/* ==================================================
   HEADER
================================================== */

.event .day > header {
    margin-bottom: clamp(2.8em, 4.5vw, 4.5em);
}

.event .day > header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(280px, .8fr);
    align-items: end;
    gap: clamp(3em, 7vw, 8em);
}

.event .day > header span {
    display: block;
}

.event .day > header span {
    margin-bottom: 1.1em;
}

.event .day > header span {
    font-family: 'bold-font';
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(17, 17, 17, .42);
}

.event .day h2 {
    margin: 0;
}

.event .day h2 {
    font-family: 'bold-font';
    font-size: clamp(42px, 4.8vw, 72px);
    font-weight: 400;
    line-height: .88;
    text-transform: uppercase;
    letter-spacing: -.05em;
}

.event .day h2 em {
    display: block;
}

.event .day h2 em {
    font-style: normal;
    color: var(--color-primary);
}

.event .day > header > p {
    max-width: 420px;
    margin: 0;
}

.event .day > header > p {
    font-family: 'content-font';
    font-size: 12px;
    line-height: 1.7;
    color: rgba(17, 17, 17, .52);
}


/* ==================================================
   TIMELINE
================================================== */

.event .day .timeline {
    position: relative;
}

.event .day .timeline {
    max-width: 980px;
    margin: 0 auto;
}


/* ==================================================
   LINE
================================================== */

.event .day .line {
    position: absolute;
    top: var(--day-line-top, 0);
    left: 135px;
    z-index: 0;
}

.event .day .line {
    width: 1px;
    height: var(--day-line-height, 100%);
}

.event .day .line {
    overflow: hidden;
}

.event .day .line {
    background: rgba(17, 17, 17, .14);
}


/* ==================================================
   LINE PROGRESS
================================================== */

.event .day .line span {
    position: absolute;
    top: 0;
    left: 0;
}

.event .day .line span {
    width: 100%;
    height: var(--day-line-progress, 0px);
}

.event .day .line span {
    background: var(--color-primary);
}

.event .day .line span {
    box-shadow:
        0 0 8px
        rgba(220, 0, 0, .45);
}

.event .day .line span {
    transition:
        height .7s cubic-bezier(.22, 1, .36, 1);
}


/* ==================================================
   MOMENT
================================================== */

.event .day .moment {
    position: relative;
}

.event .day .moment {
    min-height: 125px;
}

.event .day .moment {
    display: grid;
    grid-template-columns:
        110px
        52px
        minmax(0, 1fr);
    align-items: start;
    gap: 0;
}

.event .day .moment:last-child {
    min-height: 0;
}


/* ==================================================
   TIME
================================================== */

.event .day .moment time {
    padding-top: 3px;
}

.event .day .moment time {
    font-family: 'bold-font';
    font-size: 11px;
    letter-spacing: .05em;
    color: rgba(17, 17, 17, .34);
}

.event .day .moment time {
    transition: color .45s ease;
}


/* ==================================================
   POINT
================================================== */

.event .day .moment > i {
    position: relative;
    z-index: 2;
}

.event .day .moment > i {
    width: 12px;
    height: 12px;
    margin-left: 19px;
}

.event .day .moment > i {
    box-sizing: border-box;
}

.event .day .moment > i {
    background: #f4f3f0;
    border: 2px solid rgba(17, 17, 17, .25);
    border-radius: 50%;
}

.event .day .moment > i {
    box-shadow:
        0 0 0 6px
        #f4f3f0;
}

.event .day .moment > i {
    transition:
        background .45s ease,
        border-color .45s ease,
        box-shadow .55s cubic-bezier(.22, 1, .36, 1),
        transform .55s cubic-bezier(.22, 1, .36, 1);
}


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

.event .day .moment > div {
    padding-bottom: 2.2em;
}

.event .day .moment > div {
    border-bottom: 1px solid rgba(17, 17, 17, .10);
}

.event .day .moment > div > span {
    display: block;
}

.event .day .moment > div > span {
    margin-bottom: .6em;
}

.event .day .moment > div > span {
    font-family: 'bold-font';
    font-size: 7px;
    letter-spacing: .12em;
    color: rgba(17, 17, 17, .28);
}

.event .day .moment > div > span {
    transition: color .45s ease;
}

.event .day .moment strong {
    display: block;
}

.event .day .moment strong {
    font-family: 'bold-font';
    font-size: 1.5em;
    font-weight: 400;
    line-height: .95;
    text-transform: uppercase;
    letter-spacing: -.035em;
    color: #111;
}

.event .day .moment strong {
    transition:
        color .45s ease,
        transform .55s cubic-bezier(.22, 1, .36, 1);
}

.event .day .moment p {
    max-width: 520px;
    margin: .8em 0 0;
}

.event .day .moment p {
    font-family: 'content-font';
    font-size: 12px;
    line-height: 1.6;
    color: rgba(17, 17, 17, .46);
}


/* ==================================================
   REACHED
================================================== */

.event .day .moment.is-reached time {
    color: var(--color-primary);
}

.event .day .moment.is-reached > i {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.event .day .moment.is-reached > div > span {
    color: var(--color-primary);
}


/* ==================================================
   ACTIVE
================================================== */

.event .day .moment.is-active > i {
    transform: scale(1.15);
}

.event .day .moment.is-active > i {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.event .day .moment.is-active > i {
    box-shadow:
        0 0 0 6px #f4f3f0,
        0 0 0 8px rgba(220, 0, 0, .10),
        0 0 18px rgba(220, 0, 0, .35);
}

.event .day .moment.is-active strong {
    color: var(--color-primary);
}

.event .day .moment.is-active strong {
    transform: translateX(4px);
}


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

@media screen and (max-width: 800px) {

    .event .day {
        padding: 0 1.5em;
    }


    /* ==================================================
       HEADER
    ================================================== */

    .event .day > header {
        margin-bottom: 2.8em;
    }

    .event .day > header {
        grid-template-columns: 1fr;
        gap: 1.8em;
    }

    .event .day h2 {
        font-size: clamp(38px, 11vw, 54px);
    }


    /* ==================================================
       LINE
    ================================================== */

    .event .day .line {
        left: 59px;
    }


    /* ==================================================
       MOMENT
    ================================================== */

    .event .day .moment {
        min-height: 108px;
    }

    .event .day .moment {
        grid-template-columns:
            42px
            34px
            minmax(0, 1fr);
    }

    .event .day .moment:last-child {
        min-height: 0;
    }


    /* ==================================================
       TIME
    ================================================== */

    .event .day .moment time {
        padding-top: 2px;
    }

    .event .day .moment time {
        font-size: 8px;
    }


    /* ==================================================
       POINT
    ================================================== */

    .event .day .moment > i {
        width: 12px;
        height: 12px;
        margin-left: 11px;
    }


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

    .event .day .moment > div {
        padding-left: .5em;
        padding-bottom: 1em;
        margin-bottom: 1em;
    }

    .event .day .moment strong {
        font-size: clamp(22px, 7vw, 30px);
    }

    .event .day .moment p {
        margin-top: .7em;
    }

    .event .day .moment p {
        font-size: 10px;
    }

}


/* ==================================================
   ACCESSIBILITÉ
================================================== */

@media (prefers-reduced-motion: reduce) {

    .event .day .line span,
    .event .day .moment time,
    .event .day .moment > i,
    .event .day .moment > div > span,
    .event .day .moment strong {
        transition: none !important;
    }

}