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

.page-template-tpl-webinaires{
    .header_behind::after{
        background-color: #222;
    }

    .header .sectionTitle a{
        z-index: 10;
        pointer-events: all;

        &, &:visited{
            color: #FFF;
            text-decoration: none;
        }

        &:hover{
            text-decoration: underline;
        }
    }

    .topWebinar{
        padding-bottom: 10vh;

        .pSection_header{
            min-height: auto;
        }

        &_content{
            position: relative;
            @include mixins.fontSize(60,70);
            font-weight: 300;
            color: variables.$cDark;
            margin-top: 25vh;
    
            @include mixins.respondTo('md'){
                @include mixins.fontSize(44,50,variables.$baseFontSizeMd);
            }
    
            @include mixins.respondTo('xs'){
                @include mixins.fontSize(24,30,variables.$baseFontSizeXs);
                margin-top: 75px;
    
                br{
                    &, &::after{
                        content: ' ';
                    }
                }
            }
    
            &_icon{
                position: absolute;
                left: 0; bottom: calc(100% + 40px);
                color: variables.$cPrimary;
                
                @include mixins.respondTo('xs'){
                    transform: scale(0.85);
                    bottom: calc(100% + 10px);
                    left: -30px;
                }
            }
        }

        &_bottomWrap{
            position: relative;
            margin-top: 4vh;
            background-color: #fff;
            overflow: hidden;
        }

        &_bottom{
            position: relative;

            &_target{
                position: absolute;
                top: 0; left: 0; right: 0; bottom: 0;
                pointer-events: none;
            }
        }

        &_date{
            position: absolute;
            z-index: 5;
            top: 10vh;
            left: 50%;
            width: 104vw;
            margin-left: -52vw;
            @include mixins.fontSize(170,170);
            height: 170px;
            font-weight: 300;
            color: #D2D2D2;
            opacity: 0.5;
            white-space: nowrap;
            overflow: hidden;
            pointer-events: none;

            &_rail{
                position: absolute;
                top: 0; left: -30vw;
            }

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

        &_cover{
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;

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

        &_additional{
            margin-top: 30vh;
            @include mixins.fontSize(30,45);
            font-weight: 300;
            color: variables.$cDark;

            @include mixins.respondTo('xs'){
                margin-top: 30px;
                @include mixins.fontSize(20,28,variables.$baseFontSizeXs);
            }

            b, strong{
                font-weight: 700;
            }

            a{
                font-weight: 700;
            }
        }

        &_logo{
            position: absolute;
            z-index: 2;
            left: 23vw; top: 10vh;
            color: variables.$cPrimary;
            opacity: 1;
            pointer-events: none;
            mix-blend-mode: lighten;

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

    .webinarsSocial{
        background-color: variables.$cPrimary;
        min-height: auto;

        .pSection_header{
            min-height: auto;
            padding-top: 20vh;
            padding-bottom: 20vh;
        }

        .sectionTitle_footer_link{
            color: #FFF;
            
            &::after{
                background-color: #fff;
            }
        }

        .sectionTitle:hover .sectionTitle_footer_link{
                color: variables.$cPrimary;
        }

        &_txt{
            position: absolute;
            z-index: 5;
            top: 0;
            left: 50%;
            height: 100%;
            width: 51vw;
            @include mixins.fontSize(300,300);
            font-weight: 300;
            color: #FFF;
            opacity: 0.2;
            overflow: hidden;
            pointer-events: none;

            &_rail{
                position: absolute;
                top: -100vh; left: 0; right: 0;
            }
        }
    }


    .webinarsList{
        padding-bottom: 10vh;

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

        .sectionTitle_content{
            padding: 0;
        }

        .sectionTitle_footer{
            min-height: auto;
        }

        .webinars_list_content{
            padding-top: 18vh;

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

        .colYear{
            padding-top: 20vh;
            margin-right: 1.85vw;
            
            &--prev{
                text-align: center;

                button{
                    display: inline-block;
                    vertical-align: middle;
                    margin: 0 10px;
                    opacity: 0.3;
                    transition: opacity 0.2s linear;

                    &:hover{
                        opacity: 1;
                    }
                }

                .sectionTitle_content{
                    padding: 4.5vh 0;
                }
            }
        }

        &_content{
            padding-top: 20vh;

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

        .yearsList_container{
            height: calc(9vh + 70px);
            overflow: hidden;
        }

        .yearsList{
            transition: transform 1s variables.$CircEaseInOut;

            > li{
                a{
                    display: block;
                    padding: 4.5vh 0;
                    text-decoration: none;
                    
                    @include mixins.hover{
                        text-decoration: none;
                    }
                }
            }
        }
    }
}

.webinarBlocList{
    position: relative;
    padding-top: 3vh;
    margin-bottom: 9vh;
    color: variables.$cDark;

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

    &_header{
        font-family: variables.$ffC;
        color: variables.$cPrimary;
        @include mixins.fontSize(35,45);
        font-weight: 300;
        text-transform: uppercase;
        opacity: 0;
        margin-bottom: 5px;
        transform: translateY(-10px);
        transition: opacity 0.15s linear, transform 0.4s variables.$CircEaseOut;

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

        @include mixins.respondTo('xs'){
            opacity: 1;
            transform: translateY(0);
            @include mixins.fontSize(20,20,variables.$baseFontSizeXs);
        }

        > * {
            display: inline-block;
            vertical-align: middle;
        }
    }

    &_title{
        @include mixins.fontSize(50,60);
        color: variables.$cDark;
        opacity: 0.3;
        margin-bottom: 2vh;
        transition: opacity 0.15s linear;

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

        @include mixins.respondTo('xs'){
            opacity: 1;
            @include mixins.fontSize(28,30,variables.$baseFontSizeXs);
        }

        span{
            position: relative;
            display: inline;
            transition: box-shadow 0.15s linear;
            box-shadow: inset 0 0 0 0 variables.$cDark;
        }
    }

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

    &_content{
        position: relative;
        padding-bottom: 30px;

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

    .button{
        position: absolute;
        z-index: 3;
        bottom: 0; left: 0;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.15s linear, transform 0.4s variables.$CircEaseOut, color 0.5s variables.$ExpoEaseInOut;

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

    @include mixins.hover{
        .webinarBlocList_header, .button{
            opacity: 1;
            transform: translateY(0);
        }

        // .button{
        //     color: $cLight;

        //     &::after{
        //         transform: translateY(0);
        //     }
        // }

        .webinarBlocList_title{
            opacity: 1;

            span{
                box-shadow: inset 0 -3px 0 0 variables.$cDark;
            }
        }

        .webinarBlocList_excerpt{
            opacity: 1;
        }
    }
}


.webinars_navMobile{
    position: relative;
    margin-bottom: 10vh;

    &_carousel{
        border-top: 2px solid variables.$cDark;
        border-bottom: 2px solid variables.$cDark;
    }

    .swiper-slide{
        > div{
            @include mixins.fontSize(60,70,variables.$baseFontSizeXs);
            padding-top: 4vh;
            padding-bottom: 4vh;
            color: variables.$cDark;
        }
    }

    &_next{
        position: absolute;
        z-index: 5;
        top: 50%; right: -40px;
        width: 88px; height: 38px;
        margin-top: -19px;

        > svg{
            width: 88px; height: 38px;
            stroke-width: 3px;
            stroke: variables.$cDark !important;
        }
    }
}