/* ===========================================================
   SINGLE BLOG POST  (/blog-post/)
   White theme, brand-orange accent. Full-width hero (text + cover)
   over a two-column body: sticky LEFT rail (author, TOC card, CTA
   card, share) + prose column on the right. Namespaced .bp-.
   =========================================================== */

/* ---- Reading progress bar ---- */
.bp-progress-track {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  z-index: 200;
  pointer-events: none;
}
.bp-progress {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}

.bp { background: var(--bg); padding: 0 0 110px; }
/* The closing CTA is a full-bleed dark section. Give it breathing room above so
   it doesn't butt against the post body, and pull it flush against the site footer
   below (cancelling the article's 110px bottom padding, which would otherwise show
   as a white gap beneath it — the padding still protects content if the CTA is
   ever absent). */
.bp > .cta:last-child { margin-top: clamp(72px, 8vw, 112px); margin-bottom: -110px; }
.bp .container { max-width: 1200px; }

/* ===================== HERO ===================== */
.bp-hero { padding: 56px 0 64px; }
.bp-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  /* Top-align the breadcrumb + title with the top edge of the featured image
     (rather than vertically centering the shorter text column against it). */
  align-items: start;
}

.bp-crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 26px;
}
.bp-crumb a { color: var(--muted); transition: color 0.18s ease; }
.bp-crumb a:hover { color: var(--ink); }
.bp-crumb svg { width: 14px; height: 14px; color: var(--muted-2); }
.bp-crumb span { color: var(--ink); }

.bp-title {
  font-family: var(--font-sans);
  font-size: clamp(38px, 4.8vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 24px;
  text-wrap: balance;
}
.bp-dek {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 52ch;
}

/* ---- Hero featured cover (branded gradient stand-in) ---- */
.bp-hero-media { min-width: 0; }
.bp-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  padding: clamp(22px, 2.4vw, 32px);
  overflow: hidden;
  background:
    radial-gradient(120% 95% at 82% 12%, rgba(255, 72, 0, 0.18), transparent 55%),
    linear-gradient(150deg, #ffffff 0%, var(--accent-soft) 68%, #ffc3a9 100%);
  box-shadow: var(--shadow-md);
}
/* Real featured image: fill the frame instead of painting at natural size.
   Match the 1200x630 (~1.91:1) upload ratio so the card shows uncropped;
   `cover` gracefully crops any other ratio to fit. */
.bp-cover--image {
  aspect-ratio: 1200 / 630;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bp-cover-tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-strong);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(230, 63, 29, 0.18);
  padding: 6px 12px;
  border-radius: 999px;
}
.bp-cover-bars {
  display: flex;
  align-items: flex-end;
  gap: clamp(10px, 1.4vw, 18px);
  height: clamp(80px, 13vw, 132px);
  margin: 16px 0;
  padding: 0 2px;
}
.bp-cover-bars span {
  flex: 1;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
  box-shadow: 0 8px 18px -8px rgba(230, 63, 29, 0.55);
}
.bp-cover-foot { display: flex; flex-direction: column; gap: 6px; }
.bp-cover-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent-strong);
}
.bp-cover-title {
  font-family: var(--font-sans);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--ink);
}

/* ===================== BODY LAYOUT ===================== */
.bp-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 760px);
  gap: clamp(44px, 6vw, 96px);
  align-items: start;
  padding-top: 52px;
  border-top: 1px solid var(--line);
}

/* ---- Sticky left rail ----
   The sticky element must be the grid ITEM (.bp-aside), not an inner wrapper:
   its containing block is the full-height .bp-layout grid, so it can travel
   the entire length of the article. (A sticky inner only travels within its
   short, content-height parent and scrolls away immediately.) */
.bp-aside {
  position: sticky;
  top: 32px;
  align-self: start;
  min-width: 0;
}
.bp-aside-inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Author */
.bp-author { display: flex; align-items: center; gap: 13px; }
.bp-avatar {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.bp-author-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bp-author-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.bp-author-role { font-size: 13px; color: var(--muted); }
.bp-author-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--muted-2);
  margin-top: 3px;
}
.bp-dot { width: 3px; height: 3px; border-radius: 999px; background: var(--line-2); }

/* Table of contents card */
.bp-toc {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: 20px 22px 22px;
}
.bp-toc-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
}
.bp-toc-list { display: flex; flex-direction: column; }
.bp-toc-list a {
  position: relative;
  display: block;
  padding: 7px 0 7px 20px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
  transition: color 0.18s ease;
}
/* Tree-style connectors: continuous vertical spine + elbow tick */
.bp-toc-list a::before {
  content: "";
  position: absolute;
  left: 3px; top: 0; bottom: 0;
  width: 1px;
  background: var(--line-2);
}
.bp-toc-list a:last-child::before { bottom: 50%; }
.bp-toc-list a::after {
  content: "";
  position: absolute;
  left: 3px; top: 50%;
  width: 9px; height: 1px;
  background: var(--line-2);
  border-bottom-left-radius: 3px;
}
.bp-toc-list a:hover { color: var(--ink); }
.bp-toc-list a.is-active {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bp-toc-list a.is-active::before,
.bp-toc-list a.is-active::after { background: var(--accent); }

/* Side CTA card */
.bp-side-cta {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px;
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(255, 72, 0, 0.16), transparent 62%),
    linear-gradient(158deg, #ffffff 0%, var(--accent-soft) 100%);
}
.bp-side-cta-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
}
.bp-side-cta-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 16px;
}
.bp-side-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-strong);
  transition: gap 0.2s var(--ease-out);
}
.bp-side-cta-link svg { width: 15px; height: 15px; }
.bp-side-cta-link:hover { gap: 11px; }

/* Share */
.bp-share { display: flex; flex-direction: column; gap: 12px; }
.bp-share-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.bp-share-btns { display: flex; gap: 16px; }
.bp-share-btn {
  position: relative;
  width: 22px; height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color 0.18s ease, transform 0.18s var(--ease-out);
}
.bp-share-btn:hover { color: var(--accent); transform: translateY(-2px); }
.bp-share-btn svg { width: 20px; height: 20px; }
.bp-share-copied {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s var(--ease-out);
}
.bp-share-btn.is-copied .bp-share-copied {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===================== PROSE ===================== */
.bp-prose {
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink-2);
}
.bp-prose p { margin: 0 0 26px; }
.bp-prose h2 {
  font-family: var(--font-sans);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--ink);
  margin: 48px 0 18px;
  scroll-margin-top: 110px;
}
.bp-prose strong { font-weight: 600; color: var(--ink); }
.bp-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.bp-prose a:hover { color: var(--accent-strong); }

/* Plain lists — default markers, body colour. */
.bp-prose ul,
.bp-prose ol { margin: 0 0 26px; padding-left: 24px; }
.bp-prose li { margin-bottom: 8px; line-height: 1.7; }

/* Sensible default for any blockquote added later in the editor. */
.bp-prose blockquote {
  margin: 0 0 26px;
  padding-left: 20px;
  border-left: 3px solid var(--line-2);
  color: var(--ink-2);
}
.bp-prose blockquote p { margin: 0; }

/* ===================== FOOTER: bio + CTA ===================== */
.bp-footer { margin-top: 72px; }
.bp-bio {
  display: flex;
  gap: 18px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.bp-avatar--lg { width: 56px; height: 56px; border-radius: 15px; font-size: 17px; }
.bp-bio-text { display: flex; flex-direction: column; gap: 2px; }
.bp-bio-name { font-size: 16px; font-weight: 600; color: var(--ink); }
.bp-bio-role {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 8px;
}
.bp-bio-text p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 64ch;
}

/* Brand-orange closing CTA (white theme — accent block, not dark) */
.bp-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  background: var(--accent);
  border-radius: var(--r-lg);
  padding: 38px 44px;
  margin-top: 56px;
}
.bp-cta-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.bp-cta-title {
  font-family: var(--font-sans);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #ffffff;
  margin: 10px 0 0;
}

/* ===================== RELATED POSTS ===================== */
.bp-related { margin-top: 56px; }
.bp-related-head { margin-bottom: 24px; }
.bp-related-title {
  font-family: var(--font-sans);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.bp-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.bp-related-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  transition: border-color 0.2s ease, transform 0.2s var(--ease-out), box-shadow 0.2s ease;
}
.bp-related-card:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.bp-related-cat {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.bp-related-h {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.bp-related-meta {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted-2);
}
.bp-related-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-strong);
}
.bp-related-link svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease-out); }
.bp-related-card:hover .bp-related-link svg { transform: translateX(3px); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 960px) {
  .bp-hero { padding: 36px 0 44px; }
  .bp-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .bp-layout {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 36px;
  }
  .bp-aside { order: -1; position: static; }
  .bp-aside-inner { gap: 24px; }
  .bp-prose { max-width: none; }
}
@media (max-width: 860px) {
  .bp-related-grid { grid-template-columns: 1fr; }
  .bp-related-meta { margin-top: 4px; }
}
@media (max-width: 600px) {
  .bp { padding-bottom: 80px; }
  .bp > .cta:last-child { margin-bottom: -80px; }
  .bp-prose { font-size: 17px; }
  .bp-cta { padding: 28px 24px; }
}