/* ==========================================================================
   qa-fixes-blog.css — /blog/ listing page parity overrides
   --------------------------------------------------------------------------
   Created 2026-05-02 from compare-page.mjs results
   (235 mismatches in baseline). Each rule scoped to body classes since
   the listing doesn't use a `.rp-blog` wrapper.

   Pre-flight items resolved by PHP edits in inc/blog-setup.php:
   - rp_blog_listing_cards_shortcode: card title <h2> → <h3> at line 609
     (heading audit now pairs with live; live ships H3 for listing cards)

   --------------------------------------------------------------------------
   Deferred structural mismatches (NOT addressed in this batch):
   /blog/ is a content-listing page where live and local diverge in
   layout structure, not just typography:

   Live ships (LIVE-ONLY):
     - A featured-posts hero section (3-4 posts at H1 44/48)
     - A primary card grid (each post H3 24.7/32.11)
     - A related/sidebar list (each post H3 18/26 — same posts re-listed)
     - 100+ post titles total (each post appearing ~2-3 times across
       featured / grid / sidebar)
   Local ships:
     - Single-grid listing (each post H3 24.7/32.11 after this batch's
       PHP fix). 12 posts per page (paginated). No hero/featured section,
       no sidebar.
   pageHeight 24370 (live) vs 8987 (local) — local is ~15k px shorter
   because it doesn't have the featured-posts + sidebar + extra
   sections live has.

   The blog listing layout refactor is deferred. Same bucket as
   finance-managers + hr-managers + pricing. Substantial body
   restructure required (new template-parts for featured-posts and
   sidebar; PHP shortcodes to render multiple post lists; markup ports
   from Webflow source).

   This batch addresses the typography/style fixes that don't require
   restructuring (H2→H3 tag promotion + card font-size).
   ========================================================================== */

/* ============ §A. MAIN-GRID CARD TITLE — match live's 18px / 26px =======
   2026-05-02 CORRECTION: prior version of §A set 24.7/32.11 based on a
   misread of the diff report. The diff's `alignByText` paired local's
   first "What is an EOR?" instance (main grid H2 18/26) with live's
   first instance which happened to be H3 24.7/32.11 from the Popular
   Articles section further down the page. Live's MAIN GRID cards
   actually render at H3 18px/26px (verified via Chrome MCP probe at
   y=1137-1644). The H3 24.7/32.11 instances belong to a different
   section (§E Popular Articles) where each post appears a 2nd time.
   Local's TT5 H3 default + .rp-h3 cascade gives 22px/30.8px without
   override. Force 18/26 to match live's main grid.
   ========================================================================== */
.page-template-page-blog h3.rp-h3.blog-new-rp-h3 {
  font-size: 18px;
  line-height: 26px;
}

/* ============ §B. WHITE-BG-MASK — hide on blog listing ===================
   Same recurring fix.
   ========================================================================== */
.page-template-page-blog .white-bg-mask,
.page-template-page-blog .new-footer-white-bg-mask {
  display: none !important;
}

/* ============ §C. REPORT-BANNER — hide on blog listing AND single posts ==
   Phase 2-blog-visual (2026-05-02 Greg-flagged): the "2025 Remote Hiring
   Report" promo banner from `parts/promo-banners.html` is pinned
   `position: fixed; bottom: 8px; z-index: -997` (per qa-fixes-eor.css §C
   which applied this float positioning globally for the report+spendcard
   promo-banner pair). On product pages with full-width section
   backgrounds the banner sits cleanly underneath. On the /blog/ listing
   AND on /blog/{slug}/ single posts the page bg has gaps between cards
   and column areas, so the bg-transparent banner shows through visibly —
   Greg flagged it on single posts as "floating behind the text".
   Greg's call (2026-05-02): hide it on the blog listing AND every single
   post. The banner remains functional on product pages where it has
   proper underlying content.
   ========================================================================== */
.page-template-page-blog .report-banner-main-container,
.page-template-page-blog .banner-main-container.report-banner-main-container,
body.single-post .report-banner-main-container,
body.single-post .banner-main-container.report-banner-main-container {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Partial-pass floor (compare 2026-05-02, post §A–§B): trajectory 235 → 230.
   The H2→H3 PHP fix + card sizing addressed the tag/font-size mismatches
   for the ~12 posts in local's single-grid view.

   Residual 230 mismatches are STRUCTURAL CONTENT GAPS — live emits each
   blog post in 2-3 different listing contexts:
     - Featured-posts hero section (H1 44/48 — 3-4 posts)
     - Primary card grid (H3 24.7/32.11 — main listing)
     - Related/sidebar list (H3 18/26 — same posts re-listed)
   Local emits each post once in a single-grid layout. The pageHeight
   delta (24370 vs 8987 — 15.4k px shorter on local) reflects the
   missing featured + sidebar sections.

   Substantial body restructure required (new template-parts for
   featured-posts + sidebar; PHP shortcodes to render multiple post
   lists). Tracked for follow-up content-port pass — same bucket as
   finance-managers + hr-managers + pricing.
   -------------------------------------------------------------------------- */

/* ============================================================================
   §D. FEATURED POSTS HERO — Swiper carousel (V3 2026-05-02)
   ----------------------------------------------------------------------------
   Renders at top of /blog/ via [rp_blog_featured_posts] (see
   inc/blog-setup.php:rp_blog_featured_posts_shortcode +
   parts/blog-featured-posts.html). Mirrors live's Slick carousel using
   Swiper (already enqueued globally via swiper-js in functions.php:463).

   Layout:
     - Section: brand-blue bg (rgb(17, 78, 247)), full bleed, ≥600px tall
     - Single-slide Swiper container at max-width 1440px
     - Slide: text-LEFT pane (50%) + image-RIGHT pane (50%), flex-row
     - H1 at 44px / 48px line-height (live's spec — full container width
       supports the larger heading; previous 3-col layout had to scale
       down to 28px for the 480w card width)
     - 3 dots pagination centered below the slide
     - Auto-rotates every 5s via blog-listing.js initFeaturedHero()
     - On <991px: text-top + image-bottom stack
   ============================================================================ */
.rp-blog-featured-section {
  background-color: rgb(17, 78, 247);
  /* Break out of FSE .wp-block-template-part wrapper (which is
     max-width:1180px) so the brand-blue band spans the full viewport
     like live's hero. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 56px 56px 80px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
/* Swiper's own .swiper styles set padding:0 with high specificity, so
   the container holds full-bleed-minus-section-padding here; horizontal
   padding lives on the section above. */
.rp-blog-featured-swiper {
  display: block;
  width: 100%;
  max-width: 1328px; /* 1440 - 56*2 padding from section */
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}
.rp-blog-featured-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
}
/* wpautop mangles the shortcode output and inserts stray <p> tags
   around the <a> children inside each .swiper-slide (same accepted
   trap as the listing-cards shortcode at blog-setup:601). The slide
   wrapper is a <div> so Swiper's slide count remains correct, but we
   still neutralise:
     1. <p> direct children of the wrapper (empty Swiper-confusing).
     2. <p> inside slides — make them layout-transparent + zero margin
        so wpautop's wrappers don't add visual gaps.
     3. Empty <p> tags entirely. */
.rp-blog-featured-swiper .swiper-wrapper > p {
  display: none !important;
}
.rp-blog-featured-swiper .swiper-slide p {
  margin: 0 !important;
  padding: 0 !important;
}
.rp-blog-featured-swiper .swiper-slide p:empty {
  display: none !important;
}
.rp-blog-featured-swiper .swiper-slide {
  width: 100%;
  height: auto;
  flex-shrink: 0;
  text-decoration: none;
  color: #fff;
  background-color: rgb(17, 78, 247);
}
.rp-blog-featured-swiper .swiper-slide:hover {
  text-decoration: none;
}
.rp-blog-featured-swiper .swiper-slide .slider-item.slick-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  min-height: 520px;
  gap: 48px;
}

/* LEFT pane — text 50% */
.rp-blog-featured-swiper .slider-item-left {
  flex: 1 1 50%;
  max-width: 50%;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

/* Tag + reading time row (small uppercase metadata) */
.rp-blog-featured-swiper .slider-item-tag-reading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.rp-blog-featured-swiper .slide-item-tag,
.rp-blog-featured-swiper .slide-item-bar,
.rp-blog-featured-swiper .slide-item-reading {
  margin: 0;
  font-size: inherit;
  line-height: 1.4;
}

/* H1 — live ships 44px / 48px line-height, brand-blue bg with white text */
.page-template-page-blog .rp-blog-featured-swiper h1.slide-item-header,
.page-template-page-blog .rp-blog-featured-swiper .slide-item-header {
  font-size: 40px;       /* Figma 1730:9081 — was 44px (and rule only targeted h1, live is h3) */
  line-height: 48px;
  color: #fff;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.1px;
}

/* Card excerpt — Figma 1730:9137: 14px / #545454 / lh21 (live shipped 17px slate #4a5568) */
#blog-card-grid .rp-blog-item p {
  font-size: 14px;
  line-height: 21px;
  color: #545454;
}

.rp-blog-featured-swiper .slide-item-p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  /* span (not <p>) to avoid wpautop trap — render as block + clamp */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* RIGHT pane — illustration 50% */
.rp-blog-featured-swiper .slider-item-right {
  flex: 1 1 50%;
  max-width: 50%;
  height: 440px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rp-blog-featured-swiper .slider-item-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* Pagination dots — centered below the slide */
.rp-blog-featured-pagination {
  position: relative !important;
  bottom: auto !important;
  text-align: center;
  margin-top: 32px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.rp-blog-featured-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  border-radius: 50%;
  transition: background-color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
  margin: 0 !important;
}
.rp-blog-featured-pagination .swiper-pagination-bullet:hover {
  background: rgba(255, 255, 255, 0.7);
}
.rp-blog-featured-pagination .swiper-pagination-bullet-active {
  background: #fff;
  transform: scale(1.2);
}

/* Mobile / tablet — stack text-top + image-bottom */
@media screen and (max-width: 991px) {
  .rp-blog-featured-section {
    padding: 40px 24px 56px;
  }
  .rp-blog-featured-swiper {
    max-width: 100%;
  }
  .rp-blog-featured-swiper .swiper-slide .slider-item.slick-item {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    min-height: 0;
  }
  .rp-blog-featured-swiper .slider-item-left,
  .rp-blog-featured-swiper .slider-item-right {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .rp-blog-featured-swiper .slider-item-right {
    height: 240px;
  }
  .page-template-page-blog .rp-blog-featured-swiper h1.slide-item-header,
  .page-template-page-blog .rp-blog-featured-swiper .slide-item-header {
    font-size: 32px;
    line-height: 36px;
  }
}

/* ============================================================================
   §E. E-BOOK CTA "HR Checklist for Remote Onboarding"
   (V2 Handover Issue 6 — PR 1, 2026-05-02)
   ----------------------------------------------------------------------------
   Sits between the main listing grid and Topics section. Markup mirrors
   live's `.e-book-section-new` Webflow chain. Live values via Chrome MCP
   probe at 1440×900:
     section bg     rgb(244, 245, 247) (light gray)
     section size   1440 × 746
     H1.heading-74  56px / 68px
     5/7 col split  image-LEFT / text-RIGHT
   ============================================================================ */
.page-template-page-blog .e-book-section-new {
  background-color: rgb(244, 245, 247);
  padding: 80px 56px;
  margin: 0;
  /* Adil QA b3 (b): grey band full-width — break out of the FSE constrained
     wrapper like .rp-blog-featured-section / .rp-blog-popular-section. The inner
     .columns-4.w-row keeps max-width:1252px + margin:auto so content stays centered.
     max-width override is required (width:100vw alone is capped by the FSE cap). */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  display: block;
}
.page-template-page-blog .e-book-section-new .columns-4.w-row {
  display: flex;
  align-items: center;
  /* gap removed 2026-05-02 — flex-basis 41.66 + 58.33 = 100% leaves no
     room for a gap, so the gap was forcing flex-wrap which stacked
     image-top and text-bottom. The visual breathing room comes from
     internal padding on each column instead. */
  max-width: 1252px;
  margin: 0 auto;
  flex-wrap: nowrap;
}
.page-template-page-blog .e-book-section-new .e-book-section-new-left {
  flex: 0 0 41.66%;
  max-width: 41.66%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-template-page-blog .e-book-section-new .e-book-section-new-left-img {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
}
.page-template-page-blog .e-book-section-new .e-book-section-new-right {
  flex: 0 0 58.33%;
  max-width: 58.33%;
  padding: 32px 0;
}
.page-template-page-blog .e-book-section-new .div-block-18 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 540px;
}
.page-template-page-blog .e-book-section-new .catagory-tag.tag-e-book-new {
  display: inline-block;
  padding: 6px 14px;
  background-color: rgb(228, 235, 254);
  color: rgb(17, 78, 247);
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.page-template-page-blog .e-book-section-new h1.heading-74 {
  font-size: 56px;
  line-height: 68px;
  font-weight: 700;
  color: #15113b;
  margin: 8px 0;
  letter-spacing: -0.01em;
}
.page-template-page-blog .e-book-section-new p.paragraph-19 {
  font-size: 17px;
  line-height: 1.6;
  color: rgb(105, 105, 105);
  margin: 0 0 12px;
  max-width: 540px;
}
.page-template-page-blog .e-book-section-new a.btn.wider.w-button {
  display: inline-block;
  margin-top: 8px;
}

/* Responsive — stack image-top + text-bottom on tablet/mobile */
@media screen and (max-width: 991px) {
  .page-template-page-blog .e-book-section-new {
    padding: 56px 24px;
  }
  .page-template-page-blog .e-book-section-new .columns-4.w-row {
    flex-direction: column;
    gap: 24px;
  }
  .page-template-page-blog .e-book-section-new .e-book-section-new-left,
  .page-template-page-blog .e-book-section-new .e-book-section-new-right {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .page-template-page-blog .e-book-section-new h1.heading-74 {
    font-size: 40px;
    line-height: 1.2;
  }
}

/* ============ §F. POPULAR ARTICLES — fix wpautop ghost <p> + dark-bg ====
   Phase 2-blog-visual (2026-05-02 Greg-flagged via screenshot review):
   the `.rp-blog-popular-grid` was rendering 12 children — 6 real <a>
   cards + 6 ghost <p> tags inserted by wpautop on the whitespace
   between cards. The ghost <p>s were taking grid slots and showing as
   empty white boxes alongside real cards, making the section look
   half-broken.
   Same root cause + same fix as §D featured-posts (line 156). The PHP
   shortcode does `preg_replace('/>\s+</', '><')` on its output but
   wpautop runs at the page-render level after `wp:shortcode` block
   expands, so the empty <p>s are reintroduced. CSS hide is the safe
   fix — same pattern CC used for §B grid.

   Also restyling the section: live ships dark navy bg with white text
   and lavender category pills. Local was rendering on white bg.
   ========================================================================== */
.page-template-page-blog .rp-blog-popular-grid > p,
.page-template-page-blog .rp-blog-popular-grid > br {
  display: none !important;
}
.page-template-page-blog .rp-blog-popular-section {
  background-color: rgb(15, 16, 53);
  padding: 80px 0;
  margin: 0;
  /* X-cut row 10 image-backdrops pass 2026-06-28 — Mohamed audit row 91
     ("popular articles bark background looks like a card and doesn't cover
     the entire background in navy blue"). Same full-bleed escape pattern
     used by §D .rp-blog-featured-section above (line 131-133): break out
     of the FSE wp:group constrained wrapper (max-width 1180px) so the navy
     band spans the full viewport. Solves the "card not full-width" complaint
     without restructuring the page-blog.html block tree. */
  width: 100vw;
  /* Adil QA b3 (c): the width:100vw above was silently capped by the FSE
     constrained wrapper's max-width, so the navy band rendered ~753px not
     full-bleed (verified live). Lift the cap so it actually spans the viewport. */
  max-width: 100vw;
  /* Blog QA 2026-07-25 (Cowork): the calc margins MUST be !important here.
     WP core's constrained-layout rule in global-styles-inline-css sets
     `margin-left/right: auto !important` on children of .is-layout-constrained
     groups, which beat the plain calc margins and left the band inset at
     x=123 (verified by disabling stylesheets one by one). The ebook band
     escapes without !important only because it is NOT inside a constrained
     group. Same-!important + later cascade = we win. */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box;
}
.page-template-page-blog .rp-blog-popular-heading {
  color: #fff;
  font-size: 32px;
  line-height: 38.4px;
  font-weight: 700;
  text-align: left;
  max-width: 1300px;
  margin: 0 auto 32px;
  padding: 0 24px;
}
.page-template-page-blog .rp-blog-popular-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 24px;
}
.page-template-page-blog .rp-popular-article-card {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  text-decoration: none;
  color: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.2s ease;
}
.page-template-page-blog .rp-popular-article-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
  text-decoration: none;
}
.page-template-page-blog .rp-popular-thumb {
  width: 100%;
  aspect-ratio: 16 / 9; /* 2026-07-07: was 16/10 — shorter card image so titles aren't clipped */
  background-size: cover;
  background-position: center;
  background-color: rgb(21, 17, 59);
}
.page-template-page-blog .rp-popular-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.page-template-page-blog .rp-popular-title {
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}
.page-template-page-blog .rp-popular-excerpt {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}
.page-template-page-blog .rp-popular-category {
  display: inline-block;
  align-self: flex-start;
  padding: 6px 14px;
  background-color: rgba(228, 235, 254, 0.15);
  color: rgb(228, 235, 254);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: auto;
}

/* ============ §G. TOPICS — render as 6 post cards (matching live) ======
   Live's `.blog-new-most-popular-topic` is NOT a tag cloud — it's a
   collection of 6 blog post cards (per Webflow source `blog.html:856`).
   Shortcode rebuilt to render post cards instead of category pills.
   2026-05-02: data migration left posts un-categorized so the original
   pill rendering returned empty.
   ========================================================================== */
.page-template-page-blog .rp-blog-topics-grid > p,
.page-template-page-blog .rp-blog-topics-grid > br {
  display: none !important;
}
.page-template-page-blog .rp-blog-topics-section {
  padding: 56px 0;
  background-color: #fff;
}
.page-template-page-blog .rp-blog-topics-heading {
  font-size: 32px;
  line-height: 38.4px;
  font-weight: 700;
  color: #15113b;
  margin: 0 auto 32px;
  max-width: 1300px;
  padding: 0 24px;
  text-align: left;
}
.page-template-page-blog .rp-blog-topics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 24px;
}
.page-template-page-blog .rp-topic-card {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgb(228, 232, 240);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.page-template-page-blog .rp-topic-card:hover {
  border-color: rgb(17, 78, 247);
  text-decoration: none;
  transform: translateY(-2px);
}
.page-template-page-blog .rp-topic-thumb {
  width: 100%;
  aspect-ratio: 16 / 9; /* 2026-07-07: was 16/10 — shorter card image so titles aren't clipped */
  background-size: cover;
  background-position: center;
  background-color: rgb(244, 246, 250);
}
.page-template-page-blog .rp-topic-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.page-template-page-blog .rp-topic-title {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: #15113b;
  margin: 0;
}
.page-template-page-blog .rp-topic-excerpt {
  font-size: 14px;
  line-height: 1.5;
  color: rgb(105, 105, 105);
  margin: 0;
}

/* ============================================================================
   §H. SINGLE BLOG POST — V2 redesign (Track 2, 2026-05-02)
   Mirrors Figma file hX9SIfrIjOjYvFtmHBofSa node 1:84900 ("Blog Article
   Revamp"). Scoped under .rp-blog-article-v2 so the older single-post
   styles in this file (and migration.css's .rp-blog-article cascade) keep
   working for any non-V2 callers. The whole .rp-blog-article-v2 scope
   uses a 1200px constrained main with three sub-zones:
     1. Hero zone (breadcrumb-share row, category pill, H1, meta row)
     2. Prose grid (240px TOC | 1fr article | 278px sidebar, gap 16px)
     3. Full-width CTA banner that breaks out via 100vw clamp
   ========================================================================== */

/* Reset TT5 quirks (letter-spacing -0.1px, font-weight 300, block-gap)
   inside the V2 scope so it doesn't interfere with our typography. */
.rp-blog-article-v2,
.rp-blog-article-v2 * {
  letter-spacing: normal;
  font-family: Mulish, sans-serif;
}
.rp-blog-article-v2 {
  font-weight: 400;
  color: #2a2a2a;
  padding-top: 24px;
  padding-bottom: 0;
  max-width: 1200px;     /* override the legacy .rp-blog-article 800/850 cap */
  margin: 0 auto;
}

/* --- §H.0 Hero band — navy full-width block behind breadcrumb-share + hero (Figma 1-84900) */
/* Content stays in the page's natural constrained 1200 column (so it aligns with
   the TOC/prose by construction); navy is painted full-width by a ::before behind it. */
.rp-blog-article-v2 .rp-blog-hero-band {
  position: relative;
  padding: 24px 0 28px;     /* Figma band ≈388 tall (was 447) */
  margin-bottom: 56px;      /* Figma gap between band and prose (was 0) */
}
.rp-blog-article-v2 .rp-blog-hero-band::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);   /* extend bg to the full viewport width on both sides */
  background: #021143;
  z-index: 0;
}
.rp-blog-article-v2 .rp-blog-hero-band > * { position: relative; z-index: 1; }
/* tighten inner bottom margins so the band hugs the content */
.rp-blog-article-v2 .rp-blog-hero-band .rp-blog-breadcrumb-share { margin-bottom: 40px; }
.rp-blog-article-v2 .rp-blog-hero-band .rp-blog-hero-v2 { margin-bottom: 0; }
/* white text on navy */
.rp-blog-article-v2 .rp-blog-hero-band .rp-blog-breadcrumb-back,
.rp-blog-article-v2 .rp-blog-hero-band .rp-blog-share-icon,
.rp-blog-article-v2 .rp-blog-hero-band .rp-blog-h1-v2,
.rp-blog-article-v2 .rp-blog-hero-band h1.rp-post-title,
.rp-blog-article-v2 .rp-blog-hero-band .rp-blog-meta-cell-value { color: #fff !important; }
.rp-blog-article-v2 .rp-blog-hero-band .rp-blog-breadcrumb-share,
.rp-blog-article-v2 .rp-blog-hero-band .rp-blog-meta-cell-label,
.rp-blog-article-v2 .rp-blog-hero-band .rp-blog-meta-cell-label svg { color: rgba(255,255,255,.7) !important; }
/* H1 lost to source-order on equal specificity — force white */
.rp-blog-article-v2 .rp-blog-hero-band .rp-blog-h1-v2,
.rp-blog-article-v2 .rp-blog-hero-band h1.rp-post-title { color: #fff !important; }
/* Figma navy band ≈ 388px content height — drop the legacy 64px hero gap + 56px band pad to tighten */
.rp-blog-article-v2 .rp-blog-hero-band { padding-bottom: 40px; }
.rp-blog-article-v2 .rp-blog-hero-band .rp-blog-h1-v2,
.rp-blog-article-v2 .rp-blog-hero-band h1.rp-post-title { margin-bottom: 28px; }

/* --- §H.1 Breadcrumb + share row -------------------------------------------- */
.rp-blog-article-v2 .rp-blog-breadcrumb-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  margin: 0 auto 56px;
  padding: 0;
  font-size: 14px;
  color: #696969;
}
.rp-blog-article-v2 .rp-blog-breadcrumb-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2a2a2a;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}
.rp-blog-article-v2 .rp-blog-breadcrumb-back:hover {
  color: #114ef7;
}
.rp-blog-article-v2 .rp-blog-breadcrumb-share-icons {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.rp-blog-article-v2 .rp-blog-share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #696969;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}
.rp-blog-article-v2 .rp-blog-share-icon:hover {
  color: #114ef7;
}
.rp-blog-article-v2 .rp-blog-share-icon svg {
  display: block;
}

/* --- §H.2 Hero (category pill + H1 + meta row) ------------------------------ */
.rp-blog-article-v2 .rp-blog-hero-v2 {
  margin: 0 0 64px;
  padding: 0;
  background: transparent;
  max-width: 1200px;
}
.rp-blog-article-v2 .rp-blog-hero-v2 .rp-category-badge {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 16px;
  margin: 0 0 24px;
  border-radius: 6px;
  background: #fafbff;
  color: #114ef7;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}
.rp-blog-article-v2 .rp-blog-hero-v2 .rp-category-badge:hover {
  background: #e8eeff;
}
.rp-blog-article-v2 .rp-blog-h1-v2,
.rp-blog-article-v2 .rp-blog-hero-v2 h1.rp-post-title {
  margin: 0 0 32px;
  font-family: Mulish, sans-serif;
  font-size: 48px;       /* Figma 1:84920 — was 56px */
  line-height: 56px;     /* was 64px */
  font-weight: 500;      /* Figma Medium — was 700 */
  color: #021143;
  letter-spacing: 0;
}
.rp-blog-article-v2 .rp-blog-meta-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
}
.rp-blog-article-v2 .rp-blog-meta-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rp-blog-article-v2 .rp-blog-meta-cell-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #696969;
  font-size: 16px;       /* Figma 1:84925 — was 14px */
  line-height: 24px;
  font-weight: 400;      /* Figma Regular — was 500 */
}
.rp-blog-article-v2 .rp-blog-meta-cell-label svg {
  flex: 0 0 20px;
  color: #114ef7;
}
.rp-blog-article-v2 .rp-blog-meta-cell-value {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #2a2a2a;
}

/* --- §H.3 Prose grid: 240 / 1fr / 278 -------------------------------------- */
.rp-blog-article-v2 .rp-blog-prose-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 278px;
  gap: 16px;
  align-items: start;
  margin: 0 auto 96px;
  max-width: 1200px;
}
.rp-blog-article-v2 .rp-blog-prose-toc {
  position: sticky;
  top: 100px;
  align-self: start;
}
.rp-blog-article-v2 .rp-blog-prose-content {
  min-width: 0; /* prevents grid track from blowing past 1fr */
  max-width: 650px;
  margin: 0 auto;
  width: 100%;
}
.rp-blog-article-v2 .rp-blog-prose-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* --- §H.4 TOC ------------------------------------------------------------- */
/* migration.css gives .rp-blog-toc a dark gradient bg + rounded card.
   Override here so the V2 layout uses a clean light-rail style instead. */
.rp-blog-article-v2 .rp-blog-toc {
  background: transparent;
  border: 0;
  border-left: 1px solid #f1f1f1;
  border-radius: 0;
  padding: 0 0 0 16px;
  margin: 0;
}
.rp-blog-article-v2 .rp-blog-toc-heading {
  margin: 0 0 22px;
  padding: 0;
  color: #021143;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}
.rp-blog-article-v2 .rp-blog-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rp-blog-article-v2 .rp-blog-toc-item {
  margin: 0;
  padding: 0;
}
.rp-blog-article-v2 .rp-blog-toc-link {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  line-height: 22px;
  color: #545454;
  text-decoration: none;
  transition: color 0.15s ease;
}
.rp-blog-article-v2 .rp-blog-toc-link:hover {
  color: #114ef7;
}
.rp-blog-article-v2 .rp-blog-toc-link.is-active {
  color: #114ef7;
  font-weight: 700;
}
.rp-blog-article-v2 .rp-blog-toc-item-h3 .rp-blog-toc-link {
  padding-left: 16px;
  font-size: 13px;
}

/* --- §H.5 Article body typography ------------------------------------------ */
.rp-blog-article-v2 .rp-blog-prose-content > * {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}
.rp-blog-article-v2 .rp-blog-prose-content h2 {
  margin: 16px 0;
  font-size: 24px;       /* Figma 261:18706 — was 32px */
  line-height: 40px;
  font-weight: 700;
  color: #15113b;        /* Figma heading navy — was #021143 */
}
.rp-blog-article-v2 .rp-blog-prose-content h3 {
  margin: 16px 0 8px;
  font-size: 18px;       /* Figma 261:18710 (SemiBold) — was 24px */
  line-height: 24px;
  font-weight: 600;
  color: #15113b;
}
.rp-blog-article-v2 .rp-blog-prose-content h4 {
  margin: 32px 0 8px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: #021143;
}
.rp-blog-article-v2 .rp-blog-prose-content p,
.rp-blog-article-v2 .rp-blog-prose-content li {
  font-size: 16px;
  line-height: 26px;
  color: #2a2a2a;
}
.rp-blog-article-v2 .rp-blog-prose-content p {
  margin: 0 auto 16px;
}
.rp-blog-article-v2 .rp-blog-prose-content a {
  color: #114ef7;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rp-blog-article-v2 .rp-blog-prose-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 24px auto;
  display: block;
}
.rp-blog-article-v2 .rp-blog-prose-content ul,
.rp-blog-article-v2 .rp-blog-prose-content ol {
  margin: 0 auto 16px;
  padding-left: 24px;
}
.rp-blog-article-v2 .rp-blog-prose-content blockquote {
  margin: 24px auto;
  padding: 16px 24px;
  border-left: 4px solid #114ef7;
  background: #fafbff;
  border-radius: 0 8px 8px 0;
}

/* --- §H.6 Author bio card -------------------------------------------------- */
.rp-blog-article-v2 .rp-blog-author-bio {
  padding: 24px;
  border: 1px solid #f1f1f1;
  border-radius: 8px;
  background: #ffffff;
}
.rp-blog-article-v2 .rp-blog-author-bio-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;
}
.rp-blog-article-v2 .rp-blog-author-bio-avatar-wrap {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
  background: #f1f1f1;
}
.rp-blog-article-v2 .rp-blog-author-bio-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}
.rp-blog-article-v2 .rp-blog-author-bio-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #114ef7 0%, #073bca 100%);
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
}
.rp-blog-article-v2 .rp-blog-author-bio-name {
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: #021143;
}
.rp-blog-article-v2 .rp-blog-author-bio-text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 22px;
  color: #545454;
}
.rp-blog-article-v2 .rp-blog-author-bio-social {
  display: flex;
  gap: 16px;
}
.rp-blog-article-v2 .rp-blog-author-bio-social-icon {
  color: #696969;
  display: inline-flex;
  transition: color 0.15s ease;
}
.rp-blog-article-v2 .rp-blog-author-bio-social-icon:hover {
  color: #114ef7;
}

/* --- §H.7 Sidebar CTA card ------------------------------------------------- */
.rp-blog-article-v2 .rp-blog-sidebar-cta {
  position: relative;
  padding: 56px 24px 24px;
  border-radius: 8px;
  background: linear-gradient(180deg, #021143 0%, #0a1f6b 100%);
  color: #ffffff;
  overflow: hidden;
}
.rp-blog-article-v2 .rp-blog-sidebar-cta-shape {
  position: absolute;
  top: -32px;
  right: -16px;
  width: 164px;
  height: 172px;
  background: radial-gradient(circle at 30% 30%, rgba(17, 78, 247, 0.35) 0%, transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(255, 196, 0, 0.25) 0%, transparent 50%);
  pointer-events: none;
}
.rp-blog-article-v2 .rp-blog-sidebar-cta-heading {
  position: relative;
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: #ffffff;
}
.rp-blog-article-v2 .rp-blog-sidebar-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  background: #114ef7;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.rp-blog-article-v2 .rp-blog-sidebar-cta-btn:hover {
  background: #0a3fd1;
  transform: translateY(-1px);
}

/* --- §H.8 Full-width CTA banner ("Build, Scale, Manage") ------------------- */
/* The shortcode emits class="alignfull". We hard-break out of the 1200px
   main using the 50vw negative-margin trick so it works regardless of
   ancestor padding/container layout. 24px lateral pad keeps the inner
   card off the viewport edge on tablet. */
.rp-blog-article-v2 .rp-blog-cta-banner,
.rp-blog-article-v2 .rp-blog-cta-banner.alignfull {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 64px;
  padding: 40px 24px;
  background: transparent;
  box-sizing: border-box;
}
.rp-blog-article-v2 .rp-blog-cta-banner-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 462px;
  gap: 48px;
  max-width: 1252px;
  margin: 0 auto;
  padding: 64px 80px;
  background: linear-gradient(126deg, #0f1035 46%, #114ef7 107%); /* Figma 261:16159 — was bright-blue gradient */
  border-radius: 16px;
  overflow: hidden;
  color: #ffffff;
}
.rp-blog-article-v2 .rp-blog-cta-banner-text {
  position: relative;
  z-index: 1;
  align-self: center;
}
.rp-blog-article-v2 .rp-blog-cta-banner-heading {
  margin: 0 0 24px;
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: #ffffff;
}
.rp-blog-article-v2 .rp-blog-cta-banner-body {
  margin: 0 0 32px;
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 560px;
}
.rp-blog-article-v2 .rp-blog-cta-banner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 32px;
  background: #114ef7;   /* Figma button is blue bg / white text — was inverted */
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  text-decoration: none;
  border-radius: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rp-blog-article-v2 .rp-blog-cta-banner-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.rp-blog-article-v2 .rp-blog-cta-banner-art {
  position: relative;
  height: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rp-blog-article-v2 .rp-blog-cta-banner-img {
  display: block;
  width: 100%;
  height: auto;
}
.rp-blog-article-v2 .rp-blog-cta-banner-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
.rp-blog-article-v2 .rp-blog-cta-banner-shape-1 {
  top: 10%;
  right: 8%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
}
.rp-blog-article-v2 .rp-blog-cta-banner-shape-2 {
  bottom: -40px;
  right: 30%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 196, 0, 0.25) 0%, transparent 60%);
}
.rp-blog-article-v2 .rp-blog-cta-banner-shape-3 {
  top: 40%;
  left: -20%;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(17, 78, 247, 0.2) 0%, transparent 60%);
}

/* --- §H.9 Related-posts (existing rp_related_posts shortcode) tweaks ------- */
.rp-blog-article-v2 .rp-related-posts-section {
  margin: 0 auto 96px;
  max-width: 1252px;
  padding: 0;
}
.rp-blog-article-v2 .rp-related-posts-heading {
  margin: 0 0 32px;
  font-size: 40px;       /* Figma 261:16115 "Related Articles" — was 32px */
  line-height: 48px;
  font-weight: 700;
  color: #000000;        /* Figma black — was #021143 */
}
.rp-blog-article-v2 .rp-related-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* --- §H.10 Responsive: tablet (≤1024px) hides TOC; mobile (≤768px) stacks - */
@media (max-width: 1024px) {
  .rp-blog-article-v2 .rp-blog-prose-grid {
    grid-template-columns: minmax(0, 1fr) 278px;
  }
  .rp-blog-article-v2 .rp-blog-prose-toc {
    display: none;
  }
  .rp-blog-article-v2 .rp-blog-h1-v2,
  .rp-blog-article-v2 .rp-blog-hero-v2 h1.rp-post-title {
    font-size: 40px;
    line-height: 48px;
  }
  .rp-blog-article-v2 .rp-blog-cta-banner-inner {
    grid-template-columns: 1fr;
    padding: 48px 32px;
  }
  .rp-blog-article-v2 .rp-blog-cta-banner-art {
    display: none;
  }
}
@media (max-width: 768px) {
  .rp-blog-article-v2 .rp-blog-prose-grid {
    grid-template-columns: 1fr;
  }
  .rp-blog-article-v2 .rp-blog-prose-sidebar {
    position: static;
    margin-top: 32px;
  }
  .rp-blog-article-v2 .rp-blog-h1-v2,
  .rp-blog-article-v2 .rp-blog-hero-v2 h1.rp-post-title {
    font-size: 32px;
    line-height: 40px;
  }
  .rp-blog-article-v2 .rp-blog-meta-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .rp-blog-article-v2 .rp-blog-cta-banner-heading {
    font-size: 28px;
    line-height: 36px;
  }
  .rp-blog-article-v2 .rp-blog-prose-content h2 {
    font-size: 26px;
    line-height: 34px;
  }
  .rp-blog-article-v2 .rp-blog-prose-content h3 {
    font-size: 20px;
    line-height: 28px;
  }
  .rp-blog-article-v2 .rp-blog-related-posts-grid {
    grid-template-columns: 1fr;
  }
}
/* --- §H end of single-post V2 redesign ------------------------------------- */

/* FIX 2026-07-02 (responsive): mobile/tablet category filter = ONE horizontal-scroll row
   instead of wrapping to ~10 rows. Overrides the wrap style (loads last on /blog). */
@media (max-width: 991px) {
  .rp-blog-listing .blog-category-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Go-live: without a width cap the nowrap row expands to its full ~1861px content and
       overflows the filter bar (only ~2-3 categories visible, rest cropped). Constrain it to the
       bar so overflow-x actually scrolls and ALL categories are reachable by swipe. */
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .rp-blog-listing .blog-category-tabs::-webkit-scrollbar { display: none; }
  .rp-blog-listing .blog-category-tabs .tab_link { flex: 0 0 auto !important; white-space: nowrap; }
}

/* ==========================================================================
   Blog hero slider — featured graphics were cut off (Greg batch 2, 2026-07-05).
   The featured-post graphics have baked-in titles and an aspect of ~1.65–1.79,
   but .slider-item-right rendered ~640×440 (aspect ~1.45) with object-fit:cover,
   so cover cropped the sides and clipped the titles ("Tax Implications o|f…").
   Match the container + img to 16:9 (≈1.78) so cover no longer crops sideways.
   Non-@media so it also overrides migration.css's fixed mobile heights (300/200px)
   — qa-fixes loads after migration, equal specificity → this wins at all widths. */
.rp-blog-listing .slider-item-right { aspect-ratio: 16 / 9; height: auto; align-self: center; }
.rp-blog-listing .slider-item-right-img { aspect-ratio: 16 / 9; height: auto; }
/* 2026-07-07: featured-posts carousel reuses .slider-item-right(-img); ensure it's
   16:9 too even when the slide isn't nested under .rp-blog-listing. */
.rp-blog-featured-slide .slider-item-right { aspect-ratio: 16 / 9; height: auto; align-self: center; }
.rp-blog-featured-slide .slider-item-right-img { aspect-ratio: 16 / 9; height: auto; object-fit: cover; }

/* ============ Adil QA batch 3 (2026-07-15) ============================== */
/* (a) Article cards: a stray empty <p> (wpautop artifact) with margin-bottom:24px
   sat as the card's first child, pushing the thumbnail ~25px down (measured).
   Drop it so the image sits at the card top. */
.page-template-page-blog .rp-blog-item > p:empty { display: none; }

/* (d)+(e) Topics + Popular-Articles card grids: were repeat(3,1fr) at every
   width. Adil: 2/row on tablet, 1/row on mobile. */
@media (max-width: 991px) {
  .page-template-page-blog .rp-blog-topics-grid,
  .page-template-page-blog .rp-blog-popular-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .page-template-page-blog .rp-blog-topics-grid,
  .page-template-page-blog .rp-blog-popular-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   §J. BLOG QA 2026-07-25 round 2 (Adil via Greg) — listing cards + popular
   ---------------------------------------------------------------------------
   1. Card title had margin-left:16px on top of the shared 16px padding, so the
      title text sat 16px right of the excerpt text and the tag pill. Zero the
      margin: title text (149+0+16=165) now aligns with excerpt text (149+16)
      and the tag pill edge (165). Measured, not eyeballed.
   2. Card excerpt un-truncated (PHP trim removed in blog-setup.php same pass) —
      lift the 3-line clamp so the full subcopy shows, like live.
   3. Popular band centering hardened: calc(50% - 50vw) margins left a ~7px
      right sliver in scrollbarless renders because the constrained parent is
      not exactly centered. left:50% + translateX(-50%) centers the 100vw band
      on the parent's midline regardless, and sidesteps the WP-core
      `margin: auto !important` fight entirely (margins zeroed with matching
      !important). Direction-agnostic — same pattern works RTL.
   ============================================================================ */
.page-template-page-blog .rp-blog-listing h3.rp-h3.blog-new-rp-h3 {
  margin-left: 0;
}
.page-template-page-blog .rp-blog-listing .rp-p.blog-new-rp-p {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
/* §J.3 REVERTED 2026-07-25 (measured on staging, both locales).
   The left:50% + translateX(-50%) swap was meant to kill a ~7px right sliver. It did NOT:
   both offsets are resolved against the SAME constrained parent, so EN measured identically
   (-7 -> 1433) — and in RTL the static position of an over-wide box starts from the parent's
   right edge, so the same offsets shifted the AR band 260px left (-267 -> 1173, a 267px gap).
   Restored to §F's negative-margin centering, which measured -7 -> 1433 on BOTH locales.
   The residual ~7px is because the constrained parent itself is not viewport-centred
   (parent 123..1303, centre 713 vs viewport 720) — fixing that means unconstraining
   .rp-blog-popular-wrap, which is a separate call (flagged to Greg, not shipped here). */

/* ══════════════════════════════════════════════════════════════════════════════
   §K. BLOG HERO — Figma 1730:9041 parity (2026-07-29, leadership go-live).
   Two measured deltas only; Cowork verified the filter chips (l=148), search
   (l=998) and the centred "Expert Insights" heading already match the frame, so
   nothing here touches them.

   (a) IMAGE PANEL BLEEDS TO THE RIGHT VIEWPORT EDGE.
       Frame: image x907->1440, blue text panel ends x~906.
       Was:   text and image each ~50% of the 1328 container with a 48px flex
              gap, so the image stopped at the container edge (measured on
              staging: text 56->689, image 737->1369) leaving a ~63px blue gap.
       Now:   text pane 64% (850 of 1328 -> ends x906 at 1440), gap 0, and the
              image pane carries margin-right:-56px to cancel the section's own
              56px right padding, landing it exactly on the section edge.
       WHY -56px AND NOT calc(50% - 50vw): 50vw includes the scrollbar, which
       overshoots the content edge by ~7px — that is the documented §J.3/§F
       residual on this very page. The section padding is a known constant, so
       cancelling it is exact. .rp-blog-featured-section has overflow:hidden and
       is itself 100vw, so the bleed stops precisely at the viewport edge.
       The 48px separation between text and image is preserved as padding on the
       text pane rather than a flex gap, so it does not eat into the image width.

   (b) PAGINATION DOTS BOTTOM-LEFT (frame first dot x~81-92).
       Was justify-content:center inside the full-width container (measured
       687-738). Now left-aligned; the 25px inset lands the first dot at x~81
       given the container starts at x=56.

   Desktop-only (>=992). Below that the hero stacks (text top / image bottom) via
   the existing @media block above, where a right-edge bleed and a left-aligned
   dot row have no frame reference — deliberately left as-is rather than guessed.

   NO AR TWIN EXISTS. /ar/blog has no featured hero at all (verified on staging:
   .rp-blog-featured-swiper absent) — the AR blog is a single-grid listing and the
   featured-posts hero is EN-only, a documented deferral (see the header of
   qa-fixes-blog-rtl.css). Mirror rules would be dead code; when the AR hero is
   built, it needs image-bleeds-LEFT + dots-bottom-RIGHT added at that time.
   ══════════════════════════════════════════════════════════════════════════════ */
@media screen and (min-width: 992px) {
  /* Specificity note: the base rule above is
     `.rp-blog-featured-swiper .swiper-slide .slider-item.slick-item` = (0,4,0).
     A shorter selector here loses and the 48px gap survives — measured on staging
     (text ended 896, image started 944, i.e. the image sat 48px short of the
     frame's x907). Match the base selector exactly and win on source order. */
  .rp-blog-featured-swiper .swiper-slide .slider-item.slick-item { gap: 0; }
  .rp-blog-featured-swiper .slider-item-left {
    flex: 0 0 64%;
    max-width: 64%;
    padding-right: 48px;
  }
  .rp-blog-featured-swiper .slider-item-right {
    flex: 1 1 auto;
    max-width: none;
    margin-right: -56px;
  }
  .rp-blog-featured-pagination {
    justify-content: flex-start;
    padding-left: 25px;
  }
}