/* feature-tiles.css — illustrated tiles on navy, semi-transparent chrome. Scope: .rp-feature-tiles
   Net-new + self-contained + reusable (any page can drop an N-up illustrated tile row on navy).
   First use: Spend Cards "See every transaction in real-time" (Figma file BliGiNMu5qH2EStgHwk35S,
   frame 15924:33229; heading 15924:33232 / sub 15924:33234; cards 15924:33237/33332/33424).
   Built to the Figma-authoritative spec supplied by the Dispatch orchestrator (NOT the legacy
   live DOM, which used light-blue cards inside .rp-spend-features).

   This is NOT .rp-color-cards (solid fills, text-only). Here: illustrated tiles on a navy section,
   semi-transparent white card chrome, per-card title position via the --title-top modifier.

   typography carries !important so the spec beats any DB custom_css / global heading rules
   (mirrors .rp-color-cards / .rp-spend-pain). The classes are unique, so no other section's
   rules reach these — !important is belt-and-braces. */

/* Section — full-width navy #021143, 96px top/bottom pad. */
.rp-feature-tiles { background: #021143; padding: 96px 0; }

/* Container — content 1200 centred (so 120/120 horiz pad @1440). max-width 1248 = 1200 + 2×24,
   so at ≥1248 the 24px padding sits OUTSIDE the 1200 content (cards stay 378.66); below 1248 the
   24px keeps a gutter off the viewport edge. */
.rp-feature-tiles__inner { max-width: 1248px; margin: 0 auto; padding: 0 24px; }

/* Heading band — H5 32/40 white centred (max-w 687) + 16px gap + sub 20/28 white centred (max-w 517). */
.rp-feature-tiles .rp-feature-tiles__head {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 32px !important; line-height: 40px !important; font-weight: 700 !important;
  color: #FFFFFF !important;
  max-width: 687px; margin: 0 auto;
  text-align: center !important; margin-left: auto !important; margin-right: auto !important;
}
.rp-feature-tiles .rp-feature-tiles__sub {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 20px !important; line-height: 28px !important; font-weight: 400 !important;
  color: #FFFFFF !important;
  max-width: 517px; margin: 16px auto 0; text-align: center !important;
}

/* Card row — 3-up equal thirds (Figma "flex 1:1:1"), gap 32, 60px below the heading block.
   Realised with grid repeat(3,1fr) — 1fr tracks stay EXACTLY equal even though each card carries
   a 1px border (the .rp-color-cards lesson: border-box flex-basis:0 made bordered cards wider).
   Override grid-template-columns for a different card count. */
.rp-feature-tiles__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin: 60px auto 0; max-width: 1200px;
}

/* Card chrome (all 3 identical) — rgba white 5% on navy, 1px rgba white 10% border, radius 24,
   padding 33y/41x, inner flex column gap 24, items centred horizontally, fixed 489 tall. */
.rp-feature-tiles__item {
  box-sizing: border-box; min-width: 0;
  min-height: 489px; border-radius: 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 33px 41px;
  display: flex; flex-direction: column; gap: 24px; align-items: center;
}

/* Illustration — fills the ~296 inner content width (378.66 card − 2×41 pad), height auto. */
.rp-feature-tiles__illo {
  display: block; width: 100%; max-width: 296px; height: auto; margin: 0 auto;
}

/* Card title — Mulish Bold 16/24, white, centred, max-w 334 (caps below the ~296 inner width). */
.rp-feature-tiles .rp-feature-tiles__title {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 16px !important; line-height: 24px !important; font-weight: 700 !important;
  color: #FFFFFF !important;
  max-width: 334px; margin: 0; text-align: center !important;
}

/* --title-top — card 2 only: title ABOVE the illustration. DOM order stays illo→title for source
   consistency; reorder via `order` (keeps top-packing, unlike column-reverse which flips justify). */
.rp-feature-tiles__item--title-top .rp-feature-tiles__title { order: 1; }
.rp-feature-tiles__item--title-top .rp-feature-tiles__illo  { order: 2; }

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

/* ── RTL: layout is centre-symmetric (centred head/sub/cards), so only the source-language note
   applies. align-items:center + text-align:center already mirror correctly. */
[dir="rtl"] .rp-feature-tiles__title { text-align: center !important; }