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

.contact-map,
.contact-map *,
.contact-map *::before,
.contact-map *::after{
    box-sizing:border-box;
}


/* ==========================================================================
   SECTION
   ========================================================================== */

.contact-map{
    width:100%;

    padding:72px 90px;

    background:#FFFFFF;
}


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

.contact-map__inner{
    position:relative;

    width:100%;
    max-width:1740px;
    height:480px;

    margin:0 auto;

    padding:8px;

    overflow:hidden;

    background:#F5F5F5;
}


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

.contact-map__map{
    position:absolute;
    inset:0;

    z-index:0;

    overflow:hidden;

    background:#F5F5F5;
}


/* ==========================================================================
   VISIBLE MAP VIEWPORT

   Desktop:
   card = 596px
   card starts at 8px

   Поэтому видимая карта начинается после карточки.

   Пин находится ровно по центру ЭТОЙ области.
   ========================================================================== */

.contact-map__map-viewport{
    position:absolute;

    top:8px;
    right:8px;
    bottom:8px;
    left:604px;

    overflow:hidden;

    background:#F5F5F5;

    pointer-events:none;
}


/* ==========================================================================
   YANDEX IFRAME

   Карта полностью статичная.

   iframe специально больше viewport.
   Таким образом периферийные элементы интерфейса Яндекса
   оказываются за пределами overflow:hidden.

   Увеличение симметричное, поэтому географический центр
   остаётся ровно в центре viewport.
   ========================================================================== */

.contact-map__iframe{
    --map-ui-crop:96px;

    position:absolute;

    top:calc(var(--map-ui-crop) * -1);
    right:calc(var(--map-ui-crop) * -1);
    bottom:calc(var(--map-ui-crop) * -1);
    left:calc(var(--map-ui-crop) * -1);

    display:block;

    width:calc(100% + (var(--map-ui-crop) * 2));
    height:calc(100% + (var(--map-ui-crop) * 2));

    border:0;

    pointer-events:none;

    filter:
        grayscale(1)
        contrast(.82)
        brightness(1.12);
}


/* ==========================================================================
   OFFICE PIN

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

.contact-map__office-pin{
    position:absolute;


left:calc(50% - 16px);
top:calc(50% - 29px);

    z-index:2;

    width:48px;
    height:48px;

    transform:translate(-50%, -50%);

    pointer-events:none;
}


.contact-map__office-pin svg{
    display:block;

    width:48px;
    height:48px;
}


/* ==========================================================================
   CONTACT CARD
   ========================================================================== */

.contact-map__card{
    position:relative;

    z-index:2;

    width:596px;
    height:464px;

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

    gap:24px;

    padding:24px;

    background:#FFFFFF;
}


/* ==========================================================================
   BADGE
   ========================================================================== */

.contact-map__badge{
    width:max-content;
    height:24px;

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

    padding:0 8px;

    background:#D2FF00;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:500;

    font-size:14px;
    line-height:18px;
    letter-spacing:-.3px;

    color:#171717;
}


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

.contact-map__title{
    width:100%;

    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 ITEM
   ========================================================================== */

.contact-map__item{
    width:100%;

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

    gap:12px;
}


/* ==========================================================================
   LABEL
   ========================================================================== */

.contact-map__label{
    width:max-content;
    height:24px;

    display:flex;
    align-items:center;

    padding:0 8px;

    background:#F5F5F5;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:500;

    font-size:14px;
    line-height:18px;
    letter-spacing:-.3px;

    color:#171717;
}


/* ==========================================================================
   VALUE
   ========================================================================== */

.contact-map__value{
    display:block;

    margin:0;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:600;

    font-size:24px;
    line-height:28px;
    letter-spacing:-.8px;

    color:#171717;

    text-decoration:none;

    transition:opacity .2s ease;
}


.contact-map__value:hover{
    opacity:.65;
}


/* ==========================================================================
   SOCIAL
   ========================================================================== */

.contact-map__social{
    width:100%;

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

    gap:12px;
}


.contact-map__social-list{
    width:auto;
    height:32px;

    display:flex;
    flex-direction:row;
    align-items:center;

    gap:12px;
}


/* ==========================================================================
   SOCIAL LINK
   ========================================================================== */

.contact-map__social-link{
    position:relative;

    display:block;

    width:32px;
    height:32px;

    flex:0 0 32px;

    text-decoration:none;
}


/* ==========================================================================
   SOCIAL ICON
   ========================================================================== */

.contact-map__social-icon{
    position:relative;

    display:block;

    width:32px;
    height:32px;
}


.contact-map__social-icon img{
    position:absolute;
    inset:0;

    display:block;

    width:32px;
    height:32px;

    object-fit:contain;

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


/* ==========================================================================
   SOCIAL DEFAULT / HOVER
   ========================================================================== */

.contact-map__social-default{
    opacity:1;
}


.contact-map__social-hover{
    opacity:0;
}


.contact-map__social-link:hover
.contact-map__social-default{
    opacity:0;
}


.contact-map__social-link:hover
.contact-map__social-hover{
    opacity:1;
}


.contact-map__social-link:focus-visible
.contact-map__social-default{
    opacity:0;
}


.contact-map__social-link:focus-visible
.contact-map__social-hover{
    opacity:1;
}


/* ==========================================================================
   MAP BUTTON AREA
   ========================================================================== */

.contact-map__map-action{
    position:absolute;

    right:8px;
    bottom:8px;

    z-index:3;

    width:580px;
    height:464px;

    display:flex;

    justify-content:flex-end;
    align-items:flex-end;

    padding:16px;

    pointer-events:none;
}


/* ==========================================================================
   MAP BUTTON
   ========================================================================== */

.contact-map__map-button{
    width:292px;
    height:56px;

    display:flex;
    flex-direction:row;

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

    gap:8px;

    padding:0 24px;

    background:#D2FF00;

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

    font-size:16px;
    line-height:22px;
    letter-spacing:-.4px;

    text-transform:uppercase;

    white-space:nowrap;

    color:#171717;

    text-decoration:none;

    pointer-events:auto;

    transition:background-color .2s ease;
    font-variation-settings:"wght" 700;
    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;

}


.contact-map__map-button:hover{
    background:#C6F000;
}


.contact-map__map-button:active{
    background:#BDEA00;
}


/* ==========================================================================
   PIN INSIDE BUTTON
   ========================================================================== */

.contact-map__map-pin{
    display:flex;

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

    width:24px;
    height:24px;

    flex:0 0 24px;
}


.contact-map__map-pin svg{
    display:block;

    width:24px;
    height:24px;
}


/* ==========================================================================
   CONTACT MAP — 1440
   ========================================================================== */

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

    /* ======================================================================
       SECTION
       ====================================================================== */

    .contact-map{
        width:100%;
        height:624px;

        padding:72px 90px;
    }


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

    .contact-map__inner{
        width:100%;
        max-width:none;
        height:480px;

        margin:0;

        padding:8px;
    }


    /* ======================================================================
       CARD

       630 × 464
       ====================================================================== */

    .contact-map__card{
        width:630px;
        height:464px;

        padding:24px;

        gap:24px;
    }


    /* ======================================================================
       MAP VIEWPORT

       inner = 1260
       card = 630
       left = 8 + 630 = 638
       right = 8

       Получаем 614px видимой карты.

       Пин внутри автоматически 50% / 50%.
       ====================================================================== */

    .contact-map__map-viewport{
        top:8px;
        right:8px;
        bottom:8px;
        left:638px;
    }


    .contact-map__iframe{
        --map-ui-crop:96px;
    }


    /* ======================================================================
       PIN
       ====================================================================== */

    .contact-map__office-pin{
left:calc(50% - 16px);
top:calc(50% - 29px);

        width:48px;
        height:48px;
    }


    .contact-map__office-pin svg{
        width:48px;
        height:48px;
    }


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

    .contact-map__title{
        width:100%;

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


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

    .contact-map__item{
        width:100%;

        gap:12px;
    }


    .contact-map__value{
        font-size:24px;
        line-height:28px;
        letter-spacing:-.8px;
    }


    /* ======================================================================
       SOCIAL
       ====================================================================== */

    .contact-map__social{
        width:100%;

        gap:12px;
    }


    .contact-map__social-list{
        width:340px;
        height:32px;

        gap:12px;
    }


    .contact-map__social-link,
    .contact-map__social-icon{
        width:32px;
        height:32px;

        flex:0 0 32px;
    }


    .contact-map__social-icon img{
        width:32px;
        height:32px;
    }


    /* ======================================================================
       BUTTON AREA
       ====================================================================== */

    .contact-map__map-action{
        right:8px;
        bottom:8px;

        width:614px;
        height:464px;

        padding:16px;

        justify-content:flex-end;
        align-items:flex-end;
    }


    .contact-map__map-button{
        width:292px;
        height:56px;

        flex:0 0 56px;

        padding:0 24px;
    }

}


/* ==========================================================================
   CONTACT MAP — TABLET 768
   ========================================================================== */

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

    /* ======================================================================
       SECTION

       32 + 880 + 32 = 944
       ====================================================================== */

    .contact-map{
        width:100%;
        height:944px;

        padding:32px 16px;
    }


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

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

    .contact-map__inner{
        position:relative;

        width:100%;
        max-width:none;
        height:880px;

        margin:0;

        padding:8px;
    }


    /* ======================================================================
       CARD

       720 × 386
       ====================================================================== */

    .contact-map__card{
        position:relative;

        z-index:2;

        width:100%;
        height:386px;

        padding:24px;

        gap:24px;
    }


    /* ======================================================================
       MAP VIEWPORT

       card starts at 8px
       card height = 386px

       8 + 386 = 394

       viewport:
       720 × 478

       Пин всегда находится в центре этой области.
       ====================================================================== */

    .contact-map__map-viewport{
        top:394px;
        right:8px;
        bottom:8px;
        left:8px;
    }


    .contact-map__iframe{
        --map-ui-crop:80px;
    }


    /* ======================================================================
       PIN
       ====================================================================== */

    .contact-map__office-pin{
left:calc(50% - 16px);
top:calc(50% - 29px);

        width:48px;
        height:48px;
    }


    .contact-map__office-pin svg{
        width:48px;
        height:48px;
    }


    /* ======================================================================
       BADGE
       ====================================================================== */

    .contact-map__badge{
        height:24px;

        padding:0 8px;

        font-size:14px;
        line-height:18px;
        letter-spacing:-.3px;
    }


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

    .contact-map__title{
        width:100%;

        font-size:32px;
        line-height:30px;
        letter-spacing:-1px;

        white-space:nowrap;
    }


    .contact-map__title br{
        display:none;
    }


    /* ======================================================================
       CONTACT ITEMS
       ====================================================================== */

    .contact-map__item{
        width:100%;
        height:64px;

        gap:12px;
    }


    .contact-map__label{
        height:24px;

        padding:0 8px;

        font-size:14px;
        line-height:18px;
        letter-spacing:-.3px;
    }


    .contact-map__value{
        font-size:20px;
        line-height:24px;
        letter-spacing:-.6px;
    }


    /* ======================================================================
       SOCIAL
       ====================================================================== */

    .contact-map__social{
        width:100%;
        height:60px;

        gap:12px;
    }


    .contact-map__social-list{
        width:100%;
        height:24px;

        display:flex;

        flex-direction:row;
        flex-wrap:wrap;

        align-items:center;
        align-content:center;

        gap:12px;
    }


    .contact-map__social-link{
        width:24px;
        height:24px;

        flex:0 0 24px;
    }


    .contact-map__social-icon{
        width:24px;
        height:24px;
    }


    .contact-map__social-icon img{
        width:24px;
        height:24px;
    }


    /* ======================================================================
       MAP BUTTON AREA
       ====================================================================== */

    .contact-map__map-action{
        position:absolute;

        left:8px;
        right:8px;
        bottom:8px;

        width:auto;
        height:478px;

        padding:16px;

        display:flex;
        flex-direction:column;

        justify-content:flex-end;
        align-items:flex-start;

        pointer-events:none;
    }


    /* ======================================================================
       BUTTON
       ====================================================================== */

    .contact-map__map-button{
        width:100%;
        height:56px;

        flex:0 0 56px;

        padding:0 24px;

        pointer-events:auto;
    }

}


/* ==========================================================================
   CONTACT MAP — MOBILE 393
   ========================================================================== */

@media (max-width:479px){

    /* ======================================================================
       SECTION

       32 + 940 + 32 = 1004
       ====================================================================== */

    .contact-map{
        width:100%;
        height:1004px;

        padding:32px 16px;
    }


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

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

    .contact-map__inner{
        position:relative;

        width:100%;
        max-width:none;
        height:940px;

        margin:0;

        padding:8px;
    }


    /* ======================================================================
       CARD

       345 × 446
       ====================================================================== */

    .contact-map__card{
        position:relative;

        z-index:2;

        width:100%;
        height:446px;

        padding:24px;

        gap:24px;
    }


    /* ======================================================================
       MAP VIEWPORT

       card starts at 8
       card = 446

       8 + 446 = 454

       viewport:
       345 × 478

       PIN = центр этого viewport.
       ====================================================================== */

    .contact-map__map-viewport{
        top:454px;
        right:8px;
        bottom:8px;
        left:8px;
    }


    .contact-map__iframe{
        --map-ui-crop:72px;
    }


    /* ======================================================================
       PIN
       ====================================================================== */

    .contact-map__office-pin{
left:calc(50% - 16px);
top:calc(50% - 29px);

        width:48px;
        height:48px;
    }


    .contact-map__office-pin svg{
        width:48px;
        height:48px;
    }


    /* ======================================================================
       BADGE
       ====================================================================== */

    .contact-map__badge{
        height:24px;

        padding:0 8px;

        font-size:14px;
        line-height:18px;
        letter-spacing:-.3px;
    }


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

    .contact-map__title{
        width:100%;

        font-size:32px;
        line-height:30px;
        letter-spacing:-1px;

        white-space:normal;
    }


    .contact-map__title br{
        display:none;
    }


    /* ======================================================================
       CONTACT ITEMS
       ====================================================================== */

    .contact-map__item{
        width:100%;
        height:64px;

        gap:12px;
    }


    .contact-map__label{
        height:24px;

        padding:0 8px;

        font-size:14px;
        line-height:18px;
        letter-spacing:-.3px;
    }


    .contact-map__value{
        font-size:20px;
        line-height:24px;
        letter-spacing:-.6px;

        white-space:nowrap;
    }


    /* ======================================================================
       SOCIAL
       ====================================================================== */

    .contact-map__social{
        width:100%;
        height:60px;

        gap:12px;
    }


    .contact-map__social-list{
        width:100%;
        height:24px;

        display:flex;

        flex-direction:row;
        flex-wrap:wrap;

        align-items:center;
        align-content:center;

        gap:12px;
    }


    .contact-map__social-link{
        width:24px;
        height:24px;

        flex:0 0 24px;
    }


    .contact-map__social-icon{
        width:24px;
        height:24px;
    }


    .contact-map__social-icon img{
        width:24px;
        height:24px;
    }


    /* ======================================================================
       MAP BUTTON AREA
       ====================================================================== */

    .contact-map__map-action{
        position:absolute;

        left:8px;
        right:8px;
        bottom:8px;

        width:auto;
        height:478px;

        padding:16px;

        display:flex;
        flex-direction:column;

        justify-content:flex-end;
        align-items:flex-start;

        pointer-events:none;
    }


    /* ======================================================================
       BUTTON
       ====================================================================== */

    .contact-map__map-button{
        width:100%;
        height:56px;

        flex:0 0 56px;

        padding:0 24px;

        font-size:16px;
        line-height:22px;
        letter-spacing:-.4px;

        pointer-events:auto;
    }

}