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

.page-template-tpl-publications{
    
    .publications_introContainer{
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;

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

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

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

        &_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{
                width: mixins.vwCol(2);

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

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

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

            &--1{ left: 11%;  top: 315vh; }
            &--2{ left: 22%; top: 249vh; }
            &--3{ left: 38%; top: 153vh; z-index: 1; }
            &--4{ left: 49%; top: 105vh; }
            &--5{ left: 66%; top: 197vh; z-index: 1; }
            &--6{ left: 79%; top: 278vh; }
        }
    }

    .publications_introCarouselMobile{
        margin-top: 8vh;
        margin-bottom: 10vh;

        &_slide{
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            background-color: #CCC;
            filter: grayscale(100%);

            &::before{
                content: "";
                display: block;
                padding-top: 66%;
            }
        }
    }
    
    .publications_quote{
        position: relative;
        z-index: 1;
        @include mixins.fontSize(60,70);
        color: variables.$cDark;

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

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

            br{
                &, &::after{
                    content: ' ';
                }
            }
        }

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

    .publications_quote_link{
        margin-top: 3vh;

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

    .publications_container{
        overflow: hidden;
        position: relative;
        z-index: 2;
        background-color: #FFF;
    }

    .publications{
        position: relative;
        padding-top: 40vh;

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

        &_yearContainer{
            position: absolute;
            z-index: 10;
            top: 0; left: 0; right: 0;
            padding-top: 20vh;

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

            .sectionTitle{
                width: 100%;
            }
            
            .sectionTitle_content{
                padding: 0;
            }

            .sectionTitle_footer{
                min-height: auto;
            }

            .col-3{
                position: relative;
            }

            .colYear{
                position: absolute;
                top: 0;
                width: mixins.vwCol(2, math.div(variables.$gridColGutterX, -2));
                min-width: 190px;
                right: 4.65vw;

                @include mixins.respondTo('md'){
                    right: auto;
                    left: 0;
                }
                
                &--prev{
                    left: 4.65vw;
                    right: auto;

                    @include mixins.respondTo('md'){
                        right: 0;
                        left: auto;
                    }

                    .sectionTitle_header_content{
                        &_title::before{
                            display: none;
                        }
                    }

                    .sectionTitle_content{
                        text-align: right;
                    }
                }
            }

            .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;
                        }
                    }
                }
            }
        }

        &_navMobile{
            position: relative;
            border-top: 2px solid variables.$cDark;
            border-bottom: 2px solid variables.$cDark;
            margin-bottom: 10vh;
            display: none;

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

            .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;
                }
            }
        }

        &_list{
            position: relative;
            padding-bottom: 20vh;

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

                @include mixins.respondTo('xs'){
                    top: calc(-14vh - 37px);
                }
            }
        }
    }

    .publicationWrap{
        will-change: opacity;
        transition: opacity 0.2s linear;

        &.hidden{
            opacity: 0.2;
        }

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

    .publication{
        position: relative;

        &_year{
            position: absolute;
            width: 1px; height: 10vh;
            left: 0; bottom: 100%;
        }

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

    .publication-1{
        margin-top: 10%;

        @include mixins.respondTo('sm'){
            margin-top: 0;
            margin-left: -40px;
        }
    }

    .publication-2{
        margin-top: -55%;
        margin-left: variables.$gridColGutterX;

        @include mixins.respondTo('sm'){
            margin-top: 0;
            margin-right: -40px;
        }
    }
    
    .publication-3{
        margin-top: -2%;
        margin-right: variables.$gridColGutterX;

        @include mixins.respondTo('sm'){
            margin-top: 0;
            margin-right: 0;
            margin-left: -40px;
        }
    }
    
    .publication-4{
        margin-top: -65%;

        @include mixins.respondTo('sm'){
            margin-top: 0;
            margin-right: -40px;
        }
    }

}