/* ============================================================
   C&R — Blog post template
   Layout grammar: shared sub-page navy banner + editorial article
   stack (featured image floats into the banner, then a two-column
   article + sticky aside, in-article CTA, related-articles row).

   Builds on core.css, home.css (nav, footer), brochure.css (.br-banner
   family, ease tokens), insights.css (.ins-card family for related row).
   ============================================================ */


/* ============================================================
   BANNER OVERRIDES — editorial header, text left + image right
   ============================================================ */
.bp-banner {
  /* Cinematic banner: solid navy fills the full banner; on desktop the
     image is constrained to the right half so the title sits cleanly on
     solid navy on the left and the image renders at a smaller absolute
     size (less zoomed, sharper). Mobile restores full-bleed image inside
     the ≤900px media query.
     Padding values match the Insights-Updates / Brochure pattern exactly
     so any page with a content card overlapping into the hero uses one
     shared standard (clamp(56,7vw,96) top + clamp(96,11vw,160) bottom). */
  position: relative;
  padding: clamp(56px, 7vw, 96px) 0 clamp(96px, 11vw, 160px);
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-deep);
}
/* Override the inherited .br-banner::before radial gradients — blog
   post HTML composes both classes ("br-banner bp-banner") and the
   brochure stylesheet's ::before applies subtle green corner tints
   that read as an unwanted effect on the title-card navy here. */
.bp-banner::before {
  background: none;
}
/* Title-card overlay — covers the left portion of the banner with a
   navy "card" whose RIGHT corners are rounded (16px, matching the
   .bp-body / .bp-inline-cta / .bp-aside content-card radius). Image
   sits underneath (via .bp-banner-bg at inset 0 0 0 56%), so the
   16px arcs at the navy card's top-right and bottom-right corners
   reveal small image arcs — the visible curve "comes from" the
   title card.
   Subtle dark drop-shadow on the right side gives the navy card a
   soft sense of elevation above the image — no coloured edge. Mobile
   override in ≤900px media query disables this overlay. */
.bp-banner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 57.5%;
  background: var(--navy-deep);
  z-index: 0;
  pointer-events: none;
  box-shadow: 6px 0 28px rgba(0, 0, 0, 0.32);
}
.bp-banner .container {
  position: relative;
  z-index: 1;
}

/* Image backdrop — desktop default is the image at inset 0 0 0 57%
   (image left edge at vp 820.8 on a 1440 screen), tucked ~7px under
   the navy title-card overlay's right edge (which sits at vp 828).
   The small overlap gives the navy card's right-side drop-shadow a
   surface to cast onto, so the elevation reads cleanly. Image
   renders at 619px wide from a 1600px source (0.39× downscale,
   sharp). Mobile override in ≤900px media query restores full-bleed
   inset for narrow viewports. */
.bp-banner-bg {
  position: absolute;
  inset: 0 0 0 57%;
  z-index: 0;
  overflow: hidden;
}
.bp-banner-bg img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Bottom-edge vignette — subtle cinematic depth at the foot of the
   image. No horizontal navy gradient on desktop: the hard diagonal
   clip-path on .bp-banner-bg defines the image's left boundary
   instead, so a soft horizontal fade is unnecessary (and would
   re-introduce the visible mid-image inflection we're moving away
   from). Mobile media query restores the horizontal fade since the
   diagonal clip is removed there. */
.bp-banner-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(14, 9, 48, 0) 55%,
    rgba(14, 9, 48, 0.35) 100%
  );
}

/* Text column — single column on the left, on top of the overlay */
.bp-banner-text {
  max-width: 720px;
  min-width: 0;
  position: relative;
}



/* Breadcrumb — back-link only, arrow + label */
.bp-crumb {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 12.5px;
  letter-spacing: .04em;
  margin: 0 0 22px;
}
.bp-crumb a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
.bp-crumb a:hover { color: #7fe089; }
.bp-crumb a svg {
  width: 12px;
  height: 12px;
  transition: transform var(--dur) var(--ease-out);
}
.bp-crumb a:hover svg { transform: translateX(-3px); }

/* Title — cinematic editorial scale; dominates the banner */
.bp-banner-title {
  font-size: clamp(38px, 5.2vw, 72px);
  line-height: 1.04;
  letter-spacing: -.028em;
  margin: 0;
  max-width: 16ch;
}

/* Meta strip: date · author · read time */
.bp-meta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: 13.5px;
  color: rgba(255, 255, 255, .72);
}
.bp-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bp-meta-item svg {
  width: 14px;
  height: 14px;
  color: var(--green);
}
.bp-meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
}


/* ============================================================
   ARTICLE BODY — two columns (body + sticky aside)
   Cards lift up into the banner (matches brochure-page deck depth).
   Section bg stays white; depth comes from card shadows + the lift.
   ============================================================ */
.bp-article {
  background: var(--white);
  padding: 0 0 clamp(64px, 8vw, 112px);
}
.bp-article-grid {
  /* Shared row height for the bottom CTA card + Share block on the right —
     guarantees they render at exactly the same pixel height regardless of
     content drift. Set as a CSS variable so a single value drives both. */
  --bottom-row-h: 203px;
  /* Fills the page container — matches .br-deck-inner (brochure) and
     .ins-board (insights & updates) so all three content-card-into-hero
     pages occupy the same horizontal extent at every viewport. */
  /* Lift up into the banner — matches the .ins-board / .br-deck-inner
     lift exactly (desktop -120px, 900 -64px, 640 -48px). Standardised
     across all content-card-into-hero pages. */
  margin: -120px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  /* Two explicit rows: body (auto) + CTA (auto). Aside spans both so
     its sticky settle-position lands at the CTA row's bottom, visually
     pairing Share with the CTA at the foot of the article. */
  grid-template-rows: auto auto;
  row-gap: 24px;
  column-gap: clamp(40px, 4vw, 56px);
  position: relative;
  z-index: 1;
}
.bp-body { grid-column: 1; grid-row: 1; }
.bp-aside { grid-column: 2; grid-row: 1 / span 2; }

/* LEFT — article body, now a lifted white card */
.bp-body {
  max-width: 1000px;           /* widened to absorb the extra grid width
                                  freed by .bp-article-grid filling the
                                  page container — matches brochure +
                                  insights & updates content-extent parity */
  margin: 0;                   /* left-align to container edge so body card
                                  starts at the same left as the banner
                                  title above it — matches brochure's
                                  left column anchoring (.br-deck-col-left) */
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: clamp(28px, 3vw, 44px) clamp(28px, 3.5vw, 48px);
  box-shadow:
    0 28px 56px -28px rgba(14, 9, 48, .22),
    0 6px 14px -8px rgba(14, 9, 48, .08);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: #1F1A3E;
}

/* Lede — slightly larger, more editorial */
.bp-lede {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: clamp(19px, 1.55vw, 22px);
  line-height: 1.55;
  color: var(--navy);
  margin: 0 0 28px;
}

/* Pull-quote — the article's central question, given visual weight */
.bp-quote {
  margin: 32px 0 32px;
  padding: 0 0 0 28px;
  border-left: 3px solid var(--green);
  position: relative;
}
.bp-quote::before {
  content: '"';
  position: absolute;
  left: 16px;
  top: -18px;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 80px;
  line-height: 1;
  color: var(--green);
  opacity: .18;
  pointer-events: none;
}
.bp-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-style: italic;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.35;
  letter-spacing: -.012em;
  color: var(--navy);
}

/* Body H2 — section openers */
.bp-body h2 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--navy);
  margin: 48px 0 16px;
  scroll-margin-top: 140px;   /* matches sticky-nav clearance used by aside */
}
.bp-body h2 .is-green { color: var(--green); }

/* Body H3 (used inside sections if needed in future) */
.bp-body h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 32px 0 12px;
}

/* Body paragraphs */
.bp-body p {
  margin: 0 0 18px;
}

/* Body lists — custom green-dot bullets, comfortable spacing */
.bp-body ul,
.bp-body ol {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.bp-body ul li,
.bp-body ol li {
  position: relative;
  padding: 0 0 0 28px;
  margin: 0 0 10px;
  line-height: 1.65;
}
.bp-body ul li::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 13px;
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 2px;
  transform: rotate(45deg);
}
.bp-body ol {
  counter-reset: bp-ol;
}
.bp-body ol li {
  counter-increment: bp-ol;
}
.bp-body ol li::before {
  content: counter(bp-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  color: var(--green);
}

/* Inline links */
.bp-body a:not(.btn) {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  transition: color var(--dur) var(--ease-out);
}
.bp-body a:not(.btn):hover {
  color: var(--green);
}

/* Inline strong */
.bp-body strong {
  font-weight: var(--w-semibold);
  color: var(--navy);
}


/* ============================================================
   BOTTOM-ROW CTA — own grid item (row 2, column 1).
   Pairs visually with the Share block on the right at scroll-bottom.
   Standalone card treatment with shadow to peer with the body card.
   ============================================================ */
.bp-inline-cta {
  /* Same column geometry as .bp-body so left edges align with the body
     card and the banner title above */
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  max-width: 1000px;
  margin: 0;
  /* width:100% is required: without it, auto-margin + inner-grid display
     causes shrink-to-content sizing when content is short. Caught 2026-05-18
     on EV-bay post which had a short heading and rendered at 777px. */
  padding: clamp(22px, 2.6vw, 30px) clamp(24px, 3vw, 36px);
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--navy);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--green);
  box-shadow:
    0 18px 36px -20px rgba(14, 9, 48, .14),
    0 4px 10px -6px rgba(14, 9, 48, .06);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  /* Locked to the same height as Share via the shared variable */
  min-height: var(--bottom-row-h);
  /* Bottom-align the CTA card inside its grid row, so its bottom sits
     flush with the Share block's bottom in the aside on the right. */
  align-self: end;
}
.bp-inline-cta-eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* Darker green for AAA contrast on the light surface */
  color: #2C8A36;
}
.bp-inline-cta-h {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--navy);
}
.bp-inline-cta-h .is-green { color: var(--green); }
.bp-inline-cta-sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 50ch;
}
.bp-inline-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}
.bp-inline-cta-actions .btn {
  padding: 13px 22px;
}
.bp-inline-cta-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--navy);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
.bp-inline-cta-phone:hover { color: #2C8A36; }
.bp-inline-cta-phone svg {
  width: 14px;
  height: 14px;
  color: #2C8A36;
}


/* ============================================================
   ASIDE — sticky on desktop, inline disclosure on mobile
   ============================================================ */
.bp-aside {
  /* Stretches with the grid row (body column) — required so that
     position: sticky on .bp-aside-sticky has scroll room to slide. */
  position: relative;
  height: 100%;
}
.bp-aside-sticky {
  position: sticky;
  /* Clears the site-wide sticky nav (utility + main bars) — same offset
     used by .faq-aside on the homepage. */
  top: 140px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Cap height to viewport remainder so on short screens the aside can
     still scroll internally without disappearing under the page foot. */
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  overflow-x: hidden;
}
/* Hide the internal scrollbar — clean visual, content rarely overflows */
.bp-aside-sticky {
  scrollbar-width: none;
}
.bp-aside-sticky::-webkit-scrollbar { display: none; }

.bp-aside-block {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow:
    0 14px 28px -16px rgba(14, 9, 48, .14),
    0 4px 10px -6px rgba(14, 9, 48, .06);
  transition:
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}
.bp-aside-block:hover {
  border-color: rgba(97, 204, 107, .25);
  box-shadow:
    0 18px 34px -18px rgba(14, 9, 48, .18),
    0 6px 12px -6px rgba(14, 9, 48, .08);
}

.bp-aside-eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* TOC links — left-rail with hover + active state */
.bp-toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--hairline);
  margin-left: 1px;
}
.bp-toc a {
  position: relative;
  display: block;
  padding: 7px 12px;
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--fg-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition:
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out);
}
.bp-toc a:hover {
  color: var(--navy);
}
.bp-toc a.is-active {
  color: var(--navy);
  border-left-color: var(--green);
  background: rgba(97, 204, 107, .06);
  font-weight: var(--w-semibold);
}

/* SHARE block — inherits .bp-aside-block visual treatment (white card,
   12px radius, hairline border, light shadow, TOC-matching hover).
   Adds: min-height locked to --bottom-row-h so it pairs with the CTA
   at exactly the same height, plus flex layout for heading + sub +
   share row + feedback overlay. */
.bp-aside-share {
  min-height: var(--bottom-row-h);
  /* Vertical padding matches the CTA so the Share eyebrow sits at
     exactly the same y-offset from the card top as the CTA eyebrow.
     Horizontal padding stays at the TOC's 22px so the card width still
     matches the TOC visually. */
  padding: clamp(22px, 2.6vw, 30px) 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  /* No flex gap — inner element spacing comes from item margins, so
     the eyebrow→heading→sub rhythm matches the CTA exactly (8px / 8px). */
}

/* Operator-specified exceptions to TOC-matching: keep the Share eyebrow
   green AND the heading at its CTA-pairing size (19px with green-period
   flourish via .is-green). Everything else matches the TOC card. */
.bp-aside-share .bp-aside-eyebrow {
  color: #2C8A36;
  /* Match CTA eyebrow's margin (was 14px from .bp-aside-eyebrow default) */
  margin: 0 0 8px;
}

.bp-aside-share-h {
  /* Match CTA heading's margin */
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 19px;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--navy);
}
.bp-aside-share-h .is-green { color: var(--green); }
.bp-aside-share-sub {
  /* Match CTA sub's margin (none — share-row's margin-top: auto handles
     the space to the bottom row) */
  margin: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-muted);
}

/* SHARE row — pushed to the bottom of the card so the buttons line up
   with the CTA button's vertical position on the left. */
.bp-share-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

/* Feedback span overlays absolutely so it doesn't reserve empty layout
   space when the "Link copied" message isn't visible. */
.bp-aside-share .bp-share-feedback {
  position: absolute;
  left: 22px;
  bottom: 6px;
  margin: 0;
  min-height: 0;
}
.bp-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--surface-soft);
  border: 1px solid transparent;
  color: var(--navy);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}
.bp-share-btn:hover {
  background: var(--white);
  border-color: rgba(97, 204, 107, .4);
  color: var(--green);
  transform: translateY(-1px);
}
.bp-share-btn svg {
  width: 16px;
  height: 16px;
}
.bp-share-feedback {
  display: block;
  min-height: 18px;
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--green);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.bp-share-feedback.is-visible { opacity: 1; }


/* ============================================================
   RELATED ARTICLES — three-card row using .ins-card pattern,
   wrapped in its own container with eyebrow + "see all" foot
   ============================================================ */
.bp-related {
  background: var(--grey);
  padding: clamp(56px, 7vw, 96px) 0;
}
.bp-related-head {
  margin: 0 0 clamp(24px, 3vw, 36px);
}
.bp-related-eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
}
.bp-related-h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--navy);
}
.bp-related-h .is-green { color: var(--green); }

/* Reuse insights.css .ins-card / .ins-grid via shared class names */
.bp-related-grid {
  /* Inherit .ins-grid 3-column behaviour; just give it a white tile bg
     on the grey related-section background. */
}
.bp-related .ins-card {
  background: var(--white);
}
.bp-related .ins-card:hover {
  background: var(--white);
  border-color: rgba(97, 204, 107, .55);
}

.bp-related-foot {
  margin-top: clamp(28px, 3vw, 36px);
  display: flex;
  justify-content: center;
}
.bp-related-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--navy);
  text-decoration: none;
  transition:
    border-color var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}
.bp-related-all:hover {
  border-color: rgba(97, 204, 107, .55);
  background: var(--white);
  transform: translateY(-1px);
}
.bp-related-all svg {
  width: 12px;
  height: 12px;
  color: var(--green);
  transition: transform var(--dur) var(--ease-out);
}
.bp-related-all:hover svg {
  transform: translateX(3px);
}


/* ============================================================
   REVEAL / MOTION — scroll-triggered fade-up on body content
   ============================================================ */
[data-bp-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 600ms var(--ease-mech-out, cubic-bezier(0, 0, .2, 1)),
    transform 600ms var(--ease-mech-out, cubic-bezier(0, 0, .2, 1));
}
[data-bp-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
  .bp-article-grid {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 40px;
  }
}

@media (max-width: 900px) {
  /* Mobile overrides — restore full-bleed image (inset 0) and remove
     the desktop's diagonal clip-path (which would leave the title
     overlapping a hard image edge on portrait phones where text spans
     full width). Restore the horizontal navy fade gradient over the
     full-bleed image so title text reads cleanly across narrower
     viewports. */
  .bp-banner-bg {
    inset: 0;
  }
  .bp-banner::after {
    display: none;
  }
  .bp-banner-bg::after {
    background:
      linear-gradient(
        90deg,
        var(--navy-deep) 0%,
        rgba(14, 9, 48, 0.96) 32%,
        rgba(14, 9, 48, 0.68) 55%,
        rgba(14, 9, 48, 0.25) 100%
      ),
      linear-gradient(
        180deg,
        rgba(14, 9, 48, 0) 55%,
        rgba(14, 9, 48, 0.35) 100%
      );
  }
  .bp-banner-text { max-width: 100%; }

  /* Aside collapses inline above the body as a disclosure (we keep the
     same DOM order, just restack and make non-sticky). */
  .bp-article-grid {
    max-width: 720px;
    grid-template-columns: 1fr;
    grid-template-rows: none;       /* reset two-row layout on mobile */
    gap: 24px;
    /* Tablet lift — matches .ins-board at 900 breakpoint */
    margin-top: -64px;
  }
  /* Reset all grid placements so DOM order + .bp-aside { order: -1 } controls
     the stack: aside (TOC + Share) → body → CTA. */
  .bp-body,
  .bp-aside,
  .bp-inline-cta {
    grid-column: auto;
    grid-row: auto;
  }
  .bp-body {
    max-width: 100%;
    margin: 0;
    padding: clamp(24px, 4vw, 32px);
  }
  .bp-inline-cta {
    max-width: 100%;
    margin: 0;
  }
  /* Hide the entire aside on mobile — the 9-item TOC + Share block at
     the top of the article (via order: -1) creates a 381px-tall nav
     wall the user has to scroll past before reading. Mobile readers
     scroll naturally; aside is desktop-only. */
  .bp-aside { display: none; }

  /* In-article CTA — stack columns */
  .bp-inline-cta {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .bp-inline-cta-actions {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  /* Mobile lift — matches .ins-board at 640 breakpoint. Banner padding
     is inherited from the default (clamp resolves to 56 top / 96 bottom
     at this width), so no override needed here. */
  .bp-article-grid {
    margin-top: -48px;
  }
  .bp-body {
    padding: 22px 20px;
  }
  .bp-banner-title { font-size: clamp(28px, 7.5vw, 36px); }
  .bp-crumb { font-size: 12px; gap: 8px; }
  .bp-meta { font-size: 12.5px; gap: 8px 12px; }


  /* Body — slightly smaller body text */
  .bp-body {
    font-size: 16px;
    line-height: 1.7;
  }
  .bp-lede {
    font-size: 18px;
    line-height: 1.5;
  }
  .bp-body h2 {
    font-size: 22px;
    margin: 36px 0 12px;
  }
  .bp-quote {
    margin: 24px 0;
    padding-left: 22px;
  }
  .bp-quote::before {
    font-size: 60px;
    top: -12px;
    left: 10px;
  }
  .bp-quote p { font-size: 20px; }

  /* In-article CTA — tighter padding */
  .bp-inline-cta { padding: 22px; }

  /* Related — single column */
  .bp-related-grid { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .bp-banner-title { font-size: 26px; }
  .bp-meta-dot { display: none; }
  .bp-meta { gap: 6px 10px; }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .reading-progress-fill { transition: none; }
  [data-bp-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .bp-share-btn,
  .bp-related-all,
  .bp-related-all svg,
  .bp-inline-cta-phone {
    transition: none;
  }
}

/* No hover-driven movement on touch / hybrid pointers (e.g. iPad + mouse). */
@media (hover: none), (pointer: coarse) {
  .bp-share-btn:hover { transform: none; }
  .bp-related-all:hover { transform: none; }
}