/*
 * Blog + long-form article styles. Propshaft bundles every file in this directory, so this needs no
 * manifest entry.
 *
 * Tokens only, from application.css. The `.prose` rules a post body uses live there too, shared
 * with the guide pages, so an article and a guide read the same.
 */

/* ------------------------------------------------------------ Article ------ */
.post__title { font-size: clamp(32px, 4.5vw, 46px); }

.post__meta {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-soft);
}

.post__tags { margin-top: 40px; }
.post__related { margin-top: 56px; }

/* ---------------------------------------------------------- Index/cards ---- */
.blog-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.post-card__meta {
  font-size: 14px;
  color: var(--muted);
  margin: 12px 0 0;
}

.post-card .card__title { margin-bottom: 8px; }
.post-card .card__title a { color: var(--bone-bright); }
.post-card .card__title a:hover { color: var(--spark); }

/* ------------------------------------------------------------- CTA --------- */
.post-cta {
  margin-top: 56px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--spark-border);
  border-radius: var(--r-card);
}

.post-cta__title { font-size: 24px; margin-bottom: 10px; }
.post-cta__body { color: var(--muted); max-width: none; margin-bottom: 20px; }

@media (max-width: 640px) {
  .post-cta { padding: 20px; }
}