/**
 * Fichier  : /pages/homepage/section-3/assets/css/numbers.css
 * Fonction : style des chiffres clés de l'écosystème média
 */


/* ==================================================
   NUMBERS
================================================== */

.numbers {
    position: relative;
    z-index: 2;
}

.numbers {
    overflow: hidden;
}

.numbers {
    background: #0d0d0d;
}

.numbers {
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}


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

.numbers::before {
    content: "";
}

.numbers::before {
    position: absolute;
    inset: 0;
}

.numbers::before {
    pointer-events: none;
}

.numbers::before {
    background-image:
        linear-gradient(
            rgba(255, 255, 255, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .035) 1px,
            transparent 1px
        );
}

.numbers::before {
    background-size: 48px 48px;
}

.numbers::before {
    opacity: .45;
}


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

.numbers::after {
    content: "";
}

.numbers::after {
    position: absolute;
    top: 50%;
    left: 50%;
}

.numbers::after {
    width: 60%;
    height: 180%;
}

.numbers::after {
    background:
        radial-gradient(
            circle,
            rgba(233, 64, 27, .08) 0%,
            rgba(233, 64, 27, .02) 38%,
            transparent 70%
        );
}

.numbers::after {
    transform: translate(-50%, -50%);
}

.numbers::after {
    pointer-events: none;
}


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

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

.numbers .inner {
    width: min(100% - 4em, 1320px);
}

.numbers .inner {
    margin: 0 auto;
}

.numbers .inner {
    padding:
        clamp(3.5em, 5vw, 5.5em)
        0;
}

.numbers .inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
}


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

.numbers .item {
    position: relative;
}

.numbers .item {
    padding:
        0
        clamp(2em, 4vw, 4em);
}

.numbers .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.4em;
}


/* ==================================================
   SEPARATOR
================================================== */

.numbers .item:not(:last-child)::after {
    content: "";
}

.numbers .item:not(:last-child)::after {
    position: absolute;
    top: 0;
    right: 0;
}

.numbers .item:not(:last-child)::after {
    width: 1px;
    height: 100%;
}

.numbers .item:not(:last-child)::after {
    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(255, 255, 255, .14) 20%,
            rgba(255, 255, 255, .14) 80%,
            transparent 100%
        );
}


/* ==================================================
   NUMBER
================================================== */

.numbers .item .number {
    position: relative;
}

.numbers .item .number {
    font-family: 'bold-font';
    font-size: clamp(52px, 5vw, 82px);
    font-weight: 400;
    line-height: .9em;
    letter-spacing: -.04em;
    color: var(--color-white);
}


/* ==================================================
   NUMBER ACCENT
================================================== */

.numbers .item .number::after {
    content: "";
}

.numbers .item .number::after {
    position: absolute;
    left: 0;
    bottom: -.18em;
}

.numbers .item .number::after {
    width: 32px;
    height: 3px;
}

.numbers .item .number::after {
    background: var(--gradient-primary);
    border-radius: var(--radius-pill);
}

.numbers .item .number::after {
    box-shadow:
        0 0 12px
        rgba(233, 64, 27, .28);
}


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

.numbers .item .content {
    display: flex;
    flex-direction: column;
    gap: .55em;
}


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

.numbers .item strong {
    font-family: 'bold-font';
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-white);
}


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

.numbers .item p {
    max-width: 280px;
}

.numbers .item p {
    font-family: 'content-font';
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55em;
    color: rgba(255, 255, 255, .44);
}


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

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

    .numbers .item .number {
        transition:
            color .4s ease,
            transform .6s
            cubic-bezier(.22, 1, .36, 1);
    }

    .numbers .item .number::after {
        transition:
            width .6s
            cubic-bezier(.22, 1, .36, 1);
    }

    .numbers .item:hover .number {
        color: var(--color-primary);
        transform: translateY(-4px);
    }

    .numbers .item:hover .number::after {
        width: 54px;
    }

}


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

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

    .numbers .inner {
        width: min(100% - 3em, 760px);
    }

    .numbers .item {
        padding:
            0
            2em;
    }

}


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

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

    .numbers::before {
        background-size: 40px 40px;
    }

    .numbers .inner {
        width: calc(100% - 2.4em);
    }

    .numbers .inner {
        padding:
            2em
            0;
    }

    .numbers .inner {
        grid-template-columns: 1fr;
    }

    .numbers .item {
        padding:
            2.2em
            .4em;
    }

    .numbers .item {
        gap: 1.2em;
    }

    .numbers .item:not(:last-child)::after {
        top: auto;
        right: auto;
        left: 0;
        bottom: 0;
    }

    .numbers .item:not(:last-child)::after {
        width: 100%;
        height: 1px;
    }

    .numbers .item:not(:last-child)::after {
        background:
            linear-gradient(
                90deg,
                rgba(255, 255, 255, .14) 0%,
                rgba(255, 255, 255, .05) 70%,
                transparent 100%
            );
    }

    .numbers .item .number {
        font-size: clamp(52px, 16vw, 72px);
    }

    .numbers .item p {
        max-width: 340px;
    }

}