/* The blog — «Web 3.0 · Blog archive» (/blog/, /category/<slug>/, author and date archives) and «Web 3.0 · Post»
   (web/build/page_blog.py, data fbw-blog.php). Never edit fbw.css here. Brand: white dominates, ink text, no yellow
   text in any state, Borna only except code (inline and blocks: var(--font-mono), owner 2026-10-19), links = 1 px hairline that darkens. */

/* ---------- breadcrumb (as the template page's) ---------- */
.fbw .fbw-blog-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; font-size: var(--text-s); color: var(--text-color); }
/* the separator before the current item, not after the link: on the link it took the link's hairline underline */
.fbw .fbw-blog-crumbs > :not(:first-child)::before { content: "/"; margin-inline-end: 0.6rem; color: var(--border-color-strong); display: inline-block; }
.fbw .fbw-blog-crumbs [aria-current] { color: var(--heading-color); }

/* ---------- archive: heading, topics, cards, pagination ---------- */
.fbw .fbw-blog-list .fbw-container { gap: var(--space-l); }
/* M6 (2026-10-20): the list title is the section's H2, so H2 size (--h2, 48), not 34 px; centered with its topics
   under the centered hero (M4), never a title on the left with the right half empty */
.fbw .fbw-blog-list__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-m); text-align: center; }
.fbw .fbw-blog-list__title { font-size: var(--h2); font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.fbw .fbw-blog-list__head .fbw-chips { justify-content: center; }
/* topic chips: the shared clickable chip, active = ink edge (fbw.css) */

.fbw .fbw-blog-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l) var(--space-m); }
.fbw .fbw-blog-card { position: relative; display: flex; flex-direction: column; min-inline-size: 0; border: 1px solid var(--fbw-line-soft); border-radius: var(--radius); background: var(--white); overflow: hidden; transition: translate var(--fbw-t-l) var(--ease-brand), box-shadow var(--fbw-t-l) var(--ease-brand); }
.fbw .fbw-blog-card:has(.fbw-blog-card__title a:focus-visible) { outline: 2px solid var(--base-ultra-dark); outline-offset: 2px; }
.fbw .fbw-blog-card__frame { aspect-ratio: 16 / 9; background: var(--base-ultra-light); border-block-end: 1px solid var(--fbw-line-soft); }
.fbw .fbw-blog-card__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.fbw .fbw-blog-card__body { display: flex; flex-direction: column; gap: 0.5rem; padding: var(--space-m); }
.fbw .fbw-blog-card__title { font-size: var(--text-l); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.fbw .fbw-blog-card__title a { color: var(--heading-color); text-decoration: none; }
.fbw .fbw-blog-card__title a::after { content: ""; position: absolute; inset: 0; }
.fbw .fbw-blog-card__title a:focus-visible { outline: none; }
.fbw .fbw-blog-card__meta { font-size: var(--text-s); color: var(--text-color); }
.fbw .fbw-blog-card__excerpt { font-size: var(--text-s); line-height: 1.55; color: var(--text-color); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* native Bricks pagination (paginate_links) */
.fbw .fbw-blog-pager .page-numbers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.fbw .fbw-blog-pager ul.page-numbers { justify-content: flex-start; }
.fbw .fbw-blog-pager li { margin: 0; }
.fbw .fbw-blog-pager :is(a, span).page-numbers { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-inline-size: 44px; block-size: 44px; padding-inline: 0.9rem; border: 1px solid var(--fbw-line); border-radius: var(--fbw-radius-btn); background: var(--white); color: var(--heading-color); font-size: var(--text-s); font-weight: 500; text-decoration: none; transition: background-color var(--fbw-t-s) var(--fbw-ease-color), border-color var(--fbw-t-s) var(--fbw-ease-color); }
.fbw .fbw-blog-pager a.page-numbers:hover { background: var(--base-ultra-light); border-color: var(--border-color-strong); }
.fbw .fbw-blog-pager .page-numbers.current { background: var(--base-ultra-dark); border-color: var(--base-ultra-dark); color: var(--white); }
.fbw .fbw-blog-pager .page-numbers.dots { border-color: transparent; }
/* WordPress prints «←/→» glyphs: the brand arrow (icon «arrow-right», --fbw-arrow) instead; aria-label stays */
.fbw .fbw-blog-pager :is(.prev, .next).page-numbers { font-size: 0; padding-inline: 0; min-inline-size: 44px; }
.fbw .fbw-blog-pager :is(.prev, .next).page-numbers::before { content: ""; inline-size: 1.25rem; block-size: 1.25rem; background: currentColor; -webkit-mask: var(--fbw-arrow) center / contain no-repeat; mask: var(--fbw-arrow) center / contain no-repeat; }
.fbw .fbw-blog-pager .prev.page-numbers::before { scale: -1 1; }
.fbw .fbw-blog-pager:not(:has(a)) { display: none; }

/* ---------- post: hero, layout, table of contents ---------- */
.fbw .fbw-blog-post-hero__text { max-width: 52rem; }
.fbw .fbw-blog-meta { font-size: var(--text-m); color: var(--text-color); }

.fbw .fbw-blog-layout { display: grid; grid-template-columns: minmax(0, 68ch) minmax(13rem, 17rem); justify-content: space-between; align-items: start; gap: var(--space-xl); }
.fbw .fbw-blog-article { grid-column: 1; grid-row: 1; min-inline-size: 0; }
.fbw .fbw-blog-toc { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--fbw-header-h, 0px) + var(--space-l)); display: flex; flex-direction: column; gap: var(--space-xs); }
.fbw .fbw-blog-toc__label { font-size: var(--text-s); font-weight: 600; color: var(--heading-color); }
.fbw .fbw-blog-toc .toc-list { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--fbw-line); }
.fbw .fbw-blog-toc .toc-list-item { margin: 0; }
.fbw .fbw-blog-toc .toc-link { display: block; padding: 0.4rem 0 0.4rem 1rem; margin-inline-start: -1px; border-inline-start: 2px solid transparent; font-size: var(--text-s); line-height: 1.4; color: var(--text-color); text-decoration: none; transition: color var(--fbw-t-s) var(--fbw-ease-color), border-color var(--fbw-t-s) var(--fbw-ease-color); }
.fbw .fbw-blog-toc .toc-link:hover { color: var(--heading-color); }
.fbw .fbw-blog-toc .toc-link.is-active-link { color: var(--heading-color); border-inline-start-color: var(--base-ultra-dark); font-weight: 500; }
.fbw .fbw-blog-toc .toc-link::before { display: none; }
/* Bricks' table of contents (tocbot) measures headings with offsetTop, i.e. from their offsetParent: with the post
   section and <main> positioned, a click landed ~450 px short and the current link lagged one heading. Static here,
   so offsetTop = page position and headingsOffset (page_blog.py) is the real distance from the top. */
.fbw main:has(.fbw-blog-post), .fbw .fbw-blog-post { position: static; }
/* and its click scroll is a loop of window.scrollTo: with the framework's html { scroll-behavior: smooth } every step
   restarted a smooth scroll and the jump stopped ~370 px short. Instant here (tocbot's duration is 0 anyway). */
html:has(.fbw-blog-post .brxe-post-toc) { scroll-behavior: auto; }
/* a post's own next step under the contents (meta fbw_post_ui.toc_cta): a note + outline S button, full width */
.fbw .fbw-blog-toc__cta { display: grid; gap: 0.6rem; margin-block-start: var(--space-xs); padding-block-start: var(--space-s); border-block-start: 1px solid var(--fbw-line-soft); }
.fbw .fbw-blog-toc__note { font-size: var(--text-s); color: var(--text-color); }
.fbw .fbw-blog-toc__cta .fbk-btn { inline-size: 100%; justify-content: center; }

/* ---------- post: the prose (Post Content = the WordPress content) ---------- */
.fbw .fbw-blog-body { font-size: var(--text-l); line-height: 1.7; color: var(--text-color); }
.fbw .fbw-blog-body > * { margin-block: 0; }
.fbw .fbw-blog-body > * + * { margin-block-start: 1.25em; }
.fbw .fbw-blog-body :is(h2, h3, h4) { scroll-margin-top: calc(var(--fbw-header-h, 0px) + var(--space-l)); }
.fbw .fbw-blog-body > h2 { font-size: var(--h3); margin-block-start: 2.2em; }
.fbw .fbw-blog-body > h3 { font-size: var(--h4); margin-block-start: 1.8em; }
.fbw .fbw-blog-body > h4 { font-size: var(--h5); margin-block-start: 1.6em; }
.fbw .fbw-blog-body > :is(h2, h3, h4) + * { margin-block-start: 0.75em; }
.fbw .fbw-blog-body > :first-child { margin-block-start: 0; }
.fbw .fbw-blog-body :is(strong, b) { color: var(--heading-color); font-weight: 600; }
.fbw .fbw-blog-body a:not(.wp-block-button__link) { color: var(--heading-color); font-weight: 500; text-decoration: underline; text-decoration-color: var(--border-color-strong); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color var(--fbw-t-s) var(--fbw-ease-color); }
.fbw .fbw-blog-body a:not(.wp-block-button__link):hover { text-decoration-color: var(--heading-color); }
.fbw .fbw-blog-body :is(ul, ol) { padding-inline-start: 1.4em; }
.fbw .fbw-blog-body li + li { margin-block-start: 0.45em; }
.fbw .fbw-blog-body li > :is(ul, ol) { margin-block-start: 0.45em; }
.fbw .fbw-blog-body li::marker { color: var(--border-color-strong); }
.fbw .fbw-blog-body hr { border: 0; border-block-start: 1px solid var(--fbw-line-soft); margin-block: 2.5em; }

/* code: inline and blocks (Code Block Pro sets Fira Code inline, hence !important) */
.fbw .fbw-blog-body :not(pre) > code { font-family: var(--font-mono); font-size: 0.875em; font-weight: 400; color: var(--heading-color); background: var(--base-ultra-light); border: 1px solid var(--fbw-line-soft); border-radius: 6px; padding: 0.05em 0.35em; overflow-wrap: anywhere; }
.fbw .fbw-blog-body .wp-block-kevinbatdorf-code-block-pro { font-family: var(--font-mono) !important; font-size: var(--text-s) !important; line-height: 1.65 !important; border-radius: var(--radius); overflow: hidden; }
.fbw .fbw-blog-body :is(pre, pre code), .fbw .fbw-blog-body .wp-block-kevinbatdorf-code-block-pro :is(pre, code, span) { font-family: var(--font-mono) !important; }
.fbw .fbw-blog-body pre { margin: 0; padding: var(--space-m); overflow-x: auto; border-radius: var(--radius); background: var(--base-ultra-dark); color: #e6e6e6; font-size: var(--text-s); line-height: 1.65; tab-size: 2; }
.fbw .fbw-blog-body .wp-block-kevinbatdorf-code-block-pro pre { border-radius: 0; }
.fbw .fbw-blog-body .wp-block-kevinbatdorf-code-block-pro .code-block-pro-copy-button { color: #bfbfbf; }

/* quotes: no left rule (the old theme style), a soft panel instead */
.fbw .fbw-blog-body blockquote { margin-inline: 0; padding: var(--space-m) var(--space-l); border: 0; border-radius: var(--radius); background: var(--base-ultra-light); color: var(--heading-color); font-family: var(--font-sans); font-style: normal; font-size: var(--text-l); }
.fbw .fbw-blog-body blockquote > * + * { margin-block-start: 0.75em; }
.fbw .fbw-blog-body blockquote cite { display: block; font-style: normal; text-transform: none; font-family: var(--font-sans); font-size: var(--text-s); color: var(--text-color); opacity: 1; }

/* tables */
.fbw .fbw-blog-body .wp-block-table { overflow-x: auto; margin-inline: 0; }
.fbw .fbw-blog-body table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-s); line-height: 1.5; }
.fbw .fbw-blog-body :is(th, td) { padding: 0.7rem 0.9rem; text-align: start; vertical-align: top; border-block-end: 1px solid var(--fbw-line-soft); }
.fbw .fbw-blog-body th { color: var(--heading-color); font-weight: 600; border-block-end-color: var(--fbw-line); }
.fbw .fbw-blog-body thead th { background: var(--base-ultra-light); }

/* images and embeds */
.fbw .fbw-blog-body figure { margin-inline: 0; }
.fbw .fbw-blog-body img { border-radius: var(--radius); height: auto; }
.fbw .fbw-blog-body figure.wp-block-image img { outline: 1px solid var(--fbw-line-soft); outline-offset: -1px; }
.fbw .fbw-blog-body figcaption { margin-block-start: 0.6rem; font-size: var(--text-s); line-height: 1.5; color: var(--text-color); text-align: start; }
.fbw .fbw-blog-body .wp-block-embed iframe { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }

/* a post's own FAQ in HTML (<details>): lines, no chevron (the brand accordion has none) */
.fbw .fbw-blog-body details { border-block-end: 1px solid var(--fbw-line); padding-block: var(--space-s); }
.fbw .fbw-blog-body details + details { margin-block-start: 0; }
.fbw .fbw-blog-body summary { cursor: pointer; list-style: none; color: var(--heading-color); font-weight: 600; font-size: var(--text-l); }
.fbw .fbw-blog-body summary::-webkit-details-marker { display: none; }
.fbw .fbw-blog-body details > :not(summary) { margin-block-start: 0.6em; }

/* a post's FAQ: the web's one FAQ (faq-lines, «Web 3.0 · Post FAQ · <slug>», page_blog.post_faq) via [bricks_template],
   flat inside the prose: no section padding, the accordion at the article's width (its -24px pull-up is for the
   two-column layout it lost) */
.fbw .fbw-blog-body > .fbw-blog-faq { padding: 0; min-block-size: 0; font-size: var(--text-m); line-height: 1.6; }
/* the shortcode prints the template's class CSS after fbw.css, so the web's item edge needs one class more here */
.fbw .fbw-blog-body > .fbw-blog-faq .fbk-accordion__item { border-color: var(--fbw-line-soft); }
.fbw .fbw-blog-body > .fbw-blog-faq :is(.fbk-section__container, .fbk-faqlines) { display: block; inline-size: 100%; max-inline-size: none; padding: 0; }
.fbw .fbw-blog-body > .fbw-blog-faq .fbk-accordion { margin-block-start: 0; }
.fbw .fbw-blog-body > h2 + .fbw-blog-faq { margin-block-start: var(--space-m); }

/* buttons inside old posts (core/buttons) */
.fbw .fbw-blog-body .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.fbw .fbw-blog-body .wp-block-button__link { display: inline-flex; align-items: center; min-block-size: 50px; padding: 0.75rem 1.4rem; border-radius: var(--fbw-radius-btn); background: var(--base-ultra-dark); color: var(--white); font-size: var(--text-m); font-weight: 600; text-decoration: none; transition: background-color 350ms cubic-bezier(0.4, 0, 0.2, 1), color 350ms cubic-bezier(0.4, 0, 0.2, 1); }
.fbw .fbw-blog-body .wp-block-button__link:hover { background: var(--primary); color: var(--base-ultra-dark); }

/* an old Bricks template inside a post ([bricks_template id="2595"]: the «premium users only» gate of
   /on-sale-products-query-loop/). Its own CSS is by element id (Crimson Pro, yellow title): brand it, !important. */
.fbw .fbw-blog-body > .brxe-section:not(.fbw-blog-faq) { padding: 0 !important; background: none !important; min-height: 0 !important; }
.fbw .fbw-blog-body > .brxe-section:not(.fbw-blog-faq) > .brxe-div { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; justify-content: flex-start !important; gap: var(--space-s) !important; padding: var(--space-l) !important; border-radius: var(--radius) !important; background: var(--base-ultra-dark) !important; color: #bfbfbf !important; text-align: start !important; }
.fbw .fbw-blog-body > .brxe-section:not(.fbw-blog-faq) .brxe-text-basic { flex: 1 0 100%; margin: 0 !important; font-family: var(--font-sans) !important; font-size: var(--text-m) !important; font-style: normal !important; line-height: 1.5 !important; color: #bfbfbf !important; text-align: start !important; }
.fbw .fbw-blog-body > .brxe-section:not(.fbw-blog-faq) .brxe-text-basic:first-child { font-size: var(--text-xl) !important; font-weight: 600 !important; color: var(--white) !important; }
.fbw .fbw-blog-body > .brxe-section:not(.fbw-blog-faq) .brxe-button { display: inline-flex !important; align-items: center; min-block-size: 44px; padding: 0.6rem 1.2rem !important; border: 1px solid var(--white) !important; border-radius: var(--fbw-radius-btn) !important; background: transparent !important; color: var(--white) !important; font-family: var(--font-sans) !important; font-size: var(--text-s) !important; font-weight: 600 !important; text-decoration: none !important; text-transform: none !important; transition: background-color 350ms cubic-bezier(0.4, 0, 0.2, 1), color 350ms cubic-bezier(0.4, 0, 0.2, 1); }
.fbw .fbw-blog-body > .brxe-section:not(.fbw-blog-faq) .brxe-button:hover { background: var(--white) !important; color: var(--base-ultra-dark) !important; }

/* ---------- related templates ---------- */
.fbw .fbw-blog-related { list-style: none; margin: 0; padding: 0; }
.fbw .fbw-blog-related__item { min-inline-size: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .fbw .fbw-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fbw .fbw-blog-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
  .fbw .fbw-blog-article, .fbw .fbw-blog-toc { grid-column: 1; grid-row: auto; }
  .fbw .fbw-blog-article { max-inline-size: 68ch; }
  .fbw .fbw-blog-toc { position: static; padding: var(--space-m); border-radius: var(--radius); background: var(--base-ultra-light); }
  .fbw .fbw-blog-toc .toc-list { border-inline-start-color: var(--fbw-line); }
}
@media (max-width: 767px) {
  .fbw .fbw-blog-grid { grid-template-columns: minmax(0, 1fr); }
  .fbw .fbw-blog-body { font-size: var(--text-m); }
  .fbw .fbw-blog-body blockquote { padding: var(--space-s) var(--space-m); }
}
@media (prefers-reduced-motion: reduce) {
  .fbw .fbw-blog-card, .fbw .fbw-blog-card:hover { transition: none; translate: none; }
}