/* Extras for the server-rendered blog (api/routes/blog.js): placeholder card art, pager, empty state,
   and base typography for article HTML that arrives from the HeyCatch API. */
.blg .blog-card-placeholder{aspect-ratio:16/9;width:100%;background:linear-gradient(135deg,#0f2a5e 0%,#1a50c8 70%,#3977ed 100%);display:grid;place-items:center;position:relative;overflow:hidden}
.blg .blog-card-placeholder::before{content:'';position:absolute;inset:auto -20% -40% auto;width:60%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.08)}
.blg .blog-card-placeholder span{font-family:Manrope,'Inter',Arial,sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em;color:#fff;opacity:.9}
.blg .blog-empty{text-align:center;padding:60px 20px;color:#5a6b85}
.blg .blog-empty h2{margin:0 0 10px}
.blg .blog-pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:40px 0 10px}
.blg .pg-btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 14px;border:1px solid #d6e0ee;border-radius:8px;color:#1a50c8;font-weight:700;font-size:14px;text-decoration:none;background:#fff}
.blg .pg-btn:hover{border-color:#1a50c8}
.blg .pg-btn.current{background:#1a50c8;border-color:#1a50c8;color:#fff}
.blg .pg-btn.disabled{color:#9aa8bd;border-color:#e6ecf4;cursor:default}
.blg .pg-gap{color:#9aa8bd;padding:0 4px}
.blg .page-hero code{background:#eef3ff;padding:2px 6px;border-radius:4px}

/* Article body: HeyCatch HTML (key takeaways, h2 sections, FAQ, tables, details) */
.art .art-body h2{scroll-margin-top:100px}
.art .art-body h3{font-size:20px;margin:28px 0 10px;color:var(--navy,#10264d)}
.art .art-body table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px}
.art .art-body th,.art .art-body td{border:1px solid #dfe6f0;padding:10px 12px;text-align:left;vertical-align:top}
.art .art-body th{background:#f3f6fb;font-weight:700}
.art .art-body blockquote{margin:24px 0;padding:16px 22px;border-left:4px solid #1a50c8;background:#f5f8fe;border-radius:0 8px 8px 0;color:#2b3f5c}
.art .art-body details{border:1px solid #dfe6f0;border-radius:8px;padding:12px 16px;margin:12px 0;background:#fff}
.art .art-body details summary{cursor:pointer;font-weight:700;color:var(--navy,#10264d)}
.art .art-body details[open] summary{margin-bottom:8px}
.art .art-body img{max-width:100%;height:auto;border-radius:8px}
.art .art-body pre{overflow:auto;background:#0f1b2d;color:#e6edf7;padding:16px;border-radius:8px;font-size:13.5px}
.art .art-body code{background:#eef3ff;padding:2px 5px;border-radius:4px;font-size:.92em}
.art .art-body pre code{background:none;padding:0}
.art .art-body hr{border:0;border-top:1px solid #e3e9f2;margin:32px 0}
.art .art-body a{color:#1a50c8}
.art .art-body ul,.art .art-body ol{padding-left:22px}
.art .art-body li{margin:6px 0}
html[dir="rtl"] .art .art-body{text-align:right}
html[dir="rtl"] .art .art-body ul,html[dir="rtl"] .art .art-body ol{padding-left:0;padding-right:22px}