/* ═══════════════════════════════════════════════════════════════════════════
   blog-v4.css — blog index + blog post on the v4 design system (2026-09-14).
   Loaded after blog.css / blog-post.css and after inner-v4.css, so it wins on
   source order; where inner-v4's `#hv-root :where(h1,h2,h3)` (1,1,0) would
   win, selectors here are `#hv-root …` qualified. Markup, ids and the hooks
   blog-post.js uses (#sp-progress, #sp-article, #sp-toc, #sp-copy-btn,
   .sp-toc-link.active) are unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── shared: light "hero" ground with the homepage glow ──────────────────── */
.blog-hero, .sp-hero {
    position: relative; overflow: hidden;
    background: var(--rv-page);
    border-bottom: 1px solid var(--rv-border);
}
.blog-hero::before, .sp-hero::before {
    content: ''; position: absolute; top: -220px; right: -160px; width: 640px; height: 640px; border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, .14), transparent 65%); pointer-events: none;
}
.blog-hero::after, .sp-hero::after {
    content: ''; position: absolute; bottom: -240px; left: -200px; width: 560px; height: 560px; border-radius: 50%;
    background: radial-gradient(circle, rgba(88, 80, 236, .08), transparent 65%); pointer-events: none;
}
.blog-hero > .container, .sp-hero-inner { position: relative; z-index: 2; }

/* pills */
.blog-hero-eyebrow, .sp-cat, .blog-card-cat, .sp-rcard-cat {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--rv-primary-deep); background: var(--rv-surface-4); border: 1px solid var(--rv-primary-pale);
    border-radius: 999px; padding: 6px 13px; text-decoration: none;
}
a.sp-cat:hover, a.blog-card-cat:hover { background: var(--rv-primary-pale); color: var(--rv-primary-deep); text-decoration: none; }

/* ═══ BLOG INDEX ══════════════════════════════════════════════════════════ */
.blog-hero { padding: 72px 0 48px; }
#hv-root h1.blog-hero-title {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(34px, 4vw, 52px); font-weight: 800;
    letter-spacing: -.035em; line-height: 1.08; color: var(--rv-ink); margin: 18px 0 14px; max-width: 760px; text-wrap: pretty;
}
.blog-hero-sub { font-size: 17.5px; line-height: 1.6; color: var(--rv-body); max-width: 560px; }
.blog-filters { padding-top: 28px; gap: 8px; }
#hv-root .blog-filter-btn {
    padding: 8px 16px !important; border-radius: 999px !important;
    border: 1px solid var(--rv-border) !important; background: var(--rv-surface) !important; color: var(--rv-body) !important;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 600;
    box-shadow: none !important; transition: background .16s, color .16s, border-color .16s, transform .16s;
}
#hv-root .blog-filter-btn:hover { border-color: var(--rv-primary-pale) !important; background: var(--rv-surface-4) !important; color: var(--rv-primary-deep) !important; }
#hv-root .blog-filter-btn.active, #hv-root .blog-filter-btn.active:hover {
    background: var(--rv-gradient, linear-gradient(135deg, #5850ec, #8b5cf6)) !important; border-color: transparent !important; color: #fff !important;
    box-shadow: 0 10px 22px -12px rgba(88, 80, 236, .7) !important;
}

.blog-body { background: var(--rv-page); padding: 56px 0 96px; }
.blog-grid { gap: 22px; }
.blog-card, .sp-rcard {
    background: var(--rv-surface); border: 1px solid var(--rv-border); border-radius: 22px;
    box-shadow: 0 18px 46px -30px rgba(22, 22, 29, .18);
    transition: transform .3s cubic-bezier(.23, 1, .32, 1), box-shadow .3s, border-color .3s;
}
.blog-card:hover, .sp-rcard:hover { transform: translateY(-4px); border-color: var(--rv-primary-pale); box-shadow: 0 26px 56px -30px rgba(80, 63, 205, .3); }
.blog-card-img, .sp-rcard-img, .blog-card-img-placeholder, .sp-rcard-img-ph { background: var(--rv-surface-5); }
.blog-card-img-placeholder, .sp-rcard-img-ph { background: linear-gradient(135deg, var(--rv-surface-4), var(--rv-surface-2)); color: var(--rv-primary-pale); }
.blog-card-body { padding: 22px 22px 20px; }
.blog-card-cat, .sp-rcard-cat { font-size: 10.5px; padding: 4px 10px; margin-bottom: 12px; }
#hv-root h2.blog-card-title, #hv-root h3.sp-rcard-title {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; color: var(--rv-ink);
}
.blog-card:hover .blog-card-title, .sp-rcard:hover .sp-rcard-title { color: var(--rv-primary-deep); }
.blog-card-excerpt { font-size: 14.5px; line-height: 1.6; color: var(--rv-body); }
.blog-card-footer, .sp-rcard-foot { border-top: 1px solid var(--rv-border-soft); }
.blog-card-meta, .sp-rcard-date { color: var(--rv-muted); font-size: 12.5px; }
.blog-card-read, .sp-rcard-read { color: var(--rv-primary-deep); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; }

.blog-pagination a, .blog-pagination span {
    border-radius: 999px; border: 1px solid var(--rv-border); background: var(--rv-surface); color: var(--rv-ink-soft);
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700;
}
.blog-pagination a:hover { border-color: var(--rv-primary-pale); background: var(--rv-surface-4); color: var(--rv-primary-deep); }
.blog-pagination span.active { background: var(--rv-gradient, linear-gradient(135deg, #5850ec, #8b5cf6)); border-color: transparent; color: #fff; }
.blog-empty { color: var(--rv-muted); }
.blog-empty svg { color: var(--rv-border); }
#hv-root .blog-empty h3 { color: var(--rv-ink); }

/* ═══ BLOG POST ═══════════════════════════════════════════════════════════ */
.sp-wrap { background: var(--rv-page); }
.sp-hero { display: flex; flex-direction: column; min-height: 0; }
.sp-hero-bg, .sp-hero-fade { display: none; }
.sp-hero-inner { order: 1; padding: 56px 0 40px; }
.sp-hero-img {
    order: 2; position: relative; inset: auto; z-index: 2;
    width: min(1200px, calc(100% - 64px)); height: auto; max-height: 460px; aspect-ratio: 21 / 9;
    margin: 0 auto 56px; border-radius: 26px; object-fit: cover; object-position: center;
    filter: none; opacity: 1; border: 1px solid var(--rv-border); box-shadow: 0 30px 70px -40px rgba(80, 63, 205, .45);
}
.sp-back { color: var(--rv-muted); }
.sp-back:hover { color: var(--rv-primary-deep); }
.sp-cat { margin-bottom: 18px; }
#hv-root .sp-hero h1.sp-title {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(30px, 3.6vw, 48px); font-weight: 800;
    letter-spacing: -.035em; line-height: 1.1; color: var(--rv-ink); max-width: 820px; margin: 0 0 22px; text-wrap: pretty;
}
.sp-hero-divider { background: var(--rv-gradient, linear-gradient(90deg, #5850ec, #8b5cf6)); }
.sp-meta-item { color: var(--rv-body); font-size: 13.5px; }
.sp-meta-item svg { opacity: .8; color: var(--rv-muted); }
.sp-meta-sep { background: var(--rv-border); width: 4px; height: 4px; }
.sp-author-avatar { border-color: transparent; box-shadow: 0 6px 14px -6px rgba(88, 80, 236, .7); }

.sp-body { background: var(--rv-page); padding: 64px 0 100px; }
.sp-excerpt {
    background: var(--rv-surface); border: 1px solid var(--rv-border); border-left: 4px solid var(--rv-primary);
    border-radius: 18px; color: var(--rv-ink-soft); font-size: 18px; box-shadow: 0 18px 46px -30px rgba(22, 22, 29, .18);
}
.sp-excerpt::before { color: var(--rv-primary); opacity: .18; }
.sp-content, .sp-plain { color: var(--rv-ink-soft); font-size: 17px; line-height: 1.8; }
#hv-root .sp-content :is(h1, h2, h3, h4, h5, h6) { color: var(--rv-ink); font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -.025em; }
.sp-content h1, .sp-content h2 { border-bottom-color: var(--rv-border); }
.sp-content h2::before, .sp-content h3::before { background: var(--rv-gradient, linear-gradient(180deg, #5850ec, #8b5cf6)); }
.sp-content a { color: var(--rv-primary-deep); }
.sp-content strong { color: var(--rv-ink); }
.sp-content blockquote { background: var(--rv-surface-2); border-left-color: var(--rv-primary); border-radius: 0 16px 16px 0; color: var(--rv-ink-soft); }
.sp-content code { background: var(--rv-surface-4); color: var(--rv-primary-deep); border-radius: 6px; }
.sp-content pre { background: var(--rv-ink-panel); border-radius: 18px; }
.sp-content img { border-radius: 18px; border: 1px solid var(--rv-border); }
.sp-content hr { border-color: var(--rv-border); }
.sp-content table { border-color: var(--rv-border); border-radius: 16px; overflow: hidden; }
.sp-content td, .sp-content th { border-color: var(--rv-border); }
.sp-content tr.sp-thead-row, .sp-content td.sp-th { background: var(--rv-primary); color: #fff; }
.sp-content tr.sp-thead-row *, .sp-content td.sp-th * { color: #fff !important; }   /* links/em/strong the editor puts in header cells */
.sp-content td.sp-th { border-color: rgba(255, 255, 255, .18); }
.sp-content ul li::before, .sp-content ol li::before { color: var(--rv-primary); }

.sp-footer { border-top: 1px solid var(--rv-border); }
#hv-root .sp-footer-back { border-radius: 999px; border: 1px solid var(--rv-border); background: var(--rv-surface); color: var(--rv-ink-soft); font-family: 'Plus Jakarta Sans', sans-serif; }
#hv-root .sp-footer-back:hover { border-color: var(--rv-primary-pale); background: var(--rv-surface-4); color: var(--rv-primary-deep); }
.sp-share-label { color: var(--rv-muted); }
#hv-root .sp-share-btn { width: 40px; height: 40px; border-radius: 999px !important; border: 1px solid var(--rv-border) !important; background: var(--rv-surface) !important; color: var(--rv-body) !important; box-shadow: none !important; }
#hv-root .sp-share-btn:hover { border-color: var(--rv-primary-pale) !important; background: var(--rv-surface-4) !important; color: var(--rv-primary-deep) !important; transform: translateY(-2px); }

.sp-sidebar-card { background: var(--rv-surface); border: 1px solid var(--rv-border); border-radius: 20px; box-shadow: 0 18px 46px -30px rgba(22, 22, 29, .18); }
.sp-sidebar-head { background: var(--rv-surface-2); border-bottom-color: var(--rv-border-soft); color: var(--rv-muted); font-family: 'Plus Jakarta Sans', sans-serif; }
.sp-sidebar-head::before { background: var(--rv-gradient, linear-gradient(180deg, #5850ec, #8b5cf6)); }
.sp-toc-link { color: var(--rv-body); border-radius: 10px; }
.sp-toc-link:hover { background: var(--rv-surface-3); color: var(--rv-primary-deep); border-left-color: var(--rv-primary); }
.sp-toc-link.active, .sp-toc-link--h3.active { background: var(--rv-surface-4); color: var(--rv-primary-deep); border-left-color: var(--rv-primary); }
.sp-toc-link--h3 { color: var(--rv-muted); }
.sp-toc-link--h3:hover { color: var(--rv-primary-deep); border-left-color: var(--rv-primary); }

.sp-related { background: var(--rv-surface-2); border-top: 1px solid var(--rv-border); padding: 72px 0 96px; }
#hv-root h2.sp-related-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.03em; color: var(--rv-ink); }
#hv-root .sp-related-all { border-radius: 999px; border: 1px solid var(--rv-border); background: var(--rv-surface); color: var(--rv-ink-soft); font-family: 'Plus Jakarta Sans', sans-serif; }
#hv-root .sp-related-all:hover { background: var(--rv-gradient, linear-gradient(135deg, #5850ec, #8b5cf6)); border-color: transparent; color: #fff; }
.sp-rcard-body { padding: 20px 22px 22px; }

@media (max-width: 640px) {
    .blog-hero { padding: 48px 0 36px; }
    .sp-hero-inner { padding: 40px 0 28px; }
    .sp-hero-img { width: calc(100% - 32px); aspect-ratio: 16 / 9; border-radius: 18px; margin-bottom: 36px; }
}

/* ── dark ─────────────────────────────────────────────────────────────────── */
[data-theme="dark"] .blog-hero, [data-theme="dark"] .sp-hero { background: var(--rv-page); border-bottom-color: var(--rv-border); }
[data-theme="dark"] .blog-hero-eyebrow, [data-theme="dark"] .sp-cat, [data-theme="dark"] .blog-card-cat, [data-theme="dark"] .sp-rcard-cat { background: rgba(139, 92, 246, .16); border-color: rgba(139, 92, 246, .34); color: #c4b5fd; }
[data-theme="dark"] .blog-card, [data-theme="dark"] .sp-rcard, [data-theme="dark"] .sp-sidebar-card, [data-theme="dark"] .sp-excerpt { background: var(--rv-surface); border-color: var(--rv-border); box-shadow: none; }
[data-theme="dark"] .blog-card:hover, [data-theme="dark"] .sp-rcard:hover { border-color: var(--rv-primary-pale); box-shadow: 0 26px 56px -30px rgba(0, 0, 0, .8); }
[data-theme="dark"] .blog-card-read, [data-theme="dark"] .sp-rcard-read, [data-theme="dark"] .sp-content a, [data-theme="dark"] .sp-toc-link.active, [data-theme="dark"] .sp-toc-link--h3.active, [data-theme="dark"] .sp-content code { color: #c4b5fd; }
[data-theme="dark"] .sp-toc-link.active, [data-theme="dark"] .sp-toc-link--h3.active { background: rgba(139, 92, 246, .16); }
[data-theme="dark"] .sp-content code { background: rgba(139, 92, 246, .16); }
[data-theme="dark"] .sp-hero-img { border-color: var(--rv-border); box-shadow: none; }
[data-theme="dark"] .sp-related { background: var(--rv-surface-2); }
[data-theme="dark"] #hv-root .blog-filter-btn, [data-theme="dark"] .blog-pagination a, [data-theme="dark"] .blog-pagination span, [data-theme="dark"] #hv-root .sp-footer-back, [data-theme="dark"] #hv-root .sp-share-btn, [data-theme="dark"] #hv-root .sp-related-all { background: var(--rv-surface) !important; border-color: var(--rv-border) !important; color: var(--rv-body) !important; }
[data-theme="dark"] #hv-root .blog-filter-btn.active, [data-theme="dark"] .blog-pagination span.active { background: var(--rv-gradient, linear-gradient(135deg, #5850ec, #8b5cf6)) !important; color: #fff !important; border-color: transparent !important; }
[data-theme="dark"] .sp-content tr.sp-thead-row, [data-theme="dark"] .sp-content td.sp-th { background: #5b4dd1; color: #fff; }

/* phones: editor tables are wider than the screen — scroll them inside the article instead of the page */
.sp-content .sp-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) {
    .sp-content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    .sp-content table td, .sp-content table th { white-space: normal; min-width: 140px; }
    .sp-content pre { max-width: 100%; overflow-x: auto; }
    .sp-content img, .sp-content iframe, .sp-content video { max-width: 100%; height: auto; }
}