/* =====================================================================
 * YARMETRO UI KIT -- ФОТОГАЛЕРЕЯ КАРТОЧЕК
 * Файл: local/templates/metro/ui/mobile-gallery-kit.css
 * Подключается в header.php ПОСЛЕ mobile-redesign.css.
 * Правила словами -- в ui/README.md, раздел «Фотогалерея карточек».
 *
 * ГЛАВНОЕ ПРАВИЛО
 *   Галерея на сайте ОДНА. Любая карточка выдачи -- квартира, комната, дом,
 *   жилой комплекс -- использует общий слайдер каталога и его разметку:
 *   .metro-catalog-card__media[data-metro-card-slider] > __track > __slide,
 *   плюс счётчик, стрелки, пунктир .ym-card-dots и лента превью .ym-card-thumbs.
 *   Своих упрощённых галерей не делать: именно так появилась разница в
 *   поведении фото у новостроек и вторички.
 *
 * Здесь только общие размеры и метка типа карточки. Основное оформление
 * слайдера живёт в mobile-redesign.css -- дублировать его сюда не нужно,
 * иначе появится второй источник правды.
 * ===================================================================== */

:root {
    --ym-gal-badge-radius: 999px;
    --ym-gal-badge-bg: #e7182c;
    --ym-gal-badge-color: #fff;
    --ym-gal-badge-font: 11px;
}

/* метка типа объекта поверх фото (например «Новостройка») */
.ym-gal-badge,
.ym-nb-badge {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 2;
    padding: 5px 10px;
    border-radius: var(--ym-gal-badge-radius);
    color: var(--ym-gal-badge-color);
    background: var(--ym-gal-badge-bg);
    font-size: var(--ym-gal-badge-font);
    font-weight: 700;
    line-height: 1.2;
    pointer-events: none;
}

/* карточки одного списка держат одинаковую пропорцию фото */
.metro-catalog-card__media { position: relative; overflow: hidden; }

/* --- карточка жилого комплекса в каталоге -----------------------------
 * Атрибуты те же, что в разделе новостроек: срок сдачи плашкой в левом
 * верхнем углу фото, иконки-достоинства рядом с сердечком, прокручиваемый
 * ряд остатков по комнатности под адресом. */

.ym-nb-deadline {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 2;
    padding: 6px 11px;
    border-radius: 10px;
    color: #07183f;
    background: rgba(255,255,255,.94);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    pointer-events: none;
}

/* иконки-достоинства садятся слева от сердечка, в один ряд с ним */
.ym-nb-card .metro-catalog-card__save-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
/* Значки достоинств -- глифы те же, что в разделе новостроек
 * (local/new-buildings/style.css). Своих не рисуем.
 * YARMETRO_ITEM29: значки лежат СТОПКОЙ внахлёст -- каждый следующий
 * наезжает на предыдущий, поэтому нижний виден полумесяцем слева.
 * Вся стопка -- одна кнопка с одной общей подсказкой, чтобы рядом с
 * сердечком не выстраивался ряд иконок. */
/* YARMETRO_ITEM43_ROUND28: у шаблона есть своё правило
 * .metro-catalog-card__save-actions button -- белая плашка со скруглением и
 * тенью. Оно перебивало наше по весу селектора, и за значками появлялся
 * белый квадрат. Поэтому здесь селектор заведомо тяжелее. */
.ym-nb-card .metro-catalog-card__save-actions button.ym-nb-advs {
    height: 27px;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 0;
}
/* YARMETRO_ITEM44_ROUND28: значок обязан оставаться КРУГОМ.
 * Блок с сердечком -- флекс, он сжимал значки в овалы 22x27. */
.ym-nb-card .metro-catalog-card__save-actions .ym-nb-advs .nb-adv {
    flex: 0 0 27px;
    box-sizing: border-box;
    width: 27px;
    height: 27px;
    min-width: 27px;
    border-radius: 50%;
}

.ym-nb-advs {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* блок с сердечком -- флекс; без этого стопку сжимает и кружки становятся овалами */
    flex: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ym-nb-advs .nb-adv {
    display: inline-flex;
    flex: 0 0 27px;
    box-sizing: border-box;
    width: 27px;
    height: 27px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #dfe3e7;
    border-radius: 50%;
    background: #fff;
    color: #31363b;
    font-size: 14px;
    line-height: 1;
}
/* нахлёст: видно примерно половину нижнего значка -- полумесяц слева */
.ym-nb-advs .nb-adv + .nb-adv { margin-left: -14px; }
.ym-nb-advs .nb-adv svg { width: 16px; height: 16px; }

/* Общая подсказка. Лежит НЕ внутри карточки, а отдельным слоем на body:
 * у .metro-catalog-card__media стоит overflow: hidden, и подсказка внутри
 * него обрезалась -- со стороны выглядело как «нажимаю, ничего не происходит». */
.ym-nb-tipbox {
    position: fixed;
    z-index: 10000;
    max-width: 260px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #303336;
    color: #fff;
    text-align: left;
    font: 13px/1.4 Arial, sans-serif;
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
    pointer-events: none;
}
/* YARMETRO_ITEM45_ROUND28: строки подсказки разделяет короткая линия --
 * так перечисление читается, а не сливается в абзац. */
.ym-nb-tipbox span { display: block; }
.ym-nb-tipbox span + span { margin-top: 8px; padding-top: 8px; position: relative; }
.ym-nb-tipbox span + span::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 1px;
    background: rgba(255,255,255,.35);
}
/* НЕ трогаем position: блок с сердечком спозиционирован шаблоном в правом
 * верхнем углу фото, и переопределение уводило его влево, на плашку срока. */
.ym-nb-card .metro-catalog-card__save-actions { z-index: 4; }

/* YARMETRO_ITEM53_ROUND28 + ITEM55: тело карточки ЖК -- СЕТКА ИЗ ЯЧЕЕК.
 * Раньше это был флекс с переносом: длинное название ЖК занимало две строки
 * и сталкивало кнопки «Описание»/«На карте» вниз, а над рядом остатков
 * оставалась дыра. Теперь ячейка кнопок стоит на месте при любой длине
 * текста, а текст, если не помещается, обрезается многоточием.
 *   строка 1: слева текст, справа кнопки;
 *   строка 2: ряд остатков во всю ширину;
 *   строка 3: раскрытое описание. */
/* YARMETRO_ITEM57_4: воздух вокруг ряда остатков задаётся ОДНИМ числом --
 * отступом самого ряда (14 px сверху и столько же до красной кнопки).
 * Раньше сверху набегало 42 px из четырёх источников сразу: нижний отступ
 * адреса (10), нижний padding текстовой колонки (10), межстрочный зазор
 * сетки (8) и собственный отступ ряда (14). Снизу при этом не оставалось
 * ничего. Все лишние источники здесь обнулены -- добавлять новые нельзя. */
.ym-nb-card .ym-card-bodyrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 10px;
    row-gap: 0;
    flex-wrap: nowrap;
}
.ym-nb-card .ym-card-bodyrow > .metro-catalog-card__body-link { padding-bottom: 0; }
/* 12, а не 14: у ряда остатков снизу свои 2 px под полосу прокрутки --
 * в сумме получается ровно те же 14 px, что и сверху */
.ym-nb-card .ym-card-actions { margin-top: 12px; }
.ym-nb-card .ym-card-bodyrow > .metro-catalog-card__body-link {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}
.ym-nb-card .ym-card-bodyrow > .ym-card-tools { grid-column: 2; grid-row: 1; }
/* название в две строки максимум -- дальше многоточие */
.ym-nb-card .metro-catalog-card__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ym-nb-card .metro-catalog-card__address {
    /* нижний отступ снимаем: воздух до ряда остатков задаёт сам ряд */
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ряд остатков: прокручивается вбок, не переносится и не растягивает карточку.
 * Отступ сверху (до адреса) равен отступу снизу (до кнопки «Позвонить»). */
/* строку не задаём номером: описание вставляется в разметку ПЕРЕД остатками,
 * и порядок строк определяет сам DOM. С жёстким grid-row описание всегда
 * уезжало под остатки, хотя кнопка «Описание» стоит выше. */
.ym-nb-rooms {
    grid-column: 1 / -1;
    width: 100%;
    display: flex;
    gap: 8px;
    margin: 14px 0 0;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.ym-nb-rooms::-webkit-scrollbar { display: none; }
.ym-nb-card .ym-nb-desc { grid-column: 1 / -1; }

/* вес селектора поднят до .ym-nb-card: в разделе новостроек есть
 * «.nb button {font: inherit}», и без этого кнопка остатков брала кегль
 * страницы, а не свой */
.ym-nb-card .ym-nb-room {
    flex: 0 0 auto;
    min-width: 132px;
    /* кегль кнопки задаём явно: без него в каталоге срабатывал системный
     * размер кнопки, а на странице ЖК -- шрифт страницы, и одна и та же
     * плитка получалась разной высоты */
    font-size: 13px;
    /* межстрочный тоже свой: в разделе новостроек на .nb стоит 1.45,
     * и плитка становилась на 6 px выше, чем в выдаче каталога */
    line-height: normal;
    padding: 8px 10px;
    border: 1px solid #dce2ea;
    border-radius: 11px;
    background: #fff;
}
.ym-nb-room b { display: block; color: #07183f; font-size: 12px; }
.ym-nb-room i { display: block; margin-top: 2px; color: #07183f; font-size: 13px; font-weight: 700; font-style: normal; }
.ym-nb-room u { display: block; margin-top: 2px; color: #8794ab; font-size: 11px; text-decoration: none; }

/* раскрывающееся описание по кнопке «Описание» */
.ym-nb-desc {
    margin-top: 10px;
    /* длинный текст не растит карточку -- ячейка фиксированной высоты
     * со своей прокруткой, как в браузерной версии новостроек */
    max-height: 168px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 10px 12px;
    border-radius: 11px;
    color: #33415c;
    background: #f4f6fa;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-line;
}

/* YARMETRO_ITEM54_ROUND28: цвета значков достоинств -- ровно те же, что в
 * разделе новостроек (local/new-buildings/style.css). Там «готов» зелёный,
 * «огонь» тёплый, «паркинг» синий, «клубный дом» бежевый. Свои цвета не
 * придумываем -- значок должен выглядеть одинаково и там, и в каталоге. */
.ym-nb-advs .nb-adv--ready { border-color: #a8d8ae; background: #edf8ef; color: #198b2c; }
.ym-nb-advs .nb-adv--fire { border-color: #ffd1b8; background: #fff3eb; }
.ym-nb-advs .nb-adv--parking { border-color: #bdd4ff; background: #eff5ff; color: #276ef1; font-weight: 700; }
.ym-nb-advs .nb-adv--club { border-color: #d8c39f; background: #fbf7ef; }
.ym-nb-advs .nb-adv--club svg { width: 21px; height: 21px; }

/* YARMETRO_ITEM41_ROUND28: стрелки карусели. Правило, делающее их
 * абсолютными, записано в основном файле через класс на <body>, поэтому вне
 * каталога (на странице ЖК) стрелки оставались в потоке и падали под фото.
 * Привязываем к самой карточке -- тогда она одинаково выглядит везде. */
.ym-nb-card .metro-catalog-card__nav { position: absolute; }

/* YARMETRO_ITEM52_ROUND28: остатки по комнатности -- кнопки-ссылки:
 * нажатие открывает комплекс с выбранной комнатностью. */
.ym-nb-room {
    display: block;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s ease, background .15s ease;
}
.ym-nb-room:active { border-color: #e7182c; background: #fff5f6; }


/* ===================================================================
 * YARMETRO_ITEM81_82_ROUND28 -- КАРТОЧКА ЖК: РЯД КНОПОК И «ОСНОВНАЯ
 * ИНФОРМАЦИЯ».
 * Правило: избранное/копировать/поделиться на карточке ЖК -- те же
 * кнопки и тот же контракт data-mobile-*, что у карточек выдачи
 * (см. ui/README.md, раздел «Избранное и сохранённые поиски»).
 * Ряд кнопок стоит между лентой превью и картой, блок «Основная
 * информация» -- сразу под картой. Разметку строит
 * initNbDetailBlocks() в js/scripts.js: данные берутся из того, что
 * уже отрисовал раздел, поэтому исходные .nb-detail-location и
 * .nb-chips прячем (body.ym-nb-info-ready).
 * Шрифты карточки ЖК не меняем: базовый размер 15px, плашки -- та же
 * .nb-chip раздела. Мелкий шрифт вторички (13px) здесь не применяем.
 * Оба блока -- только мобильные: на десктопе раздел показывает свою
 * россыпь, поэтому по умолчанию display:none.
 * =================================================================== */
.ym-nb-detail-actions,
.ym-nb-info { display: none; }

@media (max-width: 767px) {

    /* --- п.83: сетка .nb-detail-visuals задана с gap в ПРОЦЕНТАХ.
     * Процентный row-gap Chrome считает от высоты контейнера: при расчёте
     * собственной высоты он берёт его за 0, а при раскладке детей --
     * уже реальные 3%. Пока строк было две, лишние ~30px никто не замечал;
     * с рядом кнопок и блоком «Основная информация» строк стало четыре,
     * контейнер оказался ниже содержимого на три зазора, и «Цены»
     * наехали на заголовок «Квартиры в комплексе».
     * Лечится только фиксированным row-gap. Колоночный отступ (десктоп)
     * не трогаем -- там процент считается от ширины и работает верно. */
    /* new-buildings/style.css грузится ПОСЛЕ этого файла, поэтому
     * перебиваем весом селектора, а не !important */
    .nb .nb-detail-visuals { row-gap: 20px; }

    .ym-nb-detail-actions {
        position: relative;
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 0;
    }

    /* --- п.85: кнопка проектной декларации --- */
    /* Ширины в ряду немного: три кнопки-иконки по 38 px и зазоры.
     * Поэтому кнопка без значка и на 13 px -- иначе подпись не влезает
     * и обрезается многоточием на узких экранах.
     * Селектор с двумя классами: new-buildings/style.css задаёт .nb button
     * и грузится позже. */
    .ym-nb-detail-actions .ym-nb-decl {
        flex: 1 1 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-width: 0;
        height: 38px;
        padding: 0 10px;
        border: 0;
        border-radius: 12px;
        color: #07183f;
        background: rgba(255, 255, 255, .93);
        box-shadow: 0 3px 10px rgba(7, 24, 63, .15);
        font-size: 13px;
        line-height: 1.2;
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform .12s ease, background-color .16s ease, color .16s ease;
    }
    .ym-nb-detail-actions .ym-nb-decl:active { transform: scale(.94); }
    .ym-nb-decl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ym-nb-decl.is-open { color: #fff; background: #07183f; }
    .ym-nb-decl-pop {
        position: absolute;
        z-index: 20;
        top: calc(100% + 8px);
        right: 0;
        left: 0;
        padding: 14px 16px;
        border-radius: 14px;
        color: #15181b;
        background: #fff;
        box-shadow: 0 10px 30px rgba(7, 24, 63, .18);
        font-size: 14px;
        line-height: 1.45;
    }
    .ym-nb-decl-pop::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 26px;
        width: 12px;
        height: 12px;
        border-radius: 2px;
        background: #fff;
        transform: rotate(45deg);
    }

    /* --- п.84: кнопки действий = кнопки карточки выдачи ---
     * Размеры, цвет, тень и активное состояние приходят из
     * .metro-catalog-card__save-actions button (mobile-redesign.css).
     * Здесь только снимаем абсолютное позиционирование, которое нужно
     * карточке (кнопки поверх фото) и не нужно здесь. */
    .ym-nb-detail-tools {
        position: static;
        flex: 0 0 auto;
        top: auto;
        right: auto;
    }

    /* --- «Основная информация» --- */
    .ym-nb-info {
        display: block;
        margin: 0;
        padding-top: 16px;
        border-top: 1px solid #e8ecf1;
    }
    /* .nb h2 раздела = 27px -- перебиваем весом селектора, а не !important */
    body.ym-nb-info-ready .ym-nb-info h2 {
        margin: 0 0 6px;
        color: #15181b;
        font-size: 18px;
        line-height: 1.25;
        font-weight: 600;
        text-align: left;
    }
    .ym-nb-info__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 14px;
        min-height: 46px;
        padding: 6px 0;
        border-bottom: 1px solid #f0f2f5;
    }
    .ym-nb-info__row:last-child { border-bottom: 0; }
    .ym-nb-info__label {
        color: #747b82;
        font-size: 15px;
        line-height: 1.45;
    }
    .ym-nb-info__value {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        min-width: 0;
        color: #15181b;
        font-size: 15px;
        line-height: 1.45;
        text-align: right;
    }
    .ym-nb-info__value > span { display: block; }
    .ym-nb-info__value b { color: #e7182c; font-size: 15px; font-weight: 600; }
    .ym-nb-info .nb-chip { margin: 0; padding: 6px 11px; font-size: 15px; }

    /* исходную россыпь раздела прячем -- её содержимое переехало в блок */
    body.ym-nb-info-ready .nb-detail-location,
    body.ym-nb-info-ready .nb-chips { display: none; }
}