/* ============================================================
   BLOG — страница со списком статей
   Дополняет /razvedka/css/style.css (шапка, подвал, кнопки).
   Палитра та же, что в article.css: акцент #2b4fd9,
   текст #141b27 / #35404f, приглушённый #5b6675,
   границы #e6eaf1, подложка #f6f8fb.
   ============================================================ */

/* Подпись к полю поиска: не видна глазами, но доступна скринридерам */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- ШАПКА СТРАНИЦЫ ---------- */
.blog-hero {
  background: linear-gradient(180deg, #f6f8fb 0%, #ffffff 100%);
  padding: 46px 0 34px;
}
/* Поля внутри контейнера — иначе заголовок встаёт левее поиска и карточек */
.blog-hero__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}
.blog-title {
  font-size: 40px;
  line-height: 1.12;
  font-weight: 800;
  color: #141b27;
  letter-spacing: -1.1px;
  margin: 0 0 14px;
}
.blog-lead {
  font-size: 18px;
  line-height: 1.6;
  color: #4a5564;
  margin: 0;
  max-width: 720px;
}

/* ---------- ПОИСК И ФИЛЬТРЫ ---------- */
.blog-tools {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

.blog-search {
  position: relative;
  max-width: 460px;
  margin-bottom: 18px;
}
.blog-search__input {
  width: 100%;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 15.5px;
  color: #1a2433;
  background: #fff;
  border: 1px solid #d3dae5;
  border-radius: 11px;
  padding: 14px 44px 14px 16px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.blog-search__input::placeholder { color: #9aa6b8; }
.blog-search__input:focus {
  border-color: #2b4fd9;
  box-shadow: 0 0 0 3px rgba(43, 79, 217, 0.12);
}
.blog-search__clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #8a94a4;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}
.blog-search__clear:hover { color: #1a2433; background: #f0f3f8; }
.blog-search.is-filled .blog-search__clear { display: flex; }

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.blog-filter {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #4a5564;
  background: #fff;
  border: 1px solid #e0e5ee;
  border-radius: 20px;
  padding: 8px 15px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.blog-filter:hover { border-color: #c2cff5; color: #1a2433; }
.blog-filter[aria-pressed="true"] {
  background: #eef2fd;
  border-color: #c2cff5;
  color: #2b4fd9;
  font-weight: 600;
}
.blog-filter__count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: #9aa6b8;
  margin-left: 6px;
}
.blog-filter[aria-pressed="true"] .blog-filter__count { color: #6f8ae4; }

.blog-status {
  font-size: 13.5px;
  color: #5b6675;
  min-height: 20px;
  margin-bottom: 22px;
}

/* ---------- СЕТКА КАРТОЧЕК ---------- */
.blog-grid-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px 84px;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  /* Без align-items: карточки растягиваются до высоты строки,
     низы выравниваются, а дата с временем чтения прижимается
     к нижнему краю через margin-top: auto. */
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6eaf1;
  border-radius: 14px;
  overflow: hidden;
  color: #141b27;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.blog-card:hover {
  border-color: #c2cff5;
  box-shadow: 0 10px 28px -18px rgba(20, 27, 39, 0.35);
  transform: translateY(-2px);
}
.blog-card[hidden] { display: none; }

.blog-card__cover {
  display: block;
  width: 100%;
  /* height: auto обязателен: атрибуты width/height у <img> браузер
     применяет как height: 788px, и тогда aspect-ratio не работает —
     обложка растягивается по высоте и обрезается object-fit. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #eef1f6;
  border-bottom: 1px solid #eef1f6;
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 15px 15px;
}

/* Категория в карточке — те же цвета, что у лейбла на самой статье
   (см. .article-cat в article.css), чтобы раздел узнавался по цвету. */
.blog-card__cat {
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 20px;
  border: 1px solid transparent;
  margin-bottom: 10px;
}
.blog-card__cat--intel     { color: #1f3fa6; background: #eef2fd; border-color: #dde5fb; }
.blog-card__cat--b2b       { color: #13603e; background: #eef8f2; border-color: #cfeadd; }
.blog-card__cat--ads       { color: #a8451f; background: #fbefe8; border-color: #f1d8c9; }
.blog-card__cat--analytics { color: #5b34a8; background: #f2ecfd; border-color: #e2d6fa; }
.blog-card__cat--crm       { color: #8a5a10; background: #fbf3e3; border-color: #f0e2c4; }
.blog-card__cat--tools     { color: #0f6b73; background: #e8f6f7; border-color: #cbe8ea; }
.blog-card__cat--case      { color: #a8215a; background: #fdeef4; border-color: #f6d5e3; }

/* ---------- ПОКАЗАТЬ ЕЩЁ ---------- */
/* Карточки сверх лимита скрыты, но остаются в HTML: поиск, фильтры
   и поисковые роботы видят весь список целиком. */
.blog-card[data-beyond="1"] { display: none; }
.blog-more {
  display: none;
  height: 58px;
  margin: 30px auto 0;
  padding: 10px 24px;
  border: 1px solid #d3dae5;
  border-radius: 4px;
  background: #fff;
  color: #1a2433;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.blog-more:hover { border-color: #2b4fd9; color: #2b4fd9; }
.blog-more.is-visible { display: block; }
.blog-more__count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #8a94a4;
  margin-left: 8px;
}

.blog-card__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: #141b27;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__descr { display: none; }

.blog-card__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: #8a94a4;
  /* В карточке шириной ~220px строка «12 авг 2026 · 4 мин чтения»
     иначе разрывается пополам и выглядит как две ошибки вёрстки. */
  white-space: nowrap;
}
.blog-card__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #c6cedb;
  flex-shrink: 0;
}

/* ---------- БОЛЬШАЯ КАРТОЧКА ДНЯ ---------- */
.blog-card.is-featured {
  grid-column: span 2;
  grid-row: span 2;
  order: -1;
  border-color: #c2cff5;
}
.blog-card.is-featured .blog-card__cover { aspect-ratio: 16 / 9; }
.blog-card.is-featured .blog-card__body { padding: 22px 24px 24px; }
.blog-card.is-featured .blog-card__cat { font-size: 11.5px; }
.blog-card.is-featured .blog-card__title {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.4px;
  -webkit-line-clamp: 4;
  margin-bottom: 12px;
}
.blog-card.is-featured .blog-card__descr {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.6;
  color: #35404f;
  margin: 0 0 16px;
}
.blog-card.is-featured .blog-card__meta { font-size: 13.5px; }

.blog-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #cf5a2a;
  background: #fbefe8;
  border: 1px solid #f1d8c9;
  border-radius: 20px;
  padding: 5px 11px;
  margin-bottom: 12px;
}
.blog-card:not(.is-featured) .blog-card__badge { display: none; }

/* ---------- ПУСТОЙ РЕЗУЛЬТАТ ---------- */
.blog-empty {
  display: none;
  border: 1px dashed #d3dae5;
  border-radius: 14px;
  padding: 44px 24px;
  text-align: center;
  color: #5b6675;
  font-size: 15.5px;
  line-height: 1.6;
}
.blog-empty.is-visible { display: block; }
.blog-empty__hint { font-size: 13.5px; color: #8a94a4; margin-top: 8px; }

/* ---------- АДАПТИВ ---------- */
@media (max-width: 1180px) {
  .blog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 940px) {
  .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blog-hero { padding: 34px 0 26px; }
  .blog-title { font-size: 32px; letter-spacing: -0.8px; }
  .blog-tools { padding: 0 20px; }
  .blog-grid-wrap { padding: 0 20px 64px; }
}
@media (max-width: 700px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-card.is-featured { grid-column: span 2; grid-row: auto; }
  .blog-card.is-featured .blog-card__title { font-size: 20px; }
}
@media (max-width: 460px) {
  .blog-hero { padding: 26px 0 22px; }
  .blog-hero__inner { padding: 0 16px; }
  .blog-title { font-size: 27px; }
  .blog-lead { font-size: 16px; }
  .blog-tools { padding: 0 16px; }
  .blog-grid-wrap { padding: 0 16px 56px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card.is-featured { grid-column: span 1; }
}