/* Public blog pages (Wagtail). Colours follow the site's green (#1a5336). */

.blog-post-header { background: #f9fafb; border-bottom: 1px solid #e5e7eb; padding: 2.5rem 0 1.5rem; }
.blog-post-header h1 { color: #1f2937; margin: 0.25rem 0 0.75rem; }
.blog-post-kind, .blog-card-kind { color: #1a5336; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin: 0; }
.blog-post-meta { color: #6b7280; margin: 0; }
.blog-post-meta span + span::before { content: " · "; }
.blog-post-topics { margin: 0.75rem 0 0; }
.blog-topic { display: inline-block; background: #ecfdf5; color: #1a5336; border-radius: 999px; padding: 0.15rem 0.7rem; margin: 0 0.35rem 0.35rem 0; font-size: 0.85rem; text-decoration: none; }

.blog-post-body { max-width: 50rem; padding-top: 2rem; padding-bottom: 3rem; }
.blog-featured-image img { width: 100%; height: auto; border-radius: 0.5rem; }
.blog-back { margin-top: 3rem; }

.blog-body { font-size: 1rem; line-height: 1.8; color: #374151; }
.blog-body h2, .blog-body h3, .blog-body h4 { color: #1f2937; margin: 2rem 0 1rem; }
.blog-body p { margin-bottom: 1.25rem; }
.blog-body blockquote { border-left: 4px solid #1a5336; background: #f0fdf4; padding: 1rem 1.5rem; margin: 1.5rem 0; }
.blog-body table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; }
.blog-body th, .blog-body td { border: 1px solid #e5e7eb; padding: 0.5rem 0.75rem; text-align: left; }
.blog-body th { background: #f9fafb; }
.blog-body code { background: #f3f4f6; padding: 0.1rem 0.3rem; border-radius: 0.25rem; font-size: 0.9em; }
.blog-body .footnote { font-size: 0.9rem; color: #4b5563; margin-top: 2rem; }

.blog-figure { margin: 2rem 0; }
.blog-figure img { width: 100%; height: auto; }
.blog-figure figcaption, .blog-table figcaption { color: #4b5563; font-size: 0.9rem; margin-top: 0.5rem; }
.blog-figure-source { display: block; color: #6b7280; font-size: 0.8rem; }
.blog-figure-ai { display: block; color: #6b7280; font-size: 0.8rem; font-style: italic; }
.blog-figure-removed { padding: 2rem 1rem; text-align: center; color: #6b7280; background: #f3f4f6; border-radius: 4px; font-style: italic; }

.blog-code { margin: 1.5rem 0; }
.blog-code-label { background: #1f2937; color: #e5e7eb; font-family: monospace; font-size: 0.8rem; padding: 0.35rem 0.75rem; border-radius: 0.375rem 0.375rem 0 0; }
.blog-code .highlight pre { margin: 0; padding: 1rem; overflow-x: auto; border-radius: 0 0 0.375rem 0.375rem; font-size: 0.875rem; line-height: 1.5; }
.blog-code-output .highlight pre { background: #f9fafb; border: 1px solid #e5e7eb; }
.blog-body .highlight code { background: none; padding: 0; }

.blog-math { overflow-x: auto; margin: 1.5rem 0; }
.blog-source-link { margin: 1rem 0; }
.blog-source-commit { color: #6b7280; font-family: monospace; font-size: 0.85rem; margin-left: 0.35rem; }

.blog-decision { border: 1px solid #a7f3d0; background: #f0fdf4; border-radius: 0.5rem; padding: 1rem 1.25rem; margin: 2rem 0; }
.blog-decision-title { font-weight: 600; color: #1a5336; margin-bottom: 0.5rem; }
.blog-decision dl, .blog-analysis-details { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0 0 0.75rem; }
.blog-decision dt, .blog-analysis-details dt { color: #4b5563; font-weight: 600; }
.blog-decision dd, .blog-analysis-details dd { margin: 0; }
.blog-analysis-details { font-size: 0.9rem; margin: 1.5rem 0; }

.blog-callout { border-left: 4px solid #2563eb; background: #eff6ff; padding: 0.75rem 1.25rem; margin: 1.5rem 0; border-radius: 0 0.375rem 0.375rem 0; }
.blog-callout-warning { border-left-color: #d97706; background: #fffbeb; }
.blog-callout > :last-child { margin-bottom: 0; }
.blog-quote { margin: 2rem 0; }
.blog-quote blockquote { margin: 0; font-size: 1.15rem; }
.blog-quote blockquote > :last-child { margin-bottom: 0; }
.blog-quote figcaption { color: #4b5563; font-size: 0.9rem; margin-top: 0.5rem; padding-left: 1.5rem; }
.blog-quote figcaption::before { content: "— "; }

.blog-newsletter-summary { font-size: 1.1rem; color: #1f2937; }
.blog-button { margin: 1.5rem 0; }

.blog-index { padding: 2.5rem 0 3rem; }
.blog-index-intro { color: #4b5563; max-width: 45rem; }
.blog-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 1.5rem 0; }
.blog-filters a { padding: 0.35rem 0.9rem; border: 1px solid #d1d5db; border-radius: 999px; color: #374151; text-decoration: none; }
.blog-filters a.active { background: #1a5336; border-color: #1a5336; color: #fff; }
.blog-filter-tag { color: #1a5336; }
.blog-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.5rem; }
.blog-card { border: 1px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.blog-card-image img { width: 100%; height: auto; display: block; }
.blog-card-placeholder { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: #1a5336; color: #fff; }
.blog-card-placeholder svg { width: 4.5rem; height: auto; }
.blog-card-body { padding: 1rem 1.25rem; }
.blog-card-body h2 { font-size: 1.15rem; margin: 0.25rem 0 0.5rem; }
.blog-card-body h2 a { color: #1f2937; text-decoration: none; }
.blog-card-meta { color: #6b7280; font-size: 0.85rem; margin: 0; }
.blog-pagination { display: flex; gap: 1rem; justify-content: center; margin-top: 2rem; }