/* Blog v2 (2026-10-31): the article page's extra pieces (progress bar, table of contents, author, FAQ, share, callouts,
 * featured card) on top of the #blog rules in redesign.css. Loaded by the server only on /blog and /blog/<slug>
 * (functions/_shared/blog.js), after site.min.css, so these rules win ties. Colours/radii come from tokens.css. */

/* ---- reading progress ---- */
.bl-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 70; background: transparent; pointer-events: none; }
.bl-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--green)); transition: width .08s linear; }

/* ---- header of the article ---- */
.bl-chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.bl-cat { display: inline-flex; align-items: center; padding: 3px 13px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-deep) !important; font-weight: 700; font-size: 13px; text-decoration: none !important; }
.bl-cat:hover { background: var(--blue-100); }
.bl-tag { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px; background: var(--green-soft); color: var(--green-text); font-weight: 600; font-size: 13px; }
.bl-tag::before { content: "#"; margin-inline-end: 2px; opacity: .6; }
.bl-lede { margin: 0 0 18px; font-size: 19px; line-height: 1.9; color: var(--text); max-width: 62ch; }
#blog .bl-when { gap: 6px 14px; }
.bl-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.bl-avatar-i { display: inline-grid; place-items: center; background: var(--gradient-brand); color: #fff; font-weight: 800; font-size: 15px; }
.bl-by { font-weight: 700; color: var(--ink); font-size: 14.5px; }
.bl-upd { font-size: 13.5px; color: var(--green-text); font-weight: 600; }
.bl-cover { margin: 0 0 34px; }
#blog.bl-post .bl-cover .soro-blog-article-image { margin-bottom: 0; width: 100%; max-height: 520px; aspect-ratio: 16 / 8; }

/* ---- wider column when there is a table of contents ---- */
#blog.bl-post .soro-blog-article:has(.bl-toc) { max-width: 1080px; }
#blog.bl-post .soro-blog-article:has(.bl-toc) > header,
#blog.bl-post .soro-blog-article:has(.bl-toc) .bl-share,
#blog.bl-post .soro-blog-article:has(.bl-toc) .bl-author { max-width: 760px; margin-inline: 0 auto; }
.bl-post .bl-crumbs { max-width: 1080px; }
.bl-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 44px; align-items: start; }
.bl-layout-nogrid { display: block; }
.bl-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow: auto; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--blue-50); font-size: 14px; line-height: 1.7; }
.bl-toc b { display: block; margin-bottom: 8px; color: var(--ink); font-size: 14.5px; }
.bl-toc nav { display: grid; gap: 1px; }
.bl-toc a { display: block; padding: 4px 12px; color: var(--text); text-decoration: none; border-inline-start: 2px solid var(--border-strong); border-radius: 0; }
.bl-toc a:hover { color: var(--blue-deep); }
.bl-toc a.on { color: var(--blue-deep); font-weight: 700; border-color: var(--blue); background: rgba(8, 114, 235, .06); }
.bl-toc a.bl-toc-sub { padding-inline-start: 26px; font-size: 13px; }

/* ---- the body ---- */
.bl-prose { min-width: 0; max-width: 720px; }
.bl-prose h2, .bl-prose h3, .bl-prose h4 { scroll-margin-top: 90px; }
.bl-prose h4 { margin: 26px 0 10px; font-size: 18px; color: var(--ink); font-weight: 600; }
.bl-prose hr { border: 0; border-top: 1.5px dashed var(--line-strong); margin: 34px 0; }
.bl-prose img { max-width: 100%; height: auto; }
.bl-figure { margin: 28px 0; }
.bl-figure img { display: block; width: auto; max-width: 100%; max-height: 560px; margin-inline: auto; border-radius: 16px; } /* wide pictures fill the column; a square one stays a sensible size */
.bl-figure figcaption { margin-top: 8px; font-size: 13.5px; color: var(--muted); text-align: center; }
.bl-table-wrap { overflow-x: auto; margin: 0 0 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
#blog .bl-prose .bl-table-wrap table { display: table; width: 100%; margin: 0; min-width: 440px; }
#blog .bl-prose .bl-table-wrap th { background: var(--blue-50); color: var(--ink); font-weight: 700; font-size: 14px; }
#blog .bl-prose .bl-table-wrap tr:last-child td { border-bottom: 0; }
.bl-code { direction: ltr; text-align: left; overflow-x: auto; margin: 0 0 22px; padding: 14px 18px; border-radius: 12px; background: #14213D; color: #E7EEFB; font-size: 14px; line-height: 1.7; }
.bl-prose code { padding: 1px 6px; border-radius: 6px; background: var(--blue-50); font-size: .92em; direction: ltr; unicode-bidi: isolate; }
.bl-code code { padding: 0; background: none; }

/* callouts: > [!tip] … */
.bl-callout { display: grid; gap: 4px; margin: 0 0 24px; padding: 14px 20px; border-radius: 14px; border: 1px solid; font-size: 16.5px; line-height: 1.9; }
.bl-callout > strong { font-size: 14px; letter-spacing: 0; }
.bl-callout-tip { background: var(--green-50); border-color: var(--green-100); } .bl-callout-tip > strong { color: var(--green-text); }
.bl-callout-warn { background: #FFF6E5; border-color: #FFE2A8; } .bl-callout-warn > strong { color: #8A5A00; }
.bl-callout-info { background: var(--blue-50); border-color: var(--blue-200); } .bl-callout-info > strong { color: var(--blue-deep); }
.bl-callout-note { background: #F5F6F8; border-color: #E0E3EA; } .bl-callout-note > strong { color: var(--muted); }

/* {{plans}} / {{check}} inside the article */
.bl-inline-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 30px 0; padding: 18px 22px; border-radius: 18px; background: linear-gradient(120deg, var(--blue-100), var(--green-50)); border: 1px solid var(--blue-200); }
/* buttons inside the article body: the body's link colour must not paint over them */
#blog .bl-prose a.btn { text-decoration: none; }
#blog .bl-prose a.btn-primary, #blog .bl-prose .btn-primary { color: #fff; }
#blog .bl-prose .btn-ghost-dark { color: var(--ink); }
.bl-inline-cta > div { display: grid; gap: 2px; }
.bl-inline-cta strong { color: var(--ink); font-size: 18px; }
.bl-inline-cta span { font-size: 15px; color: var(--text); }

/* FAQ */
.bl-faq { margin: 44px 0 10px; }
.bl-faq h2 { margin: 0 0 14px !important; }
.bl-faq details { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 12px 18px; margin-bottom: 10px; }
.bl-faq summary { cursor: pointer; font-weight: 700; color: var(--ink); line-height: 1.7; list-style-position: inside; }
.bl-faq details[open] { border-color: var(--blue-200); }
.bl-faq p { margin: 8px 0 2px !important; font-size: 16.5px; line-height: 1.9; }

/* share + author */
.bl-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 34px; padding-block: 14px; border-block: 1px solid var(--line); }
.bl-share b { margin-inline-end: 6px; color: var(--ink); font-size: 14.5px; }
.bl-author { display: flex; gap: 16px; align-items: center; margin-top: 26px; padding: 16px 20px; border-radius: 18px; background: var(--blue-50); }
.bl-author .bl-avatar { width: 54px; height: 54px; font-size: 20px; }
.bl-author b { color: var(--ink); }
.bl-author p { margin: 2px 0 0; font-size: 14.5px; line-height: 1.8; color: var(--text); }

/* ---- the archive's featured card ---- */
.bl-feat { display: grid; grid-template-columns: 1.15fr 1fr; margin-bottom: 26px; border: 1px solid var(--line-strong); border-radius: 22px; overflow: hidden; background: #fff; color: inherit; text-decoration: none !important; transition: box-shadow .2s, transform .2s; }
.bl-feat:hover { box-shadow: 0 18px 36px -22px rgba(10, 40, 90, .4); transform: translateY(-2px); }
.bl-feat img, .bl-feat-ph { width: 100%; height: 100%; min-height: 220px; object-fit: cover; background: var(--gradient-brand); display: block; }
.bl-feat-body { display: grid; gap: 8px; align-content: center; padding: 24px 28px; }
.bl-feat-body .bl-cat { width: fit-content; }
.bl-feat h2 { margin: 0; font-size: clamp(21px, 2.6vw, 28px); line-height: 1.5; color: var(--ink); }
.bl-feat p { margin: 0; color: var(--text); line-height: 1.8; }
.bl-feat-meta { font-size: 13.5px; color: var(--muted); }

@media (max-width: 900px) {
  .bl-layout { grid-template-columns: 1fr; gap: 22px; }
  .bl-toc { position: static; max-height: none; }
  #blog.bl-post .soro-blog-article:has(.bl-toc) { max-width: 760px; margin-inline: auto; }
  .bl-feat { grid-template-columns: 1fr; }
  .bl-feat img, .bl-feat-ph { min-height: 180px; }
}
@media (prefers-reduced-motion: reduce) { .bl-progress i, .bl-feat { transition: none; } }