@charset "UTF-8";
/* ============================================================================
   news_article_psd.css — НОВОСТЬ-И-СТАТЬЯ-ПО-PSD-1 (тег NEWS-ARTICLE-PSD-1),
   03.10.2026, задача _ns2_*.

   ДОВОДКА ДО ЧИСЕЛ МАКЕТА. Источник чисел — ТОЛЬКО PSD:
   D:\YandexDisk\Clubber\clubber4\Clubber.zip -> Clubber\Афиша внутренняя.psd
   (1440x1731, 762 слоя) и однотипный «Статьи внутренняя.psd»; снятые числа
   лежат в _clubber\_dn1_work\PSD_числа.tsv, превью —
   _clubber\_dn1_work\макет_превью\afisha_vnutr_full.png.

   ЧИСЛА PSD (PSD_числа.tsv, строка -> значение)
     обёртка контента ............ x 133..1304 = 1172
     постер (левая колонка) ...... x 133..608  = 475 x 671 (отношение 0,708)
     правая колонка .............. x 634..1302 = 669, зазор 26
     заголовок материала ......... x 635
     плашка «Поделиться:» ........ 668 x 49, фон #e0e0e0
     линия-разделитель ........... 1 px #999999, y = 919
     колонка комментариев ........ x 133..686  = 553
     боковой блок «Уже идут» ..... x 835..1302 = 467 (зазор низа 149)
     крошки ...................... x 134..654, росчерк 17 px, Condensed Bold

   ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ: раскладку этих же страниц уже сделал сосед
   `_na1_*` (тег NEWS-OLD-AFISHA-STYLE-1) по JPG-образцу и его файл
   `news_afisha_style.css` выложен на боевой. Правило 18/24: чужой файл не
   переписываем — свои числа кладём СВОИМ файлом, подключённым ПОСЛЕ него.
   Здесь только переопределения; ни одного чужого правила не удаляется.

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

/* ---------------------------------------------- 1. обёртка и две колонки --- */
/* Обёртка контента: 1172 px по PSD (у нового дизайна .wrapper — 1170) */
.single-container.cb-nas { max-width: 1172px; }

/* Постер слева 475 px, текст справа 669 px, зазор между ними 26 px */
.cb-nas .cb-nas-top { gap: 26px; }
.cb-nas .cb-nas-pic {
  flex: 0 0 475px;
  max-width: 475px;
  min-width: 0;
}
/* «Не растягивать сверх файла»: ширина колонки 475, высота — по файлу,
   но не больше 671 px (в PSD постер 475x671). Портретный постер, как в
   макете, встаёт ровно 475x671 и не искажается; ландшафтная обложка
   остаётся своей высоты. object-fit: cover ничего не растягивает. */
.cb-nas .cb-nas-pic img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 671px;
  object-fit: cover;
}
.cb-nas .cb-nas-txt {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 669px;
}

/* Плашка «Поделиться»: 668 x 49 (в PSD x 634..1302 при колонке 669) */
.cb-nas .cb-shr {
  width: 668px;
  max-width: 100%;
  min-height: 49px;
  background-color: #e0e0e0;
}

/* Линия-разделитель: 1 px #999999 (у соседа уже #999 — подтверждаем числом) */
.cb-nas-sep {
  height: 0;
  margin: 33px 0 34px;
  border-top: 1px solid #999999;
}

/* -------------------------------- 2. крошки «Новости / <заголовок>» -------- */
/* В PSD на месте плашки «НОВОСТИ» стоит ряд крошек (x 134..654,
   росчерк 17 px, Proxima Nova Condensed Bold, прописными). Плашку
   .section-header заменяем крошками; «Новости»/«Статьи» остаются ССЫЛКОЙ
   на страницу раздела — навигация правила 23 §5 сохраняется. */
.cb-nas-crumbs {
  display: inline-block;
  max-width: 100%;
  margin: 0 0 18px;
  font-family: 'Proxima Nova Condensed Bold', Arial, sans-serif;
  font-size: 20px;
  line-height: 26px;
 
  color: #191919;
}
.cb-nas-crumbs a,
.cb-nas-crumbs span { font-family: inherit; }
.cb-nas-crumbs a { color: #191919; text-decoration: none; }
.cb-nas-crumbs a:hover { color: #00aeef; text-decoration: none; }
.cb-nas-crumbs .cb-nas-crumb-sep {
  display: inline-block;
  margin: 0 8px;
  color: #999999;
}
.cb-nas-crumbs .cb-nas-crumb-cur { color: #191919; }

/* ---------------- 3. счётчики — В СТРОКЕ ДАТЫ (а не блоком под колонками) - */
/* В PSD «Дата и время» идёт одной строкой; счётчики ставим в ту же строку.
   Сосед делал .single-meta > span блоками и держал счётчики ОТДЕЛЬНЫМ
   блоком ниже двух колонок — здесь это переопределяется. */
.cb-nas .single-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 14px;
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 22px;
  color: #191919;
}
.cb-nas .single-meta > span,
.cb-nas .single-meta > span.mr15,
.cb-nas .single-meta > span.mr10 {
  display: inline-block;
  margin-right: 0;
}
.cb-nas .single-meta .cb-art-stat,
.cb-nas .single-meta .cb-news-stat {
  display: inline-flex;
  align-items: center;
  margin: 0;
  vertical-align: middle;
}
/* автор — отдельной строкой под датой, как «В программе» в макете */
.cb-nas .single-meta > .single-meta-author {
  display: block;
  flex: 1 0 100%;
}

/* Счётчики, оставшиеся вне .single-meta (страховка на случай чужой сборки
   шаблона), по-прежнему не растягиваются на всю ширину. */
.cb-nas > .cb-art-stat,
.cb-nas > .cb-news-stat { margin: 0 0 14px; }

/* ------------------------------- 4. иконка у заголовка «Комментарии» ----- */
/* В PSD «КОММЕНТАРИИ» нарисованы со значком (слой 165,945 144x14). Значок —
   общий спрайт include/stats_icon_v2.tpl (icon='comments'), новых нет. */
.cb-nas-cmt .comments-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cb-nas-cmt .comments-header .cb-cmt-ico {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.cb-nas-cmt .comments-header .cb-cmt-ico svg { display: block; }

/* ------------------- 5. боковой блок «Уже идут N человек» ---------------- */
/* PSD: заголовок x 835..1209, аватары в ряд, ниже черта и «Добавить в
   расписание». Показывается ТОЛЬКО когда данные есть (нет — блока нет). */
.cb-nas-side { flex: 0 0 467px; max-width: 467px; min-width: 0; }
.cb-nas-cmt { flex: 0 0 553px; max-width: 553px; min-width: 0; }
.cb-nas-bottom { gap: 149px; }

/* черта и «Добавить в расписание» — как в макете, под аватарами */
.cb-nas-going-rule {
  height: 0;
  margin: 14px 0;
  border-top: 1px solid #999999;
}
.cb-nas-going-sched {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;              /* тап-зона >= 44 px */
  font-size: 16px;
  line-height: 22px;
  color: #191919;
  text-decoration: none;
}
.cb-nas-going-sched:hover { color: #00aeef; }
.cb-nas-going-sched svg { display: block; flex: 0 0 auto; }

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

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

/* ТЕЛЕФОН: одна колонка, без переполнения (правило МОБИЛЬНАЯ-ВЕРСИЯ-1) */
@media (max-width: 768px) {
  .single-container.cb-nas { max-width: 100%; }
  .cb-nas .cb-nas-top { display: block; }
  .cb-nas .cb-nas-pic {
    flex: none;
    max-width: 100%;
    margin: 0 0 18px;
  }
  .cb-nas .cb-nas-pic img { max-height: none; }
  .cb-nas .cb-nas-txt { max-width: none; }
  .cb-nas-crumbs { font-size: 16px; line-height: 22px; margin-bottom: 14px; }
  .cb-nas .single-meta { gap: 0 10px; }
  .cb-nas .cb-shr { width: auto; }
  .cb-nas .cb-nas-bottom { display: block; }
  .cb-nas .cb-nas-cmt { max-width: none; }
}

/* ------------------- 7. новость заведения: вернуть числа обёртки -------- */
/* На /place/blog.php?q=..&blog=.. контейнер #place-blog-card даёт по 24 px
   внутреннего отступа с каждой стороны, из-за чего колонки встают
   475 / 26 / 621 вместо чисел PSD 475 / 26 / 669 (обёртка 1172). Снимаем
   отступ только на широком экране — на телефоне он нужен. */
@media (min-width: 769px) {
  /* Чужой inline-<style> на этой странице задаёт #place-blog-card{
     padding: 0 24px 8px} и стоит ПОЗЖЕ нашего файла — при равной
     специфичности побеждает он. Удваиваем id: правило то же, но
     выигрывает порядок. Чужой файл не правится (правила 18, 24). */
  #place-blog-card#place-blog-card { padding-left: 0; padding-right: 0; }
}