/* rp-cm-visibility — "Manage contractors with the same visibility as employees".
   Figma 15642:8477. Three columns, each pairing a product visual with a feature.
   The MIDDLE column leads with its text (visual below); the SIDE columns lead with
   the visual (text below). That ordering + top alignment produces the staggered
   look from the design. Scope: .rp-cm-visibility. EN + AR (RTL auto-flips the
   column order). */
/* full-bleed background (#f5f7fa). The section sits in a width-constrained block-theme
   layout (.rp-container max-width 1300px + 1180px content-size), so it doesn't reach the
   viewport edges on its own. Force it to true viewport width and pull it out of the
   constraint; the inner .rp-cm-vis__head / __grid keep their own centred max-widths.
   The compound .rp-cm-visibility.rp-container selector beats the .rp-container cap. */
.rp-cm-visibility.rp-container {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background-color: #EEF3FF; /* beat migration.min.css .rp-section{background:#fff} */
}
.rp-cm-visibility {
  position: relative;
  padding: 80px 24px;
  background-color: #EEF3FF;
}

/* ---- heading ---- */
.rp-cm-vis__head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.rp-cm-vis__heading {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 40px; line-height: 48px; font-weight: 700; color: #021143; margin: 0 0 16px;
}
/* beat the legacy .rp-contractors .new-rp-section-header {3rem}; Figma = 40/48 */
body.page-template-page-contractors .rp-cm-vis__heading { font-size: 40px; line-height: 48px; }
.rp-cm-vis__heading .rp-blue { color: #114EF7; }
.rp-cm-vis__sub { font-family: Mulish, sans-serif; font-size: 18px; line-height: 1.5; color: #545454; margin: 0; }

/* ---- 3-column staggered grid ---- */
.rp-cm-vis__grid {
  max-width: 1216px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: 32px; align-items: start;
}
.rp-cm-vis__col { display: flex; flex-direction: column; gap: 24px; }
/* middle column leads with text and sits ~48px lower (Figma: text y61 / visual y133) */
.rp-cm-vis__col--media-bottom { margin-top: 48px; }
.rp-cm-vis__media { margin: 0; }
.rp-cm-vis__media img { width: 100%; height: auto; display: block; }
.rp-cm-vis__copy { padding: 0 8px; }
.rp-cm-vis__title {
  font-family: Mulish, sans-serif; font-size: 22px; line-height: 28px; font-weight: 700; color: #021143; margin: 0 0 12px;
}
.rp-cm-vis__text {
  font-family: Mulish, sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; color: #545454; margin: 0;
}

/* ---- responsive: stack into a single column ---- */
@media (max-width: 991px) {
  .rp-cm-visibility { padding: 56px 20px; }
  .rp-cm-vis__heading,
  body.page-template-page-contractors .rp-cm-vis__heading { font-size: 28px; line-height: 36px; }
  .rp-cm-vis__sub { font-size: 16px; }
  .rp-cm-vis__grid { grid-template-columns: 1fr; row-gap: 48px; max-width: 460px; }
  .rp-cm-vis__col { gap: 16px; }
  /* stack: drop the desktop offset, lead every card with its visual */
  .rp-cm-vis__col--media-bottom { margin-top: 0; flex-direction: column-reverse; }
}