@use "../abstracts/mixins";
@use "../abstracts/variables";

.page-template-tpl-rse-child{
    .sectionQuote{
        &_icon{
            color: variables.$cPrimary;
        }

        &_content{
            color: variables.$cLight;
        }
    }

    .header_behind::after{
        background-color: variables.$cGreyDark;
    }
    .header_cover_background{
        filter: none;
    }

    .pSection{
        &.rse-light{
            background-color: variables.$cLight;
            color: variables.$cGreyDark;
        }
        &.rse-dark{
            background-color: variables.$cDark;
            color: variables.$cLight;

            .rse-links{
                li{
                    a{
                        transition: opacity 0.15s linear;
                        
                        &:hover{
                            color: variables.$cLight;
                            opacity: 0.5;
                        }
                    }
                }
            }

            .rse-video_button{
                color: variables.$cLight;
            }
        }

        &_header{
            &_inner{
                margin-right: 0;
                max-width: none;
            }
        }
    }

    .rse_flex{
        &_wrap{}

        & + .rse_flex{
            margin-top: 4svh;
        }

        &--text{
            @include mixins.fontSize(16);
        }

        &--intro{
            @include mixins.fontSize(30,40);
        }

        &--quote{
            position: relative;

            svg{
                position: absolute;
                right: calc(100% + 85px);
                top: -14px;
                color: variables.$cPrimary;

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

            .firstLetter{
                margin-right: mixins.vwCol(1,0);
                padding-left: 0;

                &_letter{
                    top: -22px;
                    left: auto;
                    right: calc(100% + 10px);
                    text-align: right;
                }

                &_content{
                    @include mixins.fontSize(20,30);
                    text-transform: uppercase;
                    font-weight: 700;
                }
            }
        }

        &--image{
            position: relative;
            aspect-ratio: calc(500/666);

            .imageRender{
                bottom: 0;
            }

            .imageRender_label{
                position: absolute;
                z-index: 1;
                bottom: 30px;
                right: 30px;
                left: 30px;
                text-align: right;
                color: variables.$cLight;
                font-weight: 700;

                @include mixins.respondTo('sm'){
                    bottom: 20px;
                    right: 20px;
                    left: 20px;
                }
            }
        }

        &--links{}
    }

    .rse-video{
        .pSection_header{
            z-index: 0;
        }

        .pSection_content{
            padding-top: 50svh;
            padding-bottom: 15svh;

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

        &_content{
            margin-bottom: 3svh;
        }

        &_button{
            cursor: pointer;
            @include mixins.fontSize(20);
            font-weight: 700;
            transition: opacity 0.15s linear;

            &:hover{
                opacity: 0.7;
            }

            &_play{
                position: relative;
                display: inline-block;
                vertical-align: middle;
                width: 60px;
                height: 60px;
                border-radius: 60px;
                background: variables.$cPrimary;
                margin-left: 10px;

                @include mixins.respondTo('sm'){
                    width: 50px;
                    height: 50px;
                }

                svg{
                    position: absolute;
                    top: 50%; left: 50%;
                    transform: translate(-50%,-50%);
                    fill: #FFF;
                    
                    @include mixins.respondTo('sm'){
                        transform: translate(-50%,-50%) scale(0.8);
                    }

                    &:first-child{
                        margin-left: 2px;
                    }
                }
            }
        }

        &_render{
            position: relative;
            z-index: 1;
            aspect-ratio: calc(16/9);
            overflow: hidden;
            

            &.-playing{
                .rse-video_render_cover{
                    display: none;
                }
            }

            &_cover{
                position: absolute;
                top: 0; left: 0; right: 0; bottom: 0;
                z-index: 1;
                cursor: pointer;

                &::after{
                    content: "";
                    position: absolute;
                    z-index: 0;
                    top: 0; left: 0; right: 0; bottom: 0;
                    background-color: variables.$cDark;
                    opacity: 0.4;
                }

                &_button{
                    position: absolute;
                    z-index: 2;
                    top: 50%; left: 50%;
                    margin-top: -30px;
                    margin-left: -30px;
                    width: 60px;
                    height: 60px;
                    border-radius: 60px;
                    background: variables.$cPrimary;

                    svg{
                        position: absolute;
                        top: 50%; left: 50%;
                        transform: translate(-50%,-50%);
                        fill: #FFF;

                        &:first-child{
                            margin-left: 2px;
                        }
                    }
                }

                .imageRender{
                    bottom: 0;
                    z-index: 1;
                }

                video{
                    position: absolute;
                    top: 0; left: 0;
                    width: 100%; height: 100%;
                    object-fit: cover;
                }
            }

            // .lite-youtube{
            //     pointer-events: none;
            // }

            .plyr{
                &__video-wrapper{
                    pointer-events: none;
                }
            }
        }
    }

    .rse-content-1{
        padding-top: 12svh;
        padding-bottom: 12svh;

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

        &_quote{
            &--big{
                position: relative;
                @include mixins.fontSize(70,80);
                font-weight: 700;
                margin-bottom: 10svh;
        
                @include mixins.respondTo('md'){
                    @include mixins.fontSize(44,50,variables.$baseFontSizeMd);
                }
        
                @include mixins.respondTo('xs'){
                    @include mixins.fontSize(24,30,variables.$baseFontSizeXs);
                    margin-bottom: 60px;
        
                    br{
                        &, &::after{
                            content: ' ';
                        }
                    }
                }
        
                svg{
                    position: absolute;
                    top: 0; right: calc(100% + 40px);
                    color: variables.$cPrimary;
                    
                    @include mixins.respondTo('xs'){
                        transform: scale(0.75);
                        top: -20px;
                        right: calc(100% + 10px);
                    }
                }
            }

            &--small{
                margin-right: mixins.vwCol(1,0);
                margin-bottom: 7.5svh;
                @include mixins.fontSize(30,40);

                @include mixins.respondTo('sm'){
                    @include mixins.fontSize(24,34);
                }

                strong, b{
                    color: variables.$cPrimary;
                }
            }
        }

        &_sticky{
            position: relative;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding-top: 150px;
            padding-bottom: 50px;

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

        &_number{
            &_value{
                position: relative;
                display: inline-block;
                @include mixins.fontSize(210,170);

                @include mixins.respondTo('lg'){
                    @include mixins.fontSize(180,140);
                }

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

                @include mixins.respondTo('sm'){
                    @include mixins.fontSize(110,90,variables.$baseFontSizeSm);
                }

                &_fake{
                    opacity: 0;
                    pointer-events: none;

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

                &_anim{
                    position: absolute;
                    top: 0; left: 0;

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

            &_label{
                position: absolute;
                top: 100%; left: 100%;
                transform-origin: top left;
                transform: rotate(-90deg);
                @include mixins.fontSize(30);
                opacity: 0.3;
            }
        }

        .rse_flex_wrap{
            margin-top: 20svh;

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

    .rse-2-cols{
        padding-top: 12svh;
        padding-bottom: 12svh;

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

        .pSection_target{
            top: 12svh;
            bottom: 12svh;

            @include mixins.respondTo('xs'){
                top: 8svh;
                bottom: 8svh;
            }
        }

        &_sticky{
            position: relative;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding-top: 150px;
            padding-bottom: 0;

            @include mixins.respondTo('lg'){
                padding-top: 5vw;
            }

            @include mixins.respondTo('sm'){
                padding-top: 110px;
            }

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

        &_col-right{
            .rse_flex_wrap{
                margin-top: 40svh;

                @include mixins.respondTo('xs'){
                    margin-top: 8svh;
                }
            }
        }
    }

    .rse-audio{
        padding-top: 12svh;
        padding-bottom: 12svh;

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

        .pSection_target{
            top: 12svh;

            @include mixins.respondTo('xs'){
                top: 8svh;
            }
        }

        &_sticky{
            position: relative;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding-bottom: 12svh;

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

        &_render{
            position: relative;
            margin-top: 10svh;
            aspect-ratio: calc(500/666);

            .imageRender{
                bottom: 0;

                &::after{
                    content: "";
                    position: absolute;
                    top: 0; left: 0; right: 0; bottom: 0;
                    background-color: variables.$cDark;
                    opacity: 0;
                    transition: opacity 0.2s linear;
                }
            }
            
            &:hover{
                .imageRender::after{
                    opacity: 0.3;
                }
            }

            .imageRender_label{
                position: absolute;
                z-index: 1;
                bottom: 30px;
                right: 30px;
                left: 30px;
                text-align: right;
                color: variables.$cLight;
                font-weight: 700;

                @include mixins.respondTo('sm'){
                    bottom: 20px;
                    right: 20px;
                }
            }

            &_button{
                position: relative;
                display: inline-block;
                vertical-align: middle;
                width: 60px;
                height: 60px;
                border-radius: 60px;
                background: variables.$cPrimary;
                margin-left: 10px;

                @include mixins.respondTo('sm'){
                    width: 50px;
                    height: 50px;
                }

                svg{
                    position: absolute;
                    top: 50%; left: 50%;
                    transform: translate(-50%,-50%);
                    fill: #FFF;

                    @include mixins.respondTo('sm'){
                        transform: translate(-50%,-50%) scale(0.8);
                    }

                    &:first-child{
                        margin-left: 2px;
                    }
                    &:last-child{
                        display: none;
                    }
                }
            }

            &_toggle{
                position: absolute;
                top: 0; left: 0; right: 0; bottom: 0;
                z-index: 5;
                cursor: pointer;
            }

            &.-playing{
                .rse-audio_render_button{
                    svg{
                        &:first-child{
                            display: none;
                        }
                        &:last-child{
                            display: block;
                        }
                    }
                }
            }
        }

        .rse_flex_wrap{
            margin-top: 5svh;
        }
    }

    .rse-key-numbers{
        padding-top: 12svh;
        padding-bottom: 12svh;

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

        .pSection_target{
            top: 12svh;
            bottom: 12svh;

            @include mixins.respondTo('xs'){
                top: 8svh;
                bottom: 8svh;
            }
        }

        &_sticky{
            position: relative;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding-top: 150px;
            padding-bottom: 0;

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

        &_col-right{
            padding-top: 40svh;

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

        .rse-keynumber{
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4svh 0;

            &::after{
                content: "";
                position: absolute;
                left: 0; right: 0; bottom: 0;
                height: 2px;
                background-color: currentColor;
            }

            &_value{
                width: 50%;
                @include mixins.fontSize(70,70);
                text-align: right;

                @include mixins.respondTo('sm'){
                    @include mixins.fontSize(45,45);
                }

                &_mobile{
                    display: none;

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

            &_label{
                width: 40%;
                @include mixins.fontSize(16);
                font-weight: 700;
            }
        }
    }

    .rse-gallery{
        position: relative;
        z-index: 1;
        overflow: hidden;
        min-height: 350vh;

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

        [data-scroll-sticky]{
            mix-blend-mode: difference;
            color: #FFF;
        }

        &_content{
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            pointer-events: none;

            @include mixins.respondTo('xs'){
                min-height: auto;
                padding: 15vh 0 8vh 0;
            }

            h2{
                text-align: center;
                @include mixins.fontSize(140,140);
                margin-left: mixins.vwCol(3);
                margin-right: mixins.vwCol(3);

                @include mixins.respondTo('lg'){
                    @include mixins.fontSize(110,110);
                }

                @include mixins.respondTo('sm'){
                    @include mixins.fontSize(80,80);
                    margin-left: mixins.vwCol(1);
                    margin-right: mixins.vwCol(1);
                }

                @include mixins.respondTo('xs'){
                    @include mixins.fontSize(40,40,variables.$baseFontSizeXs);
                    margin: 0;
                }
            }
        }

        &_covers{
            padding-left: 45px;
            padding-right: 45px;

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

        &_cover{
            position: absolute;
            z-index: 0;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            background-color: #CCC;
            // filter: grayscale(100%);
            z-index: -1;

            &::before{
                content: "";
                display: block;
            }

            &--1,
            &--3,
            &--5,
            &--7{
                width: mixins.vwCol(3);

                @include mixins.respondTo('sm'){
                    width: mixins.vwCol(4);
                }

                &::before{
                    padding-top: 128%;
                }
            }

            &--2,
            &--4,
            &--6,
            &--8{
                width: mixins.vwCol(4);

                @include mixins.respondTo('sm'){
                    width: mixins.vwCol(5);
                }

                &::before{
                    padding-top: 78%;
                }
            }

            &--1{ left: 6%;  top: 305vh; }
            &--2{ left: 22%; top: 195vh; }
            &--3{ left: 18%; top: 143vh; }
            &--4{ left: 49%; top: 105vh; opacity: 0; }
            &--5{ left: 66%; top: 177vh; }
            &--6{ left: 74%; top: 258vh; }
            &--7{ left: 45%; top: 298vh; }
            &--8{ left: 15%; top: 248vh; }
        }

        &_carousel{
            margin-bottom: 8svh;

            &_swiper{
                overflow: visible;
                
                &_slide{
                    position: relative;
                    aspect-ratio: calc(622/806);

                    .imageRender{
                        bottom: 0;
                    }
                }
            }
        }
    }

    .rse-carousel{
        overflow: hidden;
        padding-top: 12svh;
        padding-bottom: 12svh;
        
        @include mixins.respondTo('xs'){
            padding-top: 8svh;
            padding-bottom: 8svh;
        }

        &_quote{
            position: relative;
            @include mixins.fontSize(70,80);
            margin-bottom: 10svh;
    
            @include mixins.respondTo('md'){
                @include mixins.fontSize(44,50,variables.$baseFontSizeMd);
            }
    
            @include mixins.respondTo('xs'){
                @include mixins.fontSize(24,30,variables.$baseFontSizeXs);
                margin-bottom: 4svh;
    
                br{
                    &, &::after{
                        content: ' ';
                    }
                }
            }
    
            svg{
                position: absolute;
                top: 0; right: calc(100% + 40px);
                color: variables.$cPrimary;
                
                @include mixins.respondTo('xs'){
                    transform: scale(0.75);
                    top: -20px;
                    right: calc(100% + 10px);
                }
            }
        }

        &_wrap{

        }

        &_swiper{
            overflow: visible;
            
            &_slide{
                position: relative;
                aspect-ratio: calc(622/806);
                opacity: 0;

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

                .imageRender{
                    bottom: 0;

                    &_label{
                        position: absolute;
                        z-index: 1;
                        left: 10%;
                        right: 10%;
                        bottom: 5%;

                        &_num{
                            font-family: variables.$ffC;
                            color: variables.$cPrimary;
                            @include mixins.fontSize(60,60);

                            @include mixins.respondTo('sm'){
                                @include mixins.fontSize(40,40);
                            }
                        }

                        &_txt{
                            @include mixins.fontSize(30,30);
                            color: variables.$cLight;

                            @include mixins.respondTo('sm'){
                                @include mixins.fontSize(20,20);
                            }
                        }
                    }
                }
            }
        }
    }

    .rse-related-rse{
        min-height: 140svh;

        @include mixins.respondTo('xs'){
            min-height: 100svh;
        }

        .pSection_header{
            &_inner{
                margin-right: 0;
                max-width: none;
            }
        }

        &_background{
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: 0;

            .imageRender{
                height: 100%;
                
                &::after{
                    content: "";
                    position: absolute;
                    top: 0; left: 0; right: 0; bottom: 0;
                    background-color: variables.$cDark;
                    opacity: 0.6;
                }
            }
        }

        &_link{
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: 5;
        }

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

        @include mixins.hover{
            .sectionTitle_footer_link{
                color: variables.$cLight;
        
                &::after{
                    transform: scaleY(1);
                }
            }
        }
    }
}