/* ==========================================================================
   Блог клуба — стили, которых нет в общих токенах/компонентах сайта.
   Подключается ПОСЛЕ sections.css: переопределяет только свои секции.
   Файл лежит в public/ и копируется в корень вывода (blog/blog.css).
   ========================================================================== */

/* --- Список рассказов (blog/index.html) -------------------------------- */

.blog-list__inner {
  max-width: var(--w-narrow);
}

.blog-list h1 {
  margin-bottom: var(--sp-3);
}

.blog-list__intro {
  color: var(--c-ink-2);
  margin-bottom: var(--sp-10);
}

.blog-list__stories {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-line);
}

.blog-list__item {
  border-bottom: 1px solid var(--c-line);
}

.blog-list__item a {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-5) var(--sp-1);
  text-decoration: none;
  color: var(--c-ink);
}

.blog-list__item a:hover {
  background: var(--c-bg-soft);
}

.blog-list__num {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-red-dark);
}

.blog-list__t {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  text-transform: uppercase;
}

.blog-list__d {
  color: var(--c-muted);
  font-size: var(--fs-sm);
}

/* --- Страница рассказа (blog/<slug>/index.html) ------------------------ */

.blog-article .container {
  max-width: var(--w-narrow);
}

.blog-article__back {
  display: inline-block;
  margin-bottom: var(--sp-6);
  color: var(--c-ink-2);
  text-decoration: none;
  font-size: var(--fs-sm);
}

.blog-article__back:hover {
  color: var(--c-red-dark);
}

.blog-article__meta {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-red-dark);
  margin-bottom: var(--sp-2);
}

.blog-article h1 {
  margin-bottom: var(--sp-3);
}

.blog-article__lead {
  color: var(--c-ink-2);
  font-size: var(--fs-body);
  margin-bottom: var(--sp-8);
}

.blog-article__body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Обложка рассказа: сразу после заголовка, на всю колонку */
.blog-article__cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin: var(--sp-5) 0 var(--sp-8);
}

.blog-article__body > * + * {
  margin-top: var(--sp-4);
}

.blog-article__body em {
  font-style: italic;
}

/* Диалоги в рассказах: реплики — отдельные абзацы, отбивка между ними чуть больше */
.blog-article__body hr {
  border: none;
  border-top: 1px solid var(--c-line);
  margin-block: var(--sp-8);
}