/* WordPress-only surfaces (not part of the design/ sandbox): quote-form
   states + the blog shell (#28 articles). Everything derives from tokens.css. */

/* ---- quote form states ---- */
.quote-form__sent {
  background: var(--color-yellow-tint);
  border: 1px solid var(--color-yellow);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: var(--space-md);
  color: var(--color-ink);
}
.quote-form__sent--error {
  background: #fbeae9;
  border-color: #b3261e;
}

/* ---- blog index (posts page) ---- */
.blog-hero { padding-block: clamp(48px, 7vw, 88px); }
.blog-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  color: var(--color-cream);
  max-width: 18ch;
}
.blog-hero__sub { color: color-mix(in oklab, var(--color-cream) 88%, transparent); max-width: 52ch; margin-top: var(--space-sm); }

.blog-list { padding-block: var(--space-section); }
.blog-list__grid { display: grid; gap: clamp(24px, 3vw, 40px); }
@media (min-width: 760px) { .blog-list__grid { grid-template-columns: repeat(2, 1fr); } }

.post-card {
  display: block;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-cream-panel);
  padding: clamp(20px, 3vw, 30px);
  text-decoration: none;
  transition: transform .18s cubic-bezier(.22,1,.36,1), border-color .18s;
}
.post-card:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--color-pine) 35%, var(--color-line)); }
.post-card__date { font-family: var(--font-label); font-weight: 600; font-size: 0.82rem; color: var(--color-ink-soft); }
.post-card__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); color: var(--color-ink); margin: 8px 0 10px; }
.post-card__excerpt { color: var(--color-ink-soft); }
.post-card__more { display: inline-block; margin-top: 14px; font-family: var(--font-label); font-weight: 600; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-yellow); text-decoration-thickness: 2px; text-underline-offset: 5px; }

.blog-empty { max-width: 56ch; }
.blog-empty p { color: var(--color-ink-soft); }

/* ---- single article ---- */
.article-hero { padding-block: clamp(44px, 6vw, 72px); }
.article-hero__meta { font-family: var(--font-label); font-weight: 600; font-size: 0.85rem; color: color-mix(in oklab, var(--color-cream) 75%, transparent); }
.article-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3rem);
  line-height: 1.12;
  color: var(--color-cream);
  max-width: 24ch;
  margin-top: 10px;
}

.article-body { padding-block: clamp(40px, 6vw, 72px); }
.article-body .prose { max-width: 70ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); color: var(--color-ink); margin-top: 1.8em; }
.prose h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); color: var(--color-ink); margin-top: 1.5em; }
.prose p, .prose li { color: var(--color-ink-soft); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.45em; }
.prose a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.prose blockquote { border-left: none; background: var(--color-cream-panel); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 16px 20px; }
.prose strong { color: var(--color-ink); }