/* Blog: title cards drawn in brand colors, list grid, and readable article typography. Tokens only. */

.blog-head { padding-bottom: var(--space-md); }
.blog-head h1 { font-size: var(--text-display); }
.blog-lede { font-size: var(--text-md); max-width: 60ch; }
.blog-list-section { padding-top: 0; }

/* title card */
.blog-cover {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-xs);
  min-height: 220px; padding: var(--space-md);
  background: radial-gradient(120% 90% at 100% 0%, var(--color-night-2), var(--color-night));
  color: var(--color-on-accent);
  border-radius: var(--radius-lg);
}
.blog-cover::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 6px;
  background: var(--color-accent-bright);
}
.blog-cover-topic {
  align-self: flex-start; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-on-accent);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em;
}
.blog-cover-title { margin: 0; color: var(--color-on-accent); font-size: var(--text-lg); max-width: 22ch; position: relative; z-index: 1; }
.blog-cover-title a { color: inherit; text-decoration: none; }
.blog-cover-mark {
  position: absolute; z-index: -1; right: -28px; top: -18px; width: 168px; height: auto;
  opacity: 0.22; transform: rotate(-12deg);
}

/* list */
.blog-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), minmax(0, 1fr))); }
.blog-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), minmax(0, 1fr))); }
.blog-card { position: relative; padding: 0; overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.blog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.blog-card:focus-within { box-shadow: 0 0 0 3px var(--color-focus); }
.blog-card .blog-cover { border-radius: 0; }
.blog-stretch::before { content: ""; position: absolute; inset: 0; z-index: 2; }
.blog-stretch:focus-visible { outline: none; }
.blog-card-body { padding: var(--space-sm) var(--space-md) var(--space-md); }
.blog-excerpt { color: var(--color-ink-2); margin-bottom: var(--space-2xs); }
@media (min-width: 900px) {
  .blog-item.is-lead { grid-column: 1 / -1; }
  .blog-item.is-lead .blog-card { flex-direction: row; }
  .blog-item.is-lead .blog-cover { flex: 1.3; min-height: 300px; }
  .blog-item.is-lead .blog-cover-title { font-size: var(--text-2xl); }
  .blog-item.is-lead .blog-card-body { flex: 1; align-self: center; padding: var(--space-lg); }
  .blog-item.is-lead .blog-excerpt { font-size: var(--text-md); }
}

/* article */
.blog-post-head { padding-bottom: var(--space-md); }
.blog-crumbs { margin-bottom: var(--space-sm); }
.blog-crumbs a { color: var(--color-muted); }
.blog-post-head .blog-cover { min-height: 280px; padding: var(--space-lg); }
.blog-post-head .blog-cover-title { font-size: var(--text-3xl); max-width: 20ch; }
.blog-post-head .blog-cover-mark { width: 240px; }
.blog-meta { margin-top: var(--space-sm); }
.blog-body { font-size: var(--text-md); line-height: 1.7; padding-bottom: var(--space-2xl); }
.blog-body p, .blog-body ul, .blog-body ol { margin: 0 0 var(--space-md); max-width: 68ch; }
.blog-body li { margin-bottom: var(--space-2xs); }
.blog-body h2 { font-size: var(--text-xl); margin: var(--space-xl) 0 var(--space-sm); }
.blog-body h3 { font-size: var(--text-lg); margin: var(--space-lg) 0 var(--space-xs); }

.blog-cta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
  margin: var(--space-xl) 0; padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-accent-tint-2); border-left: 4px solid var(--color-accent);
  background: var(--color-accent-tint); border-radius: var(--radius-lg);
}
.blog-cta-review { border-color: var(--color-rule); border-left-color: var(--color-star); background: var(--color-paper-2); }
.blog-cta > div { flex: 1 1 280px; }
.blog-cta-title { font: 700 var(--text-lg)/1.25 var(--font-display); margin: 0 0 4px; }
.blog-cta-text { margin: 0; color: var(--color-ink-2); font-size: var(--text-base); }

/* home "From the blog" strip reuses the list cards */
.blog-home .blog-cover { min-height: 180px; }

@media (prefers-reduced-motion: reduce) {
  .blog-card:hover { transform: none; }
}