/* Torkzt · search_mobile.css — живой поиск на телефоне.
 *
 * Подключать ПОСЛЕ search.css.
 *
 * Здесь ТОЛЬКО размеры и зоны нажатия. Позиционирование, фон и цвета живут
 * в search.css и уже верны: список там absolute относительно обёртки поля.
 *
 * Прошлая версия этого файла переводила список в position: fixed, чтобы
 * раскрыть на весь экран, — и он вставал не под полем, а заметно ниже, да
 * ещё и просвечивал. Отсюда правило: раскладку из базового файла не
 * переопределять, трогать только то, что действительно зависит от размера
 * экрана.
 */

@media (max-width: 991px) {
    /* 16px обязательны: при меньшем размере Safari на iOS зумит страницу
       при фокусе, шапка уезжает, и закрыть поиск становится некуда. */
    #searchContainerMobile input[type="search"],
    input[data-search-suggest] {
        font-size: 16px;
    }
}

@media (max-width: 767px) {

    .search-suggest-box {
        /* dvh, а не vh: при открытой клавиатуре vh не уменьшается, и низ
           списка уезжает под неё. */
        max-height: calc(100dvh - 230px);
        padding: 4px;
    }

    /* Зоны нажатия. 60px — палец попадает без прицеливания; на 44px в
       плотном списке промахи начинаются сразу. */
    .ss-item,
    .ss-hist {
        min-height: 60px;
        padding: 10px 12px;
        gap: 12px;
    }

    .ss-item:active,
    .ss-hist:active { background: rgba(13, 110, 253, .08); }

    /* Разделители: на телефоне строки выше, и без линий список
       читается как сплошное полотно. */
    .ss-item + .ss-item,
    .ss-hist + .ss-hist { border-top: 1px solid rgba(128, 128, 128, .12); }

    .ss-title {
        /* Две строки вместо одной: длинные названия на узком экране
           обрезались почти сразу после первого слова. */
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 15px;
        line-height: 1.3;
    }

    .ss-orig, .ss-meta { font-size: 12.5px; }
    .ss-hist { font-size: 15px; }

    .ss-head {
        position: sticky;
        top: 0;
        z-index: 1;
        background: inherit;
        padding: 10px 12px;
        font-size: 13px;
    }

    .ss-empty { padding: 26px 14px; font-size: 14.5px; }
}