/* ============================================================================
   collective_list_v2.css — КОЛЛЕКТИВЫ-ДИЗАЙН-1 (30.09.2026).

   Владислав: «И вверху вот эти фильтры… надо фильтры привести к нашему шаблонному
   дизайну, так же как у персон. И вверху вот эти все кнопки, пути, хлебные крошки,
   тоже все привести к такому же дизайну, как на странице персон».

   Что это за файл: ТОЧНЫЕ КОПИИ правил страницы персон, которых на странице
   коллективов не было (persons.css там не подключён):
     * крошки            — .breadcrumbs / .breadcrumbs-item / .breadcrumbs-divider
     * блок действий шапки — .section-header-actions
     * кнопка шапки      — .header-action (значения persons.css)
     * число в заголовке — id="cbCollectiveTotal" (копия #personsTotal)
     * лента фильтров    — .cb-person-toolbar / .cb-person-ribbon*
   Значения перенесены один в один; селекторы НЕ ограничены #collectiveContent
   намеренно: файл подключён только на странице списка коллективов, поэтому
   каскад (в т.ч. mobile_cabinet.css и mobile_search_v2.css) работает ровно так
   же, как на странице персон. Общие CSS (section_search.css, persons.css)
   не менялись — по ним идёт параллельная задача ПЕРСОНЫ-НОВЫЕ-ВИДНО-1.

   Правило 11а: только четыре шаблонных начертания, font-weight не используем.
   Правило 1.2/11: у ссылки на файл обязательна метка версии ?v= в шаблоне.
   ========================================================================== */

/* ------------------------------------------------------------ крошки ------ */

.breadcrumbs {
  margin-bottom: 40px;
 
  font-size: 20px;
  font-family: 'Proxima Nova Condensed Bold';
}

.breadcrumbs-item {
  color: #000;
}

.breadcrumbs-divider:after {
  content: "/";
  margin: 0 8px;
}

span.breadcrumbs-item {
  color: #555;
}

/* --------------------------------------------------- шапка раздела -------- */

/* блок действий уходит вправо, в одну строку с заголовком (persons.css) */
.section-header-actions {
  float: right;
  margin-top: -8px;
}

/* Значения ровно как .header-action в persons.css. Селектор с .section-header
   нужен потому, что этот же селектор уже есть в collective.css (со
   text-decoration: none и hover opacity: .75) — мы загружаемся позже и
   приводим кнопку к виду страницы персон: подчёркнута в покое, подчёркивание
   снимается при наведении (общее правило common.css a:hover). */
.section-header .header-action {
  font-family: 'Proxima Nova Regular', Arial, sans-serif;
  font-size: 20px;
  font-style: normal;
  text-transform: none;
  color: #00aeef;
  text-decoration: underline;
}

.section-header .header-action:hover {
  opacity: 1;
  text-decoration: none;
}

.section-header .header-action .ico {
  vertical-align: middle;
}

/* число коллективов в строке заголовка — копия #personsTotal */
#cbCollectiveTotal {
  color: #999;
  font-size: 16px;
  font-family: 'Proxima Nova Regular';
  text-transform: none;
  margin-left: 15px;
}

/* ----------------------------------- лента быстрых фильтров и поиск -------
   Копия блока .cb-person-* из persons.css: кнопки-«таблетки» со счётчиком,
   мягкая тень, подъём при наведении, залитая активная кнопка. Поиск —
   общая разметка .cb-sec-search (section_search.css), стоит рядом с лентой. */

.cb-person-toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.cb-person-ribbon {
  margin: 0 0 18px;
  padding-bottom: 4px;
  font-size: 0;               /* убираем пробелы между inline-block */
}

.cb-person-toolbar .cb-person-ribbon {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.cb-person-toolbar .cb-sec-search {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin-left: 0;
  margin-top: 2px;
}

@media (max-width: 900px) {
  .cb-person-toolbar .cb-sec-search { margin-top: 0; }
}

.cb-person-ribbon-item {
  display: inline-block;
  margin: 0 8px 10px 0;
  padding: 8px 15px 9px;
  border: 1px solid #d9e7ef;
  border-radius: 18px;
  background-color: #fff;
  color: #22333d;
  font-family: 'Proxima Nova Regular';
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: background-color .15s ease, border-color .15s ease,
                      color .15s ease, box-shadow .15s ease;
  -moz-transition: background-color .15s ease, border-color .15s ease,
                   color .15s ease, box-shadow .15s ease;
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease;
}

.cb-person-ribbon-item:hover {
  border-color: #00aeef;
  color: #0099d2;
  background-color: #f4fbff;
  box-shadow: 0 2px 6px rgba(0,174,239, .18);
}

/* тип, которого в выбранном городе нет (счётчик 0): кнопка на месте, но
   приглушена — лента не «схлопывается» и сразу видно, что именно пусто.
   Активная кнопка всегда остаётся яркой: правила для неё идут ниже. */
.cb-person-ribbon-item-empty:not(.cb-person-ribbon-item-active) {
  border-color: #e7eef2;
  background-color: #fbfdfe;
  color: #a3b5bf;
  box-shadow: none;
}

.cb-person-ribbon-item-empty:not(.cb-person-ribbon-item-active):hover {
  border-color: #bcd9e9;
  background-color: #f6fbfe;
  color: #7d97a5;
  box-shadow: none;
}

.cb-person-ribbon-item-active,
.cb-person-ribbon-item-active:hover {
  border-color: #00aeef;
  background-color: #00aeef;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,174,239, .35);
}

.cb-person-ribbon-count {
  display: inline-block;
  min-width: 20px;
  margin-left: 8px;
  padding: 2px 6px 3px;
  border-radius: 10px;
  background-color: #eaf8fd;
  color: #6c8b9c;
  font-family: 'Proxima Nova Regular';
  font-size: 12px;
  text-align: center;
  vertical-align: 1px;
}

.cb-person-ribbon-item:hover .cb-person-ribbon-count {
  background-color: #dceffb;
  color: #0099d2;
}

.cb-person-ribbon-item-empty:not(.cb-person-ribbon-item-active) .cb-person-ribbon-count,
.cb-person-ribbon-item-empty:not(.cb-person-ribbon-item-active):hover .cb-person-ribbon-count {
  background-color: #f1f6f8;
  color: #b6c6ce;
}

.cb-person-ribbon-item-active .cb-person-ribbon-count {
  background-color: rgba(255, 255, 255, .28);
  color: #fff;
}

/* ------------------------------------------------------------ телефон -----
   Телефон (≤768px): поиск второй строкой во всю ширину, лента остаётся
   первой строкой и переносится — горизонтальной прокрутки нет (класса
   .cb-places-ribbon с overflow-x: auto из mobile.css у нас больше нет).
   Значения — те же, что дают mobile_search_v2.css и mobile_cabinet.css
   странице персон; здесь они повторены под наши селекторы, иначе правило
   .section-header .header-action (20px из collective.css) перебивало бы
   мобильные 16px. */
@media (max-width: 768px) {
  .section-header .header-action {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
    font-size: 16px;
  }

  .cb-person-toolbar .cb-person-ribbon { margin-bottom: 0; }

  .cb-person-toolbar .cb-sec-search {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    width: 100%;
    margin: 10px 0 14px;
  }
}

/* ------------------------------------------------- КОЛЛЕКТИВЫ-КНОПКА-1 ----
   Кнопка «Создать коллектив» остаётся одна — верхняя, в шапке раздела.
   Нижний <summary> у <details> больше не показываем: он был второй такой же
   кнопкой. Сам <details> оставляем в разметке (без него форма не работает),
   а раскрывает его верхняя ссылка: с JS — сразу, без JS — переходом по
   ?create=1#createCollective (сервер отдаёт <details open>). */
.cb-collective-create > summary { display: none; }

/* Строка сортировки: вид и поведение как на странице персон
   (.cb-person-sortbar из persons.css); здесь повторено под наш раздел,
   чтобы не тянуть чужой файл стилей. */
.cb-person-sortbar {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  width: 100%;
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid #e6eef3;
  border-radius: 2px;
  background-color: #f8fbfd;
  font-size: 0;
}

.cb-person-sortbar-label {
  display: inline-block;
  margin: 0 8px 6px 0;
  color: #7d97a5;
  font-family: 'Proxima Nova Regular';
  font-size: 14px;
}

.cb-person-sortbar-group {
  display: inline-block;
  margin: 0 18px 0 0;
}

.cb-person-sortbar-group:last-child { margin-right: 0; }

.cb-person-sortbar-item {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 7px 13px 8px;
  border: 1px solid #d9e7ef;
  border-radius: 2px;
  background-color: #fff;
  color: #22333d;
  font-family: 'Proxima Nova Regular';
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  -moz-transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.cb-person-sortbar-item:hover {
  border-color: #00aeef;
  color: #0099d2;
  background-color: #f4fbff;
}

.cb-person-sortbar-item-active,
.cb-person-sortbar-item-active:hover {
  border-color: #00aeef;
  background-color: #00aeef;
  color: #fff;
}

@media (max-width: 768px) {
  .cb-person-sortbar { margin: 0 0 12px; padding: 9px 11px; }

  .cb-person-sortbar-item {
    min-height: 44px;
    margin: 0 5px 6px 0;
    padding: 10px 11px;
    font-size: 14px;
  }

  .cb-person-sortbar-label { display: inline-block; margin: 0 7px 6px 0; font-size: 14px; }

  .cb-person-sortbar-group { display: inline; margin: 0 10px 0 0; }
}