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

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

        &_content{
            color: variables.$cLight;
        }
    }
    
    .header_behind::after{
        background-color: variables.$cGreyDark;
    }

    .rse-light, .rse-dark-image{
        .pSection_content{
            padding-top: 20vh;
            padding-bottom: 40vh;

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

            .sp4{
                margin-top: 4vh;
            }

            .sp6{
                margin-top: 4vh;
            }
        }
    }

    .rse-dark{
        background-color: #000;
        color: #fff;
        padding-bottom: 30vh;

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

            &_inner{
                margin-right: math.div(variables.$containerWidth, variables.$gridColsNb);
                max-width: none;
            }
        }

        .pSection_content{
            padding-top: 70vh;

            @include mixins.respondTo('xs'){
                padding-top: 6vh;
                padding-bottom: 12vh;
            }
        }
        
        .rse-links{
            li{
                a{
                    transition: opacity 0.15s linear;
                    
                    &:hover{
                        color: variables.$cLight;
                        opacity: 0.5;
                    }
                }
            }
        }
    }

    .rse-dark-image{
        .pSection_header{
            &_cover{
                right: auto;
                left: 0;
                width: 50vw;

                @include mixins.respondTo('xs'){
                    width: 100vw;
                    left: variables.$containerPaddingXs * -1;
                }
            }
        }

        .sp4{
            color: variables.$cLight;
        }

        .carousel--nb .carousel_slide_cover_img{
            filter: none;
        }
    }

    .rse-child{
        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);
                }
            }
        }
    }
}

.rse-links{
    margin-top: 8vh;
    @include mixins.fontSize(30,40);
    
    @include mixins.respondTo('md'){
        @include mixins.fontSize(22,34,variables.$baseFontSizeMd);
    }

    li{
        border-bottom: 2px solid currentColor;
        
        &:first-child{
            border-top: 2px solid currentColor;
        }

        a{
            display: block;
            padding: 2.5vh 0;
            color: currentColor;
            transition: color 0.2s linear;

            &:hover{
                text-decoration: none;
                color: #000;
            }
        }
    }
}