/* Контакты: тёмная карта фоном первого экрана (js/contacts-map.js).
   Слева заголовок, телефон, почта, соцсети; справа адрес (к нему линия от офиса) и карточка организации */

/* Первый экран вместе с подвалом — ровно в высоту окна. Точную высоту (окно − шапка − подвал)
   ставит js/contacts-map.js в --contacts-hero-h; здесь запасное значение по типичным размерам */
.intro.contacts-hero {
    display: flex;
    flex-direction: column;
    min-height: var(--contacts-hero-h, calc(100svh - 84px - 77px));
    margin-bottom: 0;
    overflow: hidden;
}

.contacts-hero > .intro__container {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
}

/* Всё поверх карты; сама раскладка пропускает мышь к карте — перехватывают только блоки с текстом */
.contacts-hero .intro__container > :not(.intro__bg) {
    position: relative;
    z-index: 2;
}

.contacts-hero__inner {
    display: grid;
    flex: 1;
    grid-template-columns: 1fr 302px;
    gap: 32px;
    padding: 32px 0 64px;
    pointer-events: none;
}

.contacts-hero__main,
.contacts-hero__side {
    pointer-events: auto;
    color: var(--color-whte);
}

.contacts-hero__main {
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
}

/* Рамка с рисунком (comic-draw.js) — полупрозрачная, чтобы не спорить с картой.
   Не «прилипает» при прокрутке; пропускает мышь к карте везде, кроме своего содержимого */
.contacts-hero .intro__info {
    position: relative;
    top: auto;
    margin-bottom: 0;
    pointer-events: none;
}

.contacts-hero .intro__info > :not(.intro__decor):not(.intro__pencil) {
    pointer-events: auto;
}

.contacts-hero .intro__pencil {
    opacity: .4;
}

/* Если карандаш не запустился — обычная CSS-рамка, тоже полупрозрачная */
.contacts-hero .intro__info.info-visible:not(.has-pencil) {
    border-color: rgba(var(--color-whte--rgb), .4);
}

.contacts-hero .intro__info.info-visible:not(.has-pencil)::before {
    border-bottom-color: rgba(var(--color-whte--rgb), .4);
}

.contacts-hero .intro__decor {
    opacity: .4;
}

.contacts-hero__title {
    margin: 0;
}

.contacts-hero__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.25;
}

/* Как на других страницах: правый блок вверху, первой — «Карточка организации», под ней офис */
.contacts-hero__side {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 15px;
    line-height: 1.45;
}

/* «Карточка организации» — в стиле тегов (.intro__tag из styles.css), вместо «#» — иконка «скачать документ» */
.contacts-hero__main .contacts-hero__pdf {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 0;
}

/* .intro__tag — чтобы перебить общее «.intro__tag span { top: 2px }» из styles.css */
.intro__tag .contacts-hero__pdf-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    position: relative;
    top: 0;
    left: -2px;
    background: var(--color-alt);
    -webkit-mask: url("../img/icons/doc-download.svg") center / contain no-repeat;
    mask: url("../img/icons/doc-download.svg") center / contain no-repeat;
}

/* «Наш офис» — зелёная плашка-кнопка, в неё упирается линия от точки офиса на карте.
   По нажатию — меню «Открыть в Яндекс Картах / Google Картах» (js/contacts-map.js) */
.contacts-hero__office-wrap {
    position: relative;
    align-self: flex-start;
}

.contacts-hero__office {
    display: block;
    padding: 6px 14px;
    border: 0;
    border-radius: 20px;
    background: var(--color-alt);
    color: var(--color-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.contacts-hero__office:hover,
.contacts-hero__office[aria-expanded="true"] {
    box-shadow: 0 0 0 4px rgba(var(--color-alt--rgb), .25);
}

.contacts-hero__office-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    padding: 6px;
    border-radius: 16px;
    background: rgba(31, 32, 31, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    animation: officeMenuIn .18s ease-out;
}

.contacts-hero__office-menu[hidden] {
    display: none;
}

.contacts-hero .contacts-hero__office-menu a {
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--color-whte);
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
}

.contacts-hero .contacts-hero__office-menu a:hover,
.contacts-hero .contacts-hero__office-menu a:focus-visible {
    background: rgba(var(--color-alt--rgb), .2);
    color: var(--color-alt);
    outline: none;
}

@keyframes officeMenuIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

/* Строки адреса; самая длинная — «Бизнес-центр «Семёновский 15»» — влезает в колонку 302px при 17px */
.contacts-hero__address {
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.35;
}

.contacts-hero__muted {
    font-size: 13px;
    color: rgba(var(--color-whte--rgb), .6);
}

.contacts-hero a:not(.btn):not(.images-block__item):not(.intro__tag):not([role="menuitem"]) {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(var(--color-whte--rgb), .35);
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    transition: color .2s ease, text-decoration-color .2s ease;
}

.contacts-hero a:not(.btn):not(.images-block__item):not(.intro__tag):not([role="menuitem"]):hover {
    color: var(--color-alt);
    text-decoration-color: currentColor;
}

/* «Москва» — крупнее остального адреса */
.contacts-hero__city {
    display: inline-block;
    margin-bottom: 4px;
    font-size: 28px;
    line-height: 1.15;
}

/* Фото бизнес-центра под адресом, по клику — увеличение (fancybox) */
.contacts-hero__photo {
    display: block;
    overflow: hidden;
    border-radius: 16px;
    aspect-ratio: 16 / 9;
}

.contacts-hero__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.contacts-hero__photo:hover img {
    transform: scale(1.04);
}

/* Метро у адреса: «3 минуты от [М] Семёновская (3)» — логотип метро и кружок линии, строка не разрывается */
.contacts-hero__metro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.contacts-hero__metro-logo {
    width: 1.1em;
    height: .76em;
    flex: none;
}

/* Номер линии в кружке её цвета: 3 — Арбатско-Покровская */
.contacts-hero__metro-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    background: #0078be;
    color: #fff;
    font-size: .8em;
    font-weight: 700;
    line-height: 1;
}

/* Склейка «д. 15», «офис 707» — не через  : в шрифте Gotham у неразрывного пробела огромная ширина */
.contacts-hero__nowrap {
    white-space: nowrap;
}

/* Соцсети — «живая стопка» как у технологий (news.list/tech/script.js) */
.contacts-hero .images-block {
    align-self: stretch;
    justify-content: flex-start;
    margin-bottom: 0;
}

/* Карта */
.intro__bg.contacts-map {
    z-index: 0;
    max-height: none;
    overflow: hidden;
    pointer-events: auto;
    background: #1b1c1b;
}

.contacts-map__canvas {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.contacts-map.is-loaded .contacts-map__canvas {
    opacity: 1;
}

/* Подложка Яндекс Карт (светлая «клетка», видна, пока не пришли тайлы) лежит вне слоя .contacts-map__ground
   и фильтр не получает — из-за неё первый экран моргал светлым. Красим в цвет фона блока */
.contacts-map [class*="-map-bg"] {
    background: #1b1c1b !important;
}

/* Тёмный стиль: карта в сером, инвертированная и приглушённая */
.contacts-map__ground {
    filter: grayscale(1) invert(1) brightness(.62) contrast(1.15);
}

/* Копирайт и ссылки Яндекса убирать нельзя (условия API) — перекрашиваем в тон тёмной карте */
.contacts-map [class$="-copyrights-pane"] {
    filter: grayscale(1) invert(1) brightness(.7);
    opacity: .8;
}

/* «Создать свою карту» — реклама конструктора, не копирайт: убираем */
.contacts-map [class$="-gototech"] {
    display: none !important;
}

/* Затемнение под текстом: слева-сверху под заголовком, справа-сверху под карточкой и адресом */
.contacts-map__shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 60% at 0% 0%, rgba(20, 21, 20, .8), rgba(20, 21, 20, 0)),
        radial-gradient(ellipse 40% 75% at 100% 0%, rgba(20, 21, 20, .85), rgba(20, 21, 20, 0));
}

.contacts-map__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s ease;
}

.contacts-map.is-ready .contacts-map__overlay {
    opacity: 1;
}

.contacts-map__line {
    fill: none;
    stroke: var(--color-alt);
    stroke-width: 2;
    stroke-linecap: round;
}

.contacts-map__dot {
    fill: var(--color-alt);
    stroke: var(--color-whte);
    stroke-width: 2;
}

.contacts-map__ring {
    fill: none;
    stroke: var(--color-alt);
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    animation: contactsMapPulse 2.4s ease-out infinite;
}

@keyframes contactsMapPulse {
    0% {
        opacity: .9;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(3.4);
    }
}

@media (max-width: 767.98px) {
    .contacts-hero__inner {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 20px 0 48px;
    }

    .contacts-hero__links {
        font-size: 22px;
    }

    /* Правый блок под рамкой — по той же линии, что и текст в рамке (рамка: 1px + 25px отступ) */
    .contacts-hero__side {
        padding: 0 26px;
    }

    /* «Наш офис» — к правому краю экрана, меню раскрывается от правого края */
    .contacts-hero__office-wrap {
        align-self: flex-end;
        margin-top: 8px;
    }

    .contacts-hero__office-menu {
        right: 0;
        left: auto;
    }

    .contacts-hero__address {
        font-size: 16px;
    }

    .contacts-map__shade {
        background:
            linear-gradient(180deg, rgba(20, 21, 20, .8) 0%, rgba(20, 21, 20, 0) 38%),
            linear-gradient(0deg, rgba(20, 21, 20, .88) 0%, rgba(20, 21, 20, 0) 45%);
    }
}

/* На телефонах — как на остальных страницах: значки по центру (≤620px, как .intro__items),
   «Карточка организации» во всю ширину с текстом по центру (≤480px, как .intro__tag) */
@media (max-width: 620px) {
    .contacts-hero .images-block {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .contacts-hero__main .contacts-hero__pdf {
        align-self: stretch;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contacts-map__ring {
        animation: none;
        opacity: 0;
    }
}