/* AUTO-GENERATED from qa-fixes-blog.css via rtlcss. Do not edit by hand.
   Loaded only on AR pages by inc/i18n-setup.php.
*/
/* ==========================================================================
   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-right: calc(50% - 50vw);
  margin-left: 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;
  width: 100%;
  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;
  /* Blog QA 2026-07-25 (Cowork): full-bleed escape ported from the EN file —
     this RTL fork predates the Adil b3(c) fix and never had it, so the AR navy
     band rendered inset. calc margins need !important to beat WP core's
     constrained-layout `margin-left/right: auto !important` (see EN file §F). */
  width: 100vw;
  max-width: 100vw;
  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: right;
  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 / 10;
  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: right;
}
.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 / 10;
  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-right: 1px solid #f1f1f1;
  border-radius: 0;
  padding: 0 16px 0 0;
  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-right: 16px;
  font-size: 13px;
}

/* --- §H.5 Article body typography ------------------------------------------ */
.rp-blog-article-v2 .rp-blog-prose-content > * {
  max-width: 650px;
  margin-right: auto;
  margin-left: 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-right: 24px;
}
.rp-blog-article-v2 .rp-blog-prose-content blockquote {
  margin: 24px auto;
  padding: 16px 24px;
  border-right: 4px solid #114ef7;
  background: #fafbff;
  border-radius: 8px 0 0 8px;
}

/* --- §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;
  left: -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-right: calc(50% - 50vw);
  margin-left: 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%;
  left: 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;
  left: 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%;
  right: -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 ------------------------------------- */

/* §J RTL mirror — blog QA 2026-07-25 round 2 (see EN file §J for rationale).
   RTL title offset is margin-right; popular centering pattern is direction-
   agnostic (left:50% + translateX(-50%)). */
.page-template-page-blog .rp-blog-listing h3.rp-h3.blog-new-rp-h3 {
  margin-right: 0;
  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 — this is the rule that actually broke: in RTL the over-wide band's
   static position starts at the parent's RIGHT edge, so left:50% + translateX(-50%) pushed it
   260px left (measured -267 -> 1173 = a 267px gap on the right). The centering pattern is NOT
   direction-agnostic. Reverted to the §F negative-margin escape shipped in 5d8e5bd, which
   measures -7 -> 1433 here, same as EN. */