/* ============================================================
   Contacts — сайдбар (3 блока) + карта Москвы
   ============================================================ */

.contacts {
    display: flex;
    align-items: stretch;
    background: var(--color-white);
    height: 900px;
}

/* ── Sidebar ── */
.contacts__sidebar {
    width: 380px;
    flex-shrink: 0;
    background: var(--color-white);
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.contacts__sidebar::-webkit-scrollbar {
    width: 6px;
}

.contacts__sidebar::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

.contacts__sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.contacts__block {
    position: relative;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contacts__block + .contacts__block {
    border-top: 1px solid var(--color-divider);
}

.contacts__block-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contacts__block-title {
    font-family: var(--font-neo);
    font-size: 36px;
    font-weight: 400;
    line-height: 42px;
    letter-spacing: -1px;
    color: var(--color-black);
    margin: 0 0 0 -1px;
}

.contacts__block-subtitle {
    font-family: var(--font-inter);
    font-size: 17px;
    font-weight: 400;
    line-height: 23px;
    color: rgba(0, 0, 0, 0.7);
    margin: 0;
}

/* ── Fields list ── */
.contacts__fields {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contacts__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contacts__field-label {
    font-family: var(--font-inter);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-text-muted);
}

.contacts__field-value {
    font-family: var(--font-neo);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-black);
    text-decoration: none;
}

a.contacts__field-value:hover,
a.contacts__field-value:focus-visible {
    color: var(--color-primary);
}

/* ── Actions (buttons under first block) ── */
.contacts__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contacts__btn {
    width: 100%;
}

.contacts__btn--mobile-only {
    display: none;
}

/* ── Map column ── */
.contacts__map {
    flex: 1;
    position: relative;
    min-height: 700px;
    background: var(--color-bg-light);
}

.contacts__map-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ── Map: office marker (built in JS) ── */
.contacts-map__flag svg {
    display: block;
    overflow: visible;
}

.contacts-map__label {
    background: var(--color-white);
    color: var(--color-black);
    font-family: var(--font-inter);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
}

.contacts-map__pole {
    background: #4a4a4a;
    border-radius: 1px;
}

/* ============================================================
   Tablet ≤ 1170px
   ============================================================ */
@media (max-width: 1170px) {
    .contacts__sidebar {
        width: 380px;
    }

    .contacts__block-title {
        font-size: 32px;
        line-height: 37px;
    }
}

/* ============================================================
   Mobile ≤ 640px
   ============================================================ */
@media (max-width: 640px) {
    .contacts {
        flex-direction: column;
        height: auto;
    }

    .contacts__sidebar {
        width: 100%;
        padding: 0;
        overflow-y: visible;
    }

    .contacts__block-title {
        font-size: 32px;
        line-height: 37px;
        letter-spacing: 0;
    }

    .contacts__actions {
        margin-top: 8px;
    }

    .contacts__btn--mobile-only {
        display: inline-flex;
    }

    .contacts__map {
        display: none;
    }
}