/*
====================================================================

Страница «Контакты»

Композиция повторяет визуал блока «Наш адрес» главной страницы
(assets/css/blocks/address.css): узкая лента, слева карта
(Яндекс-конструктор), справа фото фасада той же высоты, радиус
14px. Ширина ленты и стиль карты/фото сознательно продублированы
здесь числами, а не через @import - у страницы свой CSS-модуль
(inc/setup/setup.php, page_styles), который подключается только на
этом шаблоне.

Секция использует общий каркас .dd-front-section /
.dd-front-section__inner--narrow (section.css) - тот же клиренс
навбара, тот же паддинг и та же узкая лента, что у футера и блока
адреса на главной.

====================================================================
*/

.dd-contacts__title {
    margin: 0 0 28px;
    color: var(--dd-primary);
    text-align: center;
}

.dd-contacts__address {
    margin: 0 0 clamp(20px, 2.4vw, 32px);
    font-family: var(--dd-font-heading);
    font-weight: var(--dd-font-weight-medium);
    font-size: var(--dd-subtitle-size);
    text-align: center;
}

/* Глобальный a:hover красит ссылки красным - цвета заданы явно. */
.dd-contacts__address a {
    color: var(--dd-text);
}

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

.dd-contacts__details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: clamp(28px, 3vw, 40px);

    text-align: center;
}

.dd-contacts__phones,
.dd-contacts__line {
    margin: 0;
    font-size: var(--dd-card-text);
}

.dd-contacts__phones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
}

.dd-contacts__phones a,
.dd-contacts__line a {
    color: var(--dd-text);
}

.dd-contacts__phones a:hover,
.dd-contacts__phones a:focus-visible,
.dd-contacts__line a:hover,
.dd-contacts__line a:focus-visible {
    color: var(--dd-primary);
}

.dd-contacts__social {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-top: 8px;
}

.dd-contacts__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 32px;
}

.dd-contacts__social-link svg {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.dd-contacts__social-link--vk svg {
    width: 32px;
    height: 32px;
}

.dd-contacts__social-link--ok span {
    display: block;
    width: 48px;
    height: 48px;
    background-image: url("https://st-ok.cdn-vk.ru/res/assets/redesign2023_logo@2x_fmfomkrg.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 48px;
}

.dd-contacts__row {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(16px, 2vw, 24px);
}

.dd-contacts__map {
    height: 535px;
    overflow: hidden;

    background: var(--dd-primary-grey);
    border-radius: 14px;
}

/* Конструктор вставляет iframe со своими размерами - подгоняем. */
.dd-contacts__map iframe {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

.dd-contacts__photo-frame {
    display: block;
    height: 535px;
    border-radius: 14px;
}

.dd-contacts__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 900px) {

    .dd-contacts__row {
        grid-template-columns: 1fr;
    }

    .dd-contacts__map,
    .dd-contacts__photo-frame {
        height: 450px;
    }

}