/* ==========================================================================
   Case study — v2 layout (Mind Base Education only, 2026-10-15, Mo)
   Figma: RP--Resources 2957:18501 (1440 frame, content 1200).
   Loaded only on case studies whose data map has 'layout' => 'v2'
   (inc/cpt-case-study.php → rp_case_study_enqueue_css). Every rule is scoped
   to .cs-v2, which only the v2 hero and v2 sections carry, so no other case
   study can be affected. EN + AR (RTL via logical properties / [dir=rtl]).
   ========================================================================== */

/* ---------- Hero ----------------------------------------------------------
   2026-10-26 (Mo): the v2 hero (Mind Base, Tabby) now uses the SAME size and layout as every other
   case study (e.g. /case-studies/podeo) — container, grid, logo, info box and Achievements panel all
   come from the shared rules. The Figma 741px full-bleed hero, 842/326 grid, 305px logo and the
   tinted info box / panel overrides were removed. Only the darker photo wash stays (text legibility). */
/* Figma: black→transparent left wash (784/1440) + 42% black + edge darkening */
.rp-case-study-detail .cs-hero-full-container-2_0.cs-v2 .cs-hero-container-mask-2_0 {
  background:
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 54.4%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0.12%, rgba(0, 0, 0, 0) 43.5%, rgba(0, 0, 0, 0.8) 99.86%);
}
[dir="rtl"] .rp-case-study-detail .cs-hero-full-container-2_0.cs-v2 .cs-hero-container-mask-2_0,
.rp-case-study-detail[dir="rtl"] .cs-hero-full-container-2_0.cs-v2 .cs-hero-container-mask-2_0 {
  background:
    linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0) 54.4%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0.12%, rgba(0, 0, 0, 0) 43.5%, rgba(0, 0, 0, 0.8) 99.86%);
}

/* ---------- Narrative sections -------------------------------------------- */
.rp-case-study-detail .cs-v2-sec.hero_double_section_2.hero_double_section_revert {
  padding-top: 80px;
  padding-bottom: 80px;
}
.rp-case-study-detail .cs-v2-sec .getguide-rp-container {
  max-width: 1200px !important; /* .rp-container pins 1300 */
}
.rp-case-study-detail .cs-v2-grid {
  display: flex;
  align-items: center;
  gap: 40px;
}
.rp-case-study-detail .cs-v2-grid--media-right {
  flex-direction: row-reverse;
}
.rp-case-study-detail .cs-v2-sec--2 .cs-v2-grid {
  align-items: flex-start; /* Figma: results visual top-aligned with the heading */
}
.rp-case-study-detail .cs-v2-sec--1 .cs-v2-grid {
  gap: 32px;
  justify-content: center;
}
.rp-case-study-detail .cs-v2-media {
  flex: 0 0 500px;
  max-width: 500px;
}
.rp-case-study-detail .cs-v2-media-img {
  display: block;
  width: 100%;
  height: auto;
}
.rp-case-study-detail .cs-v2-copy {
  flex: 1 1 0;
  min-width: 0;
  color: #021143;
}
.rp-case-study-detail .cs-v2-sec--1 .cs-v2-copy {
  flex: 0 1 620px;
}
.rp-case-study-detail .cs-v2-sec--2 .cs-v2-copy {
  flex: 0 1 660px;
}
.rp-case-study-detail .cs-v2 .cs-section-narrative-heading {
  /* size/line-height come from the shared case-study heading rule (44/38/30 by breakpoint) */
  font-weight: 700;
  color: #021143;
  margin: 0 0 32px;
  max-width: none;
}
.rp-case-study-detail .cs-v2-sec--1 .cs-section-narrative-heading,
.rp-case-study-detail .cs-v2-sec--2 .cs-section-narrative-heading {
  color: #2a2a2a;
  margin-bottom: 48px;
}
.rp-case-study-detail .cs-v2 .cs-section-narrative-heading .highlight-it-blue {
  color: #114ef7;
}
.rp-case-study-detail .cs-v2-sub {
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: #061235;
  margin: 0 0 24px;
}
.rp-case-study-detail .cs-v2-sec--1 .cs-v2-sub {
  margin-bottom: 24px;
}

/* Quote box (challenge: blue tint; solution: white) */
.rp-case-study-detail .cs-v2-quote {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  margin: 24px 0 0;
  background: #f0f4fe;
  border-inline-start: 2px solid #114ef7;
  border-radius: 16px;
}
.rp-case-study-detail .cs-v2-sec--0 .cs-v2-quote {
  margin-top: 0;
}
.rp-case-study-detail .cs-v2-sec--1 .cs-v2-quote {
  background: #fff;
}
.rp-case-study-detail .cs-v2-quote .cs-v2-quote-ic {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  color: #114ef7;
}
.rp-case-study-detail .cs-v2-quote p {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: #021143 !important;
}
.rp-case-study-detail .cs-v2-quote strong {
  font-weight: 700;
}

/* Lists */
.rp-case-study-detail .cs-v2-list {
  list-style: none;
  margin: 0;
  padding: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rp-case-study-detail .cs-v2-list--check {
  padding-top: 0;
  gap: 8px;
}
.rp-case-study-detail .cs-v2-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 27px;
  color: #021143;
}
.rp-case-study-detail .cs-v2-list li::before,
.rp-case-study-detail .cs-v2-compare li::before {
  content: none;
  display: none;
}
.rp-case-study-detail .cs-v2-list--check li {
  color: #061235;
}
.rp-case-study-detail .cs-v2-list--check .cs-v2-ic {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  color: #114ef7;
}
.rp-case-study-detail .cs-v2-li-txt {
  flex: 1 1 0;
  min-width: 0;
}
.rp-case-study-detail .cs-v2-li-txt strong {
  font-weight: 700;
}
.rp-case-study-detail .cs-v2-badge {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  color: #000;
}
.rp-case-study-detail .cs-v2-badge .cs-v2-ic {
  width: 20px;
  height: 20px;
}
.rp-case-study-detail .cs-v2-badge--ok {
  border-color: #114ef7;
  color: #114ef7;
}

/* Results body + before → after cards */
.rp-case-study-detail .cs-v2-body p {
  margin: 0 0 28px;
  font-size: 18px;
  line-height: 28px;
  color: #021143;
}
.rp-case-study-detail .cs-v2-body .cs-v2-body-quote strong {
  font-weight: 700;
}
.rp-case-study-detail .cs-v2-compare {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rp-case-study-detail .cs-v2-cmp {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 16px;
  min-height: 64px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
}
.rp-case-study-detail .cs-v2-cmp-from,
.rp-case-study-detail .cs-v2-cmp-to {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
}
.rp-case-study-detail .cs-v2-cmp-from {
  flex: 0 0 188px;
  color: #6b7280;
}
.rp-case-study-detail .cs-v2-cmp-to {
  flex: 1 1 0;
  min-width: 0;
  color: #114ef7;
}
.rp-case-study-detail .cs-v2-cmp .cs-v2-arrow {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: #000;
}
[dir="rtl"] .rp-case-study-detail .cs-v2-cmp .cs-v2-arrow,
.rp-case-study-detail[dir="rtl"] .cs-v2-cmp .cs-v2-arrow {
  transform: scaleX(-1);
}

/* ---------- Tablet / mobile ----------------------------------------------- */
/* sections stack below 1200 (two columns need 500 + 40 + 660) */
@media (max-width: 1199px) {
  .rp-case-study-detail .cs-v2-sec.hero_double_section_2.hero_double_section_revert {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .rp-case-study-detail .cs-v2-grid,
  .rp-case-study-detail .cs-v2-grid--media-right {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }
  .rp-case-study-detail .cs-v2-media {
    flex: 0 0 auto;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  .rp-case-study-detail .cs-v2-sec--1 .cs-v2-copy,
  .rp-case-study-detail .cs-v2-sec--2 .cs-v2-copy {
    flex: 1 1 auto;
  }
  .rp-case-study-detail .cs-v2-sec--1 .cs-section-narrative-heading,
  .rp-case-study-detail .cs-v2-sec--2 .cs-section-narrative-heading {
    margin-bottom: 32px;
  }
}
@media (max-width: 767px) {
  .rp-case-study-detail .cs-v2-br {
    display: none;
  }
  .rp-case-study-detail .cs-v2-quote {
    padding: 20px 16px;
    gap: 12px;
  }
  .rp-case-study-detail .cs-v2-quote p,
  .rp-case-study-detail .cs-v2-list li,
  .rp-case-study-detail .cs-v2-body p {
    font-size: 16px;
    line-height: 27px;
  }
}

/* ---------- Quote boxes + before→after cards: same scale as the body copy (Mo, 2026-10-15) ----------
   Text 16/27 like the list items, smaller icons/badges, tighter padding; mobile tightened again. */
.rp-case-study-detail .cs-v2-quote {
  gap: 12px;
  padding: 20px 24px;
  border-radius: 12px;
}
.rp-case-study-detail .cs-v2-quote .cs-v2-quote-ic {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
  margin-top: 1px;
}
.rp-case-study-detail .cs-v2-quote p {
  font-size: 16px;
  line-height: 27px;
}
.rp-case-study-detail .cs-v2-list--check .cs-v2-ic {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
  margin-top: 1.5px;
}
.rp-case-study-detail .cs-v2-list li {
  gap: 12px;
}
.rp-case-study-detail .cs-v2-compare {
  gap: 12px;
}
.rp-case-study-detail .cs-v2-cmp {
  gap: 12px;
  padding: 12px 16px;
  min-height: 0;
  border-radius: 12px;
}
.rp-case-study-detail .cs-v2-cmp-from,
.rp-case-study-detail .cs-v2-cmp-to {
  font-size: 15px;
  line-height: 22px;
}
.rp-case-study-detail .cs-v2-cmp-from {
  flex: 0 0 34%;
}
.rp-case-study-detail .cs-v2-cmp .cs-v2-arrow {
  flex-basis: 20px;
  width: 20px;
  height: 20px;
}
@media (max-width: 767px) {
  .rp-case-study-detail .cs-v2-quote {
    padding: 16px;
  }
  .rp-case-study-detail .cs-v2-cmp {
    padding: 12px;
    gap: 10px;
  }
}

/* Small phones (≤575): before / after on two rows, the arrow stays — it turns to point down
   between them, centred under the circles (36px circles everywhere, Mo 2026-10-15). */
@media (max-width: 575px) {
  .rp-case-study-detail .cs-v2-cmp {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 4px 12px;
    align-items: center;
  }
  .rp-case-study-detail .cs-v2-cmp-from {
    flex: none;
  }
  .rp-case-study-detail .cs-v2-cmp .cs-v2-arrow,
  [dir="rtl"] .rp-case-study-detail .cs-v2-cmp .cs-v2-arrow {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    transform: rotate(90deg);
  }
  .rp-case-study-detail .cs-v2-cmp > .cs-v2-badge:first-child { grid-column: 1; grid-row: 1; }
  .rp-case-study-detail .cs-v2-cmp-from { grid-column: 2; grid-row: 1; }
  .rp-case-study-detail .cs-v2-cmp .cs-v2-badge--ok { grid-column: 1; grid-row: 3; }
  .rp-case-study-detail .cs-v2-cmp-to { grid-column: 2; grid-row: 3; }
}

/* Heading → first element: 24px, same as the other case studies at every breakpoint (Mo, 2026-10-15). */
.rp-case-study-detail .cs-v2 .cs-section-narrative-heading,
.rp-case-study-detail .cs-v2-sec--1 .cs-section-narrative-heading,
.rp-case-study-detail .cs-v2-sec--2 .cs-section-narrative-heading {
  margin-bottom: 24px;
}

/* ✓ list: same check as the other case studies — 32px icon, 2px down, text starts 36px in (Mo, 2026-10-15). */
.rp-case-study-detail .cs-v2-list--check li {
  gap: 4px;
}
.rp-case-study-detail .cs-v2-list--check .cs-v2-ic {
  flex-basis: 32px;
  width: 32px;
  height: 32px;
  margin-top: 2px;
}

/* Mind Base follows §Z (48 / 40 / 32px under section headings, Mo 2026-10-15). */
.rp-case-study-detail .cs-v2 .cs-section-narrative-heading,
.rp-case-study-detail .cs-v2-sec--1 .cs-section-narrative-heading,
.rp-case-study-detail .cs-v2-sec--2 .cs-section-narrative-heading {
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  .rp-case-study-detail .cs-v2 .cs-section-narrative-heading,
  .rp-case-study-detail .cs-v2-sec--1 .cs-section-narrative-heading,
  .rp-case-study-detail .cs-v2-sec--2 .cs-section-narrative-heading { margin-bottom: 40px; }
}
@media (min-width: 1024px) {
  .rp-case-study-detail .cs-v2 .cs-section-narrative-heading,
  .rp-case-study-detail .cs-v2-sec--1 .cs-section-narrative-heading,
  .rp-case-study-detail .cs-v2-sec--2 .cs-section-narrative-heading { margin-bottom: 48px; }
}

/* Before → after cards inside a standard richtext section (Valmont results, 'v2_cards', Mo 2026-10-15):
   cancel the richtext bullet styling (36px indent + check background) on the cards. */
.rp-case-study-detail .cs-richtext-main-class ul.cs-v2-compare {
  margin: 0 0 24px;
  padding: 0;
}
.rp-case-study-detail .cs-richtext-main-class ul.cs-v2-compare li.cs-v2-cmp {
  padding: 12px 16px;
  margin: 0;
  background-image: none;
  list-style: none;
}
@media (max-width: 767px) {
  .rp-case-study-detail .cs-richtext-main-class ul.cs-v2-compare li.cs-v2-cmp {
    padding: 12px;
  }
}

/* Results quote box (Mo 2026-10-16, Figma): sits between the paragraph and the cards. */
.rp-case-study-detail .cs-v2-sec--2 .cs-v2-quote {
  margin: 0 0 24px;
}

/* ==========================================================================
   v2b — Tabby (Mo 2026-10-26, Figma RP--Resources 3185:72685). Only pages whose map entry has
   'v2b' => true render these classes (.cs-v2b*), so Mind Base / Valmont are unaffected.
   ========================================================================== */
/* Hero: the green brand badge stays in colour (shared rule turns logos white), at the same logo HEIGHT
   as the other case studies (70px desktop, 58px tablet/mobile — e.g. Podeo 240x70 / 200x58). */
.rp-case-study-detail img.cs-hero-sub-container-brand[src*="tabby-brand"] {
  filter: none !important;
  width: 174px !important;
  max-width: 174px !important;
  height: auto;
}
@media (max-width: 991px) {
  .rp-case-study-detail img.cs-hero-sub-container-brand[src*="tabby-brand"] {
    width: 144px !important;
    max-width: 144px !important;
  }
}

/* Narrative sections follow the Mind Base / shared case-study rules (Mo 2026-10-26: "same design consistency"):
   heading → content 48 / 40 / 32px (§Z), body 18/28 → 16/27, list items 16/27, quote boxes 20/24px padding,
   12px radius, 16/27 text. Only what Mind Base doesn't have is styled here. */
.rp-case-study-detail .cs-v2b .cs-v2b-intro p {
  margin: 0;
}
.rp-case-study-detail .cs-v2b.cs-v2-sec--0 .cs-v2-list--x { padding-top: 24px; }
.rp-case-study-detail .cs-v2b.cs-v2-sec--1 .cs-v2-list--check { padding-top: 24px; }
.rp-case-study-detail .cs-v2b.cs-v2-sec--1 .cs-v2-grid { gap: 32px; }
.rp-case-study-detail .cs-v2b.cs-v2-sec--1 .cs-v2-copy { flex: 0 1 620px; }
.rp-case-study-detail .cs-v2b.cs-v2-sec--0 .cs-v2-copy { flex: 0 1 660px; }
.rp-case-study-detail .cs-v2b.cs-v2-sec--0 .cs-v2-grid { justify-content: space-between; }

/* Pull quote: the Mind Base quote box + an author row (photo, name, title). */
.rp-case-study-detail .cs-v2b-quote,
.rp-case-study-detail .cs-v2b.cs-v2-sec--0 .cs-v2b-quote {
  margin: 24px 0 0; /* after the list (Mind Base's challenge quote sits first, hence 0 there) */
}
.rp-case-study-detail .cs-v2b-quote-body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rp-case-study-detail .cs-v2b-quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  quotes: none;
}
.rp-case-study-detail .cs-v2b-quote-by {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.rp-case-study-detail .cs-v2b-quote-avatar {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
}
.rp-case-study-detail .cs-v2b-quote-who {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  line-height: 22px;
  color: #021143;
}
.rp-case-study-detail .cs-v2b-quote-who b { font-weight: 700; }

/* "Why RemotePass" — navy band between the challenge and the solution. */
.rp-case-study-detail .cs-v2b-why {
  background: #021143;
  padding: 80px 24px;
  text-align: center;
}
.rp-case-study-detail .cs-v2b-why .getguide-rp-container {
  max-width: 1200px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rp-case-study-detail .cs-v2b-why-h {
  margin: 0 0 16px;
  font-size: 40px; /* = section headings: 40/48 → 34/42 (≤1199) → 28/36 (≤991) */
  line-height: 48px;
  font-weight: 700;
  color: #fff;
}
.rp-case-study-detail .cs-v2b-why-p {
  margin: 0;
  max-width: 988px;
  font-size: 18px; /* = body copy 18/28 → 16/27 */
  line-height: 28px;
  color: #fff;
}
.rp-case-study-detail .cs-v2b-why .cs-v2b-quote {
  width: 100%;
  max-width: 750px;
  margin-top: 32px;
  text-align: start;
  background: #f0f4fe;
}

/* Results: centred heading + before/after table (Figma 3185:73879). */
.rp-case-study-detail .cs-v2b-results .getguide-rp-container {
  max-width: 1200px !important;
}
.rp-case-study-detail .cs-v2b-results .cs-section-narrative-heading {
  max-width: 808px;
  margin: 0 auto 48px !important; /* §Z: 48 / 40 / 32 */
  text-align: center;
  color: #2a2a2a;
}
.rp-case-study-detail .cs-v2b-table {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}
.rp-case-study-detail .cs-v2b-tr {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr);
  min-width: 720px; /* below this the table scrolls sideways inside its card */
}
@media (max-width: 767px) {
  .rp-case-study-detail .cs-v2b-tr { grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr); min-width: 640px; }
}
.rp-case-study-detail .cs-v2b-th,
.rp-case-study-detail .cs-v2b-td {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.rp-case-study-detail .cs-v2b-th {
  min-height: 82px;
  box-sizing: border-box;
  font-size: 19px;
  letter-spacing: -0.19px;
}
.rp-case-study-detail .cs-v2b-th--before { color: #9b9b9b; align-items: flex-end; }
.rp-case-study-detail .cs-v2b-th--after { color: #021143; background: #f0f4fe; }
.rp-case-study-detail .cs-v2b-td { border-top: 1px solid #eeeff1; font-size: 16px; }
.rp-case-study-detail .cs-v2b-td--label { padding-inline-start: 20px; font-size: 18px; color: #021143; }
.rp-case-study-detail .cs-v2b-td--before { color: #6b7280; }
.rp-case-study-detail .cs-v2b-td--after { color: #114ef7; background: #f0f4fe; border-top-color: #dce5fd; }
.rp-case-study-detail .cs-v2b-cell-ic {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: inline-flex;
}
.rp-case-study-detail .cs-v2b-cell-ic .cs-v2-ic { width: 20px; height: 20px; }
.rp-case-study-detail .cs-v2b-cell-ic--x { color: #000; }
.rp-case-study-detail .cs-v2b-cell-ic--ok { color: #114ef7; }

/* Tablet / mobile */
@media (max-width: 1199px) {
  .rp-case-study-detail .cs-v2b .cs-v2-copy,
  .rp-case-study-detail .cs-v2b.cs-v2-sec--0 .cs-v2-copy,
  .rp-case-study-detail .cs-v2b.cs-v2-sec--1 .cs-v2-copy { flex: 1 1 auto; }
  .rp-case-study-detail .cs-v2b-why { padding: 56px 24px; }
  .rp-case-study-detail .cs-v2b-why-h { font-size: 34px; line-height: 42px; }
}
@media (max-width: 1023px) {
  .rp-case-study-detail .cs-v2b-results .cs-section-narrative-heading { margin-bottom: 40px !important; }
}
@media (max-width: 991px) {
  .rp-case-study-detail .cs-v2b-why-h { font-size: 28px; line-height: 36px; }
}
@media (max-width: 767px) {
  .rp-case-study-detail .cs-v2b-why-p { font-size: 16px; line-height: 27px; }
  .rp-case-study-detail .cs-v2b-results .cs-section-narrative-heading { margin-bottom: 32px !important; }
  /* Table stays a table on phones (Mo 2026-10-26): it scrolls sideways inside its rounded card, never the page. */
  .rp-case-study-detail .cs-v2b-th,
  .rp-case-study-detail .cs-v2b-td { padding: 16px; gap: 12px; }
  .rp-case-study-detail .cs-v2b-th { min-height: 64px; font-size: 16px; }
  .rp-case-study-detail .cs-v2b-td--label { font-size: 16px; }
}