/* Public blog (v1082): list and article. */

/* ---------- Search ---------- */
.bl-search { position: relative; display: flex; align-items: center; width: min(320px, 100%); }
.bl-search .icon-svg { position: absolute; left: 14px; width: 16px; height: 16px; fill: none; stroke: var(--hl-muted); stroke-width: 2; pointer-events: none; }
.bl-search input { width: 100%; min-height: 44px; border: 1px solid var(--hl-line); border-radius: 12px; padding: 10px 14px 10px 40px; background: var(--hl-surface); color: var(--hl-ink); font: inherit; font-size: .94rem; transition: border-color .2s, box-shadow .2s; }
.bl-search input:focus { outline: none; border-color: var(--hl-accent); box-shadow: 0 0 0 4px var(--hl-accent-soft); }

/* ---------- Cards ---------- */
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--hl-muted); font-size: .82rem; }
.bl-meta > * + *::before { content: ''; display: inline-block; width: 3px; height: 3px; margin-right: 12px; border-radius: 50%; background: currentColor; vertical-align: middle; opacity: .6; }
.bl-cat { display: inline-flex; align-items: center; gap: 7px; color: color-mix(in srgb, var(--cat, #5b3df5) 80%, #0f1222); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bl-cat::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cat, #5b3df5); }

.bl-media { position: relative; display: block; overflow: hidden; border-radius: 18px; background: linear-gradient(135deg, #efecff, #e3f7fb); aspect-ratio: 16 / 10; }
.bl-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--hl-ease, ease); }
.bl-media-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; color: color-mix(in srgb, var(--cat, #5b3df5) 70%, #0f1222); font: 800 1.2rem/1.2 var(--hl-font-head); letter-spacing: -.02em; text-align: center; background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--cat, #5b3df5) 22%, #fff), #f6f5ff 70%); }
.bl-play { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(15, 18, 34, .78); color: #fff; }
.bl-play .icon-svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

.bl-card { display: flex; flex-direction: column; gap: 14px; }
.bl-card:hover .bl-media img { transform: scale(1.035); }
.bl-card h3 { margin: 0; color: var(--hl-ink); font: 700 1.2rem/1.32 var(--hl-font-head); letter-spacing: -.015em; }
.bl-card h3 a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .35s; }
.bl-card:hover h3 a { background-size: 100% 1.5px; }
.bl-card p { margin: 0; color: var(--hl-muted); font-size: .95rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-card-body { display: grid; gap: 8px; }

/* Featured */
.bl-featured { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 36px 0 40px; border-bottom: 1px solid var(--hl-line); }
.bl-featured .bl-media { aspect-ratio: 16 / 10; border-radius: 22px; }
.bl-featured h2 { margin: 12px 0 0; color: var(--hl-ink); font: 800 clamp(1.6rem, 1.1rem + 1.4vw, 2.3rem)/1.15 var(--hl-font-head); letter-spacing: -.03em; }
.bl-featured h2 a:hover { color: var(--hl-accent); }
.bl-featured p { margin: 14px 0 0; color: var(--hl-muted); font-size: 1.05rem; line-height: 1.65; }
.bl-featured .bl-meta { margin-top: 18px; }
.bl-badge { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; border-radius: 999px; padding: 4px 10px; background: var(--hl-ink); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }

.bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; padding-top: 36px; }
.bl-empty { padding: 72px 20px; text-align: center; }
.bl-empty strong { display: block; color: var(--hl-ink); font: 700 1.3rem var(--hl-font-head); }
.bl-empty p { margin: 8px auto 20px; max-width: 420px; color: var(--hl-muted); }

.bl-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 56px; }
.bl-pager a, .bl-pager span { display: grid; min-width: 42px; height: 42px; place-items: center; border: 1px solid var(--hl-line); border-radius: 12px; padding: 0 12px; background: var(--hl-surface); color: var(--hl-text); font-size: .9rem; font-weight: 600; }
.bl-pager a:hover { border-color: var(--hl-line-strong); color: var(--hl-ink); }
.bl-pager [aria-current] { border-color: var(--hl-ink); background: var(--hl-ink); color: #fff; }
.bl-pager .icon-svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- Article ---------- */
.bp-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 1100; height: 3px; background: var(--hl-gradient); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none; }
.bp-article { padding-top: 36px; }
.bp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--hl-muted); font-size: .86rem; }
.bp-crumbs a:hover { color: var(--hl-ink); }
.bp-crumbs span[aria-hidden] { opacity: .5; }
/* v1087: the article uses the site header's container (1440px, 32px gutters), so logo, title, cover and text share the same edges.
   Hero: text on the left, cover on the right. Body: summary | text | side rail. */
.bp-article { --bp-wrap: min(1376px, 100% - 64px); --bp-side: 232px; --bp-gap: clamp(40px, 3.6vw, 56px); --bp-measure: 760px; }
.bp-hero, .bp-layout { width: var(--bp-wrap); margin-inline: auto; }
.bp-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.bp-article.has-cover .bp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--bp-gap); align-items: center; }
.bp-header { min-width: 0; text-align: left; }
.bp-header h1 { max-width: 920px; }
.bp-subtitle, .bp-header .bp-byline { max-width: var(--bp-measure); }
.bp-header .bl-cat { margin-top: 28px; }
.bp-header h1 { margin: 14px 0 0; color: var(--hl-ink); font: 800 clamp(2rem, 1.3rem + 2.4vw, 3.1rem)/1.1 var(--hl-font-head); letter-spacing: -.035em; text-wrap: balance; }
.bp-article.has-cover .bp-header h1 { font-size: clamp(2rem, 1.2rem + 2vw, 2.9rem); }
.bp-subtitle { margin: 16px 0 0; color: var(--hl-muted); font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.55; text-wrap: pretty; }
.bp-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--hl-line); }
.bp-avatar { display: grid; width: 40px; height: 40px; flex: none; place-items: center; border-radius: 50%; background: var(--hl-gradient); color: #fff; font: 700 .9rem var(--hl-font-head); }
.bp-byline strong { display: block; color: var(--hl-ink); font-size: .92rem; }
.bp-byline .bl-meta { font-size: .82rem; }
.bp-share-mini { display: flex; gap: 6px; margin-left: auto; }
.bp-share-mini a, .bp-share-mini button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--hl-line); border-radius: 50%; background: var(--hl-surface); color: var(--hl-text); cursor: pointer; transition: border-color .2s, color .2s; }
.bp-share-mini a:hover, .bp-share-mini button:hover { border-color: var(--hl-line-strong); color: var(--hl-accent); }
.bp-share-mini .icon-svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Cover follows the title block: same top, same height band, right edge on the header's right edge. */
.bp-cover { min-width: 0; margin: 0; }
.bp-cover img { display: block; width: 100%; aspect-ratio: 16 / 11; max-height: 560px; border-radius: 22px; object-fit: cover; background: var(--hl-soft); box-shadow: 0 1px 2px rgba(15, 18, 34, .05), 0 24px 48px -28px rgba(15, 18, 34, .35); }
.bp-cover figcaption, .bp-prose figcaption { margin-top: 10px; color: var(--hl-muted); font-size: .84rem; line-height: 1.5; text-align: center; }
.bp-cover figcaption { text-align: left; }
.bp-video { margin: 0 0 2.2em; }
.bp-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: #0f1222; }
.bp-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.bp-layout { display: grid; grid-template-columns: var(--bp-side) minmax(0, var(--bp-measure)) var(--bp-side); justify-content: space-between; gap: var(--bp-gap); align-items: start; margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--hl-line); }
.bp-article.is-solo .bp-layout { grid-template-columns: minmax(0, var(--bp-measure)) var(--bp-side); }
.bp-toc { width: 100%; align-self: stretch; }
.bp-body { min-width: 0; }
.bp-body > * { max-width: var(--bp-measure); }
.bp-article.is-solo .bp-body > * { margin-inline: auto; }
/* Summary card: separated from the text, scrolls on its own when the article is long. */
.bp-toc-inner { position: sticky; top: calc(var(--site-header-height, 88px) + 24px); max-height: calc(100vh - var(--site-header-height, 88px) - 48px); overflow: auto; padding: 18px 16px 14px; border: 1px solid var(--hl-line); border-radius: 18px; background: var(--hl-surface); box-shadow: 0 1px 2px rgba(15, 18, 34, .04), 0 14px 36px -12px rgba(15, 18, 34, .14); scrollbar-width: thin; }
.bp-toc strong { display: block; margin-bottom: 12px; padding-left: 2px; color: var(--hl-ink); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.bp-toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--hl-line); }
.bp-toc li a { display: block; margin-left: -1px; border-left: 2px solid transparent; padding: 6px 0 6px 14px; color: var(--hl-muted); font-size: .86rem; line-height: 1.4; opacity: .5; transition: color .2s, border-color .2s, opacity .2s; }
/* Until the reader reaches the first section nothing is faded. */
.bp-toc ol:not(:has(.is-active)) a { opacity: .85; }
.bp-toc li.is-sub a { padding-left: 26px; font-size: .82rem; }
.bp-toc li a:hover { color: var(--hl-ink); opacity: 1; }
.bp-toc li a.is-active { border-left-color: var(--hl-accent); color: var(--hl-ink); font-weight: 600; opacity: 1; }

/* Side rail: contact card, share and back to top, sticky like the summary. */
.bp-rail { align-self: stretch; min-width: 0; }
.bp-rail-inner { position: sticky; top: calc(var(--site-header-height, 88px) + 24px); display: grid; gap: 14px; }
.bp-rail-card { display: grid; gap: 8px; border-radius: 18px; padding: 20px 18px; background: var(--hl-ink); color: rgba(255, 255, 255, .74); font-size: .88rem; line-height: 1.5; box-shadow: 0 18px 40px -22px rgba(15, 18, 34, .55); }
.bp-rail-card p { margin: 0; }
.bp-rail-kicker { color: rgba(255, 255, 255, .55); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.bp-rail-card strong { color: #fff; font: 700 1.08rem/1.3 var(--hl-font-head); letter-spacing: -.01em; }
.bp-rail-card .sl-btn { justify-self: start; margin-top: 6px; min-height: 40px; padding: 8px 14px; background: #fff; color: var(--hl-ink); font-size: .86rem; }
.bp-rail-card .sl-btn:hover { background: var(--hl-accent-soft); }
.bp-rail-card .icon-svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.bp-rail-share { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--hl-line); border-radius: 16px; padding: 10px 10px 10px 16px; background: var(--hl-surface); color: var(--hl-muted); font-size: .8rem; font-weight: 600; }
.bp-rail-share .bp-share-mini { margin: 0; }
.bp-rail-share .bp-share-mini a, .bp-rail-share .bp-share-mini button { width: 34px; height: 34px; }
.bp-rail-top { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 4px 2px; color: var(--hl-muted); font-size: .82rem; font-weight: 600; }
.bp-rail-top:hover { color: var(--hl-ink); }
.bp-rail-top .icon-svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transform: rotate(-90deg); }
/* With the rail on screen the share buttons live there, not in the byline. */
@media (min-width: 1241px) { .bp-article:not(.no-rail) .bp-byline .bp-share-mini { display: none; } }

/* Reading typography */
.bp-prose { color: #262b3b; font: 400 1.18rem/1.78 var(--sl-read); font-optical-sizing: auto; overflow-wrap: break-word; }
.bp-prose > * { margin: 0; }
.bp-prose > * + * { margin-top: var(--bp-pgap, 1.15em); }
.bp-prose .bp-lead { color: var(--hl-ink); font-size: 1.36rem; line-height: 1.6; }
.bp-prose.has-dropcap > p:first-child:not(.bp-lead)::first-letter { float: left; margin: .08em .1em 0 0; color: var(--hl-ink); font: 700 3.4em/.8 var(--hl-font-head); }
.bp-prose h2 { margin-top: 1.9em; color: var(--hl-ink); font: 800 1.65rem/1.25 var(--hl-font-head); letter-spacing: -.02em; scroll-margin-top: calc(var(--site-header-height, 88px) + 20px); }
.bp-prose h3 { margin-top: 1.6em; color: var(--hl-ink); font: 700 1.28rem/1.35 var(--hl-font-head); scroll-margin-top: calc(var(--site-header-height, 88px) + 20px); }
.bp-prose h4 { margin-top: 1.4em; color: var(--hl-ink); font: 700 1.05rem/1.4 var(--hl-font-head); }
.bp-prose h2 + *, .bp-prose h3 + * { margin-top: .5em; }
.bp-prose a { color: var(--hl-accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bp-prose a:hover { text-decoration-thickness: 2px; }
.bp-prose strong, .bp-prose b { color: var(--hl-ink); font-weight: 600; }
.bp-prose mark { padding: 0 .15em; border-radius: 4px; background: #fff1b8; }
.bp-prose ul, .bp-prose ol { padding-left: 1.3em; }
.bp-prose li + li { margin-top: .4em; }
.bp-prose li::marker { color: var(--hl-accent); }
.bp-prose blockquote { margin-inline: 0; padding: .2em 0 .2em 1.1em; border-left: 3px solid var(--hl-accent); color: var(--hl-ink); font-size: 1.22em; font-weight: 500; line-height: 1.55; }
.bp-prose .bp-callout { padding: 20px 22px; border: 1px solid #e2dcff; border-radius: 16px; background: #f6f4ff; color: var(--hl-text); font: 400 1rem/1.65 var(--hl-font-body); }
.bp-prose .bp-callout > * + * { margin-top: .6em; }
.bp-prose hr { width: 72px; margin: 2.4em auto; border: 0; border-top: 2px solid var(--hl-line-strong); }
.bp-prose figure { margin-block: 1.8em; }
.bp-prose img { display: block; width: 100%; height: auto; border-radius: 14px; cursor: zoom-in; }
.bp-prose .bp-embed { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #0f1222; }
.bp-prose .bp-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bp-prose code { border-radius: 6px; padding: .1em .35em; background: var(--hl-soft); font-size: .85em; }
.bp-prose pre { overflow-x: auto; border-radius: 14px; padding: 18px; background: #0f1222; color: #e7e9f3; font-size: .9rem; }
.bp-prose pre code { padding: 0; background: none; }
.bp-prose table { width: 100%; border-collapse: collapse; font: .95rem/1.5 var(--hl-font-body); }
.bp-prose th, .bp-prose td { border-bottom: 1px solid var(--hl-line); padding: 10px 8px; text-align: left; }

/* v1087: reading style chosen per post in the editor (body font, size, heading font). */
/* v1088: modern sans-serif only (Inter by default), no Times-like serif. */
.bp-article { --bp-fs: 1.1rem; }
.bp-size-sm { --bp-fs: 1rem; }
.bp-size-lg { --bp-fs: 1.22rem; }
.bp-article .bp-prose { color: #2a3040; font-family: var(--bp-font-body, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif); font-size: var(--bp-fs); line-height: var(--bp-lh, 1.75); }
/* v1089: body and heading fonts come from the post's Google Fonts choice (style vars on .bp-article). */
.bp-article .bp-header h1, .bp-article .bp-prose :is(h2, h3, h4), .bp-article .bp-prose .bp-quote--pull, .bp-article .bp-prose .bp-quote--accent { font-family: var(--bp-font-heads, var(--hl-font-head)); }

/* v1087: text styles and blocks from the editor. */
.bp-prose .bp-small { color: var(--hl-muted); font-size: .86em; line-height: 1.65; }
.bp-prose .bp-center { text-align: center; }
.bp-prose .bp-kicker { color: var(--hl-accent-ink); font: 700 .78rem/1.4 var(--hl-font-body); letter-spacing: .1em; text-transform: uppercase; }
.bp-prose .bp-kicker + h2, .bp-prose .bp-kicker + h3 { margin-top: .35em; }
.bp-prose blockquote cite { display: block; margin-top: .7em; color: var(--hl-muted); font: 600 .82rem/1.4 var(--hl-font-body); font-style: normal; letter-spacing: .01em; }
.bp-prose blockquote cite::before { content: '— '; }
.bp-prose blockquote > * + * { margin-top: .5em; }
.bp-prose blockquote.bp-quote--pull { margin-block: 2em; border: 0; border-block: 1px solid var(--hl-line); padding: 1.3em 0 1.2em; color: var(--hl-ink); font: 600 clamp(1.35rem, 1.1rem + .9vw, 1.75rem)/1.4 var(--hl-font-head); letter-spacing: -.015em; text-align: center; text-wrap: balance; }
.bp-prose blockquote.bp-quote--pull::before { content: '“'; display: block; height: .55em; color: var(--hl-accent); font: 800 2.6em/1 var(--hl-font-head); }
.bp-prose blockquote.bp-quote--card { border: 1px solid var(--hl-line); border-radius: 18px; padding: 24px 26px 22px; background: var(--hl-surface); box-shadow: 0 1px 2px rgba(15, 18, 34, .04), 0 16px 36px -20px rgba(15, 18, 34, .22); color: var(--hl-ink); font: 400 1.12rem/1.65 var(--hl-font-body); font-style: normal; }
.bp-prose blockquote.bp-quote--card::before { content: '“'; display: block; height: .5em; margin-bottom: .2em; color: var(--hl-accent); font: 800 2.6rem/1 var(--hl-font-head); }
.bp-prose blockquote.bp-quote--accent { border: 0; border-radius: 16px; padding: 20px 24px; background: linear-gradient(135deg, var(--hl-accent-soft), #f2fbfd); color: var(--hl-ink); font: 600 1.15rem/1.55 var(--hl-font-head); font-style: normal; letter-spacing: -.01em; }
.bp-prose .bp-callout--info { border-color: #cfe3ff; background: #f1f7ff; }
.bp-prose .bp-callout--warn { border-color: #fde3a7; background: #fff8e6; }
.bp-prose .bp-callout--ok { border-color: #c5ecd5; background: #effaf3; }
.bp-prose .bp-callout { position: relative; padding-left: 52px; }
.bp-prose .bp-callout::before { content: '💡'; position: absolute; left: 18px; top: 18px; font-size: 1.1rem; line-height: 1.5; }
.bp-prose .bp-callout--info::before { content: 'ℹ️'; }
.bp-prose .bp-callout--warn::before { content: '⚠️'; }
.bp-prose .bp-callout--ok::before { content: '✅'; }
.bp-prose ul.bp-checklist { padding-left: 0; list-style: none; }
.bp-prose ul.bp-checklist li { position: relative; padding-left: 1.9em; }
.bp-prose ul.bp-checklist li::before { content: ''; position: absolute; left: 0; top: .32em; width: 1.15em; height: 1.15em; border-radius: 50%; background: var(--hl-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 64% no-repeat; }
.bp-prose ol.bp-steps { padding-left: 0; list-style: none; counter-reset: bp-step; }
.bp-prose ol.bp-steps li { position: relative; min-height: 2em; padding-left: 2.8em; counter-increment: bp-step; }
.bp-prose ol.bp-steps li + li { margin-top: .9em; }
.bp-prose ol.bp-steps li::before { content: counter(bp-step); position: absolute; left: 0; top: 0; display: grid; width: 1.9em; height: 1.9em; place-items: center; border-radius: 50%; background: var(--hl-ink); color: #fff; font: 700 .85rem/1 var(--hl-font-head); }
.bp-prose .bp-button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.bp-prose .bp-button-row.bp-center { justify-content: center; }
.bp-prose a.bp-button { display: inline-flex; align-items: center; min-height: 46px; border-radius: 12px; padding: 12px 20px; background: var(--hl-ink); color: #fff; font: 600 .95rem/1.2 var(--hl-font-body); text-decoration: none; transition: background .2s, transform .2s; }
.bp-prose a.bp-button:hover { background: var(--hl-accent); transform: translateY(-1px); }
.bp-prose hr.bp-hr--dots { width: auto; border: 0; text-align: center; }
.bp-prose hr.bp-hr--dots::after { content: '•  •  •'; color: var(--hl-muted); font-size: 1.1rem; letter-spacing: .3em; }

.bp-gallery { margin-top: 48px; }
.bp-gallery h2 { margin: 0 0 16px; color: var(--hl-ink); font: 700 1.1rem var(--hl-font-head); }
.bp-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.bp-gallery-grid button { position: relative; display: block; overflow: hidden; border: 0; border-radius: 12px; padding: 0; background: var(--hl-soft); cursor: zoom-in; aspect-ratio: 4 / 3; }
.bp-gallery-grid button:first-child:nth-last-child(n+3) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.bp-gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.bp-gallery-grid button:hover img { transform: scale(1.04); }

.bp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.bp-tags a { border-radius: 999px; padding: 6px 12px; background: var(--hl-soft); color: var(--hl-text); font-size: .84rem; font-weight: 500; }
.bp-tags a:hover { background: var(--hl-accent-soft); color: var(--hl-accent-ink); }
.bp-end { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--hl-line); }
.bp-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 36px; border-radius: 20px; padding: 26px 28px; background: var(--hl-ink); color: rgba(255, 255, 255, .78); }
.bp-cta strong { display: block; color: #fff; font: 700 1.2rem/1.3 var(--hl-font-head); }
.bp-cta .sl-btn { background: #fff; color: var(--hl-ink); }
.bp-cta .sl-btn:hover { background: var(--hl-accent-soft); }

.bp-related { margin-top: 80px; padding: 56px 0 8px; border-top: 1px solid var(--hl-line); }
.bp-related h2 { margin: 0 0 28px; color: var(--hl-ink); font: 800 1.5rem var(--hl-font-head); letter-spacing: -.02em; }
.bp-related .bl-grid { padding-top: 0; }
.bp-preview { position: sticky; top: var(--site-header-height, 88px); z-index: 50; padding: 10px 16px; background: #fff7e0; color: #7a5200; font-size: .88rem; font-weight: 600; text-align: center; }

/* Lightbox */
.bp-lightbox { position: fixed; inset: 0; z-index: 2000; display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; padding: 24px 12px; background: rgba(8, 9, 20, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bp-lightbox[hidden] { display: none; }
.bp-lightbox figure { grid-column: 2; display: grid; justify-items: center; gap: 12px; margin: 0; }
.bp-lightbox img { max-width: 100%; max-height: calc(100vh - 120px); border-radius: 10px; object-fit: contain; }
.bp-lightbox figcaption { color: rgba(255, 255, 255, .78); font-size: .9rem; text-align: center; }
.bp-lightbox button { display: grid; width: 46px; height: 46px; place-items: center; justify-self: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.bp-lightbox button:hover { background: rgba(255, 255, 255, .22); }
.bp-lightbox .icon-svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.bp-lightbox [data-lb-close] { position: absolute; top: 16px; right: 16px; }

@media (max-width: 1240px) {
    .bp-layout, .bp-article.is-solo .bp-layout { grid-template-columns: var(--bp-side) minmax(0, 1fr); justify-content: stretch; }
    .bp-article.is-solo .bp-layout { grid-template-columns: minmax(0, 1fr); }
    .bp-rail { display: none; }
}
@media (max-width: 1180px) {
    .bp-article { --bp-wrap: calc(100% - 40px); }
}
@media (max-width: 1000px) {
    .bp-article.has-cover .bp-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .bp-hero, .bp-layout { width: min(var(--bp-measure), 100% - 40px); }
    .bp-layout, .bp-article.is-solo .bp-layout { grid-template-columns: minmax(0, 1fr); margin-top: 40px; padding-top: 0; border-top: 0; }
    .bp-toc { display: none; }
}
@media (max-width: 900px) {
    .bl-featured { grid-template-columns: 1fr; gap: 22px; padding-top: 24px; }
    .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
}
@media (max-width: 640px) {
    .bl-grid { grid-template-columns: 1fr; gap: 32px; }
    .bl-search { width: 100%; }
    .bp-hero, .bp-layout { width: calc(100% - 32px); }
    .bp-layout { margin-top: 32px; }
    .bp-cover img { border-radius: 16px; aspect-ratio: 16 / 10; }
    .bp-prose { font-size: 1.1rem; line-height: 1.72; }
    .bp-prose .bp-lead { font-size: 1.22rem; }
    .bp-prose blockquote { font-size: 1.22rem; }
    .bp-share-mini { margin-left: 0; width: 100%; }
    .bp-gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .bp-cta { padding: 22px; }
    .bp-lightbox { grid-template-columns: 44px minmax(0, 1fr) 44px; padding: 16px 4px; }
}

/* v1087: boxes reset their inner paragraphs; share bar, CTA and "Continue lendo" sit on the same edges as the article. */
.bp-prose .bp-callout > * { margin: 0; }
.bp-prose .bp-callout > * + * { margin-top: .6em; }
.bp-prose blockquote > p { margin: 0; }
.bp-end .vs-share { width: 100%; max-width: none; margin: 0; }
.blog-post-page .bp-related { width: min(1376px, 100% - 64px); }
@media (max-width: 1180px) { .blog-post-page .bp-related { width: calc(100% - 40px); } }
@media (max-width: 640px) { .blog-post-page .bp-related { width: calc(100% - 32px); } }
@media (min-width: 1241px) { .bp-article:not(.no-rail) .bp-end .bp-cta { display: none; } }

/* v1088: inline styles chosen on selected text in the editor. */
.bp-prose .bp-t-sm { font-size: .85em; }
.bp-prose .bp-t-lg { font-size: 1.2em; }
.bp-prose .bp-t-xl { font-size: 1.45em; line-height: 1.35; }
.bp-prose .bp-f-head { font-family: var(--hl-font-head); font-weight: 700; letter-spacing: -.01em; }
.bp-prose .bp-f-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em; }
.bp-prose .bp-c-accent { color: var(--hl-accent); }
.bp-prose .bp-c-ink { color: var(--hl-ink); }
.bp-prose .bp-c-muted { color: var(--hl-muted); }
.bp-prose .bp-c-green { color: #0f8a4b; }
.bp-prose .bp-c-orange { color: #c2580c; }
.bp-prose .bp-c-red { color: #c62828; }

/* ================= v1090: layout options chosen per post ================= */
/* Without the side rail the summary and the text are centred as a pair. */
.bp-article.no-rail .bp-layout { grid-template-columns: var(--bp-side) minmax(0, var(--bp-measure)); justify-content: center; }
.bp-article.no-rail.is-solo .bp-layout { grid-template-columns: minmax(0, var(--bp-measure)); }

/* Hero templates */
.bp-hero--split-reverse { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) !important; }
.bp-hero--split-reverse .bp-cover { order: -1; }
.bp-hero--stacked, .bp-hero--centered { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
.bp-hero--stacked .bp-header h1, .bp-hero--centered .bp-header h1 { max-width: 1000px; font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.6rem) !important; }
.bp-hero--centered .bp-header { display: grid; justify-items: center; text-align: center; }
.bp-hero--centered .bp-subtitle { margin-inline: auto; }
.bp-hero--centered .bp-byline { justify-content: center; width: min(100%, var(--bp-measure)); }
.bp-hero--centered .bp-byline .bp-share-mini { margin-left: 0; }
.bp-hero--overlay { position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; min-height: clamp(420px, 62vh, 640px); overflow: hidden; border-radius: 24px; isolation: isolate; }
.bp-hero--overlay > * { grid-area: 1 / 1; }
.bp-hero--overlay .bp-cover img { width: 100%; height: 100%; max-height: none; aspect-ratio: auto !important; border-radius: 0; box-shadow: none; }
.bp-hero--overlay .bp-cover { position: relative; z-index: -1; height: 100%; }
.bp-hero--overlay .bp-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 9, 20, .05) 0%, rgba(8, 9, 20, .35) 45%, rgba(8, 9, 20, .82) 100%); }
.bp-hero--overlay .bp-cover figcaption { position: absolute; right: 16px; top: 12px; z-index: 1; margin: 0; color: rgba(255, 255, 255, .75); font-size: .76rem; }
.bp-hero--overlay .bp-header { align-self: end; padding: clamp(24px, 4vw, 56px); color: #fff; }
.bp-hero--overlay .bp-header h1 { color: #fff; max-width: 980px; }
.bp-hero--overlay :is(.bp-subtitle, .bp-crumbs, .bp-crumbs a, .bl-meta) { color: rgba(255, 255, 255, .82); }
.bp-hero--overlay .bl-cat { color: #fff; }
.bp-hero--overlay .bp-byline { border-top-color: rgba(255, 255, 255, .22); }
.bp-hero--overlay .bp-byline strong { color: #fff; }
.bp-hero--overlay .bp-share-mini :is(a, button) { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: #fff; }
.bp-hero--band { border-radius: 28px; padding: clamp(24px, 4vw, 56px); background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--cat, #5b3df5) 16%, #fff) 0%, color-mix(in srgb, var(--cat, #5b3df5) 6%, #fff) 55%, #f4fbfd 100%); border: 1px solid color-mix(in srgb, var(--cat, #5b3df5) 14%, transparent); }
.bp-hero--band .bp-cover img { box-shadow: 0 30px 60px -30px rgba(15, 18, 34, .45); }

/* Cover proportion */
.bp-hero--stacked .bp-cover img, .bp-hero--centered .bp-cover img { aspect-ratio: 21 / 9; max-height: 620px; }
.bp-ratio-original .bp-cover img { aspect-ratio: auto !important; height: auto; max-height: none; object-fit: contain; }
.bp-ratio-wide .bp-cover img { aspect-ratio: 16 / 9 !important; }
.bp-ratio-classic .bp-cover img { aspect-ratio: 4 / 3 !important; }
.bp-ratio-cinema .bp-cover img { aspect-ratio: 21 / 9 !important; }
.bp-ratio-square .bp-cover img { aspect-ratio: 1 / 1 !important; max-height: 640px; }

/* Rail and end-of-post card themes */
.bp-rail-card--light { border: 1px solid var(--hl-line); background: var(--hl-surface); color: var(--hl-muted); box-shadow: 0 1px 2px rgba(15, 18, 34, .04), 0 14px 36px -12px rgba(15, 18, 34, .14); }
.bp-rail-card--light strong { color: var(--hl-ink); }
.bp-rail-card--light .bp-rail-kicker { color: var(--hl-accent-ink); }
.bp-rail-card--light .sl-btn { background: var(--hl-ink); color: #fff; }
.bp-rail-card--brand { background: linear-gradient(140deg, var(--cat, #5b3df5), color-mix(in srgb, var(--cat, #5b3df5) 55%, #0aa7c9)); color: rgba(255, 255, 255, .86); }
.bp-rail-card--brand .bp-rail-kicker { color: rgba(255, 255, 255, .72); }
.bp-cta--light { border: 1px solid var(--hl-line); background: var(--hl-surface); color: var(--hl-muted); }
.bp-cta--light strong { color: var(--hl-ink); }
.bp-cta--light .sl-btn { background: var(--hl-ink); color: #fff; }
.bp-cta--brand { background: linear-gradient(140deg, var(--cat, #5b3df5), color-mix(in srgb, var(--cat, #5b3df5) 55%, #0aa7c9)); }

/* Share bar at the end of the text */
.bp-sharebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; border: 1px solid var(--hl-line); border-radius: 18px; padding: 14px 16px 14px 20px; background: var(--hl-surface); }
.bp-sharebar strong { color: var(--hl-ink); font: 700 1rem var(--hl-font-head); }
.bp-sharebar .bp-share-mini { margin: 0; flex-wrap: wrap; }
.bp-share-mini :is(a, button)[data-share="whatsapp"]:hover { border-color: #25d366; color: #128c4b; }
.bp-share-mini :is(a, button)[data-share="linkedin"]:hover { border-color: #0a66c2; color: #0a66c2; }
.bp-share-mini :is(a, button)[data-share="facebook"]:hover { border-color: #1877f2; color: #1877f2; }
.bp-share-mini :is(a, button)[data-share="x"]:hover { border-color: #0f1222; color: #0f1222; }
.bp-share-mini :is(a, button)[data-share="telegram"]:hover { border-color: #229ed9; color: #229ed9; }
.bp-share-mini button.is-copied { border-color: #0f8a4b; color: #0f8a4b; }
.bp-share-mini .icon-svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Share dock on tablets and phones (the side rail is hidden there) */
.bp-dock { position: fixed; left: 16px; bottom: 16px; z-index: 900; display: flex; align-items: center; gap: 10px; border: 1px solid var(--hl-line); border-radius: 999px; padding: 6px 6px 6px 14px; background: rgba(255, 255, 255, .94); box-shadow: 0 16px 36px -14px rgba(15, 18, 34, .35); color: var(--hl-muted); font-size: .76rem; font-weight: 700; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: bp-pop .2s ease-out; }
.bp-dock[hidden] { display: none; }
.bp-dock .bp-share-mini { margin: 0; gap: 4px; }
.bp-dock .bp-share-mini :is(a, button) { width: 34px; height: 34px; }
@media (min-width: 1241px) { .bp-article:not(.no-rail) ~ .bp-dock, body:has(.bp-article:not(.no-rail)) .bp-dock { display: none; } }
@media (max-width: 480px) { .bp-dock > span { display: none; } .bp-dock { padding-left: 6px; } }
@keyframes bp-pop { from { opacity: 0; transform: translateY(8px); } }

/* Share a selected sentence */
.bp-quote-share { position: absolute; z-index: 950; display: flex; align-items: center; gap: 2px; border-radius: 12px; padding: 4px; background: #0f1222; box-shadow: 0 14px 32px -12px rgba(15, 18, 34, .55); animation: bp-pop .14s ease-out; }
.bp-quote-share[hidden] { display: none; }
.bp-quote-share button { display: inline-flex; align-items: center; gap: 6px; height: 32px; min-width: 32px; justify-content: center; border: 0; border-radius: 8px; padding: 0 8px; background: transparent; color: rgba(255, 255, 255, .88); font: 600 .78rem var(--hl-font-body); cursor: pointer; }
.bp-quote-share button:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.bp-quote-share .icon-svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.bp-toast { position: fixed; left: 50%; bottom: 24px; z-index: 2100; transform: translateX(-50%); border-radius: 12px; padding: 10px 16px; background: #0f1222; color: #fff; font-size: .88rem; font-weight: 500; box-shadow: 0 14px 30px -12px rgba(15, 18, 34, .5); animation: bp-pop .18s ease-out; }
.bp-toast[hidden] { display: none; }

@media (max-width: 1000px) {
    .bp-hero--split-reverse { grid-template-columns: minmax(0, 1fr) !important; }
    .bp-hero--split-reverse .bp-cover { order: 0; }
    .bp-article.no-rail .bp-layout { grid-template-columns: minmax(0, 1fr); }
    .bp-hero--overlay { min-height: 440px; }
}
@media (max-width: 640px) {
    .bp-hero--overlay { border-radius: 18px; min-height: 480px; }
    .bp-hero--band { border-radius: 20px; padding: 20px; }
}
/* v1090: rail share fits any number of networks */
.bp-rail-share { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; }
.bp-rail-share .bp-share-mini { display: flex; flex-wrap: wrap; gap: 6px; }
/* v1092: index entries from H4 and bold-only paragraphs */
.bp-prose h4[id], .bp-prose [data-toc-section] { scroll-margin-top: calc(var(--site-header-height, 88px) + 20px); }