/* Blog design system — on-domain /blog section.
   Part of the blog consolidation (planning_docs/BLOG_CONSOLIDATION_PLAN.md).
   A fresh, crisp take on the Grasshopper look: generous whitespace, strong
   typographic hierarchy, teal accents. Inherits base.html chrome (nav/footer,
   Inter + Plus Jakarta Sans, --primary-color). */

:root {
  --blog-ink: #1a2433;
  --blog-ink-soft: #46536a;
  --blog-muted: #6b7789;
  --blog-line: #e7ebf0;
  --blog-bg: #f7f9fb;
  --blog-card: #ffffff;
  --blog-teal: #01A2B4;
  --blog-teal-dark: #017C8A;
  --blog-teal-wash: #e8f7f9;
  --blog-radius: 16px;
  --blog-shadow: 0 1px 2px rgba(16, 33, 54, .04), 0 8px 24px rgba(16, 33, 54, .06);
  --blog-shadow-hover: 0 2px 4px rgba(16, 33, 54, .06), 0 16px 40px rgba(16, 33, 54, .12);
  --blog-measure: 42rem;
}

/* The blog owns the full main width; base.html's centered column is disabled
   via {% set full_width = True %} in the templates. */
.blog-wrap {
  background: var(--blog-bg);
  margin: -0 0 -1.5rem;   /* meet the footer cleanly */
}

.blog-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- Index hero ---------- */
.blog-hero {
  background:
    radial-gradient(1200px 400px at 15% -10%, var(--blog-teal-wash), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--blog-bg) 100%);
  border-bottom: 1px solid var(--blog-line);
  padding: 4rem 0 3rem;
}
.blog-hero .blog-eyebrow {
  color: var(--blog-teal-dark);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}
.blog-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: var(--blog-ink);
  margin: 0 0 .9rem;
  max-width: 20ch;
}
.blog-hero p {
  font-size: 1.15rem;
  color: var(--blog-ink-soft);
  max-width: 52ch;
  margin: 0;
}

/* ---------- Card grid ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  padding: 3rem 0 4rem;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--blog-card);
  border: 1px solid var(--blog-line);
  border-radius: var(--blog-radius);
  padding: 1.6rem 1.6rem 1.4rem;
  box-shadow: var(--blog-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-decoration: none;
  height: 100%;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--blog-shadow-hover);
  border-color: #d7dde6;
}
.blog-card__icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--blog-teal-wash);
  color: var(--blog-teal-dark);
  font-size: 1.15rem;
  margin-bottom: 1.1rem;
}
.blog-card__title {
  font-family: var(--heading-font, 'Plus Jakarta Sans', sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--blog-ink);
  margin: 0 0 .6rem;
  letter-spacing: -0.01em;
}
.blog-card:hover .blog-card__title { color: var(--blog-teal-dark); }
.blog-card__desc {
  color: var(--blog-ink-soft);
  font-size: .97rem;
  line-height: 1.6;
  margin: 0 0 1.1rem;
  flex: 1;
}
.blog-card__meta {
  color: var(--blog-muted);
  font-size: .82rem;
  font-weight: 500;
  display: flex; align-items: center; gap: .5rem;
}
.blog-card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }

/* ---------- Article ---------- */
.blog-article-head {
  background: linear-gradient(180deg, #ffffff 0%, var(--blog-bg) 100%);
  border-bottom: 1px solid var(--blog-line);
  padding: 2.5rem 0 2.25rem;
}
/* Constrain the header (breadcrumb, title, meta) to the same reading measure as
   the body and center that column, so the header and article share one left
   edge instead of the title running full-width while the body sits centered. */
.blog-article-head__inner {
  max-width: var(--blog-measure);
  margin: 0 auto;
}
.blog-breadcrumb {
  font-size: .85rem;
  color: var(--blog-muted);
  margin-bottom: 1.25rem;
}
.blog-breadcrumb a { color: var(--blog-muted); text-decoration: none; }
.blog-breadcrumb a:hover { color: var(--blog-teal-dark); text-decoration: underline; }
.blog-article-head h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.14;
  color: var(--blog-ink);
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.blog-article-meta {
  display: flex; align-items: center; gap: .6rem;
  color: var(--blog-muted);
  font-size: .9rem;
  font-weight: 500;
}
.blog-article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }

.blog-article-body { padding: 2.75rem 0 1rem; }

/* Prose */
.blog-prose {
  max-width: var(--blog-measure);
  margin: 0 auto;
  font-size: 1.19rem;
  line-height: 1.75;
  color: var(--blog-ink-soft);
}
.blog-prose > *:first-child { margin-top: 0; }
.blog-prose p { margin: 1.35em 0; }
.blog-prose strong { color: var(--blog-ink); font-weight: 650; }
.blog-prose h2 {
  font-size: 1.7rem;
  line-height: 1.25;
  color: var(--blog-ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 2.4em 0 .7em;
  padding-top: .2em;
}
.blog-prose h3 {
  font-size: 1.32rem;
  color: var(--blog-ink);
  font-weight: 650;
  margin: 1.9em 0 .6em;
}
.blog-prose h4 {
  font-size: 1.1rem;
  color: var(--blog-ink);
  font-weight: 650;
  margin: 1.6em 0 .5em;
}
.blog-prose a {
  color: var(--blog-teal-dark);
  text-decoration: underline;
  text-decoration-color: #b7e4ea;
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease;
}
.blog-prose a:hover { text-decoration-color: var(--blog-teal); }
.blog-prose ul, .blog-prose ol { margin: 1.35em 0; padding-left: 1.4em; }
.blog-prose li { margin: .55em 0; padding-left: .25em; }
.blog-prose li::marker { color: var(--blog-teal); }
.blog-prose blockquote {
  margin: 1.9em 0;
  padding: .3em 0 .3em 1.4em;
  border-left: 3px solid var(--blog-teal);
  color: var(--blog-ink);
  font-style: italic;
}
.blog-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.blog-prose hr { border: 0; border-top: 1px solid var(--blog-line); margin: 2.6em 0; }
.blog-prose code {
  background: #eef1f5;
  padding: .15em .4em;
  border-radius: 6px;
  font-size: .88em;
  color: #b02a5b;
}
.blog-prose pre {
  background: #0f1b2d;
  color: #e6edf6;
  padding: 1.1rem 1.25rem;
  border-radius: 12px;
  overflow-x: auto;
  font-size: .9rem;
  line-height: 1.6;
  margin: 1.8em 0;
}
.blog-prose pre code { background: none; color: inherit; padding: 0; }

/* Tables — the AEO workhorse. Scrolls on small screens. */
.blog-prose .table-scroll, .blog-prose table { margin: 2em 0; }
.blog-prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .95rem;
  border: 1px solid var(--blog-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--blog-shadow);
}
.blog-prose thead th {
  background: #f1f5f8;
  color: var(--blog-ink);
  font-weight: 650;
  text-align: left;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--blog-line);
  line-height: 1.4;
}
.blog-prose tbody td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--blog-line);
  vertical-align: top;
  line-height: 1.55;
}
.blog-prose tbody tr:last-child td { border-bottom: 0; }
.blog-prose tbody tr:nth-child(even) td { background: #fafcfd; }

.blog-icon { text-align: center; margin: 1.6em 0; color: var(--blog-teal); font-size: 1.8rem; }

/* CTA + footer nav inside article */
.blog-cta {
  max-width: var(--blog-measure);
  margin: 3rem auto 0;
  background: linear-gradient(135deg, var(--blog-teal) 0%, var(--blog-teal-dark) 100%);
  border-radius: var(--blog-radius);
  padding: 2rem 2.25rem;
  color: #fff;
  text-align: center;
}
.blog-cta h3 { color: #fff; font-size: 1.5rem; margin: 0 0 .35rem; }
.blog-cta p { color: rgba(255,255,255,.9); margin: 0 0 1.25rem; }
.blog-cta .btn-blog {
  display: inline-block;
  background: #fff;
  color: var(--blog-teal-dark);
  font-weight: 650;
  padding: .7rem 1.6rem;
  border-radius: 10px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.blog-cta .btn-blog:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }

.blog-compare {
  max-width: var(--blog-measure);
  margin: 2rem auto 0;
  background: var(--blog-teal-wash);
  border: 1px solid #cdeef2;
  border-radius: var(--blog-radius);
  padding: 1.4rem 1.6rem;
}
.blog-compare h3 { font-size: 1.15rem; color: var(--blog-ink); margin: 0 0 .4rem; }
.blog-compare p { margin: 0; color: var(--blog-ink-soft); }

.blog-backrow {
  max-width: var(--blog-measure);
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--blog-line);
}
.blog-backlink { color: var(--blog-teal-dark); text-decoration: none; font-weight: 550; }
.blog-backlink:hover { text-decoration: underline; }

/* Related posts */
.blog-related { padding: 3.5rem 0 4rem; }
.blog-related h2 {
  font-size: 1.4rem; color: var(--blog-ink); margin: 0 0 1.4rem; text-align: center;
}

@media (max-width: 640px) {
  .blog-hero { padding: 3rem 0 2.25rem; }
  .blog-prose { font-size: 1.1rem; }
  .blog-grid { padding: 2.25rem 0 3rem; gap: 1.15rem; }
}