/* =====================================================================
 * YARMETRO UI KIT -- РАСКЛАДКА МОБИЛЬНОЙ СТРАНИЦЫ
 * Файл: local/templates/metro/ui/mobile-layout-kit.css
 * Подключается в header.php последним из набора ui/*.
 * Правила словами -- ui/README.md, раздел «Низ мобильной страницы».
 *
 * ГЛАВНОЕ ПРАВИЛО
 *   Низ мобильной страницы занят плавающими панелями: нижняя навигация
 *   и, на карточках, плашка менеджера. Они выпадают из потока, поэтому
 *   последний блок страницы обязан иметь под собой запас высоты. Запас
 *   считает скрипт (ymBottomSpace в js/scripts.js) по фактической высоте
 *   панелей и кладёт в --ym-bottom-space. Высоту НЕ хардкодить и своих
 *   padding-bottom «на глаз» по страницам не расставлять.
 * ===================================================================== */

@media (max-width: 767px) {
    body {
        padding-bottom: var(--ym-bottom-space, 0px);
    }
}

/* =====================================================================
 * YARMETRO_ITEM80: задержка на тапах по кнопкам мобильного интерфейса.
 * iOS игнорирует user-scalable=no в viewport, поэтому Safari продолжает
 * ждать возможный второй тап (двойной тап = зум) и отдаёт click примерно
 * через треть секунды. Со стороны это ровно тот «лаг» на переключении
 * вкладок в избранном. touch-action: manipulation говорит браузеру, что
 * двойного тапа здесь не будет, и клик приходит сразу.
 * Обработчики тут ни при чём -- они отрабатывают за 2 мс, замерял.
 * ===================================================================== */
@media (max-width: 767px) {
    .ym-mobile-nav a,
    .ym-mobile-nav button,
    [data-mobile-saved-tab],
    [data-mobile-filter-open],
    [data-mobile-save],
    [data-mobile-save-search],
    .ym-mobile-sheet button,
    .ym-mobile-sheet label,
    .metro-catalog-card button,
    .metro-catalog-card a,
    .ym-map-preview-card button,
    .ym-map-preview-card a {
        touch-action: manipulation;
    }
}


/* =====================================================================
 * YARMETRO_ITEM87_ROUND28 -- КНОПКА «НАВЕРХ».
 * Отдельный кружок, а не часть нижнего меню: меню -- это разделы сайта,
 * а «наверх» -- действие на странице. Смешивать нельзя, иначе человек
 * будет искать её среди разделов.
 * Стоит над нижним рядом с зазором. Высоту низа считает
 * --ym-bottom-space (нижнее меню + плашка менеджера, см. ITEM59) --
 * своих чисел здесь не зашиваем, иначе на карточке объекта кнопка
 * уедет под плашку «Позвонить».
 * Логика показа -- initToTop() в js/scripts.js.
 * ===================================================================== */
.ym-to-top { display: none; }

@media (max-width: 767px) {
    .ym-to-top {
        position: fixed;
        z-index: 95;
        right: 12px;
        bottom: calc(var(--ym-bottom-space, 72px) + 14px);
        display: flex;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 50%;
        color: #07183f;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 6px 18px rgba(7, 24, 63, .22);
        cursor: pointer;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity .18s ease, transform .18s ease;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    .ym-to-top.is-on { opacity: 1; transform: translateY(0); }
    .ym-to-top:active { transform: scale(.94); }
    .ym-to-top[hidden] { display: none; }
}


/* =====================================================================
 * YARMETRO_ITEM95_ROUND28 -- ЛИСТАНИЕ ФОТО И ПРОКРУТКА СТРАНИЦЫ.
 * Задача двойная и решается ОДНИМ значением, а не запретом:
 *   -- палец повёл вбок -- страница стоит, листается фото;
 *   -- палец повёл вниз -- страница едет, фото стоит.
 *
 * touch-action: pan-y = «вертикаль забирает браузер, горизонталь отдаём
 * скрипту». Именно то, что нужно: вертикальный свайп по фотографии
 * прокручивает страницу как обычно, а горизонтальный браузер не трогает --
 * его целиком получает слайдер.
 *
 * НЕ ставить сюда pan-x: это запрет вертикали, и со страницы становится
 * невозможно уехать вниз, если палец лёг на большое фото. Проверено на
 * объекте 87295 -- так делать нельзя.
 * Диагональный жест достаётся браузеру (у слайдера touchAngle 30°) -- это
 * правильное поведение, не баг.
 *
 * Ленты с НАТИВНОЙ горизонтальной прокруткой (миниатюры, остатки по
 * комнатности, корпуса, лента фото раздела) здесь сознательно не
 * перечислены: у них overflow-x, браузер сам разводит жесты верно, а любой
 * touch-action только мешает.
 * ===================================================================== */
@media (max-width: 767px) {
    .metro-catalog-card__media,
    .metro-catalog-card__track,
    .catalog-item__img-mobile,
    .ym-nb-gallery,
    .metro-related__media,
    .ym-rel-media {
        touch-action: pan-y;
    }
}

/* =====================================================================
 * YARMETRO_ITEM94_ROUND28 -- «ОСНОВНАЯ ИНФОРМАЦИЯ»: ЗНАЧЕНИЕ ВПРАВО.
 * Короткие значения («500 кв. м», «1») прижаты к правому краю, а
 * длинное («Производственное помещение») переносилось на две строки и
 * прилипало влево -- колонка значений выглядела рваной.
 * Выравниваем по правому краю сам текст, а не только блок.
 * ===================================================================== */
@media (max-width: 767px) {
    .metro-detail-facts li {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        justify-content: space-between;
    }
    .metro-detail-facts li > span:first-child {
        flex: 0 1 auto;
        text-align: left;
    }
    .metro-detail-facts li > span:last-child {
        flex: 1 1 auto;
        min-width: 0;
        text-align: right;
    }
}


/* =====================================================================
 * YARMETRO_ITEM88_ROUND28 -- НИЖНЕЕ МЕНЮ: ОДНА ПОДСВЕТКА (вариант А).
 * Было две, и они спорили: бежевая плашка у раздела «по классу на body»
 * и вечный красный кружок у «Карты», который горел независимо от того,
 * открыта карта или нет. По картинке нельзя было понять, где ты.
 *
 * Стало: активный раздел лежит на тёмно-синей пилюле, подпись и значок
 * белые. Метка ровно одна и всегда одна.
 * Пин «Карты» остаётся красным в обоих состояниях -- это её фирменный
 * знак, по нему её и находят.
 *
 * Единственный источник состояния -- класс is-active, его ставит
 * syncMobileNav в footer.php. Никаких вторых подсветок «по классу
 * раздела на body» больше не заводим: именно они и создали путаницу.
 * ===================================================================== */
@media (max-width: 767px) {
    /* гасим вторую подсветку -- ту, что светила «по разделу» */
    .body--main .ym-mobile-nav__home,
    .body--catalog .ym-mobile-nav__search {
        color: var(--metro-mobile-muted);
        background: transparent;
    }

    .ym-mobile-nav a {
        transition: background-color .16s ease, color .16s ease;
    }
    .ym-mobile-nav a.is-active {
        color: #fff;
        background: #07183f;
        font-weight: 600;
    }
    .ym-mobile-nav a.is-active svg { stroke: #fff; }

    /* вариант А: пин остаётся красным и на тёмной пилюле */
    .ym-mobile-nav__map.is-active svg {
        color: #fff;
        background: #e7182c;
    }

    /* счётчик избранного на тёмной пилюле теряется -- обводим фоном пилюли */
    .ym-mobile-nav a.is-active b {
        box-shadow: 0 0 0 2px #07183f;
    }
}


/* =====================================================================
 * YARMETRO_ITEM96_ROUND28 -- БЛОК «НОВЫЕ ПОСТУПЛЕНИЯ» НА ГЛАВНОЙ.
 * Своего оформления карточек здесь нет и быть не должно: сетке дан класс
 * body--catalog, и карточки получают ровно тот вид, что в выдаче
 * (см. ui/README.md, «Где лежат стили карточки выдачи»).
 * Тут только рамка блока: заголовок, отступы и кнопка «Показать ещё» --
 * та же самая, что у «Вам могут подойти».
 * ===================================================================== */
.ym-new-arrivals {
    margin: 26px 0 0;
}
.ym-new-arrivals > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
}
.ym-new-arrivals > header h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
}
.ym-new-arrivals__more {
    width: 100%;
    margin-top: 14px;
}
.ym-new-arrivals__more[hidden] { display: none; }

@media (max-width: 767px) {
    .ym-new-arrivals {
        margin: 22px 0 0;
        padding: 0 12px;
    }
    .ym-new-arrivals > header h2 { font-size: 20px; }
    .ym-new-arrivals__more { min-height: 46px; }
}


/* =====================================================================
 * YARMETRO_ITEM102_ROUND28 -- КНОПКА «ПОКАЗАТЬ ЕЩЁ».
 * Досталась из старой темы: серая рамка 1 px, радиус 4, серый текст --
 * выглядит как кнопка из нулевых и теряется на фоне карточек.
 * Приводим к тому же виду, что и остальные кнопки мобильного сайта:
 * белая пилюля, радиус 14, тёмно-синяя подпись, мягкая тень, отдача
 * на нажатие.
 * Правим в ОДНОМ месте -- этот же класс носит кнопка в «Вам могут
 * подойти» на карточках объекта и ЖК. Своей кнопки для главной не
 * заводим.
 * ===================================================================== */
@media (max-width: 767px) {
    .metro-related__more,
    .nb-related-more,
    .ym-new-arrivals__more {
        display: flex;
        width: 100%;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 16px;
        border: 0;
        border-radius: 14px;
        color: #07183f;
        background: #fff;
        box-shadow: 0 2px 10px rgba(7, 24, 63, .14), inset 0 0 0 1px #e4e8ee;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.2;
        text-transform: none;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: transform .12s ease, box-shadow .16s ease;
    }
    .metro-related__more:active,
    .nb-related-more:active,
    .ym-new-arrivals__more:active {
        transform: scale(.98);
        box-shadow: 0 1px 6px rgba(7, 24, 63, .14), inset 0 0 0 1px #d7dde6;
    }
    .metro-related__more[disabled],
    .ym-new-arrivals__more[disabled] { opacity: .55; }
}