/* color-cards.css — generic per-card colour-token grid component. Scope: .rp-color-cards
   Net-new + self-contained + reusable (any page can drop a 3-up — or other — solid-colour
   text-card row). First use: Spend Cards "Get complete control over your team's spending"
   (Figma file BliGiNMu5qH2EStgHwk35S, frame 15916:14179 / inner row 15924:17599; heading via
   Feature Content 15916:14182). Built to the Figma-authoritative spec (NOT the legacy live DOM).

   Per-card fill/text are TOKENS driven by modifiers:
     .rp-color-cards__item--navy  → #021143 bg / white text + shadow
     .rp-color-cards__item--blue  → #114EF7 bg / white text + shadow
     .rp-color-cards__item--light → #FAFBFF bg / #021143 text + 1px #e2e8f0 border
   or override --rpcc-bg / --rpcc-fg directly for other combinations.

   typography carries !important so the spec beats any DB custom_css / global heading rules
   (mirrors the .rp-spend-pain pattern). The classes are unique so the "rp-intro-standard"
   custom_css (#7797) targeting .rp-intro__* does NOT reach these — !important is belt-and-braces. */

.rp-color-cards { padding: 80px 24px; text-align: center; }

/* Section heading — Mulish Bold 40/48, centred, two-tone. Line 1 #021143; .hl line 2 #114EF7.
   .hl is display:block (NOT a <br>) so the sentence-case engine keeps "your" lowercase. */
.rp-color-cards .rp-color-cards__head {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 40px !important; line-height: 48px !important; font-weight: 700 !important;
  color: #021143 !important;
  max-width: 720px; margin: 0 auto;
  text-align: center !important; margin-left: auto !important; margin-right: auto !important;
}
.rp-color-cards .rp-color-cards__head .hl { display: block; color: #114EF7 !important; }

/* Description — Mulish Reg 20/28 #696969, centred, 16px below the heading block. */
.rp-color-cards .rp-color-cards__sub {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 20px !important; line-height: 28px !important; font-weight: 400 !important;
  color: #696969 !important;
  max-width: 720px; margin: 16px auto 0; text-align: center;
}

/* 3-up row — equal thirds (the spec's flex 1:1:1), gap 32, container 1200. Realised with CSS
   grid repeat(3,1fr) rather than flex 1 1 0: 1fr tracks stay EXACTLY equal even though the
   light card carries a 1px border (border-box flex-basis:0 made the bordered card ~4px wider).
   (heading→cards gap 48 is not in the Figma token dump; chosen to sit between the 16px head/sub
   gap and the 80px section pad.) Override grid-template-columns for a different card count. */
.rp-color-cards__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  max-width: 1200px; margin: 48px auto 0;
}

/* Card — fills its 1fr track, 314 tall, radius 32, dark-card padding 40x/48y. box-sizing keeps
   the light card's 1px border inside the 314 box (its padding insets to 41/49 to compensate). */
.rp-color-cards__item {
  box-sizing: border-box; min-width: 0;
  min-height: 314px; border-radius: 32px;
  padding: 48px 40px;
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  background: var(--rpcc-bg, #021143); color: var(--rpcc-fg, #FFFFFF);
}
.rp-color-cards__item--navy  { --rpcc-bg: #021143; --rpcc-fg: #FFFFFF; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }
.rp-color-cards__item--blue  { --rpcc-bg: #114EF7; --rpcc-fg: #FFFFFF; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }
.rp-color-cards__item--light { --rpcc-bg: #FAFBFF; --rpcc-fg: #021143; border: 1px solid #e2e8f0; padding: 49px 41px; }

/* Icon — 48x48 at the top, then a 32px gap before the heading (via the title's margin-top). */
.rp-color-cards__icon { display: block; width: 48px; height: 48px; }
.rp-color-cards__icon img,
.rp-color-cards__icon svg { display: block; width: 48px; height: 48px; }

/* Card heading — Mulish Bold 24/30, colour inherits the card's --rpcc-fg token. */
.rp-color-cards .rp-color-cards__title {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 24px !important; line-height: 30px !important; font-weight: 700 !important;
  color: var(--rpcc-fg, #FFFFFF) !important;
  margin: 32px 0 0;
}

/* ── Tablet + mobile (<= 991px): stack 1-up, relax the fixed height, scale the heading
   to the kit's section-header mobile scale (28/36) — consistent with .rp-intro/.rp-lp-pain. */
@media (max-width: 991px) {
  .rp-color-cards { padding: 56px 20px; }
  .rp-color-cards .rp-color-cards__head { font-size: 28px !important; line-height: 36px !important; }
  .rp-color-cards__grid { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .rp-color-cards__item { min-height: 0; }
}

/* ── RTL: cards align to the right; flex-row mirrors card order automatically. */
[dir="rtl"] .rp-color-cards__item { text-align: right; align-items: flex-end; }