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

.page-template-tpl-contact{
    background-color: variables.$cDark;
    color: variables.$cLight;

    .footer{
        display: none;
    }

    .logoContainer{
        .logo_text{ fill: variables.$cLight; }

        .menuToggle{
            span{
                background-color: variables.$cLight;
            }
        }
    }

    .main{
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;

        @include mixins.respondTo('xs'){
            position: relative;
            top: auto; left: auto; right: auto; bottom: auto;
            height: auto;
            min-height: 100vh;
            min-height: calc(var(--vh, 1vh) * 100);
            background: #FFF;
            overflow: hidden;
        }

        .officesCovers{
            position: absolute;
            z-index: -1;
            top: 0; left: 0; right: 0; bottom: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            filter: grayscale(100%);
            transform: scale(1.1);

            @include mixins.respondTo('xs'){
                z-index: 0;
                width: 100vw;
                height: 85vh;
                transform: scale(1);
            }

            &.animated{
                clip-path: inset(0 0 0 0);
                animation: officesAnimation 0.8s forwards;
                animation-timing-function: variables.$Power4EaseInOut;

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

            .officeCover{
                position: absolute;
                z-index: 0;
                top: 0; left: 0; right: 0; bottom: 0;
                background-position: center center;
                background-size: cover;
                background-repeat: no-repeat;
                transform: scale(1.1);
            }
        }
    }

    .officesCarousel{
        position: absolute;
        top: 14vh; left: 7vw; right: 7vw; bottom: 0;

        @include mixins.respondTo('xs'){
            position: relative;
            top: auto; left: auto; right: auto; bottom: auto;
            z-index: 1;
            overflow: hidden;
        }

        &_next{
            position: absolute;
            z-index: 20;
            right: 0; top: 0; bottom: 0;
            width: 45vw;
            transition: opacity 0.15s linear;

            @include mixins.respondTo('xs'){
                width: 141px;
            }

            svg{
                position: absolute;
                top: 50%; left: 20%;
                transform: translateY(-50%);
                transition: transform 0.6s variables.$Power4EaseInOut;
                stroke: #FFF;

                @include mixins.respondTo('xs'){
                    top: calc(45vh + 130px);
                    left: 0;
                    // transform: none;
                    width: 141px;
                    height: 61px;
                    stroke-width: 2px;
                }
            }

            @include mixins.hover{
                opacity: 0.6;

                svg{
                    transform: translate(-20%, -50%);
                }
            }
        }
    }

    .office{
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        display: flex;
        align-items: center;

        @include mixins.respondTo('xs'){
            position: relative;
            top: auto; left: auto; right: auto; bottom: auto;
        }

        &_content{
            width: mixins.vwCol(10);

            @include mixins.respondTo('xs'){
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                min-height: 100vh;
                width: 100%;
                padding-left: variables.$containerPaddingXs;
                padding-right: variables.$containerPaddingXs;
            }
        }

        &_titlesWrapper{
            position: relative;
            height: 10rem;

            @include mixins.respondTo('xs'){
                height: 70px;
            }
        }

        &_title{
            position: absolute;
            top: 0; left: 0; 
            @include mixins.fontSize(200,200);
            text-transform: lowercase;

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

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

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

        &_nextTitlesWrapper{
            position: absolute;
            left: 80vw; top: 4vh;
            height: 10rem;
            opacity: 0.6;

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

        &_nextTitle{
            position: absolute;
            top: 0; left: 0; 
            @include mixins.fontSize(200,200);
            text-transform: lowercase;
        }

        .sectionTitle{
            @include mixins.respondTo('xs'){
                margin-top: 35vh;
                margin-bottom: 25vh;
            }
        }

        .sectionTitle_content{
            position: relative;
            padding-top: 4vh;
            padding-bottom: 6vh;

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

        .sectionTitle_header{}

        .sectionTitle_footer{
            min-height: auto;
        }

        &_detailsWrapper{
            position: relative;
            height: 180px;
            margin-top: 6vh;
            margin-left: mixins.vwCol(2,-0.2);
            opacity: 0;

            @include mixins.respondTo('xs'){
                opacity: 1;
                color: variables.$cDark;
                background-color: #FFF;
                height: calc(160px + 12vh);
                margin-top: 0;
                margin-left: -(variables.$containerPaddingXs);
                margin-right: -(variables.$containerPaddingXs);
            }
        }

        &_details{
            position: absolute;
            top: 0; left: 0;
            @include mixins.fontSize(16,20);

            @include mixins.respondTo('xs'){
                padding: 6vh variables.$containerPaddingXs 6vh variables.$containerPaddingXs*1.75;
                @include mixins.fontSize(14,20,variables.$baseFontSizeXs);
            }

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

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

            &_iconMobile{
                position: absolute;
                top: -30px; left: 4px;
                color: variables.$cPrimary;
                display: none;

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

            .button{
                margin-top: 3vh;

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

@keyframes officesAnimation {
    100% {
        clip-path: inset(14% 0% 0% 41%);
        transform: scale(1);
    }
}