/* Страницы «Новости» (список) и «Новость» (статья).
   Здесь только отступы и предельные ширины: карточки, чипсы, пагинация,
   .prose и .video-facade целиком живут в фундаменте site.css.
   Никаких !important на цвета, фон и рамки — иначе ломается версия
   для слабовидящих, которая перебивает оформление через `body *`. */

/* ---------- список ---------- */

/* Заголовок и лид раздела: шаг из макета (20px и 16px). */
.news-title { margin-top: 20px; }
.news-lead { margin-top: 16px; }

/* Ряд рубрик со счётчиком: нижняя граница отделяет фильтр от сетки.
   Счётчик прижимает вправо .chips__count из фундамента. */
.news-filter {
  margin-top: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--c-border);
}

.news-grid { margin-top: 36px; }
.news-empty { margin-top: 36px; }

/* На узком экране счётчик перестаёт быть «хвостом» строки чипсов
   и встаёт отдельной строкой — иначе он ужимает сами чипсы. */
@media (max-width: 560px) {
  .news-filter { padding-bottom: 20px; }
  .news-filter .chips__count { flex-basis: 100%; margin-left: 0; }
}

/* ---------- статья ---------- */

.article { margin-top: 28px; }

/* Заголовок статьи держим уже колонки: длинная строка плохо читается. */
.article__title { margin-top: 16px; max-width: 860px; }

/* Обложка шире текста (900px), но не шире контейнера. */
.article__cover { margin-top: 32px; width: 100%; max-width: 900px; }

/* Текст и медиа в статье разной ширины (как в макете): сам поток статьи
   идёт до 900px — столько же, сколько обложка и видео, — а 720px из .prose
   возвращаем только текстовым потомкам верхнего уровня. Так .video-facade
   и .video-local получают свои законные 900px, а строка текста не удлиняется. */
.article__body { margin-top: 36px; max-width: 900px; }
.article__body > p,
.article__body > ul,
.article__body > ol,
.article__body > h2,
.article__body > h3,
.article__body > blockquote,
.article__body > dl,
.article__body > table { max-width: 720px; }

/* Заглушка видео идёт первым элементом абзаца — лишний верхний отступ
   после текста не нужен, у .video-facade он уже свой. */
.article__body > .video-facade:first-child { margin-top: 0; }

/* ---------- «Другие новости» под статьёй ---------- */

/* Списочная сетка отбивается от фильтра на 36px, связанная — на 32px
   от линейки заголовка, и вертикальный зазор в макете тоже 32px. */
.news-related { margin-top: 32px; row-gap: 32px; }