/* ==========================================================================
   qa-fixes-case-studies.css — /case-studies/ page parity overrides
   --------------------------------------------------------------------------
   Created 2026-05-02 from compare-page.mjs results
   (3 mismatches in baseline). Each rule scoped to `.rp-case-studies`
   or `body.page-template-page-case-studies`.

   PHP edits (inc/hero-content-bindings.php):
   - Added 'case-studies' to $no_gradient_slugs so hero shortcode emits
     ONLY the 3 base classes (no _bg_extra_layer / rounded-bottom /
     bg-light-blue / adjust-padding) matching live's bare-wrapper hero.
     Same pattern as remotepass-background-check + integrations.

   No body or template changes — case-studies-body.html is already
   minimal (just hero + JS-rendered card grid + brands bar + stats).
   ========================================================================== */

/* ============ §A. WHITE-BG-MASK — hide on case-studies ==================
   RECURRING-ISSUES.md §2. Standard recurring fix.
   ========================================================================== */
.page-template-page-case-studies .white-bg-mask,
.page-template-page-case-studies .new-footer-white-bg-mask,
.rp-case-studies ~ * .white-bg-mask,
.rp-case-studies ~ * .new-footer-white-bg-mask {
  display: none !important;
}

/* ============ §B. HERO GRADIENT — bare-wrapper variant w/ 20% stop ======
   Live's hero on /case-studies/ renders with ONLY the 3 base classes
   (`.hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg`)
   — no `_bg_extra_layer`. PHP shortcode now emits 'no-gradient' for
   this slug. But live still has a linear-gradient bg-image with 20%
   stop. Same pattern as qa-fixes-background-check.css §B and
   qa-fixes-integrations.css §B.
   ========================================================================== */
.rp-case-studies .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg {
  background-image: linear-gradient(rgba(228, 235, 254, 0), rgb(228, 235, 254) 20%, rgb(228, 235, 254));
  background-position: 0 0;
  background-repeat: repeat;
  background-size: auto;
  background-attachment: scroll;
}

/* ============ §C. CASE-STUDIES CARD GRID — restore display: grid =========
   Cowork-style visual issue caught by the page-height delta probe:
   pageHeight 4883 (live) vs 8521 (local) — 3638px taller on local.
   Root cause: card grid container `.cs-collection-list` (alias
   `#cs-card-grid` / `.blogs-index.collection-list`) renders
   `display: block` on local, so the 9 case-study cards stack as
   single column, each at 1252px wide × 544px tall. Live renders
   `display: grid; grid-template-columns: 396px 396px 396px;
   gap: 45.5px 32px`, so cards lay out 3-up at 396×520 each.

   The `grid-template-columns: 1fr 1fr 1fr` is already set on local
   (probably from migration.css or a Webflow rule) — but `display`
   is `block` instead of `grid`. Force grid + the gap.
   ========================================================================== */
.rp-case-studies .cs-collection-list,
.rp-case-studies .blogs-index.collection-list,
.rp-case-studies #cs-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 45.5px 32px;
}
/* Responsive (Greg go-live): the rule above pinned 3 columns at every width, so cards stayed
   3-up and cramped (~116px wide) on phones. Tablet -> 2/row, mobile -> 1/row. */
@media (max-width: 991px) {
  .rp-case-studies .cs-collection-list,
  .rp-case-studies .blogs-index.collection-list,
  .rp-case-studies #cs-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .rp-case-studies .cs-collection-list,
  .rp-case-studies .blogs-index.collection-list,
  .rp-case-studies #cs-card-grid { grid-template-columns: 1fr; }
}

/* ============ §D. STATS-MOSAIC INNER CONTAINER — strip 24px padding =====
   Section "150+ countries / 20,000+ customers / 200+ in-house experts"
   inner `.rp-container.new-rp-section-vertical-scroll-container`
   reports padding=0 24px on local vs 0 on live. The 24px L+R padding
   compresses the 3-col mosaic. Page-scoped override.
   ========================================================================== */
.rp-case-studies .new-rp-section-vertical-border-slider-section .rp-container.new-rp-section-vertical-scroll-container {
  padding: 0;
}

/* ============ §E. CARD CONTENT-CONTAINER mt2 — restore 1.39em gap =======
   Phase 2-case-studies-visual (2026-05-02): each card's inner
   `.mt2.cs-blog-item-card-content-container` renders with margin-top: 0
   on local vs 1.39em (= 18.07px) on live. Live's gap comes from
   migration.css:2640 `.rp-section .mt2 { margin-top: 1.39em }` — the
   .cs-collection-list grid sits inside an `.rp-section` ancestor on live
   but the same chain doesn't fire on local because of how the WP
   template-part wrapping breaks the cascade (the `.rp-section` ancestor
   doesn't actually exist in this DOM path on either page — but live's
   render engine somehow applies the rule, possibly via an implicit
   wrapper from an older migration step).
   Result: local cards are 475px tall while live's are 512px (37px
   shorter). The 18.07px gap accounts for half of the delta; the rest
   is due to live's broken logo+arrow images reserving more space than
   their actual rendered size on local.
   Fix: page-scoped rule replicating the canonical `.rp-section .mt2`
   margin-top, narrowed to the case-studies card content-container.
   ========================================================================== */
.rp-case-studies .cs-collection-list .mt2.cs-blog-item-card-content-container {
  margin-top: 1.39em;
}
/* The thumb-wrap inside each card also has margin-bottom: 18.07px on
   live but 0 on local. Both gaps add up because the parent <a> is
   `display: flex` (via `w-inline-block`) so margins don't collapse —
   each sibling's vertical margin is preserved. Adding both restores
   the full 36.14px effective gap and brings card height from 493 →
   ~512 to match live. */
.rp-case-studies .cs-collection-list .thumb-wrap.cs-thumb-wrap {
  margin-bottom: 1.39em;
}

/* --------------------------------------------------------------------------
   Cosmetic-only floor (compare 2026-05-02, post §A–§D): trajectory 3 → 2.
   Best parity on this project — pageHeight delta 14px (live 4883 vs
   local 4869 — local is even SLIGHTLY SHORTER, not taller). Residual:
     1. whiteBgMaskHidden TRAP per RECURRING-ISSUES §2.
     2. pageHeight delta 14px — informational, statistical noise.
   Zero heading / row / section structural mismatches.
   §C alone collapsed the original 3638px page-height delta by
   restoring the 9-card grid from single-column stack to 3×3 layout.
   -------------------------------------------------------------------------- */

/* =========================================================================
   Case-study narrative sections — 2-column illustration + text (2026-07-08)
   Figma (RP-Resources) renders each challenge/solution/results section as a
   2-col illustration + copy with sides alternating; the migration rendered
   them text-only. rp_case_study_section_block now emits .cs-section--has-media
   + .cs-section-2col (media + .cs-section-copy) when the per-slug map supplies
   a section illustration. Scope: .rp-case-study-detail.
   ========================================================================= */
.rp-case-study-detail .cs-section-2col {
  display: flex;
  align-items: center;
  gap: 56px;
  max-width: 1200px;
  margin: 0 auto;
}
/* media-right: DOM order stays media→copy (a11y); flip visually via reverse */
.rp-case-study-detail .cs-section--media-right .cs-section-2col { flex-direction: row-reverse; }
.rp-case-study-detail .cs-section-media { flex: 0 0 44%; max-width: 44%; }
.rp-case-study-detail .cs-section-media-img { display: block; width: 100%; height: auto; }
.rp-case-study-detail .cs-section-copy { flex: 1 1 auto; min-width: 0; }
.rp-case-study-detail .cs-section-2col .cs-richtext-main-class { margin-top: 8px; }

@media (max-width: 991px) {
  .rp-case-study-detail .cs-section-2col,
  .rp-case-study-detail .cs-section--media-right .cs-section-2col {
    flex-direction: column;
    gap: 28px;
  }
  .rp-case-study-detail .cs-section-media { flex: none; width: 100%; max-width: 460px; margin: 0 auto; }
}

/* RTL — mirror the alternation */
[dir="rtl"] .rp-case-study-detail .cs-section--media-left  .cs-section-2col { flex-direction: row-reverse; }
[dir="rtl"] .rp-case-study-detail .cs-section--media-right .cs-section-2col { flex-direction: row; }
@media (max-width: 991px) {
  [dir="rtl"] .rp-case-study-detail .cs-section--media-left  .cs-section-2col,
  [dir="rtl"] .rp-case-study-detail .cs-section--media-right .cs-section-2col { flex-direction: column; }
}

/* P1 chunk-3 residual #8: the CS-hub hero subhead content is authored sentence-case
   ("RemotePass simplifies the expansion of remote and international teams.") but the
   frozen migration.css rule text-transform:capitalize title-cases it at render
   ("Simplifies The Expansion Of..."). Restore sentence case — scoped to the unique
   hub subhead class so no other .new_landing_page_payroll_header heading is affected. */
.cs-new-rp-section-header { text-transform: none !important; }

/* ============ Adil QA batch 3 (2026-07-15) ============================== */
/* (c) The "RemotePass simplifies the expansion…" stat cards
   (.cs-mosaik-item-card) render on #F9FAFB — Adil wants #E4EBFE (brand soft blue),
   matching the mobile trusted-brand band below. Applies at all widths. */
.rp-case-studies .cs-mosaik-item-card {
  background-color: #E4EBFE;
}

/* (b) Mobile: the trusted-brand strip should sit on an #E4EBFE band with its
   logos flex-centred (it currently renders on a transparent bg as a grid).
   display:flex needs !important — the grid is set at higher specificity. */
@media (max-width: 767px) {
  .rp-case-studies .new-listed-brands-section {
    background-color: #E4EBFE;
  }
  .rp-case-studies .new-listed-brands-sub-section {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px 24px;
  }
}