/* =========================================================================
   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 76px;   /* Figma gap H2->cards ~77px */
  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%;
  min-height: 300px;       /* Figma card outer ~338px incl. 16+16 column padding */
  text-decoration: none;
  color: inherit;
  /* D2 fix (2026-07-03): the whole card is one <a>; on touch, tapping it flashed the
     browser-default -webkit-tap-highlight-color (translucent black) across the full card
     ("black box on click"). The reset previously existed only on .w-nav-button. Disable it
     on the card link so the tap shows no black overlay. */
  -webkit-tap-highlight-color: transparent;
}
.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 the hover white wins over per-card colours set in block settings
   (e.g. Direct Employees / card3 had its own text colour + a stray rp-solcard-blue
   class → text stayed dark on hover). 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; }
  /* FIX 2026-07-02 (responsive): the outer Kadence row keeps its 120px desktop side padding on
     mobile/tablet (no responsive override in the block attrs), squeezing the stacked cards to ~150px.
     Force a normal mobile gutter so the cards go full-width. */
  .rp-ksolcards > .kt-row-column-wrap,
  .kb-row-layout-idsolcards_o > .kt-row-column-wrap { padding-left: 20px !important; padding-right: 20px !important; }
}
@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; }
}
/* Equal-height cards whenever side-by-side (tablet 768 + desktop) — [AT1].
   The card already sets height:100%; stretch the Kadence columns so every card in a
   flex line matches the tallest (was: cards sized to their own content -> ragged bottoms).
   Scoped to >=768 so the stacked mobile view (<=767) is untouched. */
@media (min-width: 768px) {
  .rp-ksolcards > .kt-row-column-wrap { align-items: stretch; }
  .rp-ksolcards [class*="solcards_card"],
  .rp-ksolcards [class*="solcards_card"] > .kt-inside-inner-col { height: 100%; }
}
/* Tablet + mobile: drop the 300px min-height floor so cards size to content
   (equal-height still comes from the >=768 stretch for same-row siblings; a
   stacked 1-up mobile card no longer forces empty height). Mohamed 2026-07-07. */
@media (max-width: 991px) {
  .rp-ksolcards .rp-solcard { min-height: 0; }
}