/* ==========================================================================
   Страница "Контакты" (contacts.html)
   Десктоп не трогаем — только адаптация под мобильный.
   ========================================================================== */

@media (max-width: 860px) {

    /* ---- Переключатель адресов (.contacts-switcher/.switcher) ----
       На десктопе — 6 пунктов в ряд через display:inline-block с
       margin-right:60px/margin-left:50px у самого .switcher — рассчитано
       на широкий экран, на мобильном не помещается ни в один ряд. Делаем
       вертикальный список кнопок на всю ширину, активный пункт — заливкой
       фона вместо нижней подчёркивающей полоски (её на узкой карточке
       почти не видно). */
    /* .contacts (весь блок страницы) держит декоративное фото
       STERN_Skolkovo.png фоном под всем текстом — у кнопок переключателя
       и параграфов нет своего непрозрачного фона, так что фото
       просвечивает и местами затрудняет чтение текста. Убираем на
       мобильном, как и на других страницах с этим паттерном. */
    /* На десктопе актуальный (второй, побеждающий по каскаду) .contacts
       уже background-size:cover + color:#FFF — картинка сама по себе
       достаточно тёмная (Сколково, размытое фото), и текст поверх неё
       белый по дизайну. Моя более ранняя правка добавляла белую
       полупрозрачную подложку — на деле получался просто белый фон
       (белый текст на белой подложке). Убираем подложку — оставляем как
       на ПК: тёмное фото, белый текст поверх без карточки. Переключатель
       адресов на своём непрозрачном белом фоне (см. .item-switcher
       ниже) — с фоновым фото не конфликтует. .contacts-map — тот же фон,
       чтобы не было белого разрыва между переключателем и плашкой
       адреса/карты (просьба "фон продолжается до наименования и
       адреса"). */
    .contacts,
    .contacts-map {
        background-image: url("../img/contacts-head.jpg");
        background-size: cover;
        background-position: center;
    }
    .contacts-switcher {
        font-size: 16px;
    }
    .contacts-switcher .switcher {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-left: 0;
        margin-top: 12px;
        margin-bottom: 16px;
    }
    .contacts-switcher .switcher .item-switcher {
        display: block;
        margin-right: 0;
        padding: 12px 14px;
        background: #fff;
        border: 1px solid #E6E7E8;
        border-bottom: 1px solid #E6E7E8;
        border-radius: 6px;
        color: #4e4e4e;
    }
    .contacts-switcher .switcher .active {
        background: #27a3d0;
        border-color: #27a3d0;
        color: #FFF;
    }

    /* ---- Карта + плашка адреса (.contacts-map/.item-map/.item-map-plate) ----
       На десктопе карта на всю высоту 600px (100%-каскад через .item-map
       и .map-holder), а плашка с адресом — абсолютным блоком шириной
       535px поверх левой половины карты. На мобильном такая ширина не
       влезает, а от 100%-каскада высоты проще уйти совсем: карта — явная
       фиксированная высота на .map-holder (не проценты от родителя),
       плашка — обычным блоком в потоке СРАЗУ ПОД картой (не поверх),
       тот же приём "фото/карта сверху, детали под ней", что и везде на
       сайте.
       ВАЖНО: .item-map по умолчанию display:none (styles.css) — виден
       только активный (JS переключателя добавляет/убирает через
       show/hide по клику, первый — через инлайновый style="display:block"
       в разметке). Раньше тут стоял display:flex — перебивал display:none
       той же специфичностью, и на мобильном показывались ВСЕ карты сразу
       при первой загрузке (переключение по клику потом работало, т.к.
       jQuery проставляет инлайн-стиль, а он всегда сильнее класса). display
       здесь больше не трогаем — порядок "плашка → карта" теперь просто
       переставлен в самой разметке (см. HTML), а не через flex+order. */
    .contacts-map {
        height: auto;
    }
    .contacts-map .item-map {
        height: auto;
    }
    .contacts-map .map-holder {
        height: 280px;
    }
    .contacts-map .item-map-plate {
        position: static;
        width: 100%;
        box-sizing: border-box;
        margin-right: 0;
        margin-bottom: 0;
        top: auto;
        right: auto;
        padding: 20px 20px 20px 50px;
        font-size: 15px;
        line-height: 1.5;
    }
    .contacts-map .item-map-plate .item-title {
        font-size: 22px;
        margin-bottom: 15px;
    }

    /* ---- Блок соцсетей/контактов (.custom-contacts-table) ----
       Текст начинался с большим отступом сверху — одинокий <br> прямо в
       начале .container (виден только на этой странице, не тот случай,
       что общий br+br: тут ровно один тег) плюс .cell-info{padding-top:33px}
       десктопные — вместе давали "пустоту" перед текстом на фото. */
    .contacts .container > br:first-child {
        display: none;
    }
    /* .contacts{padding:58px 0 0} — ещё один источник отступа сверху,
       отдельно от <br> и .cell-info (уже убраны выше), сам блок .contacts
       тоже начинается с 58px пустоты перед контентом.
       У этого же правила padding-bottom:0 (значение "58px 0 0" — это
       top/right-left/bottom) — из-за этого margin-bottom у последнего
       элемента внутри (.switcher) "протекал" наружу за пределы блока
       (margin collapse): раз у .contacts нет своего нижнего padding,
       нечему остановить схлопывание нижнего отступа с соседом снаружи,
       и та часть уже рисовалась поверх белого фона страницы, а не фото.
       Чем больше margin-bottom ставили у .switcher, тем больше белой
       дыры получали. Отступ "фон ещё немного после кнопок" должен быть
       padding у самого .contacts — фон рисуется и через padding тоже. */
    .contacts {
        padding-top: 0 !important;
        padding-bottom: 20px !important;
    }
    .cell-info {
        padding-top: 12px !important;
    }
    .custom-contacts-table {
        font-size: 16px;
        line-height: 1.5;
    }
    /* .row (иконка + подпись + значение) — было flex-wrap:wrap, но
       переносилось только у длинных строк (Youtube-ссылка) — выглядело
       неровно (одни в одну строку, другие в две в разных местах).
       Переносим значение на новую строку ВСЕГДА, единообразно: подпись
       с иконкой в одной строке, ссылка/значение — строго под ней, с
       отступом под ширину иконки. */
    .custom-contacts-table .social-media .row {
        flex-wrap: wrap;
        row-gap: 2px;
    }
    .custom-contacts-table .social-media .row .item-value {
        flex-basis: 100%;
        margin-left: 52px;
    }
    .custom-contacts-table .icon {
        width: 32px;
    }
}