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

.page-template-tpl-expertises{
    .sectionQuote{
        &_icon{
            color: color.adjust(variables.$cPrimary, $alpha: -0.6);
        }

        &_content{
            color: color.adjust(variables.$cLight, $alpha: -0.6);
        }
    }

    .header_behind::after{
        background-color: #000;
    }

    .expertises_prestas{
        .pSection_header{
            z-index: 10;
        }
        
        .pSection_header_inner{
            max-width: 100%;
        }
        
        .sectionTitle_content{
            position: relative;

            .prestaTitle_container{
                position: relative;
            }

            .prestaTitle{
                display: none;
                
                &--visible{
                    display: block;
                }
            }
        }

        .pSection_content{
            padding-top: 88vh;

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

        .prestaQuote{
            position: relative;
            margin-bottom: 10vh;
            width: 90%;
            max-width: 550px;

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

            @include mixins.respondTo('xs'){
                margin-top: 8vh;
                margin-bottom: 5vh;
                width: 100%;
            }

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

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

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

        .prestaIntro{
            margin-bottom: 10vh;
            @include mixins.fontSize(14,30);
            color: color.adjust(variables.$cDark, $alpha: -0.6);

            @include mixins.respondTo('xs'){
                margin-bottom: 6vh;
                @include mixins.fontSize(12,24,variables.$baseFontSizeXs);
            }
        }

        .prestaContainer{
            position: relative;

            .presta{
                position: relative;
                display: none;
                padding-top: 5vh;
                padding-bottom: 20vh;

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

                &--visible{
                    display: block;
                }

                &::before{
                    content: "";
                    position: absolute;
                    z-index: -1;
                    top: 20vh; bottom: 0; left: 17.5%;
                    width: 110vw;
                    transform: translateX(-50%);
                    background-color: #F8F8F8;

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

                &_item{
                    & + .presta_item{
                        margin-top: 16vh;
                    }
                }

                &_cover{
                    position: relative;
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    margin-bottom: 6vh;
                    opacity: 0;

                    @include mixins.respondTo('xs'){
                        opacity: 1;
                        margin-bottom: 0vh;
                    }
            
                    &::before{
                        content: "";
                        display: block;
                        padding-top: 65.1%;

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

                    &--landscape{}
                    &--portrait{
                        &::before{
                            padding-top: 134%;

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

                &_content{
                    padding-left: 4.9vw;
                    padding-right: 4.9vw;
                    opacity: 0;

                    @include mixins.respondTo('xs'){
                        opacity: 1;
                        padding-left: 30px;
                        padding-right: 30px;
                        margin-top: 6vh;
                    }

                    &--2col{
                        padding-left: 24.3vw;

                        @include mixins.respondTo('md'){
                            padding-left: 4.9vw;
                        }

                        @include mixins.respondTo('xs'){
                            padding-left: 30px;
                            padding-right: 30px;
                        }
                    }
                }

                &_num{
                    display: flex;
                    align-items: baseline;
                    margin-bottom: 1.5vh;
                    
                    @include mixins.respondTo('xs'){
                        margin-bottom: 4vh;
                    }

                    span:first-child{
                        @include mixins.fontSize(60,60);
                        color: variables.$cDark;
                        margin-right: 15px;

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

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

                    span:last-child{
                        flex-grow: 1;
                        height: 2px;
                        background-color: variables.$cDark;
                    }
                }

                &_title{
                    @include mixins.fontSize(50,60);
                    color: #C3C3C3;
                    margin-bottom: 4vh;

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

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

                &_description{
                    @include mixins.fontSize(15,28);
                    color: color.adjust(variables.$cDark, $alpha: -0.6);
                    
                    @include mixins.respondTo('xs'){
                        @include mixins.fontSize(14,26,variables.$baseFontSizeXs);
                    }
                }
            }
        }
    }

    @include mixins.respondTo('xs'){
        .expertises_cabinet{
            .carousel_slide_cover_img{
                background-position: 30% center;
            }
        }
    }
}

.prestaList{
    position: relative;
    margin-bottom: 12vh;

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

    .prestaItem{
        position: relative;
        z-index: 0;
        border-top: 2px solid variables.$cDark;
        border-bottom: 2px solid variables.$cDark;
        margin-top: -2px;

        @include mixins.hover{
            z-index: 2;
        }
        //     mix-blend-mode: exclusion;

        //     a{
        //         &, &:visited{
        //             color: #FFF;
        //         }
        //     }
        // }

        a{
            position: relative;
            display: block;
            @include mixins.fontSize(50,50);
            padding-top: 5vh;
            padding-bottom: 5vh;
            text-decoration: none;
            transition: color 0.15s linear;

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

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

            &, &:visited{
                color: variables.$baseTextColor;
            }

            &::before{
                content: "";
                position: absolute;
                top: 50%; right: calc(100% + 45px);
                width: 10px;
                height: 10px;
                border-radius: 10px;
                margin-top: -5px;
                background-color: variables.$cPrimary;
                transition: transform 0.25s variables.$Power2EaseInOut;
                transform: scale(0);
                transform-origin: center center;
                
                @include mixins.respondTo('xs'){
                    right: calc(100% + 20px);
                }
            }

            &.prestaList_link--active{
                color: variables.$cDark;
                text-decoration: none;

                &::before{
                    transform: scale(1);
                }
            }
            
            @include mixins.hover{
                color: variables.$cDark;
                text-decoration: none;

                &::before{
                    transform: scale(1);
                }
            }
        }
    }
    
    .prestaCovers{
        position: absolute;
        top: 50%; left: 50%;
        transform-origin: center center;
        z-index: 1;
        opacity: 0;
        pointer-events: none;
        width: 400px;
        height: 260px;
        margin-left: -200px;
        margin-top: -130px;
        transition: transform 1s variables.$Power3EaseOut;

        .prestaCover{
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            opacity: 0;
            will-change: opacity, transform;
            transform: scale(0.6);
            transform-origin: center center;
            filter: grayscale(1);
            transition: opacity 0.4s linear, transform 0.4s variables.$Power3EaseInOut;

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

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

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

    &:hover{
        .prestaCovers{
            opacity: 1;
        }
    }
}