@charset "UTF-8";
/*
 * persona_public_v2.css — ЭТАП 4: ПУБЛИЧНАЯ СТРАНИЦА ПЕРСОНЫ ПО МАКЕТУ Persona.psd.
 *
 * ЗАЧЕМ ОТДЕЛЬНЫЙ ФАЙЛ. Шаблон user/user_v2.tpl — один на два вида: кабинет
 * ($cb_av_admin) и публичный вид (гость, наблюдатель, «глазами гостя»). Макет
 * Persona.psd рисует именно ПУБЛИЧНЫЙ вид, поэтому все макетные числа собраны
 * здесь и включаются только на этой странице — класс .cb-persona-public стоит на
 * обёртке #personContent, класс .cb-persona-guest добавляется, когда страница
 * показывается НЕ хозяину (гость, другой вошедший, режим «глазами гостя»).
 * Страницы коллектива, списка персон и разделов кабинета этот файл не задевает.
 *
 * ОТКУДА ЧИСЛА (замер, а не «на глаз»). Скрипты:
 *   _clubber/_et0_psd.py   — bbox каждого слоя (дамп _et0_persona.txt);
 *   _clubber/_et4_colors.py, _et4_colors2.py — цвета пипеткой ИЗ РЕНДЕРА
 *   (_design_src/crops/gen2016_Persona.png), потому что psd_tools отдаёт
 *   FillColor ненадёжно (заголовки разделов выходили «#ff0101»).
 *
 * Эталон: D:\YandexDisk\Clubber\clubber4\PSD\Persona.psd — холст 1440×3204,
 * слоёв 331, текстов 85, md5 309527a21b5d. Файл 2014 года побайтово тот же,
 * поэтому источник единственный.
 *
 *   слой / группа                bbox в макете            размер     где у нас
 *   Bread_crumbs                 (133,152)-(412,185)      279×33     .breadcrumbs
 *   Big_photo                    (134,217)-(1306,581)     1172×364   .cb-cover-img
 *   Avatar                       (134,217)-(406,581)      272×364    .cb-cover-avatar
 *   Buttons                      (158,462)-(371,561)      213×41×2   .cb-cover-avatar-actions
 *     Add_to_friends_button      (158,462)-(371,503)      213×41     зазор между кнопками 17
 *     Message_button             (158,520)-(371,561)      213×41     20 px от низа аватара, 24 от левого края
 *   Information                  (135,606)-(391,902)      256×296    .cb-pinfo (левая колонка)
 *     имя Ivanov_Anton           (135,606)-(260,623)      20 px
 *     строки: 649, 689, 729, 769, 809, 848, 889 → ШАГ 40 px
 *     подписи #555555, значения #000000
 *   Social                       (132,929)-(260,958)      128×29     .cb-shr-list
 *     значки 28×28, зазор 5 → 4×28+3×5 = 127
 *   Friends                      (134,1013)-(356,1197)    222×184    .cb-people (первый)
 *   Fans                         (134,1253)-(356,1437)    222×184    .cb-people (второй)
 *     заголовок 22 px ПРОПИСНЫМИ, аватары 63×63, шаг 79 и 80 («…» в 6-й ячейке)
 *     зазор «Social → Friends» 55, «Friends → Fans» 56
 *   Line                         (402,578)-(406,3267)      4×2689     вертикальный разделитель #d0d0d0
 *
 *   Правая колонка (x 433…1306 = 873):
 *   Resident                     (433,636)-(1306,972)      873×336
 *   About                        (434,1000)-(1305,1281)     871×281
 *   Galery                       (433,1338)-(1306,1642)     873×304
 *   Achivments                   (434,1701)-(1291,1965)     857×264
 *   Discografy                   (433,2022)-(1306,2349)     873×327
 *   Predpochtenia                (432,2412)-(1305,2984)     873×572
 *     заголовок раздела 30 px ПРОПИСНЫМИ, БЕЗ подчёркивания (в макете линии нет),
 *       от верха заголовка до первого элемента раздела 47…52 px
 *     карточка 163×163 + имя 18 px BOLD + роль 16 px #595959, шаг колонок 178
 *     галерея: карточка 273, картинка 273×156 + подпись 16 px, шаг 300
 *     крупная кнопка раздела 226×45/46, заливка белая, рамка 2 px #00aeef,
 *       текст 16 px #00aeef ПРОПИСНЫМИ, по центру под сеткой, 25 px от сетки
 *     «Достижения»: кружок 53×53 #00aeef со звездой, шаг строк 80, текст 16 px
 *     зазор между разделами 57…63 px (Resident → About в макете 28 — расхождение,
 *       см. отчёт, принято единое 57)
 *
 * ЧТО У НАС ОСТАВЛЕНО СВОИМ (решения владельца, не откатываем):
 *   • счётчики «Афиша / Фото / Друзья / Подписчики / Музыка / Журнал событий»
 *     над первым разделом — в макете их нет, это наши данные;
 *   • сеть «Поделиться» из 5 кнопок (МАКС, ВК, Telegram, X, ссылка) — решение
 *     SHARE-1; в макете 4 кружка;
 *   • карточки «Работы», блоки «Афиша», «Я пойду», «Входит в Коллективы»,
 *     «Отзывы» — в макете их нет, но это наши разделы;
 *   • ширина левой колонки 270 (в макете 272) и правой 870 (в макете 873) —
 *     решение ЭТАПА 0 / PERSONA-MODS-8, поэтому шаг карточек 13 px, а не 15.
 *
 * ПРАВИЛО 11а: семейство шрифта — точным именем начертания, font-weight НЕ
 * используется нигде в этом файле.
 */

/* ====================================================== КРОШКИ И ШАПКА ======
   В макете крошки 152…185 (33 px), обложка начинается на 217 — то есть 32 px
   ниже крошек. Кнопки страницы в макете стоят НЕ в этой строке, а на аватаре
   (см. ниже), поэтому в публичном виде строка крошек остаётся одна. */

.cb-persona-public.cb-persona-guest .cb-page-top {
  margin-bottom: 32px;
}

/* ==================================== КНОПКИ СТРАНИЦЫ НА АВАТАРЕ (ГОСТЬ) ====
   Макет: Buttons (158,462)-(371,561) внутри Avatar (134,217)-(406,581).
   Значит 24 px от левого края аватара, 20 px от низа, зазор между кнопками 17.
   В кабинете кнопки остаются в строке крошек справа — это прямое распоряжение
   владельца PERSONA-MODS-4 («перенести наверх, выравнивание по правому краю»),
   и оно главнее макета для кабинетного вида. */

@media (min-width: 1241px) {
  /* обложка → левая колонка: в макете 581 → 606 = 25 px; у нас в persons.css
     после обложки стоит 40 px, для публичного вида доводим до макетных 25 */
  .cb-persona-public.cb-persona-guest .cb-cover {
    margin-bottom: 25px;
  }

  .cb-persona-public.cb-persona-guest .cb-cover-avatar-actions {
    position: absolute;
    left: 24px;
    bottom: 20px;
    z-index: 2;
  }

  .cb-persona-public.cb-persona-guest .cb-cover-avatar-actions .ro-button {
    display: block;
    box-sizing: border-box;
    width: 213px;
    height: 41px;
    line-height: 37px;
    margin: 0 0 17px;
    padding: 0 8px;
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cb-persona-public.cb-persona-guest .cb-cover-avatar-actions .ro-button:last-child {
    margin-bottom: 0;
  }
}

/* ============================================ ЛЕВАЯ КОЛОНКА: СВЕДЕНИЯ ======
   Макет Information (135,606)-(391,902): имя 20 px, дальше 7 строк 16 px с
   ШАГОМ 40 px (649, 689, 729, 769, 809, 848, 889). У нас было 26 px.
   Подписи в макете #555555, значения #000000 (замер пипеткой). */

.cb-persona-public .cb-side-cell .cb-pinfo {
  margin: 0 0 27px;              /* Information → Social: 902 → 929 = 27 */
}

.cb-persona-public .cb-side-cell .cb-pinfo-name {
  margin-bottom: 19px;           /* 24 (строка имени) + 19 = 43: 606 → 649 */
}

.cb-persona-public .cb-side-cell .cb-pinfo-row {
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 18px;           /* 22 + 18 = 40 px шаг строк из макета */
  color: #000000;
}

.cb-persona-public .cb-side-cell .cb-pinfo-label {
  color: #555555;
}

/* ==================================== ЛЕВАЯ КОЛОНКА: СОЦКНОПКИ =============
   Макет Social (132,929)-(260,958): 4 кружка 28×28 с зазором 5. Подписи
   «Поделиться:» в макете нет — её убирает сам шаблон (cb_shr_nolabel). */

.cb-persona-public .cb-side-cell .cb-shr {
  margin: 0 0 55px;              /* Social → Friends: 958 → 1013 = 55 */
}

.cb-persona-public .cb-side-cell .cb-shr-list {
  gap: 5px;
}

.cb-persona-public .cb-side-cell .cb-shr-ico {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

/* ============================== ЛЕВАЯ КОЛОНКА: ДРУЗЬЯ И ПОКЛОННИКИ =========
   Макет: блок 222×184, заголовок 22 px ПРОПИСНЫМИ, аватары 63×63, шаг 79 по
   горизонтали и 80 по вертикали (зазор 16/17), «…» стоит в ШЕСТОЙ ячейке.
   У нас было 72×72 и шесть аватаров, поэтому «…» уезжало в третий ряд.
   Шестой аватар скрываем ПРАВИЛОМ, а не правкой user/av/sec_friends_v2.tpl:
   этот файл — зона задачи «Друзья» (другой исполнитель), трогать его нельзя. */

.cb-persona-public .cb-side-cell .cb-people {
  width: 222px;
  margin: 0 0 56px;              /* Friends → Fans: 1197 → 1253 = 56 */
}

.cb-persona-public .cb-side-cell .cb-people-head {
  font-size: 30px;               /* сверка по ширине строки: «ДРУЗЬЯ (126)»
                                    в макете 136 px, на стенде 137,9 при 30 px
                                    (при 22 px выходило 101 — не тот кегль) */
  line-height: 30px;
  margin: 0 0 14px;              /* заголовок 1040 → первый аватар 1054 */
}

/* счётчик («(126)») в макете того же цвета, что и заголовок: пипетка по рендеру
   даёт у обеих частей #000000 (у нас был серый #999999) */
.cb-persona-public .cb-side-cell .cb-people-head .cb-people-cnt {
  color: #000000;
}

.cb-persona-public .cb-side-cell .cb-people-grid {
  margin: 0 -16px 0 0;
}

.cb-persona-public .cb-side-cell .cb-people-item {
  width: 63px;
  margin: 0 16px 17px 0;         /* 63 + 16 = 79 (шаг), 63 + 17 = 80 (ряд) */
}

.cb-persona-public .cb-side-cell .cb-people-item img {
  width: 63px;
  height: 63px;
}

/* шестой аватар скрыт — «…» встаёт в шестую ячейку, как в макете */
.cb-persona-public .cb-side-cell .cb-people-item:nth-child(6) {
  display: none;
}

.cb-persona-public .cb-side-cell .cb-people-more {
  font-size: 20px;
  line-height: 63px;
  text-align: center;
  color: #999999;
}

/* ============================================ ПРАВАЯ КОЛОНКА: РАЗДЕЛЫ ======
   Макет: заголовок 30 px ПРОПИСНЫМИ БЕЗ подчёркивания (в файле нет
   горизонтальной линии — там только вертикальная Line между колонками),
   от верха заголовка до первого элемента 47…52 px, зазор между разделами
   57…63 px (принято 57). У нас было 24 px, подчёркивание и зазор 40. */

.cb-persona-public .cb-side-body .cb-sec {
  margin: 0 0 57px;
}

.cb-persona-public .cb-side-body .cb-sec-title {
  font-family: 'Proxima Nova Condensed Bold';
  font-size: 30px;
  line-height: 30px;
  text-transform: uppercase;
  padding-bottom: 0;
  margin-bottom: 20px;           /* 30 + 20 = 50 от верха строки до элемента */
  border-bottom: 0;
  color: #000;
}

.cb-persona-public .cb-side-body .cb-sec-text {
  font-size: 16px;
  line-height: 26px;             /* макет: 234 px на 9 строк */
}

/* ----------------------------------------------- крупная кнопка раздела ----
   Макет: «Все заведения», «Все фотоальбомы», «Показать все» — 226×45/46,
   белая заливка, рамка 2 px #00aeef, текст 16 px #00aeef ПРОПИСНЫМИ, по
   центру ПОД сеткой, 25 px от неё. До этапа 4 эти кнопки стояли слева под
   блоком (35 px) либо справа в строке заголовка (28 px). */

.cb-persona-public .cb-side-body .cb-sec-actions {
  margin-top: 25px;
  text-align: center;
}

.cb-persona-public .cb-side-body .cb-sec-actions .ro-button {
  display: inline-block;
  box-sizing: border-box;
  width: 226px;
  height: 46px;
  min-height: 46px;
  line-height: 42px;             /* 46 − 2×2 px рамки */
  padding: 0 10px;
  border: 2px solid #00aeef;
  border-radius: 4px;
  background-color: #fff;
  color: #00aeef;
  font-size: 16px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cb-persona-public .cb-side-body .cb-sec-actions .ro-button:hover {
  color: #fff;
  background-color: #00aeef;
}

/* ============================================ ПРАВАЯ КОЛОНКА: КАРТОЧКИ ====
   Макет: карточка 163×163 (галерея 273×156), имя 18 px BOLD #000000,
   роль 16 px #595959 (у нас было #aaaaaa и обычное начертание имени),
   от картинки до имени 14 px, между рядами 25 px. */

.cb-persona-public .cb-side-body .cb-cards .cb-card {
  margin-bottom: 25px;
}

.cb-persona-public .cb-side-body .cb-cards .cb-card-img {
  height: 163px;
  margin-bottom: 14px;
}

.cb-persona-public .cb-side-body .cb-cards-3 .cb-card-img {
  height: 156px;                 /* 273×156 из макета; раньше 163 — перебивалось
                                    правилом face_base_v2.css */
}

.cb-persona-public .cb-side-body .cb-card-name {
  font-family: 'Proxima Nova Bold';
  font-size: 18px;
  line-height: 20px;
  color: #000000;
}

.cb-persona-public .cb-side-body .cb-card-role {
  font-size: 16px;
  line-height: 20px;
  color: #595959;
}

/* ============================================ ПРАВАЯ КОЛОНКА: ДОСТИЖЕНИЯ ==
   Макет Achivments: кружок 53×53 заливкой #00aeef со звездой внутри, текст на
   71 px от левого края блока (53 + 18), текст 16 px, шаг строк 80 px
   (1749, 1829, 1909). Текст короткий стоит ПО ЦЕНТРУ кружка, длинный (3 строки)
   начинается от его верха — это ровно `vertical-align: middle` у ячейки. */

.cb-persona-public .cb-side-body .cb-award {
  margin-bottom: 27px;           /* 53 + 27 = 80 px шаг */
}

.cb-persona-public .cb-side-body .cb-award-ico {
  width: 53px;
}

.cb-persona-public .cb-side-body .cb-award-ico span {
  width: 53px;
  height: 53px;
  line-height: 53px;
  font-size: 28px;
}

.cb-persona-public .cb-side-body .cb-award-body {
  padding-left: 18px;
  vertical-align: middle;
  font-size: 16px;
  line-height: 22px;
}

/* ============================================================ УЗКИЙ ЭКРАН ==
   Макетных 1440 на телефоне нет, поэтому ниже 1241 px остаётся прежняя
   раскладка (одна колонка, карточки в два ряда), но с новыми цветами и
   кеглями, чтобы вид не «прыгал» между ширинами. Кнопки разделов на узком
   экране тянем по колонке — иначе 226 px на 390 не влезают. */

@media (max-width: 1240px) {
  .cb-persona-public.cb-persona-guest .cb-page-top {
    margin-bottom: 22px;
  }

  /* кнопки страницы на узком экране — обычной строкой ПОД обложкой: в колонке
     аватара 108 px кнопка 213 px не помещается и давала горизонтальную прокрутку.
     Раскладка та же, что была до этапа 4 (проверка: прокрутка 0). */
  .cb-persona-public.cb-persona-guest .cb-cover-avatar-actions {
    order: 3;
    flex: 0 0 100%;
    margin-top: 10px;
  }

  .cb-persona-public.cb-persona-guest .cb-cover-avatar-actions .ro-button {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: 41px;
    min-height: 41px;
    line-height: 37px;
    margin: 0 0 8px;
    padding: 0 8px;
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* отрицательный отступ сетки людей рассчитан на колонку 270 px; на узком
     экране колонка во всю ширину, и −16 px вылезали за экран (замер: 6 px
     горизонтальной прокрутки на 390) */
  .cb-persona-public .cb-side-cell .cb-people-grid {
    margin-right: 0;
  }

  .cb-persona-public .cb-side-cell .cb-pinfo-row {
    margin-bottom: 18px;
  }

  .cb-persona-public .cb-side-cell .cb-people {
    width: auto;
    margin-bottom: 26px;
  }

  .cb-persona-public .cb-side-body .cb-sec {
    margin-bottom: 34px;
  }

  .cb-persona-public .cb-side-body .cb-sec-title {
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 16px;
  }

  .cb-persona-public .cb-side-body .cb-cards .cb-card {
    margin-bottom: 20px;
  }

  .cb-persona-public .cb-side-body .cb-cards .cb-card-img {
    height: 163px;
  }

  .cb-persona-public .cb-side-body .cb-cards-3 .cb-card-img {
    height: 163px;
  }

  .cb-persona-public .cb-side-body .cb-sec-actions .ro-button {
    width: 100%;
    max-width: 226px;
    height: 44px;
    min-height: 44px;
    line-height: 40px;
  }
}

@media (max-width: 560px) {
  .cb-persona-public .cb-side-cell .cb-pinfo-name {
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 14px;
  }

  .cb-persona-public .cb-side-cell .cb-people-head {
    font-size: 20px;
    line-height: 24px;
  }

  .cb-persona-public .cb-side-body .cb-sec-title {
    font-size: 22px;
    line-height: 26px;
  }

  .cb-persona-public .cb-side-body .cb-card-name {
    font-size: 17px;
  }

  .cb-persona-public .cb-side-body .cb-card-role {
    font-size: 15px;
  }
}