/* Blog post right-hand sidebar (Claude Design "Blog Post.dc.html", Borong
   Design System). Applied to every /blog/* post via layouts/post.njk.
   Only this sidebar module uses the design — the article body (left column)
   keeps its original prose styling and 16px body size untouched. Scoped
   under .bp2026 so tokens don't leak into the rest of the page. */

.bp2026 {
  --bds-grey-20: #E6E6E6;
  --bds-grey-60: #666666;
  --bds-grey-70: #585858;
  --bds-grey-80: #333333;
  --bds-brand-10: #EDEBF5;
  --bds-brand-40: #6F5FAB;
  --bds-brand-50: #524583;
  --bds-success-50: #12B76A;

  --bds-fg-primary: #524585;
  --bds-fg-secondary: #756a9c;
  --bds-fg-tertiary: #756a9c;
  --bds-border-subtle: var(--bds-grey-20);
  --bds-font-sans: "articulat-cf", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  font-family: var(--bds-font-sans);
  color: var(--bds-fg-primary);
}
.bp2026 a { color: var(--bds-fg-primary); text-decoration: none; }
.bp2026 p { margin: 0; }
.bp2026 *, .bp2026 *::before, .bp2026 *::after { box-sizing: border-box; }

/* ---- 8/4 split around the existing article (left column untouched) ----
   No `align-items: start` here on purpose: the aside grid cell needs to
   stretch to the full row height (the article's height) so the sticky
   element inside it has room to travel and follow the scroll — with
   `start`, the cell would only be as tall as its own content and the
   sticky child would have nowhere to go. */
.bp-post-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 48px; }
.bp-post-grid__main { grid-column: span 8; min-width: 0; order: 1; }
.bp-post-grid__aside { grid-column: span 4; min-width: 0; order: 2; }

/* Scrolls with the reader until the bottom of the aside track. */
.bp-aside__inner { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 28px; }
.bp-side-block { border-top: 1px solid var(--bds-border-subtle); padding-top: 24px; }
.bp-side-block:first-child { border-top: none; padding-top: 0; }
.bp-side-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--bds-grey-60); text-transform: uppercase; margin-bottom: 14px; }

/* ---- Share ---- */
.bp-share-row { display: flex; gap: 10px; }
.bp-share-btn { position: relative; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--bds-border-subtle); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--bds-fg-tertiary); cursor: pointer; font: inherit; padding: 0; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.bp-share-btn:hover { border-color: var(--bds-brand-40); color: var(--bds-brand-50); }
.bp-share-btn i { font-size: 20px; letter-spacing: 0.05em; }

/* Copy-link: a branded purple icon at rest (not the muted grey the share
   icons use) instead of green — green is reserved for the "just copied,
   still hovering" flash below, and fades the instant the pointer leaves. */
.bp-share-btn[data-copy-link] { color: var(--bds-brand-50); }
.bp-share-btn[data-copy-link][data-copied="true"]:hover { background: var(--bds-success-50); border-color: var(--bds-success-50); }
.bp-share-btn[data-copy-link][data-copied="true"]:hover i { color: #fff; }

/* Social icons: Regular fades out, Filled fades in on hover; the button
   fills solid purple with no visible border, so the (now white) Filled
   icon reads clearly against it. */
.bp-share-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity .15s ease; }
.bp-share-icon--fill { opacity: 0; }
.bp-share-btn--social:hover .bp-share-icon--regular { opacity: 0; }
.bp-share-btn--social:hover .bp-share-icon--fill { opacity: 1; }
.bp-share-btn--social:hover { background: var(--bds-brand-50); border-color: var(--bds-brand-50); color: #fff; }

/* ---- On this page (TOC) — governance policy pages ---- */
/* Capped so a long document (e.g. Terms & Conditions' 40+ sections) scrolls
   internally instead of stretching the sidebar past the article; short lists
   (Privacy Notice, most governance policies) never reach this height so
   nothing changes for them. */
.bp-toc-nav { display: flex; flex-direction: column; gap: 2px; max-height: 35rem; overflow-y: auto; }
.bp-toc-nav .bp-toc-link { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; letter-spacing: 0.05em; line-height: 1.4; font-weight: 400; color: var(--bh-text-2); transition: color .15s ease; }
.bp-toc-link__bar { flex: none; width: 3px; height: 16px; border-radius: 999px; background: transparent; transition: background .15s ease; }
.bp-toc-nav .bp-toc-link.is-active { color: var(--bds-brand-50); }
.bp-toc-link.is-active .bp-toc-link__bar { background: var(--bds-brand-50); }

/* ---- Governance quick nav (pills linking to the other policy pages) ---- */
.bp-quicknav-pills { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.bp-quicknav-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--bds-border-subtle);
  background: transparent;
  font-size: 13px; letter-spacing: 0.05em;
  font-weight: 600;
  line-height: 1.2;
  color: var(--bds-fg-primary);
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
a.bp-quicknav-pill:hover {
  color: var(--bds-brand-50);
  border-color: var(--bds-brand-40);
  background: var(--bds-brand-05, rgba(0,0,0,0.03));
}
.bp-quicknav-pill.is-current {
  color: #fff;
  background: var(--bds-brand-50);
  border-color: var(--bds-brand-50);
  cursor: default;
  pointer-events: none;
}

/* ---- Related posts ---- */
.bp-related-list { display: flex; flex-direction: column; gap: 18px; }
/* Thumb size is set from JS (--bp-thumb-size), measured off .bp-related-copy's
   actual rendered height (pill + 2-line title + date) — CSS alone can't
   express "match a sibling's content height while staying square" without
   circular sizing bugs (aspect-ratio + stretch, or grid auto-track percentage
   heights, both fought back). 56px is the pre-JS/no-JS fallback. */
.bp-related-card { display: flex; gap: 12px; align-items: flex-start; transition: transform .15s ease; }
.bp-related-card:hover { transform: translateX(2px); }
.bp-related-thumb { display: block; flex: none; width: var(--bp-thumb-size, 56px); height: var(--bp-thumb-size, 56px); border-radius: 4px; overflow: hidden; background: var(--bds-brand-10); }
.bp-related-thumb picture, .bp-related-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Wordmark/logo art (e.g. newsroom press releases) isn't a croppable photo —
   show it whole, padded, instead of letting object-fit: cover clip it. */
.bp-related-thumb--logo img { object-fit: contain; padding: 10px; }
.bp-related-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bp-related-cat { display: inline-block; width: fit-content; background: var(--bds-brand-10); color: var(--bds-brand-50); padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.bp-related-title { font-weight: 600; font-size: 14px; letter-spacing: 0.05em; line-height: 1.35; color: var(--bh-ink, #2A2444); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bp-related-date { font-size: 12px; letter-spacing: 0.05em; color: var(--bds-fg-secondary); }

/* ---- Responsive: sidebar module moves below the article on narrow viewports ---- */
@media (max-width: 960px) {
  .bp-post-grid { grid-template-columns: 1fr; gap: 40px; }
  .bp-post-grid__main { grid-column: auto; order: 1; }
  .bp-post-grid__aside { grid-column: auto; order: 2; }
  .bp-aside__inner { position: static; }
}