/* ============================================================
   «Блог» (/blog): компактный первый экран и сетка постов.
   Карточки рисует assets/blog.js, обложка — /assets/images/blog/<slug>.webp.
   ============================================================ */

/* ----- Хлебные крошки над заголовком ----- */
body.theme-v2 .page-crumbs { font-size: 14px; font-weight: 500; color: var(--t-muted); }
body.theme-v2 .page-crumbs a { color: var(--t-accent); text-decoration: none; }
body.theme-v2 .page-crumbs a:hover { color: var(--t-ink); }

/* ----- Первый экран ----- */
body.theme-v2 .blog-hero-art { --art: var(--c-yellow); max-width: 300px; }
body.theme-v2 .blog-hero h1 { overflow-wrap: break-word; hyphens: auto; }

/* ----- Сетка постов ----- */
body.theme-v2 .blog-grid { --min: 320px; gap: 56px 28px; }
body.theme-v2 .blog-card {
  display: flex; flex-direction: column; gap: 22px;
  color: var(--t-ink); text-decoration: none;
}
body.theme-v2 .blog-card:hover { color: var(--t-ink); }
body.theme-v2 .blog-cover {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: var(--t-radius); background: var(--t-tile);
}
body.theme-v2 .blog-cover img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease-out;
}
body.theme-v2 .blog-card:hover .blog-cover img { transform: scale(1.04); }
body.theme-v2 .blog-cover .t-badge {
  position: absolute; left: 16px; top: 16px;
  box-shadow: 0 6px 18px rgba(47,47,52,.14);
}
body.theme-v2 .blog-body { flex: 1; display: flex; flex-direction: column; gap: 10px; }
body.theme-v2 .blog-date { font-size: 14px; font-weight: 500; color: var(--t-muted); }
body.theme-v2 .blog-card h3 {
  margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em;
  overflow-wrap: break-word; text-wrap: pretty; transition: color .2s;
}
body.theme-v2 .blog-card:hover h3 { color: var(--t-accent); }
body.theme-v2 .blog-card p { flex: 1; margin: 0; font-size: 16px; line-height: 1.55; color: var(--t-muted); }
body.theme-v2 .blog-more {
  display: inline-flex; align-items: center; gap: 8px; padding-top: 6px;
  font-size: 15px; font-weight: 600; color: var(--t-accent);
}
body.theme-v2 .blog-more::after { content: "→"; transition: transform .2s; }
body.theme-v2 .blog-card:hover .blog-more::after { transform: translateX(4px); }

/* Свежий пост — во всю ширину: обложка слева, текст справа */
@media (min-width: 900px) {
  body.theme-v2 .blog-card:first-child {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 48px;
    padding-bottom: 56px; border-bottom: 1px solid var(--t-line);
  }
  body.theme-v2 .blog-card:first-child .blog-cover { border-radius: var(--t-radius-lg); }
  body.theme-v2 .blog-card:first-child .blog-body { gap: 16px; }
  body.theme-v2 .blog-card:first-child h3 { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.03em; }
  body.theme-v2 .blog-card:first-child p { flex: none; font-size: 18px; }
}

@media (max-width: 600px) {
  body.theme-v2 .blog-hero-art { max-width: 240px; }
  body.theme-v2 .blog-grid { gap: 44px; }
  body.theme-v2 .blog-card { gap: 18px; }
  body.theme-v2 .blog-card h3 { font-size: 20px; }
}

/* Пока обложки нет, вместо битой картинки остаётся цветная плашка */
body.theme-v2 .blog-cover img[hidden] { display: none; }