/* ==========================================================================
   Страница «Блог» (blog.html). Макет 1920, контейнер 1280 — база без @media.
   Кадр Figma 3007:10. Сами секции (Hero, чипсы, поиск, карточки, пагинация) —
   в следующих задачах (docs/pages/blog-progress.md).
   ========================================================================== */

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

/* ---------- Hero «Последняя статья» (3007:51): y=124, padding-top 48, высота 549 ---------- */
.blog-hero {
  padding: var(--blog-hero-padding-top) 0 var(--blog-hero-padding-bottom);
}

/* Blog / Hero (3027:1661): текст слева (flex 1, padding-right 40), обложка 720×405 справа, gap 56 */
.blog-hero__card {
  position: relative; /* для растянутой ссылки */
  display: flex;
  align-items: flex-start;
  gap: var(--blog-hero-gap);
}

.blog-hero__text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--blog-hero-text-gap);
  min-width: 0;
  padding-right: var(--blog-hero-text-padding-right);
}

/* Blog / Article title 40 (3031:2144): Bold 40 / 1.17. В Figma letter-spacing нет */
.blog-hero__title {
  width: 100%;
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-line-height);
  letter-spacing: 0;
  color: var(--color-blog-title);
  transition: color var(--transition-fast) ease;
}

/* Растянутая ссылка: вся карточка кликабельна */
.blog-hero__link::after {
  content: "";
  position: absolute;
  z-index: 1; /* выше обложки и анонса (они позиционированы и идут позже в DOM); тег .cover-tag — z-index 2 */
  inset: 0;
}

.blog-hero__link:focus-visible {
  outline: none;
}


/* Анонс: Regular 20 / 1.55 (31px), в макете 2 строки с многоточием (высота 62) */
.blog-hero__lead {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--body-20-size);
  line-height: var(--blog-hero-lead-line-height);
  color: var(--color-blog-text);
}

/* Hover (3035:2125): заголовок #D69500 на всю карточку, обложка увеличивается на 3% (inset -1.5%) */
.blog-hero__card:hover .blog-hero__title {
  color: var(--color-blog-card-hover-title);
}

.blog-hero__card:hover .blog-cover .blog-cover__media {
  transform: scale(var(--blog-cover-hover-scale));
}

/* ---------- «Статьи» (3007:78): чипсы → поиск → сетка, зазор 24 ---------- */
.blog-articles {
  display: flex;
  flex-direction: column;
  gap: var(--blog-articles-gap);
}

/* ---------- Поиск: отступ строки (сама строка и поле — в components.css) ----------
   +offset к gap .blog-articles даёт 48 от чипсов; от поиска до сетки 48 = gap 24 + padding-top сетки 24. */
.blog-search {
  margin-top: var(--blog-search-offset);
}

/* Пустая выдача поиска — в Figma нет: три строки обычным текстом под полем, по левому краю.
   Отступ от поля 48 = gap .blog-articles 24 + padding-top 24 (как у сетки). Скрыт атрибутом hidden, показывает js/blog.js */
.blog-empty {
  padding-top: var(--blog-grid-padding-top);
  color: var(--color-blog-text);
  font-size: var(--body-18-size);
  font-weight: var(--body-18-weight);
  line-height: var(--body-18-line-height);
  letter-spacing: var(--body-18-letter-spacing);
}

.blog-empty[hidden] {
  display: none;
}

/* ---------- Сетка статей (3007:176): 2 колонки 624, зазор 32 по x, 56 по y ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--blog-grid-column-gap);
  row-gap: var(--blog-grid-row-gap);
  padding-top: var(--blog-grid-padding-top);
  margin-block: 0;
  list-style: none;
}

/* ---------- Пагинатор (3007:303): высота 236 = 64 + 52 + 120 ---------- */
.blog-pagination {
  padding: var(--blog-pagination-padding-top) 0 var(--blog-pagination-padding-bottom);
}

.blog-pagination__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--blog-page-button-gap);
}

/* Blog / Page button (3027:2007), размер L. Вынесен в blog.css, а не в components.css:
   используется только пагинацией блога. Состояния: Default белый, Hover #fffcf1, Active жёлтый.
   Focus в Figma нет — акцентная обводка, как у .tag. */
.page-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--blog-page-button-size);
  height: var(--blog-page-button-size);
  border-radius: var(--blog-page-button-radius);
  background-color: var(--color-white);
  font-size: var(--blog-page-button-font-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--blog-page-button-line-height);
  color: var(--color-blog-title);
  text-decoration: none;
  transition: background-color var(--transition-fast) ease;
}

a.page-button:hover {
  background-color: var(--color-brand-25);
}

.page-button--active,
a.page-button--active:hover {
  background-color: var(--color-brand-300);
}

.page-button:focus-visible {
  outline: 2px solid var(--color-text-accent);
  outline-offset: 2px;
}

.page-button__icon {
  width: var(--blog-page-button-icon-size);
  height: var(--blog-page-button-icon-size);
  background-color: var(--color-blog-title);
  -webkit-mask: var(--page-button-icon) center / contain no-repeat;
  mask: var(--page-button-icon) center / contain no-repeat;
}

.page-button--prev { --page-button-icon: url("../../assets/icons/blog-page-prev.svg"); }
.page-button--next { --page-button-icon: url("../../assets/icons/blog-page-next.svg"); }

/* ---------- Чипсы рубрик (3007:79): Teg/L, gap 12, выравнивание влево, без иконок/счётчиков ---------- */
.blog-categories .tag-list {
  justify-content: flex-start;
  gap: var(--blog-categories-gap);
}

/* ---------- Состояния ленты (js/blog.js) ---------- */
/* Прокрутка к началу «Статьи» после смены страницы — с отступом, как у якорей FAQ */
.blog-articles {
  scroll-margin-top: var(--scroll-offset-top);
}

/* Атрибут hidden у блоков с display из автор-стилей */
.blog-hero[hidden],
.blog-grid[hidden],
.blog-pagination[hidden],
.blog-tagfilter[hidden] {
  display: none;
}

/* Любое состояние со скрытым Hero (.blog--no-hero ставит js/blog.js по heroSection.hidden: рубрика, поиск,
   тег, страница > 1): первым блоком идут теги — 48 от шапки (как Hero), 120 до футера. Нижние 120
   переносятся с пагинации на main, чтобы не удваиваться, когда пагинация видна (больше 6 статей)
   или скрыта (выдача помещается на одну страницу). */
.blog--no-hero {
  padding-top: var(--blog-hero-padding-top);
  padding-bottom: var(--blog-pagination-padding-bottom);
}

.blog--no-hero .blog-pagination {
  padding-bottom: 0;
}

/* Подсветка совпадения в заголовке карточки при поиске — в Figma нет, как в FAQ (цвет активного тега) */
.blog-card__title mark {
  background-color: var(--color-tag-bg-active);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}

/* ==========================================================================
   Планшет и мобильная (до 1279): общая структура. Значения размеров — токены в @media в css/tokens.css
   (подмена --blog-*), здесь только то, чего токенами не выразить. Десктоп не затрагивается.
   ========================================================================== */
@media (max-width: 1279px) {
  /* Hero: колонкой, обложка сверху на всю ширину, текст под ней (Figma 3011:539 / 3011:865) */
  .blog-hero__card {
    flex-direction: column;
    align-items: stretch;
  }

  .blog-hero__card .blog-cover {
    order: -1;
    width: 100%;
  }

  /* Теги: высота 42 (Teg S), а не 62 как на десктопе (Teg L) */
  .blog-categories .tag--l {
    padding: var(--tag-padding-s);
    font-size: var(--body-16-medium-size);
    font-weight: var(--body-16-medium-weight);
    line-height: var(--body-16-medium-line-height);
    letter-spacing: var(--body-16-medium-letter-spacing);
  }

  /* Пустая выдача поиска — в Figma нет, 17 / 160% */
  .blog-empty {
    font-size: var(--tablet-empty-size);
    line-height: var(--tablet-empty-line-height);
  }
}

/* ==========================================================================
   Планшет 768 (Figma 3011:523): поля 40, размеры заголовка и анонса Hero.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1279px) {
  .blog .container {
    padding-inline: var(--tablet-page-margin);
  }

  .blog-hero__title {
    font-size: var(--tablet-hero-title-size);
    line-height: var(--tablet-hero-title-line-height);
  }

  .blog-hero__lead {
    font-size: var(--tablet-hero-lead-size);
  }
}

/* ==========================================================================
   Мобильная 375 (Figma 3011:851). Значения — токены в @media в css/tokens.css (--mobile-*, подмена --blog-*),
   здесь — раскладка: поля 16, чипсы со скроллом, подпись поиска над полем, одна колонка карточек.
   ========================================================================== */
@media (max-width: 767px) {
  .blog .container {
    padding-inline: var(--mobile-page-margin);
  }

  .blog-hero__title {
    font-size: var(--mobile-hero-title-size);
    line-height: var(--mobile-hero-title-line-height);
  }

  .blog-hero__lead {
    font-size: var(--blog-card-lead-size);
  }

  /* Чипсы (3011:888): одна строка с горизонтальным скроллом — модификатор .tag-list--scroll (components.css);
     ряд уходит за правый край экрана (в Figma контейнер 359 при полях 16) */
  .blog-categories {
    padding-right: 0;
  }

  /* Подпись поиска над полем (3011:971), а не в строку, как на планшете и десктопе */
  .blog-search {
    flex-direction: column;
    align-items: stretch;
  }

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

  /* Одна колонка карточек */
  .blog-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}