@charset "UTF-8";
/* ============================================================================
   news_item_layout1.css — СТРАНИЦА-НОВОСТИ-ПО-МАКЕТУ-1 (тег NEWS-ITEM-LAYOUT-1),
   10.10.2026, задача _ni1_*.

   ОТДЕЛЬНЫЙ СЛОЙ ПОВЕРХ ЧУЖИХ ФАЙЛОВ (правила 14, 18, 24): чужие CSS не
   правятся, свои правила кладём своим файлом, подключённым ПОСЛЕ них — та же
   схема, что у соседей (_ns2_ -> news_article_psd.css, _nb3_ -> news_layout_guard.css).
   Соседи, поверх которых лежим:
     • news_articles.css     — базовые стили разделов «Новости»/«Статьи»;
     • news_afisha_style.css — _na1_* (НОВОСТЬ-В-СТИЛЕ-СТАРОЙ-АФИШИ-1);
     • news_article_psd.css  — _ns2_* (НОВОСТЬ-И-СТАТЬЯ-ПО-PSD-1);
     • news_layout_guard.css — _nb3_* (НОВОСТЬ-ВЁРСТКА-И-БАННЕР-1);
     • adv_slots.css         — _bn2_* (БАННЕРЫ-СПРАВА-1).

   Все селекторы привязаны к странице ОДНОЙ новости сайта (#news). Файл
   подключается только шаблоном smarty/templates/news/news_item_v2.tpl — на
   другие страницы он не влияет вовсе.

   5 ПРАВОК МАКЕТА ВЛАДЕЛЬЦА (10.10.2026):
     1. баннер справа: колонка .cb-nas-side больше не «уезжает вниз» на узких
        настольных экранах (было: display:block на ширине <= 1000 px);
     2. дата словом и значки — ОДНОЙ строкой (дата · глаз · комментарий · сердечко);
     3. сердечко — такой же значок, как глаз и комментарий (не кнопка в рамке);
     4. «Комментарии» — сразу под серой полосой «Поделиться»;
     5. форма: аватар слева, поле ввода, справа под полем кнопка «Отправить».
   ============================================================================ */

/* --- 1. БАННЕР СПРАВА на узких настольных экранах --------------------------
   news_layout_guard.css:156-159 на ширине <= 1000 px ставит .cb-nas-cols
   display:block — правая колонка уезжает ПОД материал. Числа макета
   870 + 30 + 269 = 1169 при этом не мешают: .cb-nas-main объявлен
   flex:1 1 auto с min-width:0, поэтому до 821 px две колонки помещаются без
   переполнения по горизонтали. Ниже 821 px (планшет и телефон) остаётся одна
   колонка — правило 11а: узкий экран не ломаем. */
@media (min-width: 821px) and (max-width: 1000px) {
  #news .cb-nas .cb-nas-cols { display: flex; }
  #news .cb-nas-side { margin: 0; }
}

/* --- 2. ДАТА И ЗНАЧКИ — ОДНОЙ СТРОКОЙ --------------------------------------
   .single-meta держит дату и город, .cb-news-stat — панель значков
   (news_articles.css:530-544: display:flex, padding 10px 0 6px, clear:both).
   В макете это ОДНА строка: «2 мая 2014  глаз N  комментарий N  сердечко N».
   Панель значков становится обычной врезкой той же строки. */
#news .cb-nas .single-meta { display: flex; flex-wrap: wrap; align-items: center; }
#news .cb-nas .single-meta .cb-news-stat {
  clear: none;
  margin: 0 0 0 10px;
  padding: 0;
  gap: 4px 14px;
}
#news .cb-nas .single-meta .cb-art-stat > span { min-height: 0; }

/* --- 3. СЕРДЕЧКО — ТАКОЙ ЖЕ ЗНАЧОК, КАК ГЛАЗ И КОММЕНТАРИЙ ----------------
   news_articles.css:547-565 рисует .cb-art-like КНОПКОЙ (рамка 1 px, голубая
   заливка, padding 0 18px) — это вид страницы статьи. На странице новости
   владелец просит значок В РЯДУ с глазом и комментарием: та же величина, тот
   же цвет #697982, без рамки. Нажимаемость и состояние «лайк стоит» сохранены
   (синий цвет), область нажатия — не меньше 44 px, как у соседних значков. */
#news .cb-news-stat .cb-art-like {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #697982;
  font-family: 'Proxima Nova Regular', Arial, sans-serif;
  font-size: 15px;
}
#news .cb-news-stat .cb-art-like .cb-art-likenum {
  font-family: 'Proxima Nova Bold', Arial, sans-serif;
}
#news .cb-news-stat .cb-art-like:hover,
#news .cb-news-stat .cb-art-like.cb-art-like-on {
  color: #00aeef;
  background: none;
  border: 0;
}

/* --- 4. «КОММЕНТАРИИ» — СРАЗУ ПОД СЕРОЙ ПОЛОСОЙ «ПОДЕЛИТЬСЯ» ---------------
   Блок комментариев (.cb-nas-bottom -> .cb-nas-cmt) перенесён В ШАБЛОНЕ вверх,
   к полосе «Поделиться»; служебные строки (источник, кнопки правки) и
   линия-разделитель остались ниже. Отступ от полосы задаём здесь одним числом.
   У соседа .cb-nas-cmt .comments-container{margin-top:0} (news_afisha_style.css:137),
   у базы — 50 px (news_articles.css:210-212). Берём 40 px. */
#news .cb-nas .cb-nas-cmt .comments-container { margin-top: 40px; }

/* --- 5. ФОРМА: АВАТАР — ПОЛЕ — «ОТПРАВИТЬ» СПРАВА --------------------------
   В макете владельца: слева аватар вошедшего, правее поле ввода, ПОД полем
   справа кнопка «Отправить»; затем идёт список комментариев (порядок уже
   такой: форма, потом #comments). */
#news .comment-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
#news .comment-form-avatar { flex: 0 0 72px; width: 72px; }
#news .comment-form-avatar img { display: block; width: 72px; height: auto; }
#news .comment-form-field { flex: 1 1 240px; min-width: 0; }
#news .comment-form-field textarea { display: block; width: 100%; }
#news .comment-form-field .comment-form-actions { margin-top: 12px; text-align: right; }

/* телефон: аватар меньше, поле во всю ширину */
@media (max-width: 560px) {
  #news .comment-form-avatar { flex: 0 0 48px; width: 48px; }
  #news .comment-form-avatar img { width: 48px; }
}