@charset "UTF-8";
/* ============================================================================
   article_own.css — СТАТЬЯ-ПО-СВОЕМУ-PSD-1 (тег ARTICLE-PSD-OWN-1), 03.10.2026.

   Страница ОДНОЙ статьи по ЕЁ СОБСТВЕННОМУ макету «Статьи внутренняя.psd»
   (холст 1440x1911). Это НЕ раскладка новости/афиши: у статьи картинка стоит
   СВЕРХУ во всю ширину контента, а справа — колонка под три рекламных места.

   ЧИСЛА СНЯТЫ ИЗ PSD (не на глаз) — _clubber/_st1_work/канон_статьи.tsv:
     контейнер ................. 1170 px (.wrapper нового дизайна)
     контент-колонка ........... 871 px
     зазор ..................... 29 px
     правая колонка ............ 270 px (баннеры 240 и «широкий» 270)
     картинка материала ........ 669x425, НАД текстом, во всю ширину контента
     заголовок ................. росчерк 24 px -> 26 px
     крошки / текст / плашка ... 20 / 16 / 16 px, шаг строк 20 px
     плашка «Поделиться» ....... 872x52, фон #e0e0e0
     комментарии ............... колонка 553 px
     зазор между баннерами ..... 31..33 px -> 30 px
     мест под баннеры .......... ровно 3

   Классы .cb-art-* — только этого файла. Общий news_afisha_style.css (новость)
   НЕ переписывается: правила статьи идут с префиксом .cb-art-own и потому
   перекрывают его только на странице статьи.

   Пустой слот не рисуется: HTML слота приходит из lib/advlib.php
   (cb_adv_slot_html), и при пустом слоте это пустая строка — своей плашки
   страница не рисует.
   ========================================================================= */

/* Контейнер статьи — вся ширина нового дизайна (у .single-container стоит 900) */
.single-container.cb-art-own { max-width: 1170px; }

/* ------------------------------------------------------- две колонки ------ */
.cb-art-own .cb-art-wrap {
  display: flex;
  align-items: flex-start;
  gap: 29px;                       /* 1170 - 871 - 270 = 29 (PSD: 29..30) */
}
.cb-art-own .cb-art-main {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 871px;                /* контент-колонка PSD */
}
.cb-art-own .cb-art-rail {
  flex: 0 0 270px;
  max-width: 270px;
  min-width: 0;
}

/* ------------------------------------------------------------ верх -------- */
/* Картинка статьи — СВЕРХУ, во всю ширину колонки контента. Сверх файла НЕ
   растягиваем: width:auto + max-width:100% (широкий файл упирается в ширину
   блока, узкий остаётся своего размера). width:auto обязателен — общий
   news_afisha_style.css задаёт картинке афиши width:100%. */
/* СТАТЬЯ-ОБЛОЖКА-И-ГОРОДА-АДМИНЫ-1 (ARTICLE-COVER-AND-CITY-ADMINS-1),
   05.10.2026: ширина обложки — 669, КАК В МАКЕТЕ (PSD «Статьи внутренняя»,
   слой Layer 104: 669x425) и как уже сделано у новости сайта и новости
   заведения (news_layout_guard.css, разделы 5.3 и 6.3 — обложка 669 внутри
   колонки 870). Раньше БЛОК обложки занимал всю колонку 871 — именно это
   расходилось с макетом (находка задачи РАСКЛАДКА-НОВОСТИ-ЗАВЕДЕНИЯ-1:
   «обложка статьи 871x671, а в макете 669 из 870»). Правим ЗДЕСЬ, а не в
   общем стороже: файл принадлежит статье (правила 14, 18, 24), сторож и его
   разделы новостей/заведения не тронуты, ?v= поднимается только у статьи.
   Правило «не растягивать» сохранено: ограничиваем БЛОК (max-width), а не
   картинку, поэтому узкая обложка остаётся своего размера, широкая упирается
   в 669. На узких экранах блок по-прежнему не шире родителя. */
.cb-art-own .cb-nas-pic {
  flex: none;
  max-width: 669px;                /* СТАТЬЯ-ОБЛОЖКА: 669 из 870, как в PSD */
  margin: 14px 0 34px;             /* PSD: дата -> картинка 14, картинка -> текст 34 */
}
.cb-art-own .cb-nas-pic img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}
.cb-art-own .single-title {
  margin: 0 0 10px;                /* PSD: заголовок -> дата 10 */
  font-size: 26px;
  line-height: 1.15;
}
.cb-art-own .cb-by-line {
  margin-bottom: 6px;
  font-size: 16px;
  line-height: 22px;
}
.cb-art-own .cb-by-line a { color: #00aeef; text-decoration: none; }
.cb-art-own .cb-by-line a:hover { text-decoration: underline; }
.cb-art-own .single-meta {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 22px;
  color: #191919;
}
.cb-art-own .single-meta > span { display: inline; margin-right: 15px; }
.cb-art-own .single-meta > span.mr15,
.cb-art-own .single-meta > span.mr10 { margin-right: 15px; }

/* Текст материала — в колонке контента, шаг строк 16/20 как в PSD */
.cb-art-own .single-text {
  margin-bottom: 36px;             /* PSD: текст -> плашка 36 */
  font-size: 16px;
  line-height: 20px;
}
.cb-art-own .single-text p { margin-bottom: 12px; }

/* Плашка «Поделиться» — во всю ширину контент-колонки, 52 px, фон #e0e0e0 */
.cb-art-own .cb-shr {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;                     /* PSD: 872 = вся контент-колонка, не 668 */
  max-width: 100%;
  min-height: 52px;
  margin: 0 0 43px;                /* PSD: плашка -> комментарии 43 */
  padding: 6px 16px;
  background-color: #e0e0e0;
}
.cb-art-own .cb-shr-title { flex: 0 0 auto; font-size: 16px; line-height: 22px; color: #191919; }
.cb-art-own .cb-shr-list { flex: 0 1 auto; }
.cb-art-own .cb-video { margin: 18px 0 8px; }
.cb-art-own .cb-video-frame { max-width: 100%; }

/* --------------------------------------------------- линия и низ ---------- */
.cb-art-own .cb-nas-sep {
  height: 0;
  margin: 33px 0 34px;
  border-top: 1px solid #999;
}
.cb-art-own .cb-nas-bottom { display: block; }
.cb-art-own .cb-nas-cmt { max-width: 553px; }   /* колонка комментариев PSD */
.cb-art-own .cb-nas-cmt .comments-container { margin-top: 0; }

/* ------------------------------------------------- правая колонка --------- */
/* Три места под баннеры. Сам блок печатает news/adv_side_v2.tpl (задача
   БАННЕРЫ-СПРАВА-1, тег NEWS-BANNERS-3-1): <div class="cb-adv-rail"> со
   слотами 11/12/13. Здесь — только МЕСТО этого блока: колонка 270 px, начало
   на уровне верха контента (PSD: баннер-1 y=219, заголовок y=220).
   Числа 240x400, зазор 30 и помета «Реклама» 14 px уже заданы в adv_slots.css —
   чужой файл не переписываем (правила 14, 18, 24). */
.cb-art-own .cb-art-rail { align-self: flex-start; }
.cb-art-own .cb-art-rail .cb-adv-rail { margin: 0; max-width: 270px; }
/* --------------------------------------------- узкие экраны и телефон ----- */
@media (max-width: 1200px) {
  .cb-art-own .cb-art-wrap { gap: 22px; }
  .cb-art-own .cb-art-rail { flex: 0 0 240px; max-width: 240px; }
}

@media (max-width: 900px) {
  .cb-art-own .cb-art-wrap { gap: 18px; }
  .cb-art-own .cb-art-rail { flex: 0 0 210px; max-width: 210px; }
}

/* ТЕЛЕФОН: статья в ОДНУ колонку; баннеры уходят ПОД текст (не скрываем —
   рекламное место остаётся рабочим; пустой слот по-прежнему не рисуется) */
@media (max-width: 768px) {
  .single-container.cb-art-own { max-width: 100%; }
  .cb-art-own .cb-art-wrap { display: block; }
  .cb-art-own .cb-art-main { max-width: none; }
  .cb-art-own .cb-art-rail {
    flex: none;
    max-width: none;
    margin: 28px 0 0;
  }
  .cb-art-own .single-title { font-size: 22px; }
  .cb-art-own .cb-nas-pic { margin: 12px 0 20px; }
  .cb-art-own .single-text { font-size: 16px; line-height: 22px; margin-bottom: 22px; }
  .cb-art-own .cb-shr {
    display: block;
    min-height: 44px;
    padding: 8px 12px;
    margin-bottom: 22px;
  }
  .cb-art-own .cb-shr-title { display: block; margin-bottom: 4px; }
  .cb-art-own .cb-nas-sep { margin: 22px 0; }
  .cb-art-own .cb-nas-cmt { max-width: none; }
  /* тап-зона строк действий («Все статьи», «Редактировать» …) — 44 px */
  .cb-art-own .single-action a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}