/* Blog (davaya.app/blog): extends landing.css. Reading comfort first: a narrow column, big line height, clear headings. */
.blog-hero { padding-block: var(--space-6) var(--space-5); background: radial-gradient(520px 300px at 85% 0%, rgba(124, 197, 181, .22), transparent 70%), var(--color-surface-alt); border-bottom: 1px solid var(--color-border); }
.blog-hero h1 { font-size: clamp(26px, 6.4vw, 42px); font-weight: 800; margin-bottom: var(--space-3); }
.blog-hero .lead { max-width: 46em; margin: 0; }
.blog-group { font-size: 20px; margin: var(--space-6) 0 var(--space-3); color: var(--color-secondary); }
.blog-group:first-child { margin-top: 0; }
.blog-list { list-style: none; display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .blog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.blog-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: box-shadow .2s ease, border-color .2s ease, translate .25s ease; }
.blog-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-accent); translate: 0 -2px; }
.blog-card-link { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: var(--space-5); color: inherit; text-decoration: none; }
.blog-card h3 { font-size: 19px; margin: 0; }
.blog-card p { margin: 0; color: var(--color-text-muted); font-size: 15px; }
.blog-meta { margin: 0; font-size: 13px; color: var(--color-text-muted); }
.blog-more { margin-top: auto; padding-top: 6px; font-weight: 700; color: var(--color-secondary); }

.post { padding-block: var(--space-5) var(--space-8); }
.post-crumbs { margin-bottom: var(--space-4); }
.post-head { margin-bottom: var(--space-6); }
.post-head h1 { font-size: clamp(26px, 6vw, 40px); margin-bottom: var(--space-3); }
.post-lead { font-size: 18px; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.post-body { font-size: 17px; line-height: 1.95; color: var(--color-text-main); }
.post-body h2 { font-size: 24px; margin: var(--space-7) 0 var(--space-3); }
.post-body h3 { font-size: 19px; margin: var(--space-5) 0 var(--space-2); }
.post-body p, .post-body ul, .post-body ol { margin: 0 0 var(--space-4); }
.post-body ul, .post-body ol { padding-inline-start: 1.4em; }
.post-body li { margin-bottom: 6px; }
.post-body li::marker { color: var(--color-primary-strong); }
.post-body a { font-weight: 700; }
.post-body blockquote { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-5); border-inline-start: 4px solid var(--color-accent); background: var(--color-surface); border-radius: var(--radius-md); color: var(--color-heading); }
.post-body blockquote p:last-child { margin: 0; }
.post-body table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-4); font-size: 15px; }
.post-body th, .post-body td { padding: 8px 12px; border: 1px solid var(--color-border); text-align: start; }
.post-body th { background: var(--color-surface-alt); }
.post-body strong { color: var(--color-heading); }
.post-cta { margin-top: var(--space-7); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-secondary-tint); border: 1px solid #C9D9E6; }
.post-cta h2 { font-size: 20px; margin-bottom: var(--space-2); }
.post-cta p { margin-bottom: var(--space-4); }
.post-cta .btn { margin-inline-end: var(--space-2); margin-bottom: var(--space-2); }
.post-related { margin-top: var(--space-7); }
.post-related h2 { font-size: 22px; margin-bottom: var(--space-3); }
.post-related ul { list-style: none; display: grid; gap: var(--space-2); }
.post-related li { padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.post-related a { font-weight: 700; text-decoration: none; display: block; }
.post-related a:hover { text-decoration: underline; }
.post-related small { color: var(--color-text-muted); font-size: 13px; }