/**
 * Fichier  : /pages/sport-business/media/assets/css/timeline.css
 * Fonction : temporalité de l'accompagnement de médiatisation
 */


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

.media .offers {
    box-sizing: border-box;
}

.media .offers {
    padding-right: var(--media-padding-inline);
    padding-left: var(--media-padding-inline);
}


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

.offers > header {
    margin-top: 1.5em;
    margin-bottom: 4em;
}

.offers > header {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

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

.offers > header p {
    max-width: 620px;
    margin: 0;
}

.offers > header p {
    font-family: 'content-font';
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    color: rgba(17, 17, 17, .58);
}


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

.offers .timeline {
    position: relative;
}

.offers .timeline {
    min-height: 300px;
    margin-bottom: clamp(3.5em, 6vw, 6em);
}

.offers .timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.offers .timeline {
    border-top: 1px solid rgba(17, 17, 17, .11);
    border-bottom: 1px solid rgba(17, 17, 17, .11);
}


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

.offers .track {
    position: absolute;
    top: 78px;
    right: 0;
    left: 0;
    z-index: 2;
}

.offers .track {
    height: 1px;
}

.offers .track {
    pointer-events: none;
}

.offers .track span {
    width: 100%;
    height: 100%;
}

.offers .track span {
    display: block;
}

.offers .track span {
    background:
        linear-gradient(
            to right,

            /* POINT 01 */
            var(--color-primary) 0,

            var(--color-primary)
            calc(2.3vw + 7px - 20px),

            transparent
            calc(2.3vw + 7px - 20px),

            transparent
            calc(2.3vw + 7px + 20px),

            var(--color-primary)
            calc(2.3vw + 7px + 20px),

            /* POINT 02 */
            var(--color-primary)
            calc((100% / 3) + 2.3vw + 7px - 20px),

            transparent
            calc((100% / 3) + 2.3vw + 7px - 20px),

            transparent
            calc((100% / 3) + 2.3vw + 7px + 20px),

            var(--color-primary)
            calc((100% / 3) + 2.3vw + 7px + 20px),

            /* POINT 03 */
            var(--color-primary)
            calc((100% / 3 * 2) + 2.8vw + 7px - 20px),

            transparent
            calc((100% / 3 * 2) + 2.8vw + 7px - 20px),

            transparent
            calc((100% / 3 * 2) + 2.8vw + 7px + 20px),

            var(--color-primary)
            calc((100% / 3 * 2) + 2.8vw + 7px + 20px),

            var(--color-primary) 100%
        );
}

.offers .track span {
    transform: none;
    transform-origin: left center;
}


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

.offers .item {
    position: relative;
    overflow: hidden;
}

.offers .item {
    min-width: 0;
}

.offers .item {
    box-sizing: border-box;
    padding: 0 clamp(1.5em, 2.3vw, 2.6em) 2.5em;
}

.offers .item {
    background: transparent;
}

.offers .item {
    box-shadow: none;
}

.offers .item {
    color: #111;
}

.offers .item {
    transition:
        box-shadow 1s cubic-bezier(.22, 1, .36, 1),
        color .8s ease;
}

.offers .item:not(:last-child) {
    border-right: 1px solid rgba(17, 17, 17, .08);
}


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

.offers .item::before {
    content: "";
}

.offers .item::before {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.offers .item::before {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 255, 255, .18),
            transparent 45%
        );
}

.offers .item::before {
    opacity: 0;
    pointer-events: none;
}

.offers .item::before {
    transition:
        opacity .7s cubic-bezier(.22, 1, .36, 1);
}


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

.offers .item::after {
    content: "";
}

.offers .item::after {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.offers .item::after {
    background: var(--gradient-primary);
}

.offers .item::after {
    opacity: 0;
    pointer-events: none;
}

.offers .item::after {
    transition:
        opacity 1s cubic-bezier(.22, 1, .36, 1);
}

.offers .item.is-active::after {
    opacity: 1;
}


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

.offers .marker {
    position: relative;
    z-index: 3;
}

.offers .marker {
    height: 79px;
}

.offers .marker {
    display: flex;
    align-items: flex-end;
}


/* ==================================================
   MARKER LABEL
================================================== */

.offers .marker span {
    position: absolute;
    bottom: 24px;
    left: 0;
    z-index: 5;
}

.offers .marker span {
    white-space: nowrap;
}

.offers .marker span {
    font-family: 'bold-font';
    font-size: 8px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(17, 17, 17, .34);
}

.offers .marker span {
    transition: color .55s ease;
}


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

.offers .marker i {
    position: absolute;
    bottom: -7px;
    left: 0;
    z-index: 4;
}

.offers .marker i {
    width: 14px;
    height: 14px;
}

.offers .marker i {
    box-sizing: border-box;
}

.offers .marker i {
    background: #f4f3f0;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
}

.offers .marker i {
    box-shadow: 0 0 0 7px #f4f3f0;
}

.offers .marker i {
    transition:
        border-color .55s ease,
        background .55s ease,
        box-shadow .7s cubic-bezier(.22, 1, .36, 1);
}


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

.offers .content {
    position: relative;
    z-index: 3;
}

.offers .content {
    padding-top: 2.5em;
}


/* ==================================================
   TITLE
================================================== */

.offers .content > strong {
    display: block;
}

.offers .content > strong {
    font-family: 'bold-font';
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 400;
    line-height: .95;
    text-transform: uppercase;
    letter-spacing: -.04em;
    color: #111;
}

.offers .content > strong {
    transform: translateY(8px);
}

.offers .content > strong {
    transition:
        color .55s ease,
        transform .75s cubic-bezier(.22, 1, .36, 1);
}


/* ==================================================
   SUBTITLE
================================================== */

.offers .content > small {
    display: block;
}

.offers .content > small {
    margin-top: .75em;
}

.offers .content > small {
    font-family: 'bold-font';
    font-size: 9px;
    font-weight: 400;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--color-primary);
}

.offers .content > small {
    transform: translateY(9px);
}

.offers .content > small {
    transition:
        color .55s ease,
        transform .75s cubic-bezier(.22, 1, .36, 1);
}


/* ==================================================
   DESCRIPTION
================================================== */

.offers .content > p {
    max-width: 330px;
}

.offers .content > p {
    margin: 1.15em 0 0;
}

.offers .content > p {
    font-family: 'content-font';
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(17, 17, 17, .50);
}

.offers .content > p {
    transform: translateY(10px);
}

.offers .content > p {
    transition:
        color .55s ease,
        transform .75s cubic-bezier(.22, 1, .36, 1);
}


/* ==================================================
   META
================================================== */

.offers .meta {
    width: fit-content;
    margin-top: 1.8em;
}

.offers .meta {
    display: block;
}

.offers .meta {
    font-family: 'bold-font';
    font-size: 8px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(17, 17, 17, .36);
}

.offers .meta {
    transform: translateY(10px);
}

.offers .meta {
    transition:
        color .55s ease,
        transform .75s cubic-bezier(.22, 1, .36, 1);
}


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

.offers .item.is-active {
    box-shadow: 0 18px 46px rgba(220, 25, 25, .20);
}

.offers .item.is-active {
    color: var(--color-white);
}

.offers .item.is-active::before {
    opacity: 1;
}


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

.offers .item.is-active .marker span {
    color: rgba(255, 255, 255, .72);
}

.offers .item.is-active .marker i {
    background: var(--color-white);
    border-color: var(--color-white);
}

.offers .item.is-active .marker i {
    box-shadow:
        0 0 0 7px rgb(220, 25, 25),
        0 0 22px rgba(255, 255, 255, .30),
        0 0 42px rgba(233, 64, 27, .24);
}


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

.offers .item.is-active .content > strong,
.offers .item.is-active .content > small {
    color: var(--color-white);
}

.offers .item.is-active .content > p {
    color: rgba(255, 255, 255, .76);
}

.offers .item.is-active .meta {
    color: rgba(255, 255, 255, .62);
}

.offers .item.is-active .content > strong,
.offers .item.is-active .content > small,
.offers .item.is-active .content > p,
.offers .item.is-active .meta {
    transform: translateY(0);
}


/* ==================================================
   ACTIVE CONTENT DELAYS
================================================== */

.offers .item.is-active .content > strong {
    transition-delay: .04s;
}

.offers .item.is-active .content > small {
    transition-delay: .09s;
}

.offers .item.is-active .content > p {
    transition-delay: .14s;
}

.offers .item.is-active .meta {
    transition-delay: .19s;
}


/* ==================================================
   FEATURED
================================================== */

.offers .item--featured {
    margin-top: -1px;
    margin-bottom: -1px;
}

.offers .item--featured {
    padding-right: clamp(1.8em, 2.8vw, 3em);
    padding-left: clamp(1.8em, 2.8vw, 3em);
}

.offers .item--featured {
    border-right: 0;
}


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

.offers .item--featured.is-active {
    box-shadow:
        0 20px 52px rgba(220, 25, 25, .24),
        0 0 32px rgba(233, 64, 27, .10);
}


/* ==================================================
   DESKTOP INTERACTIONS
================================================== */

@media screen and (min-width: 1024px) {

    .offers .item {
        cursor: pointer;
    }

}


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

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

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

    .offers .timeline {
        grid-template-columns: 1fr;
    }

    .offers .timeline {
        min-height: 0;
        padding-left: 42px;
    }


    /* ==================================================
       TRACK
    ================================================== */

    .offers .track {
        top: 0;
        right: auto;
        bottom: 0;
        left: 20px;
    }

    .offers .track {
        width: 1px;
        height: auto;
    }

    .offers .track span {
        width: 1px;
        height: 100%;
    }

    .offers .track span {
        display: block;
    }

    .offers .track span {
        background:
            linear-gradient(
                to bottom,

                /* POINT 01 */
                var(--color-primary) 0,

                var(--color-primary)
                calc(var(--mobile-point-1) - 20px),

                transparent
                calc(var(--mobile-point-1) - 20px),

                transparent
                calc(var(--mobile-point-1) + 20px),

                var(--color-primary)
                calc(var(--mobile-point-1) + 20px),

                /* POINT 02 */
                var(--color-primary)
                calc(var(--mobile-point-2) - 20px),

                transparent
                calc(var(--mobile-point-2) - 20px),

                transparent
                calc(var(--mobile-point-2) + 20px),

                var(--color-primary)
                calc(var(--mobile-point-2) + 20px),

                /* POINT 03 */
                var(--color-primary)
                calc(var(--mobile-point-3) - 20px),

                transparent
                calc(var(--mobile-point-3) - 20px),

                transparent
                calc(var(--mobile-point-3) + 20px),

                var(--color-primary)
                calc(var(--mobile-point-3) + 20px),

                var(--color-primary) 100%
            );
    }

    .offers .track span {
        transform: none;
    }


    /* ==================================================
       ITEM
    ================================================== */

    .offers .item,
    .offers .item.is-active {
        overflow: visible;
    }

    .offers .item,
    .offers .item.is-active {
        min-height: 210px;
    }

    .offers .item,
    .offers .item.is-active {
        padding: 1.8em 1.4em 2em 2.3em;
    }

    .offers .item,
    .offers .item.is-active {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(17, 17, 17, .08);
    }

    .offers .item,
    .offers .item.is-active {
        background: transparent;
    }

    .offers .item,
    .offers .item.is-active {
        box-shadow: none;
    }

    .offers .item,
    .offers .item.is-active {
        color: #111;
    }

    .offers .item::before,
    .offers .item.is-active::before {
        opacity: 0;
    }


    /* ==================================================
       MARKER
    ================================================== */

    .offers .marker {
        position: absolute;
        top: 50%;
        left: -22px;
    }

    .offers .marker {
        width: 14px;
        height: 14px;
    }

    .offers .marker {
        transform: translate(-50%, -50%);
    }


    /* ==================================================
       MARKER LABEL
    ================================================== */

    .offers .marker span {
        top: 50%;
        right: 5px;
        bottom: auto;
        left: auto;
    }

    .offers .marker span {
        min-width: max-content;
    }

    .offers .marker span {
        text-align: center;
    }

    .offers .marker span {
        transform:
            translateY(-50%)
            rotate(-90deg);
        transform-origin: center center;
    }

    .offers .item .marker span,
    .offers .item.is-active .marker span {
        color: rgba(17, 17, 17, .34);
    }


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

    .offers .marker i {
        inset: 0;
    }

    .offers .item .marker i,
    .offers .item.is-active .marker i {
        background: #f4f3f0;
        border-color: var(--color-primary);
    }

    .offers .item .marker i,
    .offers .item.is-active .marker i {
        box-shadow: 0 0 0 7px #f4f3f0;
    }


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

    .offers .content {
        padding-top: 0;
    }

    .offers .content > p {
        max-width: 420px;
    }

    .offers .item .content > strong,
    .offers .item.is-active .content > strong {
        color: #111;
    }

    .offers .item .content > small,
    .offers .item.is-active .content > small {
        color: var(--color-primary);
    }

    .offers .item .content > p,
    .offers .item.is-active .content > p {
        color: rgba(17, 17, 17, .50);
    }

    .offers .item .meta,
    .offers .item.is-active .meta {
        color: rgba(17, 17, 17, .36);
    }

    .offers .item .content > strong,
    .offers .item .content > small,
    .offers .item .content > p,
    .offers .item .meta,
    .offers .item.is-active .content > strong,
    .offers .item.is-active .content > small,
    .offers .item.is-active .content > p,
    .offers .item.is-active .meta {
        transform: none;
        transition-delay: 0s;
    }


    /* ==================================================
       FEATURED
    ================================================== */

    .offers .item--featured,
    .offers .item--featured.is-active {
        margin: 0;
        min-height: 240px;
    }

    .offers .item--featured,
    .offers .item--featured.is-active {
        box-shadow:
            0 20px 52px rgba(220, 25, 25, .24),
            0 0 32px rgba(233, 64, 27, .10);
    }

    .offers .item--featured,
    .offers .item--featured.is-active {
        color: var(--color-white);
    }

    .offers .item--featured::after,
    .offers .item--featured.is-active::after {
        opacity: 1;
    }

    .offers .item:not(.item--featured)::after,
    .offers .item:not(.item--featured).is-active::after {
        opacity: 0;
    }

    .offers .item--featured::before,
    .offers .item--featured.is-active::before {
        opacity: 1;
    }

    .offers .item--featured .marker span {
        color: rgba(255, 255, 255, .72);
    }

    .offers .item--featured.is-active .marker span {
        color: var(--color-primary);
    }

    .offers .item--featured .marker i,
    .offers .item--featured.is-active .marker i {
        background: var(--color-white);
        border-color: var(--color-white);
    }

    .offers .item--featured .marker i,
    .offers .item--featured.is-active .marker i {
        box-shadow:
            0 0 0 7px rgba(220, 25, 25, .95),
            0 0 22px rgba(255, 255, 255, .30),
            0 0 42px rgba(233, 64, 27, .24);
    }

    .offers .item--featured .content > strong,
    .offers .item--featured .content > small,
    .offers .item--featured.is-active .content > strong,
    .offers .item--featured.is-active .content > small {
        color: var(--color-white);
    }

    .offers .item--featured .content > p,
    .offers .item--featured.is-active .content > p {
        color: rgba(255, 255, 255, .76);
    }

    .offers .item--featured .meta,
    .offers .item--featured.is-active .meta {
        color: rgba(255, 255, 255, .62);
    }

}


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

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

    .offers .item,
    .offers .marker span,
    .offers .marker i,
    .offers .content > strong,
    .offers .content > small,
    .offers .content > p,
    .offers .meta {
        transition: none;
    }

    .offers .content > strong,
    .offers .content > small,
    .offers .content > p,
    .offers .meta {
        transform: none;
    }

}