/* ==========================================================================
   ROBOTO FLEX � IOS SAFARI FIX
   ========================================================================== */

@font-face {
    font-family:"Roboto Flex Custom";

    src:
        url("/local/fonts/RobotoFlex-CompressedItalic-VF.ttf") format("truetype-variations"),
        url("/local/fonts/RobotoFlex-CompressedItalic-VF.ttf") format("truetype");

    font-weight:100 1000;
    font-style:italic;
    font-display:swap;
}

/* ==========================================================================
   CONTACTS PAGE
   ========================================================================== */

.contacts-page,
.contacts-page *,
.contacts-page *::before,
.contacts-page *::after{
    box-sizing:border-box;
}


/* ==========================================================================
   PAGE — DESKTOP 1920
   ========================================================================== */

.contacts-page{
    width:100%;

    padding:72px 90px;

    overflow:hidden;

    background:#FFFFFF;
}


/* ==========================================================================
   INNER
   ========================================================================== */

.contacts-page__inner{
    width:100%;
    max-width:1740px;

    margin:0 auto;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:48px;
}


/* ==========================================================================
   TITLE
   ========================================================================== */

.contacts-page__title{
    width:100%;
    height:50px;

    margin:0;
    padding:0;

    font-family:"Roboto Flex Custom",sans-serif;
    font-style:italic;
    font-weight:700;

    font-size:56px;
    line-height:50px;
    letter-spacing:-.6px;

    color:#171717;
    font-variation-settings:"wght" 700;
    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
}


/* ==========================================================================
   CONTACT MAP

   ВАЖНО:
   внутренности карты здесь НЕ стилизуем.

   contact-map.php + contact-map.css
   полностью отвечают за desktop / tablet / mobile.

   Здесь только встраиваем готовый компонент
   в контейнер страницы.
   ========================================================================== */

.contacts-page__map{
    width:100%;

    flex:none;
}


/*
 * У contact-map есть собственные внешние padding,
 * когда он используется как отдельная секция.
 *
 * Здесь эти padding не нужны:
 * страницу уже ограничивает contacts-page.
 */

.contacts-page__map > .contact-map{
    width:100%;
    height:auto !important;

    padding:0 !important;
}


/*
 * Не меняем высоту, карточку, карту,
 * viewport, кнопку и адаптивы.
 *
 * Только разрешаем inner занять ширину
 * родительского контейнера.
 */

.contacts-page__map > .contact-map .contact-map__inner{
    width:100%;
    max-width:none;

    margin:0;
}



/* ==========================================================================
   CONTACTS — 1440
   ========================================================================== */

@media (min-width:992px) and (max-width:1599px){

    /* ======================================================================
       PAGE
       ====================================================================== */

    .contacts-page{
        padding:72px 90px;
    }


    /* ======================================================================
       INNER

       1440 - 90 - 90 = 1260
       ====================================================================== */

    .contacts-page__inner{
        width:100%;
        max-width:none;

        margin:0;

        gap:48px;
    }


    /* ======================================================================
       TITLE
       ====================================================================== */

    .contacts-page__title{
        width:100%;
        height:50px;

        font-size:56px;
        line-height:50px;
        letter-spacing:-.6px;
    }

}
 
/* ==========================================================================
   CONTACTS — TABLET 768
   ========================================================================== */

@media (min-width:480px) and (max-width:991px){

    /* ======================================================================
       PAGE

       768 - 16 - 16 = 736px
       ====================================================================== */

    .contacts-page{
        padding:32px 16px;
    }


    /* ======================================================================
       INNER
       ====================================================================== */

    .contacts-page__inner{
        width:100%;
        max-width:none;

        margin:0;

        gap:32px;
    }


    /* ======================================================================
       TITLE

       Figma:
       wrapper = 48px
       text = 40 / 38
       ====================================================================== */

    .contacts-page__title{
        width:100%;
        height:48px;

        display:flex;
        align-items:center;

        font-size:40px;
        line-height:38px;
        letter-spacing:-1.2px;
    }


}


/* ==========================================================================
   CONTACTS — MOBILE 393
   ========================================================================== */

@media (max-width:479px){

    /* ======================================================================
       PAGE

       393 - 16 - 16 = 361px
       ====================================================================== */

    .contacts-page{
        padding:32px 16px;
    }


    /* ======================================================================
       INNER
       ====================================================================== */

    .contacts-page__inner{
        width:100%;
        max-width:none;

        margin:0;

        gap:32px;
    }


    /* ======================================================================
       TITLE

       Figma:
       wrapper = 48px
       text = 40 / 38
       ====================================================================== */

    .contacts-page__title{
        width:100%;
        height:48px;

        display:flex;
        align-items:center;

        font-size:40px;
        line-height:38px;
        letter-spacing:-1.2px;

        white-space:nowrap;
    }


 
}

/* ==========================================================================
   CONTACTS GALLERY � SAME AS HOME
   ========================================================================== */

.contacts-page__gallery{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;

    gap:12px;

    /*
     * ������� ������� �� contacts container
     * �� ��� ������ ������.
     */
    width:100vw;
    max-width:none;

    margin-left:calc((100vw - 100%) / -2);

    padding:60px 0 72px;

    overflow-x:auto;
    overflow-y:hidden;

    cursor:grab;

    scrollbar-width:none;
    -ms-overflow-style:none;

    -webkit-overflow-scrolling:touch;

    overscroll-behavior-x:contain;

    flex:none;
}


.contacts-page__gallery.is-dragging{
    cursor:grabbing;

    scroll-behavior:auto;

    user-select:none;
}


.contacts-page__gallery::-webkit-scrollbar{
    display:none;
}


/* ==========================================================================
   GALLERY ITEM
   ========================================================================== */

.contacts-page__gallery-item{
    width:650px;
    height:433px;

    flex:0 0 650px;

    display:block;

    margin:0;
    padding:0;

    overflow:hidden;

    border:0;
    border-radius:0;

    background:none;

    appearance:none;
    -webkit-appearance:none;

    cursor:pointer;

    text-align:left;
}


/* ==========================================================================
   GALLERY IMAGE
   ========================================================================== */

.contacts-page__gallery-item img{
    display:block;

    width:100%;
    height:100%;

    max-width:none;

    object-fit:cover;
    object-position:center;

    pointer-events:none;

    transition:transform .4s ease;
}


@media (hover:hover){

    .contacts-page__gallery-item:hover img{
        transform:scale(1.05);
    }

}


/* ==========================================================================
   TABLET + MOBILE
   ========================================================================== */

@media(max-width:991px){

    .contacts-page__gallery{
        padding:0 0 32px;
    }


    .contacts-page__gallery-item{
        width:294px;
        height:196px;

        flex:0 0 294px;
    }

}


/* ==========================================================================
   CONTACTS PHOTO MODAL � CLOSE
   ========================================================================== */

#contacts-photo-modal .photo-modal__box{
    position:relative;
}


#contacts-photo-modal .photo-modal__close{
    position:absolute;

    top:20px;
    right:20px;
    left:auto;
    bottom:auto;

    z-index:20;

    width:48px;
    height:48px;

    min-width:48px;
    max-width:48px;

    padding:0;
    margin:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0;

    border-radius:50%;

    background:rgba(23,23,23,.72);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    color:#FFFFFF;

    cursor:pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


#contacts-photo-modal .photo-modal__close:hover{
    background:#171717;

    transform:scale(1.06);
}


#contacts-photo-modal .photo-modal__close:active{
    transform:scale(.96);
}


#contacts-photo-modal .photo-modal__close svg{
    display:block;

    width:24px;
    height:24px;

    flex:none;
}


@media(max-width:767px){

    #contacts-photo-modal .photo-modal__close{
        top:12px;
        right:12px;

        width:44px;
        height:44px;

        min-width:44px;
        max-width:44px;
    }

}