/* Blog (public pages only — loaded via $page_seo['extra_css']). Uses the
   marketing-page custom properties from style.css; nothing here touches the
   authenticated app skin. */

.blog-list { display: grid; gap: var(--s5); max-width: 760px; margin: 0 auto; }
.blog-card { padding: var(--s5); border: 1px solid var(--landing-border, rgba(15, 23, 42, .1)); border-radius: 12px; }
.blog-card h2 { margin: var(--s1) 0 var(--s2); font-size: 1.35rem; line-height: 1.3; }
.blog-card h2 a { text-decoration: none; }
.blog-card__date { font-size: .85rem; opacity: .7; margin: 0; }
.blog-card__more { font-weight: 600; }

.blog-pager { display: flex; gap: var(--s4); justify-content: center; align-items: center; margin-top: var(--s6); }

.blog-post { max-width: 760px; padding-top: var(--s6); padding-bottom: var(--s7); }
.blog-crumbs { font-size: .85rem; opacity: .8; margin-bottom: var(--s4); }
.blog-post h1 { font-size: 2rem; line-height: 1.25; margin-bottom: var(--s2); }
.blog-post__meta { font-size: .9rem; opacity: .75; margin-bottom: var(--s5); }
.blog-tag { display: inline-block; padding: 1px 8px; margin-left: 4px; border-radius: 999px; font-size: .78rem; border: 1px solid var(--landing-border, rgba(15, 23, 42, .15)); }

.blog-post__body { line-height: 1.75; font-size: 1.05rem; }
.blog-post__body h2 { margin: var(--s6) 0 var(--s3); font-size: 1.45rem; line-height: 1.3; }
.blog-post__body h3 { margin: var(--s5) 0 var(--s2); font-size: 1.15rem; }
.blog-post__body p, .blog-post__body ul, .blog-post__body ol { margin-bottom: var(--s3); }
.blog-post__body ul, .blog-post__body ol { padding-left: 1.4em; }
.blog-post__body li { margin-bottom: .35em; }
.blog-post__body pre { overflow-x: auto; padding: var(--s3); border-radius: 8px; background: #0B1220; color: #E2E8F0; font-size: .9rem; line-height: 1.55; margin-bottom: var(--s3); }
.blog-post__body code { font-size: .92em; }
.blog-post__body :not(pre) > code { background: rgba(37, 99, 235, .08); padding: .1em .35em; border-radius: 4px; }
.blog-post__body blockquote { border-left: 3px solid #2563EB; padding-left: var(--s3); opacity: .9; margin-bottom: var(--s3); }
.blog-post__body table { width: 100%; border-collapse: collapse; margin-bottom: var(--s3); }
.blog-post__body th, .blog-post__body td { border: 1px solid var(--landing-border, rgba(15, 23, 42, .12)); padding: .5em .7em; text-align: left; }

.blog-post__faq h2, .blog-post__related h2, .blog-post__cta h2 { margin: var(--s6) 0 var(--s3); font-size: 1.45rem; }
.blog-post__faq h3 { margin: var(--s4) 0 var(--s1); font-size: 1.05rem; }
.blog-post__cta { text-align: center; border: 1px solid var(--landing-border, rgba(15, 23, 42, .1)); border-radius: 12px; padding: var(--s5); margin-top: var(--s6); }
.blog-post__related ul { list-style: none; padding: 0; }
.blog-post__related li { margin-bottom: var(--s2); }