/* AUTO-GENERATED from solution-cards.css via rtlcss + manual RTL overrides (spec §6). */
/* =========================================================================
   rp-solution-cards — component styles (Figma node 7712)
   Scope: .rp-ksolcards (outer Kadence Row Layout className).
   Card bg / padding / radius + section bg / padding come from Kadence block
   ATTRIBUTES (column background/borderRadius/padding, row bgColor/padding).
   This file = typography / colours / card layout / white-on-blue recolour only.
   ========================================================================= */

/* ---- H2 (Advanced Heading, two-tone, no Webflow capitalize) ----------- */
.rp-ksolcards .rp-solcards-h2 {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  text-align: center;
  text-transform: none;
  color: #2A2A2A;
  margin: 0 auto 48px;
  max-width: 1000px;
}
.rp-ksolcards .rp-solcards-h2 .highlight-it-blue { color: #114EF7; }

/* ---- card (whole card is the link; fills its Kadence column) ---------- */
.rp-ksolcards .rp-solcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.rp-ksolcards .rp-solcard-iconbox {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100px;
  height: 100px;
}
.rp-ksolcards .rp-solcard-icon { display: block; }
.rp-ksolcards .rp-solcard-title {
  display: block;
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #151515;
  margin: 0 0 8px;
}
.rp-ksolcards .rp-solcard-body {
  display: block;
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: #545454;
  flex: 1 1 auto;          /* push the arrow to the bottom */
}
.rp-ksolcards .rp-solcard-arrow {
  display: block;
  width: 32px;
  height: 32px;
  margin-top: 24px;
  align-self: flex-start;
}

/* ---- hover state: every card turns blue (no card is highlighted by default) --- */
.rp-ksolcards [class*="solcards_card"] > .kt-inside-inner-col { background-color: #E4EBFE !important; transition: background-color .2s ease, color .2s ease; }
.rp-ksolcards [class*="solcards_card"] > .kt-inside-inner-col:hover { background-color: #114EF7 !important; }
/* !important so hover white wins over per-card colours (card3). Mohamed 2026-07-07. */
.rp-ksolcards [class*="solcards_card"] > .kt-inside-inner-col:hover .rp-solcard-title,
.rp-ksolcards [class*="solcards_card"] > .kt-inside-inner-col:hover .rp-solcard-body { color: #ffffff !important; }
.rp-ksolcards [class*="solcards_card"] > .kt-inside-inner-col:hover .rp-solcard-icon,
.rp-ksolcards [class*="solcards_card"] > .kt-inside-inner-col:hover .rp-solcard-arrow { filter: brightness(0) invert(1) !important; }

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 991px) {
  .rp-ksolcards .rp-solcards-h2 { font-size: 32px; line-height: 40px; }
}
@media (max-width: 767px) {
  .rp-ksolcards .rp-solcards-h2 { font-size: 26px; line-height: 34px; margin-bottom: 32px; }
  .rp-ksolcards .rp-solcard-iconbox { width: 80px; height: 80px; }
}

/* ---- spec §6 RTL overrides ---- */
.rp-ksolcards .rp-solcard-arrow { align-self: flex-start; transform: scaleX(-1); }
.rp-ksolcards .rp-solcard-title { text-transform: none; letter-spacing: 0; }

/* FIX 2026-07-02 (responsive): mirror solution-cards.css — kill the 120px desktop side padding
   on mobile/tablet so the stacked cards go full-width (AR home). */
@media (max-width: 991px) {
  .rp-ksolcards > .kt-row-column-wrap,
  .kb-row-layout-idsolcards_o > .kt-row-column-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  /* drop the 300px floor so stacked/2-up cards size to content. Mohamed 2026-07-07. */
  .rp-ksolcards .rp-solcard { min-height: 0; }
}