/* ==========================================================================
   Страница «Новости» (news.html). Макет 1920, контейнер 1280 — база без @media.
   Кадры Figma: 1920 — 3187:13, 768 — 3188:366, 375 — 3188:865; заметки — 3188:1365.
   Секции: верх (задача 1), сетка карточек (задача 2); пагинация — задача 4 (docs/pages/news.md).
   Все отступы кратны 8 (CLAUDE.md); отклонения от макета — в комментарии у токена.
   ========================================================================== */

/* Фон страницы — как у body (--color-bg-secondary), отдельный не задаём */
.news {
  display: block;
}

/* ---------- Верх (Figma 3187:72 / 3188:403 / 3188:897): H1, подзаголовок, поиск ---------- */
.news {
  padding-top: var(--page-offset-top);
}

.news-top {
  display: flex;
  flex-direction: column;
  gap: var(--news-top-gap);
}

.news-top__head {
  display: flex;
  flex-direction: column;
  gap: var(--news-top-head-gap);
}

.news-top__title {
  color: var(--color-faq-hero-title); /* #313132 */
  font-size: var(--news-top-title-size);
  font-weight: var(--h1-weight);
  line-height: var(--news-top-title-line-height);
  letter-spacing: var(--h1-letter-spacing);
}

.news-top__subtitle {
  color: var(--color-blog-meta); /* #6a6e75 */
  font-size: var(--news-top-subtitle-size);
  font-weight: var(--body-20-weight);
  line-height: var(--news-top-subtitle-line-height);
  letter-spacing: var(--body-20-letter-spacing);
}

/* ---------- Сетка новостей (3187:84 / 3188:410 / 3188:904): 2 / 2 / 1 колонки ----------
   Карточка — общий .news-card (components.css); в ряду карточки одной высоты (stretch). */
.news-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--news-card-gap);
  padding-top: var(--news-card-list-padding-top);
  margin-block: 0;
  list-style: none;
}

/* Поиск — общий .blog-search / .search; на планшете и мобильной контейнер с полями 40 / 16 */
@media (min-width: 768px) and (max-width: 1279px) {
  .news .container {
    padding-inline: var(--tablet-page-margin);
  }
}

@media (max-width: 767px) {
  .news .container {
    padding-inline: var(--mobile-page-margin);
  }

  /* Подпись над полем (3188:901), как в блоге */
  .news .blog-search {
    flex-direction: column;
    align-items: stretch;
  }

  .news .blog-search .search {
    flex: none;
    width: 100%;
  }

  .news-list {
    grid-template-columns: minmax(0, 1fr);
  }
}