@charset "UTF-8";
/*
 * news_feed_v2.css — ЭТАП 1: раздел «Лента новостей» по макету News.psd (2016).
 *
 * ЭТАЛОН: D:\YandexDisk\Clubber\clubber4\PSD\News.psd — холст 1440×3844,
 * слоёв 214, текстов 73, md5 4b45bfa143de (замер: `_clubber/_et0_psd.py`,
 * распечатка `_clubber/_et0_news.txt`). ВНИМАНИЕ: в каталоге `clubber4\` лежит
 * ВТОРОЙ, не эталонный News.psd (1440×3942) — из него снят старый дамп
 * `_design_src/psd2/News.txt`; числа ниже взяты из эталонного файла.
 *
 * РАЗМЕРЫ ИЗ МАКЕТА (bbox слоя → размер):
 *   полоса фильтра `Filtre`          (433,611)-(562,648)    129×37   .cb-nw-filter-btn
 *   кнопка поиска `Search_button`    (1263,608)-(1306,651)    43×43   .cb-nw-search-btn
 *     иконка внутри                  (1271,615)-(1303,647)    32×32
 *   карточка `News_1`                (433,679)-(1309,1689)   876×1010 .cb-nw-card
 *     аватар автора `Ellipse 1`      (464,709)-( 527,772)     63×63   .cb-nw-ava
 *     имя                            @537 (73 от края карточки), y=711 (32 от верха)
 *     дата                           14 px, серая (#ff5959 alpha .35)
 *     подпись вида события           14 px, серая
 *     «не интересно» `cross`         (1157,710)-(1281,742)   124×32   .cb-nw-no
 *       крестик `Delete_cross`                                 14×14
 *     фото `photo`                   (466,795)-(1273,1235)   807×440 .cb-nw-photo
 *   «Показать все N комментариев»    (466,1252)-(1273,1305)  807×53   .cb-nw-more
 *   комментарии `Comments`           (465,1329)-( 865,1658)  400×329 .cb-nw-cmts
 *     строка комментария              ~217×62, аватар          63×63
 *     кнопка «комментировать»        (465,1615)-(658,1658)   193×43   .cb-nw-cmt-btn
 *   форма нового комментария         (469,3423)-(1278,3505)  809×142  .cb-nw-form
 *     поле                           (469,3423)-(1199,3505)  730×82
 *     кнопка «Отправить»             (1052,3522)-(1191,3565) 139×43
 *     аватар справа                  (1216,3424)-(1278,3486)  62×62
 *   попап `PopUp_delet_news`         (535,704)-(904,867)     369×163  .cb-nw-pop
 *     «Закрыть»                      (799,662)-(904,697)     105×35
 *     текст «Вы действительно…»      (570,736)-(860,773)     290×37
 *     «нет» + «Да, отписаться»       (682,791)-(871,834)     189×43
 *
 * ЦВЕТА ИЗ МАКЕТА (дамп текстовых слоёв): «не интересно» — #ff00ae; дата и
 * подписи — серые (в макете #ff5959 с прозрачностью .35 на чёрном ≈ #a6a6a6);
 * «комментировать» и «Да, отписаться» — белые на акцентной плашке; полоса
 * «Показать все N комментариев» — тёмный текст на светло-голубой плашке.
 * Акцент сайта — #00aeef (он же в макете).
 *
 * ШРИФТЫ (правило 11а): только четыре начертания, жирность — ТОЧНЫМ именем,
 * `font-weight` не используется.
 */

/* ------------------------------------------------------------ полоса над списком -- */

.cb-nw-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
}

/* обёртка фильтра: попап списка позиционируется от неё, а не от всей полосы */
.cb-nw-pos { position: relative; }

/* карточка блока комментариев — та же рамка, что у записи */
.cb-nw-card-cmts { padding-top: 22px; }

.cb-nw-sec-title {
  font-family: 'Proxima Nova Bold';
  font-size: 18px;
  line-height: 24px;
  color: #16232b;
  margin: 0 0 16px;
}

.cb-nw-cmt-body { min-width: 0; }

.cb-nw-form-side {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* фильтр «Все новости» — 129×37 из макета */
.cb-nw-filter-btn {
  box-sizing: border-box;
  width: 129px;
  height: 37px;
  padding: 0 22px 0 12px;
  border: 1px solid #d7e2ea;
  border-radius: 4px;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0h9L4.5 6z' fill='%23a8b6c0'/%3E%3C/svg%3E") no-repeat right 9px center;
  font-family: 'Proxima Nova Regular';
  font-size: 16px;
  line-height: 35px;
  color: #000;
  text-align: left;
  white-space: nowrap;      /* макет: подпись «Все новости» 89×11 в одну строку */
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.cb-nw-filter-btn:hover { border-color: #00aeef; }

/* выпадающий список фильтра — как попап фильтра у друзей */
.cb-nw-filter-pop {
  position: absolute;
  left: 0;
  top: 43px;
  z-index: 12;
  display: none;
  min-width: 240px;
  padding: 8px 0;
  border: 1px solid #e2ebf1;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(20, 40, 60, .14);
}

.cb-nw-filter-pop.cb-nw-on { display: block; }

.cb-nw-filter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 14px;
  font-family: 'Proxima Nova Regular';
  font-size: 14px;
  line-height: 20px;
  color: #16232b;
  text-decoration: none;
}

.cb-nw-filter-item:hover { background: #f2fbff; }
.cb-nw-filter-item.cb-nw-active { background: #d0f2ff; }
.cb-nw-filter-item span { color: #9aa7b2; }

/* поиск — кнопка 43×43 в правом краю полосы, по нажатию раскрывается поле */
.cb-nw-search-btn {
  box-sizing: border-box;
  width: 43px;
  height: 43px;
  margin-left: auto;
  border: 1px solid #d7e2ea;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  position: relative;
}

.cb-nw-search-btn::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 9px;
  width: 18px;
  height: 18px;
  border: 2px solid #00aeef;
  border-radius: 50%;
}

.cb-nw-search-btn::after {
  content: '';
  position: absolute;
  left: 26px;
  top: 26px;
  width: 9px;
  height: 2px;
  background: #00aeef;
  transform: rotate(45deg);
}

.cb-nw-search-form {
  display: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.cb-nw-search-form.cb-nw-on { display: flex; }

.cb-nw-search-form input[type="text"] {
  box-sizing: border-box;
  width: 378px;                 /* макет: поле поиска у друзей 378×43, тот же компонент */
  max-width: 100%;
  height: 43px;
  padding: 0 12px;
  border: 1px solid #d7e2ea;
  border-radius: 4px;
  font-family: 'Proxima Nova Regular';
  font-size: 14px;
}

/* ------------------------------------------------------------------- карточка -- */

.cb-nw {
  max-width: 876px;             /* колонка карточек из макета */
}

.cb-nw-card {
  position: relative;
  box-sizing: border-box;
  margin: 0 0 28px;
  padding: 32px 33px 0;
  border: 1px solid #e6eef3;
  border-radius: 3px;
  background: #fff;
}

/* крестик «не интересно» — правый верхний угол карточки, 124×32 */
.cb-nw-no {
  position: absolute;
  right: 28px;
  top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;                /* макет: группа `cross` 124×32 */
  border: 0;
  background: none;
  padding: 0;
  font-family: 'Proxima Nova Regular';
  font-size: 16px;
  line-height: 20px;
  color: #ff00ae;
  cursor: pointer;
}

.cb-nw-no:hover { text-decoration: underline; }

.cb-nw-no i {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
}

.cb-nw-no i::before,
.cb-nw-no i::after {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
  background: #ff00ae;
}

.cb-nw-no i::before { transform: rotate(45deg); }
.cb-nw-no i::after  { transform: rotate(-45deg); }

/* шапка карточки: аватар 63×63, справа от него имя, дата, подпись */
.cb-nw-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
}

.cb-nw-ava {
  flex: 0 0 63px;
  width: 63px;
  height: 63px;
  overflow: hidden;
  border-radius: 50%;
  background: #f2f6f8;
  text-decoration: none;
}

.cb-nw-ava img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cb-nw-ava-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #6b7a8c;
  color: #fff;
  font-family: 'Proxima Nova Bold';
  font-size: 22px;
  line-height: 1;
}

.cb-nw-who { min-width: 0; }

.cb-nw-name {
  display: block;
  font-family: 'Proxima Nova Regular';
  font-size: 16px;
  line-height: 19px;
  color: #000;
  text-decoration: none;
}

.cb-nw-name:hover { color: #00aeef; }

.cb-nw-date {
  font-family: 'Proxima Nova Regular';
  font-size: 14px;
  line-height: 18px;
  color: #9aa7b2;
}

.cb-nw-sub {
  font-family: 'Proxima Nova Regular';
  font-size: 14px;
  line-height: 18px;
  color: #9aa7b2;
}

.cb-nw-text {
  font-family: 'Proxima Nova Regular';
  font-size: 16px;
  line-height: 22px;
  color: #16232b;
  margin: 0 0 14px;
}

.cb-nw-text a { color: #00aeef; text-decoration: none; }
.cb-nw-text a:hover { text-decoration: underline; }

/* фото записи — 807×440 из макета; набор плиток как в макете (1 большая + 4 малые) */
.cb-nw-photo {
  display: flex;
  gap: 2px;
  margin: 0 0 16px;
  max-width: 807px;
}

.cb-nw-photo a {
  display: block;
  overflow: hidden;
  background: #f2f6f8;
  text-decoration: none;
}

.cb-nw-photo a img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cb-nw-photo-main { flex: 0 0 505px; width: 505px; height: 286px; }

.cb-nw-photo-side {
  display: grid;
  grid-template-columns: 136px 136px;
  grid-template-rows: 135px 135px;
  gap: 2px 15px;
}

.cb-nw-photo-side a { width: 136px; height: 135px; }

/* --------------------------------------------------------------- комментарии -- */

.cb-nw-cmts {
  margin: 0 0 14px;
  max-width: 400px;             /* макет: Comments 400×329 */
}

.cb-nw-cmt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 20px;
}

.cb-nw-cmt .cb-nw-ava { flex: 0 0 63px; }

.cb-nw-cmt-who { line-height: 16px; }

.cb-nw-cmt-name {
  font-family: 'Proxima Nova Regular';
  font-size: 16px;
  color: #000;
  text-decoration: none;
}

.cb-nw-cmt-date {
  font-family: 'Proxima Nova Regular';
  font-size: 12px;
  color: #9aa7b2;
}

.cb-nw-cmt-text {
  font-family: 'Proxima Nova Regular';
  font-size: 16px;
  line-height: 20px;
  color: #16232b;
  overflow-wrap: break-word;
}

/* «Показать все N комментариев» — 807×53, плашка во всю ширину карточки */
.cb-nw-more {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 807px;
  height: 53px;
  margin: 0 0 14px;
  border: 0;
  border-radius: 3px;
  background: #d0f2ff;
  font-family: 'Proxima Nova Regular';
  font-size: 16px;
  line-height: 53px;
  color: #16232b;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.cb-nw-more:hover { background: #bdeafd; }

/* «комментировать» — 193×43, белым по акценту */
.cb-nw-cmt-btn {
  display: inline-block;
  box-sizing: border-box;
  width: 193px;
  height: 43px;
  margin: 0 0 18px;
  border: 0;
  border-radius: 3px;
  background: #00aeef;
  font-family: 'Proxima Nova Regular';
  font-size: 16px;
  line-height: 43px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.cb-nw-cmt-btn:hover { background: #0098d2; }

/* форма нового сообщения — раскладка ровно как в макете (`New comments`
   809×142): поле 730×82 и аватар 62×62 в первой строке, кнопка «Отправить»
   139×43 — во второй, справа. Поэтому flex с переносом: поле и аватар занимают
   804 px из 810 доступных, кнопка переносится на вторую строку. */
.cb-nw-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  padding: 0 0 26px;
}

.cb-nw-form textarea {
  box-sizing: border-box;
  flex: 1 1 600px;
  min-width: 0;
  height: 82px;
  max-width: 730px;
  padding: 12px 14px;
  border: 1px solid #e2ebf1;
  border-radius: 3px;
  background: #fbfcfd;
  font-family: 'Proxima Nova Regular';
  font-size: 16px;
  line-height: 20px;
  color: #16232b;
  resize: vertical;
}

.cb-nw-form .cb-nw-ava { flex: 0 0 62px; width: 62px; height: 62px; }

.cb-nw-send {
  box-sizing: border-box;
  flex: 0 0 139px;
  width: 139px;
  height: 43px;
  margin-left: auto;            /* вторая строка, по правому краю — как в макете */
  border: 0;
  border-radius: 3px;
  background: #00aeef;
  font-family: 'Proxima Nova Regular';
  font-size: 16px;
  line-height: 43px;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.cb-nw-send:hover { background: #0098d2; }

.cb-nw-empty {
  padding: 26px 0 34px;
  font-family: 'Proxima Nova Regular';
  font-size: 16px;
  line-height: 22px;
  color: #9aa7b2;
}

/* --------------------------------------------------------------------- попап --
   Макет 2016, группа `PopUp_delet_news`: «Вы действительно хотите отписаться от
   новостей пользователя?», кнопки «нет» и «Да, отписаться» 189×43, «Закрыть». */

.cb-nw-pop-bg {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 900;
  background: rgba(10, 16, 22, .55);
}

.cb-nw-pop-bg.cb-nw-on { display: block; }

.cb-nw-pop {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 901;
  display: none;
  box-sizing: border-box;
  width: 369px;
  min-height: 163px;
  padding: 22px 24px 24px;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(10, 20, 30, .35);
  text-align: center;
}

.cb-nw-pop.cb-nw-on { display: block; }

.cb-nw-pop-close {
  position: absolute;
  right: 0;
  top: -35px;
  width: 105px;
  height: 35px;
  border: 0;
  border-radius: 3px 3px 0 0;
  background: #00aeef;
  font-family: 'Proxima Nova Regular';
  font-size: 16px;
  line-height: 35px;
  color: #fff;
  cursor: pointer;
}

.cb-nw-pop-text {
  font-family: 'Proxima Nova Regular';
  font-size: 16px;
  line-height: 19px;
  color: #16232b;
  margin: 0 0 22px;
}

.cb-nw-pop-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.cb-nw-pop-yes {
  box-sizing: border-box;
  width: 189px;
  height: 43px;
  border: 0;
  border-radius: 3px;
  background: #00aeef;
  font-family: 'Proxima Nova Regular';
  font-size: 16px;
  line-height: 43px;
  color: #fff;
  cursor: pointer;
}

.cb-nw-pop-no {
  border: 0;
  background: none;
  font-family: 'Proxima Nova Regular';
  font-size: 16px;
  line-height: 20px;
  color: #ff00ae;
  cursor: pointer;
}

.cb-nw-pop-no:hover { text-decoration: underline; }

/* ------------------------------------------------------------------- телефон -- */

@media (max-width: 900px) {
  .cb-nw-card { padding: 20px 14px 0; }

  .cb-nw-no { right: 12px; top: 8px; font-size: 14px; }

  .cb-nw-photo { flex-wrap: wrap; }

  .cb-nw-photo-main { flex: 0 0 100%; width: 100%; height: auto; }

  .cb-nw-photo-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }

  .cb-nw-photo-side a { width: 100%; height: auto; }

  .cb-nw-search-form input[type="text"] { width: 100%; }

  .cb-nw-search-form.cb-nw-on {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 13;
    background: #fff;
  }

  .cb-nw-form { flex-wrap: wrap; }

  .cb-nw-form textarea { flex: 1 1 100%; max-width: 100%; }

  .cb-nw-form .cb-nw-ava { flex: 0 0 48px; width: 48px; height: 48px; }

  .cb-nw-send { flex: 1 1 100%; width: 100%; margin-left: 0; }

  .cb-nw-pop { width: calc(100% - 24px); }

  .cb-nw-pop-close { position: static; width: 100%; border-radius: 3px; margin-bottom: 12px; }

  .cb-nw-pop-actions { flex-direction: column; }

  .cb-nw-pop-yes { width: 100%; }
}