/* ═══════════════════════════════════════════
   blog.css — /blog/ index + article lead image
   Loaded by _layouts/article.ejs only.
   ═══════════════════════════════════════════ */

/* Same lesson as article.css: `section { padding: 100px 40px }` and its 24px
   override at <=930px are the only place the horizontal gutter is decided, and
   `.section-inner { padding: 0 }` exists so that stays true. Touch the vertical
   axis and stay silent on the horizontal — a shorthand here would put text
   against the edge of a 320px screen. */

/* ─── Index head ─────────────────────────────────────────────────────────── */
.blog-head {
  padding-top: 104px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.blog-head h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.625rem, 6vw, 2.375rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text);
}
.blog-lede {
  margin-top: 14px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 60ch;
}

/* ─── Index list ─────────────────────────────────────────────────────────── */
/* The list sits in a bare <section>, which inherits `section { padding: 100px
   40px }` — 100px of dead space between the head rule and the first card.
   Only the vertical axis is overridden; the horizontal stays where the
   design system decides it. */
.blog-list-section {
  padding-block: 0;
}

.blog-list {
  padding-top: 8px;
  padding-bottom: 72px;
  display: flex;
  flex-direction: column;
}
.blog-item {
  display: block;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}
.blog-item:last-child { border-bottom: 0; }
.blog-item h2 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text);
}
.blog-item p {
  margin-top: 8px;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--text-2);
}
.blog-item:hover h2 { color: var(--accent-dark); }
.blog-item:hover p  { color: var(--text); }
.blog-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ─── Article lead image ─────────────────────────────────────────────────── */
/* Empty until chanlify-w10-design lands the imagery; see
   _partials/art-lead-image.ejs for the frontmatter contract. Sized so the
   figure reserves its space from first paint — an image that pushes the article
   text down as it loads is a layout shift on the largest element on the page. */
.art-lead-figure {
  margin: 28px 0 0;
}
.art-lead-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}
.art-lead-figure figcaption {
  margin-top: 10px;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--text-3);
}

/* ─── Back to index ──────────────────────────────────────────────────────── */
.art-back {
  display: inline-block;
  margin-top: 8px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--accent-dark);
}
.art-back:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 930px) {
  .blog-head { padding-top: 88px; padding-bottom: 24px; }
  .blog-list { padding-bottom: 56px; }
  .blog-item { padding: 22px 0; }
}