@charset "UTF-8";
/* ============================================================================
   news_afisha_style.css — НОВОСТЬ-В-СТИЛЕ-СТАРОЙ-АФИШИ-1 (тег
   NEWS-OLD-AFISHA-STYLE-1), 03.10.2026.

   Раскладка страницы ОДНОЙ новости и ОДНОЙ статьи по образцу старой страницы
   Афиши. Образец — снимок владельца «Афиша-внутренняя.jpg» (1440x1731 px,
   контейнер 1170 px), он же макет из папки «Дизайн 4 в jpg». Числа сняты
   замером, а не на глаз: _clubber/_na1_work/образец.tsv (+ образец_замер.tsv).

   ЧТО ВЗЯТО ИЗ ОБРАЗЦА (числами)
     контейнер ................. 1170 px (совпадает с .wrapper нового дизайна)
     левая картинка ............ 470 px
     зазор между колонками ..... 29 px
     правая колонка ............ 671 px
     плашка «Поделиться» ....... во всю правую колонку, высота 49 px, фон #e0e0e0
     отступ до линии ........... 33 px; линия 1 px #999 во всю ширину контейнера
     низ: комментарии .......... 550 px
     низ: зазор ................ 148 px
     низ: боковой блок ......... 470 px
     заголовок ................. росчерк 20 px -> 26 px
     строки-подписи ............ 14 px росчерк -> 16 px, шаг строк 30 px
     текст ..................... росчерк 13 px -> 16 px, шаг строк 20 px

   ЧТО НЕ ТРОГАЕТСЯ: новый дизайн (шрифтовые семейства, цвета, кнопки, значки
   статистики, блок «Поделиться» из __share_v2.tpl). Меняется только раскладка.
   Старый дизайн Афиши (style/poster/*.css, poster_xhtml.tpl, events_xhtml.tpl)
   НЕ правится — он прочитан как образец.

   Классы .cb-nas-* — только этого файла; чужие шаблоны их не используют.
   ========================================================================= */

/* Занимаем всю ширину контейнера нового дизайна (у .single-container стоит 900) */
.single-container.cb-nas { max-width: 1170px; }

/* ---------------------------------------------------------------- верх ---- */
.cb-nas-top {
  display: flex;
  align-items: flex-start;
  gap: 29px;
}
.cb-nas-pic {
  flex: 0 0 470px;
  max-width: 470px;
  min-width: 0;
}
/* «Не растягивать сверх файла»: картинка не шире своей колонки, пропорции целы */
.cb-nas-pic img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}
.cb-nas-txt {
  flex: 1 1 auto;
  min-width: 0;
}
/* Заголовок: кегль из образца, семейство — нового дизайна (правило 11а) */
.cb-nas .single-title {
  margin-bottom: 14px;
  font-size: 26px;
  line-height: 1.15;
}
/* «Место / Персона / Коллектив» — строка связи (cb_byline), как «Место
   проведения:» в образце: отдельной строкой, 16 px */
.cb-nas .cb-by-line {
  margin-bottom: 6px;
  font-size: 16px;
  line-height: 22px;
  color: #191919;
}
.cb-nas .cb-by-line a { color: #00aeef; text-decoration: none; }
.cb-nas .cb-by-line a:hover { text-decoration: underline; }
/* Дата и город — строкой ниже, как «Дата и время:» в образце */
.cb-nas .single-meta {
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 22px;
  color: #191919;
}
.cb-nas .single-meta > span {
  display: block;
  margin-right: 0;
}
.cb-nas .single-meta > span.mr15,
.cb-nas .single-meta > span.mr10 { margin-right: 0; }

/* Текст материала — в правой колонке, шаг строк из образца (16 / 20) */
.cb-nas .single-text {
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 20px;
}
.cb-nas .single-text p { margin-bottom: 12px; }

/* Плашка «Поделиться» — во всю правую колонку, 49 px, фон из образца */
.cb-nas .cb-shr {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 49px;
  margin: 0 0 8px;
  padding: 6px 16px;
  background-color: #e0e0e0;
  border-radius: 0;
}
.cb-nas .cb-shr-title {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 22px;
  color: #191919;
}
.cb-nas .cb-shr-list { flex: 0 1 auto; }

/* Видео — под текстом, в правой колонке */
.cb-nas .cb-video { margin: 18px 0 8px; }
.cb-nas .cb-video-frame { max-width: 100%; }

/* ------------------------------------------------------- линия и низ ------ */
.cb-nas-sep {
  height: 0;
  margin: 33px 0 34px;
  border-top: 1px solid #999;
}
.cb-nas-bottom {
  display: flex;
  align-items: flex-start;
  gap: 148px;
}
.cb-nas-cmt {
  flex: 0 0 550px;
  max-width: 550px;
  min-width: 0;
}
.cb-nas-cmt .comments-container { margin-top: 0; }

/* Правый боковой блок «Уже идут N человек» — только когда у материала
   ЕСТЬ эти данные (нет данных — блока нет целиком) */
.cb-nas-side {
  flex: 0 0 470px;
  max-width: 470px;
  min-width: 0;
}
.cb-nas-going-title {
  margin-bottom: 16px;
  font-family: 'Proxima Nova Bold', Arial, sans-serif;
  font-size: 20px;
  line-height: 26px;
 
  color: #191919;
}
.cb-nas-going-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -6px;
}
.cb-nas-going-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 33.333%;
  padding: 6px;
  min-height: 44px;              /* тап-зона >= 44 px */
  text-decoration: none;
  color: #191919;
  font-size: 14px;
  line-height: 18px;
}
.cb-nas-going-item img {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.cb-nas-going-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.cb-nas-going-item:hover .cb-nas-going-name { color: #00aeef; }

/* ------------------- новость заведения (place/blog_v2.tpl) -----------------
   Те же числа образца, но у страницы новостей заведения свои классы
   (.cb-np1-*), поэтому правила дублируются для них. */
.cb-nas .cb-np1-title {
  margin: 0 0 14px;
  font-family: 'Proxima Nova Bold', Arial, sans-serif;
  font-size: 26px;
  line-height: 1.15;
  color: #1b1b1b;
}
.cb-nas .cb-np1-meta {
  display: block;
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 22px;
}
.cb-nas .cb-np1-meta .date { display: block; font-size: 16px; color: #191919; }
.cb-nas .text {
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 20px;
  color: #2b3a42;
}
.cb-nas .text p { margin-bottom: 12px; }
#place-blog-card .cb-nas .cb-shr {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 49px;
  margin: 0 0 8px;
  padding: 6px 16px;
  background-color: #e0e0e0;
}

/* --------------------------------------------- узкие экраны и телефон ----- */
@media (max-width: 1200px) {
  .cb-nas-top { gap: 22px; }
  .cb-nas-pic { flex: 0 0 380px; max-width: 380px; }
  .cb-nas-bottom { gap: 60px; }
  .cb-nas-cmt { flex: 1 1 auto; max-width: none; }
  .cb-nas-side { flex: 0 0 340px; max-width: 340px; }
}

@media (max-width: 900px) {
  .cb-nas-top { gap: 18px; }
  .cb-nas-pic { flex: 0 0 300px; max-width: 300px; }
  .cb-nas-bottom { display: block; }
  .cb-nas-side { max-width: none; margin-top: 28px; }
}

/* ТЕЛЕФОН: всё в одну колонку, без переполнения (правило МОБИЛЬНАЯ-ВЕРСИЯ-1) */
@media (max-width: 768px) {
  .single-container.cb-nas { max-width: 100%; }
  .cb-nas-top { display: block; }
  .cb-nas-pic {
    flex: none;
    max-width: 100%;
    margin: 0 0 18px;
  }
  .cb-nas .single-title { font-size: 22px; }
  .cb-nas .single-text { font-size: 16px; line-height: 22px; }
  .cb-nas .cb-shr {
    display: block;
    min-height: 44px;
    padding: 8px 12px;
    margin-bottom: 10px;
  }
  .cb-nas .cb-shr-title { display: block; margin-bottom: 4px; }
  .cb-nas-sep { margin: 22px 0 22px; }
  .cb-nas-cmt { max-width: none; }
  .cb-nas-going-item { width: 50%; }
  /* Тап-зона строки действий («Все новости», «Редактировать» …) — 44 px.
     Ссылки ВНУТРИ текста не трогаем: растянуть их нельзя без ломки абзаца. */
  .cb-nas .single-action a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}