/*
 * Результаты поиска на мобильной - по макету страницы поиска (16.09.2026).
 * Песочная подложка (её даёт общий контейнер первого экрана `.it-hero`,
 * разбор в legacy-bridge.css), две группы через пунктирный разделитель,
 * в строке - дата мелким и заголовок полужирным.
 *
 * 🛑 Блок только мобильный: десктопной страницы поиска в макете нет, там
 * остаётся прежний вид - карточки с анонсом, фильтры и сортировка. Поэтому
 * по умолчанию блок скрыт и включается только до 999px, а старая часть
 * страницы на этой же ширине прячется (`legacy-bridge.css`).
 *
 * Локальный сброс обязателен: страница живёт на старой вёрстке, где общего
 * base.css нет (то же правило, что у остальных блоков).
 */

.it-search,
.it-search * {
    box-sizing: border-box;
}

.it-search {
    display: none;
}

/*
 * ---------- Десктопная часть страницы поиска ----------
 *
 * 🛑 Стили этой части в main.css рассчитаны на старую сетку, где у центральной
 * колонки стоял `padding: 0 50px`. В новой сетке отступ снят (legacy-bridge.css),
 * и страница разъезжалась: серая плашка `.search-results-categories` с полями
 * `margin: 0 -50px` наезжала на левую колонку и обрывалась справа, галочки
 * «Искать» выходили за неё, заголовок в 45px с `max-width: 700px` занимал две
 * строки, а блоки сортировки с `max-width: 700px` уезжали вбок (замечание
 * Дмитрия 24.09.2026, замер: плашка начиналась на 50px левее своей колонки).
 *
 * Разметка переверстана на `.it-searchbar`, старые классы из шаблона убраны -
 * поэтому правила main.css до неё просто не достают, перебивать их не нужно.
 * Заголовок остаётся `.results-header` (по нему страница снимается на сверку),
 * его размер переопределяем с большей специфичностью.
 */

.search-results .results-header {
    margin: 0 0 6px;
    max-width: none;
    font-family: var(--font-main);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.22;
}

.search-results .results-header span {
    color: var(--c-accent);
}

.search-results .search-count {
    margin: 0 0 18px;
    color: var(--c-text-meta);
    font-family: var(--font-main);
    font-size: 15px;
}

/* Пометка о нестрогой выдаче на десктопной части страницы: строгий поиск по
   всем словам сразу ничего не нашёл, и показаны материалы с частью слов.
   Мобильная часть выводит ту же строку своим классом (`.it-search__note`). */
.search-results .search-note {
    margin: 0 0 12px;
    color: var(--c-brown-dark);
    font-family: var(--font-main);
    font-size: 14px;
    line-height: 1.35;
}

/* Панель отбора: три строки «подпись - значения» на светлой подложке. */
.search-results .it-searchbar {
    display: grid;
    gap: var(--sp-12);
    margin: 0 0 var(--sp-24);
    padding: 18px 20px;
    background: var(--c-surface);
    border-radius: 12px;
}

.search-results .it-searchbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-8) var(--sp-10);
}

/* 🛑 Шрифт объявляем каждому элементу: страница живёт на старой вёрстке, где
   main.css задаёт Manrope прямо по тегам (a, span, label) - наследование от
   контейнера правилу по тегу проигрывает. Та же грабля описана выше у
   мобильного блока. */
.search-results .it-searchbar__label,
.search-results .it-searchbar__check,
.search-results .it-chip {
    font-family: var(--font-main);
}

.search-results .it-searchbar__label {
    min-width: 104px;
    color: var(--c-text-muted);
    font-size: 14px;
}

.search-results .it-searchbar__items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-8);
}

.search-results .it-chip {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--c-line);
    border-radius: 17px;
    background: var(--c-white);
    color: var(--c-text);
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    transition: border-color .15s, background-color .15s, color .15s;
}

.search-results .it-chip:hover {
    border-color: var(--c-brown);
}

.search-results .it-chip.is-active {
    border-color: var(--c-accent);
    background: var(--c-accent);
    color: var(--c-white);
}

/* Переключатель порядка стоит рядом с выбранной сортировкой и подписан тем,
   что получится: «↓ сначала новые». Значок без подписи читался как украшение -
   непонятно, это состояние или кнопка. */
.search-results .it-chip--order {
    height: 30px;
    padding: 0 12px;
    color: var(--c-text-muted);
    font-size: 13px;
}

.search-results .it-searchbar__check {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-6);
    color: var(--c-text);
    font-size: 15px;
    cursor: pointer;
}

.search-results .it-searchbar__check input {
    margin: 0;
}

/* Сообщение «ничего не найдено» - обычной строкой, без ступеньки в 22px. */
.search-results .search-result__heading {
    margin: 4px 0 0;
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: 17px;
}

/*
 * Подборка «Возможно вам будет интересно» под пустой выдачей. В main.css это
 * список строками с превью 300×200 и шириной блока 700px - четыре материала
 * занимали три экрана. Переставляем на сетку с превью 16:9, как в остальных
 * подборках сайта.
 */
.search-results .b-related_articles {
    max-width: none;
    margin-top: var(--sp-30);
}

.search-results .b-related_articles__heading {
    margin: 0 0 var(--sp-16);
    font-family: var(--font-main);
    font-size: 20px;
    font-weight: 700;
}

.search-results .b-related_articles__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-20);
    margin: 0;
    padding: 0;
    list-style: none;
}

.search-results .b-related_articles__list li {
    display: block;
    margin: 0;
}

.search-results .b-related_articles__item__image {
    display: block;
    float: none;
    min-width: 0;
    width: 100%;
    height: auto;
    margin: 0 0 var(--sp-8);
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    object-fit: cover;
}

.search-results .b-related_articles__item__title {
    display: block;
    float: none;
    max-height: none;
    overflow: visible;
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: 15px;
    line-height: 1.3;
}

.search-results .b-related_articles__item__title:hover {
    color: var(--c-accent);
}

@media (max-width: 999px) {
    .it-search {
        display: block;
    }

    /* 🛑 Шрифт объявляем КАЖДОМУ элементу, а не только контейнеру: страница
       живёт на старой вёрстке, где `main.css` задаёт Manrope прямо по тегам
       (h2, p, a, span, time). Наследование от родителя правилу по тегу
       проигрывает - до этой правки весь блок рисовался Manrope, а подпись
       группы выходила жирной, хотя вес стоял обычный. Та же грабля описана в
       header.css. */
    .it-search,
    .it-search h2,
    .it-search p,
    .it-search div,
    .it-search ul,
    .it-search li,
    .it-search a,
    .it-search span,
    .it-search time {
        font-family: var(--font-main);
    }

    /* Пометка «показываем материалы, где совпала часть запроса»: мелкая
       строка над группами, чтобы нестрогая выдача не читалась как ошибка. */
    .it-search .it-search__note {
        margin: 0 0 var(--sp-12);
        color: var(--c-brown);
        font-size: 13px;
        line-height: 1.3;
    }

    /* 🛑 Старая часть страницы на мобильной прячется целиком: заголовок в 45px
       занимал первый экран, а блок выбора категорий был шире экрана и давал
       горизонтальную прокрутку. Список карточек скрыт потому, что те же
       материалы показывает блок выше. Пагинация остаётся - по ней листают. */
    .search-results .results-header,
    .search-results .search-count,
    .search-results .search-note,
    .search-results .it-searchbar,
    .search-results > .clearfix,
    .search-results .it-cards--list,
    /* Общая пагинация страницы - тоже десктопная: на мобильной у каждой
       группы своя, прямо под её списком. */
    .search-results > .default_pagination {
        display: none;
    }

    /* Подборка под пустой выдачей: на мобильной видна она же (мобильный блок
       результатов при пустом поиске не рисуется вовсе), но в две колонки. */
    .search-results .b-related_articles__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-12);
    }

    .it-search__group + .it-search__group {
        margin-top: var(--sp-20);
        padding-top: var(--sp-20);
        /* Пунктирная линия между группами - как в макете. */
        border-top: 1px dashed var(--c-brown);
    }

    /* 🛑 Селектор с двумя классами намеренно: на старой странице заголовки
       набраны по тегу (`h2` в main.css, около 30px), и правило в один класс
       ему проигрывает - подпись группы выходила крупнее заголовков материалов.
       В макете это мелкая строка обычного начертания. */
    /* Подпись группы по узлу макета 4120:130: Golos Text Regular 14px, чёрная,
       интерлиньяж по кеглю. */
    .it-search .it-search__title {
        margin: 0 0 var(--sp-12);
        color: var(--c-text-black);
        font-size: var(--fs-14);
        font-weight: var(--fw-regular);
        line-height: 1;
    }

    /* Ритм списка: между материалами 32px, а внутри материала дата и заголовок
       стоят тесно (8px) - так пара читается как один блок, а не как два
       одинаково отстоящих друг от друга элемента. */
    .it-search__list {
        display: flex;
        flex-direction: column;
        gap: var(--sp-32);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* 🛑 Сброс маркера отдельным правилом: на старой странице у `li` в main.css
       стоит свой маркер через `::before`, и `list-style: none` его не снимает. */
    .it-search__list > li::before {
        content: none;
    }

    /* 8px между датой и заголовком - расстояние из макета (дата на 192, её
       кегль 14, заголовок на 214). */
    .it-search__item {
        display: flex;
        flex-direction: column;
        gap: var(--sp-8);
        margin: 0;
        padding: 0;
    }

    /* У видео между кадром и заголовком поле больше, чем между датой и кадром:
       иначе подпись липнет к картинке. */
    .it-search__item--video {
        gap: var(--sp-8);
    }

    /* Дата по узлу 4120:131: Golos Text Regular 14px, чёрная, интерлиньяж по
       кеглю (было 12px - мельче макета). */
    .it-search__date {
        color: var(--c-text-black);
        font-size: var(--fs-14);
        line-height: 1;
    }

    /* Заголовок по узлу 4120:132: Golos Text DemiBold 18px, чёрный. Строки в
       макете идут по кеглю с промежутком 4px - это и есть интерлиньяж 1.22
       (было 16px/1.25). */
    .it-search__name {
        color: var(--c-text-black);
        font-size: var(--fs-18);
        font-weight: var(--fw-demibold);
        line-height: 1.22;
        text-decoration: none;
    }

    .it-search__name:hover {
        color: var(--c-accent);
    }

    /* У каждой группы своя пагинация - 20px от последнего результата.

       🛑 Селектор из ТРЁХ классов намеренно: в legacy-bridge.css на мобильной
       стоит `.content .default_pagination { margin-top: 0 }` (там пагинация -
       элемент флекс-колонки, и её поле складывалось бы с `gap`). Селектор в
       два класса равен ему по силе, а мост подключается последним и выигрывал:
       отступ выходил нулевым, пагинация липла к списку. */
    .it-search .it-search__group .default_pagination {
        margin-top: var(--sp-20);
        margin-bottom: 0;
    }

    /* 🛑 Текущая страница здесь БЕЛЫМ кружком, а не песочным: на страницах
       списков пагинация стоит на белом фоне и песочный кружок из макета там
       виден, а внутри песочной плашки он сливается с подложкой - отметки
       текущей страницы просто не видно. */
    .it-search .default_pagination li.active a,
    .it-search .default_pagination li.active span {
        background: var(--c-white);
    }

    /* Пока группа обновляется (листание без перезагрузки - search-results.js),
       она слегка гаснет: иначе на медленной связи непонятно, нажалось ли. */
    .it-search__group.is-loading {
        opacity: 0.5;
    }

    /* ---------- Видео ---------- */

    .it-search__media {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: var(--r-4);
        line-height: 0;
    }

    .it-search__media img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    /* Кнопка воспроизведения по центру кадра - белый кружок с треугольником,
       как в макете. Рисуем разметкой, а не картинкой: иконка одна и простая. */
    .it-search__play {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--c-white);
        transform: translate(-50%, -50%);
    }

    .it-search__play::after {
        position: absolute;
        top: 50%;
        left: 54%;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 17px solid var(--c-text-black);
        transform: translate(-50%, -50%);
        content: '';
    }
}