/**
 * Fichier  : /pages/sport-business/event/assets/css/production.css
 * Fonction : conducteur des pôles de production
 */


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

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

.event .production {
    background: #f4f3f0;
}


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

.event .production > header {
    max-width: 650px;
    margin-bottom: clamp(2.5em, 5vw, 5em);
}

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

.event .production > header > span {
    margin-bottom: 1em;
}

.event .production > header > span {
    font-family: 'bold-font';
    font-size: 9px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--color-primary);
}

.event .production > header p {
    margin: 0;
}

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


/* ==================================================
   BOARD
================================================== */

.event .production .board {
    border-top: 1px solid rgba(17, 17, 17, .14);
}


/* ==================================================
   ROW
================================================== */

.event .production .row {
    border-bottom: 1px solid rgba(17, 17, 17, .14);
}


/* ==================================================
   TRIGGER
================================================== */

.event .production .trigger {
    width: 100%;
    min-height: 92px;
}

.event .production .trigger {
    padding: 0;
}

.event .production .trigger {
    display: grid;
    grid-template-columns:
        42px
        minmax(0, 1fr)
        32px;

    align-items: center;
    gap: 1.5em;
}

.event .production .trigger {
    background: transparent;
    border: 0;
}

.event .production .trigger {
    cursor: pointer;
}

.event .production .trigger {
    text-align: left;
    color: #111;
}


/* ==================================================
   SYMBOL
================================================== */

.event .production .symbol {
    width: 30px;
    height: 30px;
}

.event .production .symbol {
    display: flex;
    align-items: center;
    justify-content: center;
}

.event .production .symbol svg {
    width: 100%;
    height: 100%;
}

.event .production .symbol svg {
    color: var(--color-primary);
}

.event .production .symbol svg {
    transition:
        transform .55s cubic-bezier(.22, 1, .36, 1);
}

.event .production .symbol svg * {
    vector-effect: non-scaling-stroke;
}

.event .production .symbol svg * {
    transition: stroke .35s ease;
}


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

.event .production .trigger > strong {
    font-family: 'bold-font';
    font-size: clamp(28px, 3vw, 48px);
    font-weight: 400;
    line-height: .92;
    text-transform: uppercase;
    letter-spacing: -.045em;
    color: #111;
}

.event .production .trigger > strong {
    transition:
        color .35s ease,
        transform .55s cubic-bezier(.22, 1, .36, 1);
}


/* ==================================================
   ICON
================================================== */

.event .production .icon {
    position: relative;
}

.event .production .icon {
    width: 26px;
    height: 26px;
}

.event .production .icon {
    display: block;
}

.event .production .icon i {
    position: absolute;
    top: 50%;
    left: 50%;
}

.event .production .icon i {
    width: 15px;
    height: 1px;
}

.event .production .icon i {
    background: #111;
}

.event .production .icon i {
    transform: translate(-50%, -50%);
}

.event .production .icon i {
    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        background .35s ease;
}

.event .production .icon i:last-child {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}

.event .production .row.is-open .icon i:last-child {
    transform:
        translate(-50%, -50%)
        rotate(0);
}


/* ==================================================
   PRODUCTION DRAWER
================================================== */

.event .production .production-drawer {
    display: grid;
    grid-template-rows: 0fr;
}

.event .production .production-drawer {
    opacity: 0;
}

.event .production .production-drawer {
    transition:
        grid-template-rows .55s cubic-bezier(.22, 1, .36, 1),
        opacity .35s ease;
}

.event .production .row.is-open .production-drawer {
    grid-template-rows: 1fr;
}

.event .production .row.is-open .production-drawer {
    opacity: 1;
}


/* ==================================================
   PRODUCTION DRAWER INNER
================================================== */

.event .production .production-drawer-inner {
    overflow: hidden;
}


/* ==================================================
   EXPERTISES
================================================== */

.event .production .expertises {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event .production .expertises {
    padding-bottom: 0;
}

.event .production .expertises {
    transition:
        padding-bottom .55s cubic-bezier(.22, 1, .36, 1);
}

.event .production .row.is-open .expertises {
    padding-bottom: clamp(2em, 3vw, 3em);
}


/* ==================================================
   EXPERTISE
================================================== */

.event .production .expertise {
    padding: 1.15em 0;
}

.event .production .expertise {
    border-top: 1px solid rgba(17, 17, 17, .10);
}

.event .production .expertise:nth-child(odd) {
    padding-right: 2em;
}

.event .production .expertise:nth-child(even) {
    padding-left: 2em;
}

.event .production .expertise:nth-child(even) {
    border-left: 1px solid rgba(17, 17, 17, .10);
}


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

.event .production .expertise strong {
    font-family: 'bold-font';
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #111;
}


/* ==================================================
   EXPERTISE TEXT
================================================== */

.event .production .expertise p {
    max-width: 360px;
    margin: .7em 0 0;
}

.event .production .expertise p {
    font-family: 'content-font';
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(17, 17, 17, .48);
}


/* ==================================================
   OPEN
================================================== */

.event .production .row.is-open .trigger > strong {
    color: var(--color-primary);
}

.event .production .row.is-open .symbol svg {
    transform: scale(1.08);
}


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

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

    .event .production .trigger:hover > strong {
        color: var(--color-primary);
    }

    .event .production .trigger:hover > strong {
        transform: translateX(8px);
    }

    .event .production .trigger:hover .symbol svg {
        transform: scale(1.08);
    }

}


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

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

    .event .production {
        padding:
            clamp(4.5em, 10vw, 6em)
            1.4em;
    }


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

    .event .production > header {
        margin-bottom: 2.5em;
    }

    .event .production > header p {
        font-size: 12px;
    }


    /* ==================================================
       TRIGGER
    ================================================== */

    .event .production .trigger {
        min-height: 76px;
    }

    .event .production .trigger {
        grid-template-columns:
            30px
            minmax(0, 1fr)
            26px;

        gap: .8em;
    }


    /* ==================================================
       SYMBOL
    ================================================== */

    .event .production .symbol {
        width: 24px;
        height: 24px;
    }


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

    .event .production .trigger > strong {
        font-size: 2em;
        line-height: .95;
    }


    /* ==================================================
       ICON
    ================================================== */

    .event .production .icon {
        width: 24px;
        height: 24px;
    }

    .event .production .icon i {
        width: 13px;
    }


    /* ==================================================
       EXPERTISES
    ================================================== */

    .event .production .expertises {
        grid-template-columns: 1fr;
    }

    .event .production .row.is-open .expertises {
        padding-bottom: 1.8em;
    }


    /* ==================================================
       EXPERTISE
    ================================================== */

    .event .production .expertise {
        padding: 1.15em 0;
    }

    .event .production .expertise:nth-child(odd),
    .event .production .expertise:nth-child(even) {
        padding-right: 0;
        padding-left: 0;
    }

    .event .production .expertise:nth-child(odd),
    .event .production .expertise:nth-child(even) {
        border-left: 0;
    }

    .event .production .expertise strong {
        font-size: 11px;
    }

    .event .production .expertise p {
        max-width: none;
    }

    .event .production .expertise p {
        font-size: 12px;
        line-height: 1.6;
    }

}


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

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

    .event .production .production-drawer,
    .event .production .expertises,
    .event .production .symbol svg,
    .event .production .symbol svg *,
    .event .production .icon i,
    .event .production .trigger > strong {
        transition: none !important;
    }

}