@charset "UTF-8";
/*
 * face_page_v2.css — ЛИЦА-АДМИН-ВИД-3 (27.09.2026). Общие стили страниц Лиц:
 * Персона и Коллектив. Владелец: «Коллектив делаем дизайн такой же как у персоны».
 *
 * Раньше эти правила лежали ИНЛАЙНОМ внутри user/user_v2.tpl и были привязаны к
 * #personContent, поэтому на страницу коллектива не попадали вовсе. Теперь файл
 * один, а область — класс .cb-face-page, который стоит на обёртке ОБЕИХ страниц
 * (#personContent и #collectivePage). Содержимое перенесено из user_v2.tpl
 * без изменений формул: только селектор #personContent → .cb-face-page.
 *
 * Селекторы, которые касаются только персоны (сердечко «в любимые»), остались
 * под тем же общим классом: у коллектива таких элементов просто нет.
 */

/* ---------------------------------------------------------------- шапка страницы -- */

.cb-face-page .cb-page-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.cb-face-page .cb-page-top .breadcrumbs {
  margin-bottom: 0;
}

.cb-face-page .cb-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

.cb-face-page .cb-page-actions .ro-button {
  margin: 0;
}

/* ------------------------------------------------------------------- обложка -- */

/* PERSONA-MODS-8: фото и левая колонка — ОДНА И ТА ЖЕ фиксированная ширина 270 px,
   и оба блока начинаются от одного левого края:
   · у плашки аватара убран отступ слева (было 20 px — фото было сдвинуто вправо
     относительно колонки ниже);
   · у левой колонки контент-бокс тоже 270 px (300 px минус 30 px отступ вправо);
   · сведения в шапке сдвинуты на 300 px — ровно туда, где начинается правая
     колонка с учётом того же отступа. */
@media (min-width: 1241px) {
  .cb-face-page .cb-cover-avatar {
    width: 270px;
    padding: 0;
  }

  .cb-face-page .cb-cover-avatar-img {
    width: 270px;
    height: 100%;
  }

  .cb-face-page .cb-cover-info {
    left: 300px;
  }

  .cb-face-page .cb-side-cnt .cb-side-cell {
    width: 300px;
    padding-right: 30px;
  }
}

/* Заглушка логотипа коллектива на обложке (у персоны всегда есть аватар). */
.cb-face-page .cb-cover-avatar-stub {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 96px;
  line-height: 1;
  font-weight: 700;
  color: #ffffff;
  background-color: rgba(0, 0, 0, .25);
}

/* Строка фактов на обложке коллектива (тип, город, дата образования, «родом из»). */
.cb-face-page .cb-cover-facts {
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  color: #c9d6de;
}

.cb-face-page .cb-cover-facts span + span::before {
  content: ' · ';
}

/* --------------------------------------------------- сердечко «в любимые» (персона) -- */

.cb-face-page .cb-cover-name .cb-fav-heart {
  margin-left: 12px;
  vertical-align: middle;
  color: #e53935;
}

.cb-face-page .cb-cover-name .cb-fav-heart-card {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
}

.cb-face-page .cb-cover-name .cb-fav-heart-ico {
  margin: 0;
  font-size: 24px;
  line-height: 1;
  color: #e53935;
}

.cb-face-page .cb-cover-name .cb-fav-heart-on,
.cb-face-page .cb-cover-name .cb-fav-heart-on .cb-fav-heart-ico {
  color: #e53935;
}

/* ----------------------------------------------------- заголовок раздела с кнопкой -- */

/* ФОТО-РАБОТЫ-3: заголовок ленты — кнопка справа и компактнее. Пишем от
   .cb-face-page, чтобы правило перебило общий стиль .cb-sec-title. */
.cb-face-page .cb-sec-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.cb-face-page .cb-sec-title-row .ro-button {
  margin: 0 0 0 auto;
  flex: 0 0 auto;
  white-space: nowrap;
  height: 28px;
  min-height: 28px;
  line-height: 16px;
  padding: 5px 12px 5px;
  font-size: 12px;
  text-transform: uppercase;
  border-width: 2px;
}

/* ==========================================================================
   ЛИЦА-АДМИН-ВИД-4 (27.09.2026, владелец): «И фото аватара размещаем на плашке,
   как на компе, в таком же формате».

   Что было не так на телефоне: в persons.css на экранах ≤1240px обложка
   разбиралась на три отдельных блока — картинка 240px, затем выключенное
   затемнение (display:none), аватар 140×140 НА БЕЛОМ фоне под картинкой и
   сведения под ним. То есть аватар уезжал с плашки и выглядел иначе, чем на
   компьютере.

   Теперь блок остаётся ПЛАШКОЙ, как на компьютере: фотография на всю плашку,
   затемнение на месте, аватар — на плашке слева тем же квадратом (та же рамка
   .cb-cover-avatar-img и та же обрезка по центру кадра — серверную резку
   центрирует правило РЕЗКА-ЦЕНТР-1), сведения справа от аватара. Отдельной
   мобильной вёрстки аватара больше нет: правила ниже только расставляют те же
   элементы по плашке, размер аватара уменьшается ровно настолько, сколько нужно
   узкому экрану.

   Область — .cb-face-page (класс стоит на обёртке страницы персоны и
   коллектива), поэтому страницы других разделов эти правила не задевают.
   ========================================================================== */

@media (max-width: 1240px) {
  .cb-face-page .cb-cover {
    display: flex;
    align-items: flex-start;
    height: auto;
    min-height: 240px;
    padding: 12px;
    box-sizing: border-box;
    background-color: #0e0c14;
  }

  /* фотография — подложка плашки (абсолютная, во всю плашку) */
  .cb-face-page .cb-cover-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
  }

  /* затемнение возвращаем: имя и сведения должны читаться на любом кадре */
  .cb-face-page .cb-cover-shade {
    display: block;
  }

  .cb-face-page .cb-cover-avatar {
    position: relative;
    left: auto;
    top: auto;
    z-index: 1;
    flex: 0 0 144px;
    width: 144px;
    height: auto;
    padding: 0;
  }

  .cb-face-page .cb-cover-avatar-img {
    width: 144px;
    height: 144px;
  }

  .cb-face-page .cb-cover-info {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 0 0 12px;
    color: #fff;
  }

  .cb-face-page .cb-cover-name {
    color: #fff;
  }

  .cb-face-page .cb-cover-label {
    color: #aaaaaa;
  }

  .cb-face-page .cb-cover-note {
    color: rgba(255, 255, 255, .6);
  }
}

/* Телефон: те же элементы, аватар чуть меньше — иначе сведения не помещаются */
@media (max-width: 560px) {
  .cb-face-page .cb-cover {
    min-height: 190px;
    padding: 10px;
  }

  .cb-face-page .cb-cover-avatar {
    flex: 0 0 108px;
    width: 108px;
  }

  .cb-face-page .cb-cover-avatar-img {
    width: 108px;
    height: 108px;
  }

  .cb-face-page .cb-cover-info {
    padding-left: 10px;
  }

  .cb-face-page .cb-cover-name {
    font-size: 18px;
    line-height: 24px;
  }

  .cb-face-page .cb-cover-type {
    font-size: 12px;
    line-height: 18px;
  }

  .cb-face-page .cb-cover-facts {
    margin-top: 6px;
    font-size: 12px;
    line-height: 17px;
  }
}