/**
 * Fichier  : /pages/sport-business/media/sections/schematic/schematic.css
 * Fonction : schéma de la mécanique médiatique Punchtime
 */


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

.schematic {
    position: relative;
    overflow: hidden;
}

.schematic {
    width: 100%;
    margin-top: 5em;
}

.schematic {
    background-color: #090909;
    background-image: var(--schematic-background);
    background-position-y: 15%;
    background-position-x: right;
    background-repeat: no-repeat;
    background-size: cover;
}

.schematic {
    color: #fff;
}


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

.schematic > .overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.schematic > .overlay {
    background:
        linear-gradient(
            90deg,
            rgba(5, 5, 5, .80) 0%,
            rgba(5, 5, 5, .60) 50%,
            rgba(5, 5, 5, .80) 100%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, .80) 0%,
            rgba(0, 0, 0, .10) 100%
        );
}


/* ==================================================
   BACKGROUND GRID
================================================== */

.schematic > .overlay::before {
    content: "";
}

.schematic > .overlay::before {
    position: absolute;
    inset: 0;
}

.schematic > .overlay::before {
    background-image:
        linear-gradient(
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        );
}

.schematic > .overlay::before {
    background-size: 72px 72px;
}


/* ==================================================
   INNER
================================================== */

.schematic .inner {
    position: relative;
    z-index: 2;
}

.schematic .inner {
    width: 100%;
}

.schematic .inner {
    box-sizing: border-box;
    padding:
        clamp(5em, 8vw, 8em)
        var(--media-padding-inline, clamp(2em, 6vw, 6em));
}

.schematic .inner {
    display: flex;
    flex-direction: column;
    gap: 3em;
}


/* ==================================================
   INTRO
================================================== */

.schematic header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.schematic header div {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.schematic header div > span {
    display: block;
}

.schematic header div > span {
    font-family: 'bold-font';
    font-size: 8px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--color-primary, #c41212);
}

.schematic header div p {
    max-width: 620px;
}

.schematic header div p {
    font-family: 'content-font';
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7em;
    color: var(--color-white);
}


/* ==================================================
   EQUATION
================================================== */

.schematic .equation {
    position: relative;
}

.schematic .equation {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        70px
        minmax(0, 1fr)
        70px
        minmax(300px, 1.15fr);
    align-items: stretch;
}

.schematic .equation {
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}


/* ==================================================
   PILLARS
================================================== */

.schematic .pillar {
    position: relative;
}

.schematic .pillar {
    min-height: 470px;
}

.schematic .pillar {
    box-sizing: border-box;
    padding: clamp(2em, 3vw, 3.2em);
}

.schematic .pillar {
    background: rgba(7, 7, 7, .38);
}

.schematic .pillar {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.schematic .pillar--media {
    border-left: 1px solid rgba(255, 255, 255, .12);
    border-right: 1px solid rgba(255, 255, 255, .12);
}

.schematic .pillar--editorial {
    border-left: 1px solid rgba(255, 255, 255, .12);
    border-right: 1px solid rgba(255, 255, 255, .12);
}


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

.schematic .pillar-header,
.schematic .result-header {
    margin-bottom: clamp(3em, 5vw, 5em);
}

.schematic .pillar-header,
.schematic .result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.schematic .number {
    font-family: 'bold-font';
    font-size: 8px;
    letter-spacing: .12em;
    color: var(--color-primary, #c41212);
}

.schematic .label {
    font-family: 'bold-font';
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .38);
}


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

.schematic .pillar h3 {
    margin: 0;
}

.schematic .pillar h3 {
    font-family: 'bold-font';
    font-size: clamp(27px, 2.5vw, 42px);
    font-weight: 400;
    line-height: .92;
    text-transform: uppercase;
    letter-spacing: -.035em;
}


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

.schematic .pillar > p {
    max-width: 340px;
    min-height: 64px;
}

.schematic .pillar > p {
    margin: 1.6em 0 2.8em;
}

.schematic .pillar > p {
    font-family: 'content-font';
    font-size: 11px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .48);
}


/* ==================================================
   PILLAR LIST
================================================== */

.schematic .pillar ul {
    margin: 0;
    padding: 0;
}

.schematic .pillar ul {
    list-style: none;
}

.schematic .pillar li {
    position: relative;
}

.schematic .pillar li {
    padding: .9em 0 .9em 18px;
}

.schematic .pillar li {
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.schematic .pillar li {
    font-family: 'bold-font';
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .66);
}

.schematic .pillar li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.schematic .pillar li::before {
    content: "";
}

.schematic .pillar li::before {
    position: absolute;
    top: 50%;
    left: 0;
}

.schematic .pillar li::before {
    width: 4px;
    height: 4px;
}

.schematic .pillar li::before {
    background: var(--color-primary, #c41212);
    border-radius: 50%;
}

.schematic .pillar li::before {
    transform: translateY(-50%);
}

.schematic .pillar li::before {
    box-shadow: 0 0 8px rgba(196, 18, 18, .60);
}


/* ==================================================
   OPERATORS
================================================== */

.schematic .operator {
    position: relative;
}

.schematic .operator {
    display: flex;
    align-items: center;
    justify-content: center;
}

.schematic .operator span {
    position: relative;
    z-index: 2;
}

.schematic .operator span {
    width: 38px;
    height: 38px;
}

.schematic .operator span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.schematic .operator span {
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
}

.schematic .operator span {
    font-family: 'bold-font';
    font-size: 20px;
    line-height: 1;
    color: var(--color-primary, #c41212);
}

.schematic .operator::before {
    content: "";
}

.schematic .operator::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
}

.schematic .operator::before {
    width: 1px;
}

.schematic .operator::before {
    background: rgba(255, 255, 255, .08);
}


/* ==================================================
   RESULT
================================================== */

.schematic .result {
    position: relative;
}

.schematic .result {
    min-height: 470px;
}

.schematic .result {
    box-sizing: border-box;
    padding: clamp(2em, 3vw, 3.2em);
}

.schematic .result {
    border-right: 1px solid rgba(255, 255, 255, .12);
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.schematic .result {
    background:
        linear-gradient(
            135deg,
            rgba(196, 18, 18, .16),
            rgba(7, 7, 7, .48) 58%
        );
}

.schematic .result {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* ==================================================
   OUTCOMES
================================================== */

.schematic .outcomes {
    display: flex;
    flex-direction: column;
}

.schematic .outcome {
    position: relative;
}

.schematic .outcome {
    padding: clamp(1.4em, 2vw, 2em) 0;
}

.schematic .outcome {
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.schematic .outcome:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.schematic .outcome > span {
    display: block;
}

.schematic .outcome > span {
    margin-bottom: .8em;
}

.schematic .outcome > span {
    font-family: 'bold-font';
    font-size: 7px;
    letter-spacing: .12em;
    color: var(--color-primary, #c41212);
}

.schematic .outcome strong {
    display: block;
}

.schematic .outcome strong {
    font-family: 'bold-font';
    font-size: clamp(22px, 2.2vw, 36px);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -.025em;
}

.schematic .outcome small {
    display: block;
}

.schematic .outcome small {
    margin-top: .65em;
}

.schematic .outcome small {
    font-family: 'content-font';
    font-size: 10px;
    color: rgba(255, 255, 255, .42);
}


/* ==================================================
   CURRENT
================================================== */

.schematic .current {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 5;
}

.schematic .current {
    height: 1px;
}

.schematic .current {
    overflow: hidden;
    pointer-events: none;
}

.schematic .current::before {
    content: "";
}

.schematic .current::before {
    position: absolute;
    inset: 0;
}

.schematic .current::before {
    background: rgba(196, 18, 18, .20);
}

.schematic .current span {
    position: absolute;
    top: 0;
    left: -20%;
}

.schematic .current span {
    width: 20%;
    height: 1px;
}

.schematic .current span {
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--color-primary, #c41212),
            #fff,
            var(--color-primary, #c41212),
            transparent
        );
}

.schematic .current span {
    box-shadow: 0 0 10px rgba(196, 18, 18, .80);
}


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

.schematic .current span {
    animation:
        schematic-current
        3.2s
        ease-in-out
        infinite;
}


/* ==================================================
   CURRENT ANIMATION
================================================== */

@keyframes schematic-current {

    0% {
        left: -20%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }

}


/* ==================================================
   HOVER
================================================== */

@media
    (hover: hover)
    and (pointer: fine) {

    .schematic .pillar,
    .schematic .result {
        transition: background .35s ease;
    }

    .schematic .pillar:hover {
        background: rgba(196, 18, 18, .07);
    }

    .schematic .result:hover {
        background:
            linear-gradient(
                135deg,
                rgba(196, 18, 18, .23),
                rgba(7, 7, 7, .48) 58%
            );
    }

}


/* ==================================================
   TABLET
================================================== */

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

    .schematic {
        background-position: center;
    }

    .schematic .equation {
        grid-template-columns:
            minmax(0, 1fr)
            50px
            minmax(0, 1fr);
    }

    .schematic .operator--equal {
        display: none;
    }

    .schematic .result {
        grid-column: 1 / -1;
    }

    .schematic .result {
        min-height: 0;
    }

    .schematic .result {
        border-left: 1px solid rgba(255, 255, 255, .12);
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .schematic .result-header {
        margin-bottom: 2em;
    }

    .schematic .outcomes {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .schematic .outcome {
        padding: 1.8em;
    }

    .schematic .outcome:not(:last-child) {
        border-right: 1px solid rgba(255, 255, 255, .10);
    }

}


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

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

    .schematic {
        background-image:
            var(--schematic-background-mobile);

        background-position: center;
    }

    .schematic .inner {
        padding:
            4.5em
            var(--media-padding-inline, 1.4em);
    }

    .schematic .inner {
        gap: 0;
    }

    .schematic header {
        margin-bottom: 3.5em;
    }

    .schematic header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5em;
    }

    .schematic header h2 {
        font-size: 2.2em;
        line-height: 1.1em;
    }

    .schematic .equation {
        display: flex;
        flex-direction: column;
    }


    /* ==================================================
       PILLARS
    ================================================== */

    .schematic .pillar,
    .schematic .result {
        min-height: 0;
    }

    .schematic .pillar,
    .schematic .result {
        padding: 2em;
    }

    .schematic .pillar,
    .schematic .result {
        border-top: 1px solid rgba(255, 255, 255, .12);
        border-left: 1px solid rgba(255, 255, 255, .12);
        border-right: 1px solid rgba(255, 255, 255, .12);
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }


    /* ==================================================
       LAST RESULT
    ================================================== */

    .schematic .result:last-of-type {
        border-bottom: 0;
    }

    .schematic .pillar-header,
    .schematic .result-header {
        margin-bottom: 2.5em;
    }

    .schematic .pillar > p {
        min-height: 0;
    }


    /* ==================================================
       OPERATORS
    ================================================== */

    .schematic .operator {
        min-height: 74px;
    }

    .schematic .operator::before {
        top: 0;
        bottom: 0;
    }

    .schematic .operator--equal {
        display: flex;
    }


    /* ==================================================
       RESULTS
    ================================================== */

    .schematic .outcomes {
        display: block;
    }

    .schematic .outcome {
        padding: 1.6em 0;
    }

    .schematic .outcome:not(:last-child) {
        border-right: 0;
    }

}


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

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

    .schematic .current span {
        animation: none !important;
    }

}