/*
 * Marden Property 2026 — страница «Контакты» (/test-contacts).
 * Макета на страницу нет: структура собрана по брифу (СТРАНИЦА 8) и
 * дизайн-системе. Здесь только специфика страницы — примитивы в ui.css.
 */

/* ================= Блок 1 — заголовок и общие контакты ================= */

.m-ct-intro {
    background: var(--color-ui-surface);
    padding: clamp(40px, 6vw, 80px) 0 clamp(32px, 4vw, 56px);
}

.m-ct-intro__head {
    max-width: 760px;
}

.m-ct-intro__title {
    margin-top: var(--space-150);
}

.m-ct-intro__lead {
    max-width: 640px;
    margin-top: var(--space-250);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: var(--color-text-secondary);
}

.m-ct-intro__channels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-300);
    margin: clamp(32px, 4vw, 48px) 0 0;
    padding: 0;
    list-style: none;
}

.m-ct-channel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-100);
    padding: var(--space-300);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-sm);
    background: var(--color-ui-surface);
    box-shadow: var(--shadow-xs);
}

.m-ct-channel .m-icon-box {
    margin-bottom: var(--space-100);
}

.m-ct-channel__label {
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.m-ct-channel__value {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-hit);
    font-size: var(--fs-h4);
    font-weight: 700;
    color: var(--color-ui-primary);
    word-break: break-word;
}

.m-ct-channel__value:hover {
    color: var(--color-text-link);
}

/* Телефон колл-центра — главный канал страницы, крупная типографика по брифу */
.m-ct-channel--lead .m-ct-channel__value {
    font-size: clamp(22px, 3.4vw, 30px);
    letter-spacing: -.02em;
}

.m-ct-channel__note {
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body);
    color: var(--color-text-secondary);
}

/* ================= Блок 2 — офисы по городам ================= */

.m-ct-offices__layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--space-400);
    align-items: start;
}

/* Селект городов нужен только на мобильном */
.m-ct-offices__picker {
    display: none;
}

.m-ct-offices__tabs {
    display: flex;
    flex-direction: column;
    padding: var(--space-100);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-sm);
    background: var(--color-ui-surface);
    box-shadow: var(--shadow-xs);
}

.m-ct-offices__tab {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: var(--control-hit);
    padding: 10px var(--space-200);
    border: none;
    border-left: 2px solid transparent;
    border-radius: var(--radius-xs);
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover);
}

.m-ct-offices__tab-city {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--color-text-primary);
}

.m-ct-offices__tab-role {
    font-size: var(--fs-overline);
    color: var(--color-text-secondary);
}

.m-ct-offices__tab:hover {
    background: var(--color-ui-background);
}

.m-ct-offices__tab[aria-selected="true"] {
    background: var(--color-brand-tint);
    border-left-color: var(--color-brand-primary);
}

.m-ct-offices__tab[aria-selected="true"] .m-ct-offices__tab-city {
    color: var(--color-text-link);
}

/* Панель офиса: карточка контактов + карта */
/* display: grid перебивает штатное [hidden] браузера — возвращаем его явно */
.m-ct-office[hidden] {
    display: none;
}

.m-ct-office {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-300);
    align-items: start;
}

.m-ct-office:focus-visible {
    outline: none;
}

.m-ct-office__card {
    padding: var(--space-400);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-sm);
    background: var(--color-ui-surface);
    box-shadow: var(--shadow-sm);
}

.m-ct-office__city {
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--color-ui-primary);
}

.m-ct-office__role {
    margin-top: var(--space-50);
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-accent-text);
}

.m-ct-office__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-200);
    margin: var(--space-300) 0 0;
    padding: var(--space-300) 0 0;
    border-top: 1px solid var(--color-divider);
    list-style: none;
}

.m-ct-office__row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-150);
}

.m-ct-office__icon {
    display: flex;
    flex: none;
    margin-top: 2px;
    color: var(--color-brand-primary);
}

.m-ct-office__cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.m-ct-office__label {
    font-size: var(--fs-overline);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.m-ct-office__value {
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: var(--lh-snug);
    color: var(--color-text-primary);
    word-break: break-word;
}

.m-ct-office__link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--color-text-link);
}

.m-ct-office__link:hover {
    color: var(--color-ui-primary);
}

/* ================= Карта-заглушка ================= */

/*
 * Ключа к картографическому сервису у сайта нет, внешние скрипты подключать
 * нельзя. Контейнер показывает адрес и координаты, маршрут открывается
 * ссылкой в стороннем сервисе — тот же приём, что на странице объекта.
 */
.m-ct-map {
    display: flex;
    flex-direction: column;
    gap: var(--space-200);
}

.m-ct-map__canvas {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-ui-surface);
    background-image: linear-gradient(var(--color-divider) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-divider) 1px, transparent 1px);
    background-size: 38px 38px;
}

.m-ct-map__marker {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -100%);
    color: var(--color-brand-primary);
}

.m-ct-map__label {
    position: absolute;
    left: var(--space-200);
    right: var(--space-200);
    bottom: 14px;
    padding: 6px var(--space-150);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .94);
    font-size: var(--fs-caption);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-primary);
}

.m-ct-map__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-100) var(--space-300);
}

.m-ct-map__coords {
    font-size: var(--fs-caption);
    color: var(--color-text-secondary);
}

.m-ct-map__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-hit);
    font-size: var(--fs-body-sm);
}

/* ================= Блок 3 — форма обращения ================= */

.m-ct-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}

.m-ct-form__lead {
    max-width: 440px;
    margin-top: var(--space-200);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: var(--color-on-dark-muted);
}

.m-ct-form__requisites {
    margin-top: var(--space-500);
    padding-top: var(--space-400);
    border-top: 1px solid var(--color-on-dark-faint);
}

.m-ct-form__overline {
    margin-bottom: var(--space-150);
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.m-ct-form__requisite {
    max-width: 460px;
    margin-bottom: var(--space-100);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body);
    color: var(--color-on-dark-muted);
}

.m-ct-form__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-150);
    margin: var(--space-300) 0 0;
    padding: 0;
    list-style: none;
}

.m-ct-form__social-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-hit);
    height: var(--control-hit);
    border: 1px solid var(--color-on-dark-faint);
    border-radius: 50%;
    font-size: var(--fs-body-sm);
    font-weight: 700;
    color: var(--color-on-dark-strong);
    transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover);
}

.m-ct-form__social-item:hover {
    background: var(--c-white);
    border-color: var(--c-white);
    color: var(--color-ui-primary);
}

.m-ct-form__card {
    padding: var(--space-500);
    border-radius: var(--radius-md);
    background: var(--c-white);
    color: var(--color-text-primary);
}

.m-ct-form__form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Многострочное поле: те же обводка и радиус, что у m-input, высота своя */
.m-ct-form__textarea {
    height: auto;
    min-height: 120px;
    padding: var(--space-150) var(--space-200);
    line-height: var(--lh-body);
    resize: vertical;
}

/* ================= Адаптив ================= */

@media (max-width: 1023px) {
    .m-ct-office {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Тач-цель телефона и почты в карточке офиса — не меньше 44px */
    .m-ct-office__link {
        min-height: var(--control-hit);
    }

    .m-ct-map__canvas {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 767px) {
    /* Восемь вкладок в колонку занимают экран целиком — на мобильном селект */
    .m-ct-offices__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-300);
    }

    .m-ct-offices__picker {
        display: flex;
    }

    .m-ct-offices__tabs {
        display: none;
    }

    .m-ct-office__card {
        padding: var(--space-300);
    }

    .m-ct-map__canvas {
        aspect-ratio: auto;
        height: 220px;
    }

    .m-ct-form__card {
        padding: var(--space-300);
    }

    .m-ct-channel {
        padding: var(--space-250);
    }
}