@use "sass:math";
@use "sass:color";
@use "../abstracts/mixins";
@use "../abstracts/variables";

.page-template-tpl-cabinet{

    .cabinet_numbers{
        background-color: variables.$cDark;
        color: variables.$cLight;
        padding-bottom: 15vh;

        @include mixins.respondTo('xs'){
            padding-bottom: 8vh;
        }

        .pSection_header_inner{
            max-width: none;
        }

        .pSection_content{
            padding-top: 90vh;
            padding-bottom: 25vh;

            @include mixins.respondTo('xs'){
                padding-top: 0;
                padding-bottom: 0;
            }
        }

        .sectionQuote{
            margin-left: 4.9vw;

            @include mixins.respondTo('xs'){
                margin-left: 25px;
                margin-right: 40px;
            }
        }

        .numbersCarousel{
            overflow: visible;
        }
    }

    .cabinet_team{
        .member_picture{
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-position: 20% center;
            background-size: cover;
            background-repeat: no-repeat;
            opacity: 0;
            transform: scale(1.1);
            transition: opacity 0.2s linear, transform 0.6s variables.$ExpoEaseOut;
            filter: grayscale(100%);

            &::after{
                content: "";
                position: absolute;
                z-index: 1;
                top: 0; left: 0; right: 0; bottom: 0;
                background-color: #000;
                opacity: 0.15;
            }

            &.active{
                opacity: 1;
                transform: scale(1);
            }
        }

        .member_intro{
            margin-bottom: 3vh;
            margin-right: math.div(variables.$containerWidth, variables.$gridColsNb);
            // @include fontSize(35,30);
            // font-family: $ffC;
            color: variables.$cDark;

            @include mixins.respondTo('md'){
                @include mixins.fontSize(24,26,variables.$baseFontSizeMd);
            }
        }

        .member_description{
            margin-right: math.div(variables.$containerWidth, variables.$gridColsNb);
            margin-bottom: 8vh;
            @include mixins.fontSize(18,38);
            color: variables.$cDark;
        }

        .memberMask{
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: 1;
            background: color.adjust(#F9F9F9, $alpha: -0.2);
            pointer-events: none;
            opacity: 0;
            will-change: opacity;
            transition: opacity 0.2s linear;

            &.visible{
                opacity: 1;
            }
        }

        .member_news{
            margin-bottom: 4vh;
        }

        .newsBloc:hover{
            z-index: 10;
        }

        .publicationBloc:hover{
            z-index: 10;
        }

        .member_external{
            display: none;
            padding-left: 20px;
            padding-right: 20px;
            opacity: 1;
        }
        
        .pSection_header{
            z-index: 10;

            &_cover{
                background-color: transparent;
                overflow: hidden;

                &::after{
                    display: none;
                }
            }
        }

        .sectionTitle{
            .sectionTitle_content{
                position: relative;
                z-index: 2;
                
                a{
                    position: relative;
                    display: block;
                    color: variables.$cDark;
                    text-decoration: none;
                    text-transform: lowercase;
                    line-height: 1.2;
                    font-weight: 300;

                    &.active{
                        font-weight: 700;
                    }
                }
            }
            
            &--light{
                .sectionTitle_content{
                    a{
                        color: variables.$cLight;
                        opacity: 0.5;
    
                        &.active{
                            opacity: 1;
                        }
    
                        @include mixins.hover{
                            opacity: 1;
                        }
                    }
                }
            }
        }

        &Mobile{
            display: none;

            @include mixins.respondTo('xs'){
                display: block;
            }
        }
    }

    .cabinet_teamIntro{
        // background-color: #D8D8D8;

        .pSection{
            min-height: auto;
        }

        .team_intro{
            position: relative;
            margin-top: 150vh;
            margin-bottom: 20vh;

            &_icon{
                position: absolute;
                top: -15px; right: calc(100% + 20px);
                color: variables.$cPrimary;
            }

            strong{
                color: variables.$cPrimary;
            }
        }

        .team_pictures_trigger1{
            position: absolute;
            left: 0; top: 50vh; width: 0;
            height: 90vh;
            z-index: 100;
        }

        .team_pictures_trigger2{
            position: absolute;
            left: 0; top: 140vh; width: 0;
            height: 0;
            z-index: 100;
        }

        .team_pictures{
            position: absolute;
            top: 15vh; left: 11.85vw; right: 11.85vw;
            height: 70vh;
            backface-visibility: hidden;

            .team_picture{
                position: absolute;
                top: 0; height: 100%;
                width: variables.$teamDefaultWidth;
                opacity: 0;
                will-change: transform, opacity;
                overflow: hidden;
                transition: filter 0.4s linear;

                &_bg{
                    position: absolute;
                    top: -1px; left: -1px; right: -1px; bottom: -1px;
                    background-size: cover;
                    background-position: 0% 0%;
                    background-repeat: no-repeat;

                    @include mixins.respondTo('md'){
                        background-position: 26% 0%;
                    }
                }

                @for $i from 1 through variables.$teamNb{
                    &:nth-child(#{$i}){
                        z-index: 20 - $i;
                        left: math.div((100% - variables.$teamDefaultWidth), (variables.$teamNb - 1)) * ($i - 1);
                    }
                }
                
                &.greyscale{
                    filter: grayscale(100%);
                }
            }
        }
    }

    .pSection--membersName{
        @include mixins.respondTo('sm'){
            overflow: visible;
        }
    }
    .pSection--member{
        padding-top: 20vh;
        padding-bottom: 10vh;
        background-color: #F9F9F9;

        .pSection_content{
            opacity: 0;
        }
    }

    .cabinet_publications{
        background-color: variables.$cPrimary;
        color: variables.$cLight;
        overflow: hidden;

        @include mixins.respondTo('sm'){
            min-height: auto;
        }

        &_intro{
            position: relative;
            @include mixins.fontSize(60,80);
            font-weight: 300;

            @include mixins.respondTo('md'){
                @include mixins.fontSize(40,50,variables.$baseFontSizeMd);
            }

            @include mixins.respondTo('xs'){
                @include mixins.fontSize(20,30,variables.$baseFontSizeXs);
            }

            strong{
                color: variables.$cDark;
                font-weight: 700;
            }

            &_icon{
                position: absolute;
                top: 10px; right: calc(100% + 45px);
                color: variables.$cDark;
                
                @include mixins.respondTo('xs'){
                    transform: scale(0.85);
                    top: -20px;
                    right: calc(100% + 20px);
                }
            }
        }

        &_link{
            margin-top: 4vh;
        }
    }

    .cabinet_publiSlider{
        position: relative;
        padding-top: 15vh;
        padding-bottom: 0vh;

        @include mixins.respondTo('xs'){
            padding-top: 10vh;
        }
        
        &::before{
            content: "";
            position: absolute;
            top: 30vh; left: 50%; bottom: 0;
            width: 110vw;
            transform: translateX(-50%);
            z-index: 0;
            background: variables.$cLight;
        }

        .row{
            position: relative;
            z-index: 1;
        }

        .swiper-container{
            overflow: visible;
        }

        .publicationBloc{
            opacity: 0;
            will-change: transform;

            @include mixins.respondTo('xs'){
                opacity: 1;
            }
        }
    }

    .cabinet_honors{
        padding-bottom: 20vh;

        .pSection_content{
            position: relative;
            z-index: 1;
            padding-top: 88vh;

            @include mixins.respondTo('xs'){
                padding-top: 0;
            }
        }

        &_logo{
            position: absolute;
            z-index: 0;
            left: 23vw; bottom: 50vh;
            color: #CDCDCD;
            opacity: 0.14;
            pointer-events: none;

            @include mixins.respondTo('xs'){
                display: none;
            }
        }
    }

    .honor{
        & + .honor{
            margin-top: 12vh;
        }

        &_title{
            margin-top: 3vh;
        }

        &_quote{
            position: relative;
            // font-family: $ffC;
            // @include fontSize(35,40);
            // font-weight: 300;
            // color: $cDark;
            margin-bottom: 18vh;

            @include mixins.respondTo('md'){
                // @include fontSize(24,28,$baseFontSizeMd);
            }

            @include mixins.respondTo('xs'){
                margin-bottom: 14vh;
                // @include fontSize(16,16,$baseFontSizeXs);
                // font-weight: 400;
            }

            strong{
                font-weight: 700;
                color: variables.$cPrimary;
            }

            svg{
                position: absolute;
                top: -10px; right: calc(100% + 35px);
                color: variables.$cDark;
                opacity: 0.1;

                @include mixins.respondTo('xs'){
                    transform: scale(0.85);
                    top: -20px;
                    right: calc(100% + 10px);
                    opacity: 1;
                }
            }
        }

        &_cover{
            position: relative;
            width: 22.7vw; // 5 cols
            margin-bottom: 9vh;

            @include mixins.respondTo('md'){
                width: 100%;
            }

            @include mixins.respondTo('xs'){
                margin-bottom: 12vh;
            }

            &_img{
                display: block;
                width: 100%;
            }

            &_picto{
                position: absolute;
                top: -90px;
                left: -90px;
                animation: rotate 10s linear infinite;

                @include mixins.respondTo('md'){
                    width: 120px;
                    height: 120px;
                    top: -60px;
                    left: -60px;
                }

                @include mixins.respondTo('xs'){
                    width: 90px;
                    height: 90px;
                    top: -45px;
                    left: -45px;
                }
            }
        }

        &_content{
            @include mixins.fontSize(18,36);
            color: color.adjust(variables.$cDark, $alpha: -0.4);
        }
    }

    .cabinet_partner{
        background-color: #F9F9F9;

        .partnerCover{
            position: absolute;
            top: 0; left: 0; bottom: 0;
            width: 50vw;
            background-color: variables.$cDark;
            overflow: hidden;

            @include mixins.respondTo('xs'){
                position: relative;
                top: auto; left: auto; bottom: auto;
                width: 100vw;
                margin-left: -(variables.$containerPaddingXs);
                margin-right: -(variables.$containerPaddingXs);
            }

            &_logo{
                position: absolute;
                z-index: 2;
                top: 22vh; right: 20vw;
                color: variables.$cPrimary;
                mix-blend-mode: lighten;
                overflow: hidden;
                width: 956px;
                pointer-events: none;
                
                @include mixins.respondTo('xs'){
                    transform: scale(0.6);
                    transform-origin: right top;
                }
            
                svg{
                    display: block;
                }
            }

            &::before{
                content: "";
                display: block;
                padding-top: 114%;

                @include mixins.respondTo('xs'){
                    padding-top: 175%;
                }
            }

            &::after{
                content: "";
                position: absolute;
                z-index: -1;
                top: 0; bottom: 0; right: 0;
                background-color: #F9F9F9;
                width: 100vw;
            }

            &_img{
                position: absolute;
                top: 10vw; left: 10vw; right: 10vw; bottom: 10vw;
                background-position: center center;
                background-size: cover;
                background-repeat: no-repeat;
                filter: grayscale(100%);

                @include mixins.respondTo('md'){
                    top: 5vw; left: 5vw; right: 5vw; bottom: 5vw;
                }

                @include mixins.respondTo('xs'){
                    top: -1px; left: -1px; right: -1px; bottom: -1px;
                }
            }
        }
    }
}

.teamMobileCarousel{
    position: relative;

    &_next{
        position: absolute;
        z-index: 2;
        bottom: calc(8vh + 50px); right: 15px;
        width: 88px * 1.1;
        height: 38px * 1.1;
        
        svg{
            width: 88px * 1.1;
            height: 38px * 1.1;
            stroke-width: 3px;
            stroke: #FFF;
        }
    }

    .swiper-slide{
        .pSection_header{
            box-sizing: border-box;
            padding-left: variables.$containerPaddingXs;
            padding-right: variables.$containerPaddingXs;

            .pSection_header_cover{
                left: 0;
                right: 0;
            }
        }
        .sectionTitle_header_additional{
            margin-left: 10px;
            margin-top: 5px;
        }
        .sectionTitle_link{
            z-index: 3;
        }
        .member_picture{
            opacity: 1;
            transform: scale(1);
            background-position: 30% center;
        }
        .member_external{
            display: block;
        }
    }
}