/* ============================================================================
   mobile_search_v2.css — МОБИЛЬНЫЙ-ПОИСК-1 (29.09.2026).

   Владислав: «Поиск в мобильной версии сделай второй строкой».

   Что делает файл: на телефоне строка поиска каждого раздела встаёт
   ОТДЕЛЬНОЙ ВТОРОЙ СТРОКОЙ — под заголовком и лентой быстрых фильтров,
   во всю ширину, поле тянется, кнопка «Найти» и ссылка «сбросить»
   остаются рядом с полем в этой же строке.

   Брейкпоинты — ТЕ ЖЕ, что уже приняты в проекте (mobile.css,
   mobile_afisha.css, mobile_places.css, mobile_photos.css, mobile_cabinet.css
   построены на max-width: 768px; 900px — брейкпоинт section_search.css,
   он остаётся как был). Ничего нового не выдумано.

   ВАЖНО: весь файл — это ОДИН блок @media (max-width: 768px). На широком
   экране (1400) он не применяется вовсе, поэтому вид «как было» сохраняется
   без всяких условий. Правила только ДОБАВЛЯЮТСЯ: прежние
   section_search.css / persons.css / people_v2.css / priority.css /
   news_feed_v2.css / events.css / mobile_*.css продолжают работать.

   Разделы: персоны, места, коллективы, афиша (события), новости, статьи,
   фотоотчёты, друзья, поклонники, предпочтения, «Поднять статус»,
   кабинет персоны (лента, друзья, поклонники).
   Переписка (user/message.php, user/pm/*, face/av/sec_messages_v2.tpl)
   НЕ затрагивается — там свой поиск по собеседнику и своя задача.
   ========================================================================== */

@media (max-width: 768px) {

  /* ------------------------------------------- 1. Общий компонент ---------
     .cb-sec-search — «поле поиска по разделу» рядом с лентой быстрых
     фильтров (разметка описана в section_search.css). На телефоне это
     отдельная строка во всю ширину. */
  .cb-sec-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 10px 0 14px;
    white-space: normal;
    vertical-align: baseline;
  }

  .cb-sec-search > .cb-sec-search-input {
    flex: 1 1 150px;
    width: auto;
    min-width: 0;
    height: 48px;
    font-size: 17px;
  }

  .cb-sec-search > .cb-sec-search-btn {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 18px;
    font-size: 15px;
  }

  /* «сбросить» — под полем, во всю ширину строки */
  .cb-sec-search > .cb-sec-search-reset {
    display: inline-flex;
    align-items: center;
    flex: 0 0 100%;
    min-height: 30px;
    font-size: 15px;
  }

  /* Поиск внутри лент и панелей фильтров занимает СВОЮ строку.
     .cb-person-toolbar и .filter-panel — flex-контейнеры (persons.css,
     common.css), поэтому обёртке нужен именно flex-basis: 100%. */
  .cb-person-toolbar .cb-sec-search,
  .filter-panel .cb-sec-search,
  .filter-panel-cnt .cb-sec-search,
  .cb-places-ribbon > .cb-sec-search {
    flex: 0 0 100%;
    width: 100%;
    margin: 10px 0 14px;
  }

  /* ------------------------------------- 2. ЛИЦА / ПЕРСОНЫ ---------------
     Лента типов персон остаётся первой строкой, поиск — второй:
     .cb-person-toolbar уже flex-wrap: wrap, обёртке хватает basis 100%. */
  .cb-person-toolbar .cb-person-ribbon {
    margin-bottom: 0;
  }

  /* ------------------------------------- 3. МЕСТА и КОЛЛЕКТИВЫ ----------
     Панель фильтров этих разделов уезжает в шторку «Фильтры» (mobile.js),
     вместе с ней раньше уезжал и поиск — на телефоне его не было видно
     НИГДЕ. Теперь панель показывается в потоке, но в ней видна только
     строка поиска: лента типов, как и раньше, живёт в шторке «Фильтры»
     (её копию делает mobile.js), поэтому в потоке её не дублируем. */
  #placesContent #placesFilters,
  #collectiveContent .filter-panel-cnt.filter-panel-divider {
    display: block;
  }

  /* лента типов в потоке схлопывается до строки поиска */
  #placesContent #placesFilters > .cb-places-ribbon,
  #collectiveContent .filter-panel-cnt.filter-panel-divider > .cb-places-ribbon {
    display: block;
    overflow: visible;
    white-space: normal;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  #placesContent #placesFilters > .cb-places-ribbon > a,
  #collectiveContent .filter-panel-cnt.filter-panel-divider > .cb-places-ribbon > a {
    display: none;
  }

  /* mobile_places.css прячет поиск внутри панели с классом cb-keep-inline
     (панель «остаётся в потоке», но поиск в ней был скрыт). Это правило
     относилось ко всему разделу целиком, включая шторку, — снимаем его
     ТОЛЬКО для потока страницы. */
  #placesContent #placesFilters.cb-keep-inline .cb-sec-search,
  #placesContent #placesFilters .cb-sec-search,
  #collectiveContent .filter-panel-cnt .cb-sec-search {
    display: flex;
    flex: 0 0 100%;
    width: 100%;
    margin: 10px 0 14px;
  }

  /* в шторке поиск не повторяем — он теперь в потоке страницы */
  .cb-sheet .cb-sec-search { display: none; }

  /* ------------------------------------- 4. ДРУЗЬЯ и ПОКЛОННИКИ --------
     Лупа .fr-search-btn остаётся в полосе «фильтр + поиск», а раскрытое
     поле уходит на СВОЮ строку во всю ширину: раньше оно всплывало поверх
     полосы (position: absolute; top: 51px) и перекрывало фильтр. */
  .fr-bar { flex-wrap: wrap; }

  .fr-search[open] {
    flex: 0 0 100%;
    order: 2;
    margin-top: 10px;
  }

  .fr-search[open] .fr-search-pop {
    position: static;
    width: 100%;
    max-width: 100%;
    gap: 10px;
    margin: 0;
  }

  .fr-search[open] .fr-search-field {
    height: 48px;
    font-size: 17px;
  }

  .fr-search[open] .fr-search-go {
    height: 48px;
    min-width: 96px;
    font-size: 15px;
  }

  /* ------------------------------- 5. КАБИНЕТ: ПОИСК ПО ЛЕНТЕ ----------
     .cb-nw-search-form раскрывается лупой в полосе ленты. На телефоне
     была всплывашка поверх полосы (position: absolute; top: 0) — теперь
     это вторая строка во всю ширину. */
  .cb-nw-bar { flex-wrap: wrap; }

  .cb-nw-search-form.cb-nw-on {
    position: static;
    flex: 1 1 100%;
    width: 100%;
    margin: 10px 0 0;
    order: 3;
  }

  .cb-nw-search-form.cb-nw-on input[type="text"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 48px;
    font-size: 17px;
  }

  .cb-nw-search-form.cb-nw-on .cb-nw-send {
    flex: 0 0 auto;
    width: auto;          /* в news_feed_v2.css у кнопки width: 100% — без этого
                             она забирает всю строку и поле поиска сжимается */
    min-width: 96px;
    min-height: 48px;
    margin-left: 0;
  }

  /* ------------------------------------- 6. ПРЕДПОЧТЕНИЯ --------------
     .cb-pr-search уже уходит на свою строку (priority.css), здесь только
     выравниваем размеры поля и кнопки под остальные разделы. */
  .cb-pr-search {
    flex-wrap: wrap;
    gap: 10px;
  }

  .cb-pr-search .cb-pr-search-field {
    flex: 1 1 150px;
    width: auto;
    min-width: 0;
    height: 48px;
    font-size: 17px;
  }

  .cb-pr-search .cb-pr-search-go {
    flex: 0 0 auto;
    height: 48px;
    min-width: 96px;
    font-size: 15px;
  }
}