/* ============================================================
   INVESTMENT CASE — Investor variant only
   Figma: 8106:87658 (desktop 1440x482) · 8214:57160 (tablet)
          8106:90016 (mobile 390x877)

   Desktop: moss ground, gutter 64, padding-block 90, gap 48,
            heading H2 white, four 316x200 cards, gap 16.
   Mobile:  padding-block 60, gap 40, cards stacked full width
            (350x132), gap 20.

   The card itself is .masaar-metric from base.css, shared with the
   Intro metrics. Only the ground and the value colour differ.
   ============================================================ */

.masaar-investment {
  background: var(--section-bg, var(--masaar-moss));
  padding-block: 60px;
}

.masaar-investment__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

/* Direct colour: the theme matches h2 directly and would win otherwise. */
.masaar-investment__heading {
  color: var(--masaar-white);
}

.masaar-investment__grid {
  display: grid;
  grid-template-columns: 1fr;
  /* 20 on mobile, 16 from tablet up. */
  gap: var(--space-20);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* White face on the moss ground, and the value picks up the brand colour
   rather than the near-black the Intro cards use. */
/* 12, not the shared card's 24: the mobile master's card is 132 tall, which
   is 16 padding + 43 value + 12 + 43 label + 16. At 24 it comes out at 142
   and the min-block-size never applies. Desktop uses space-between inside a
   200 box, so the gap there is only a floor. */
.masaar-investment .masaar-metric {
  min-block-size: 132px;
  gap: var(--space-12);
  background: var(--masaar-white);
}

.masaar-investment .masaar-metric__value {
  color: var(--masaar-moss);
}

/* From tablet up the section follows the desktop treatment — 90 padding and
   200-tall cards, measured off the tablet master (8214:57160), which differs
   from desktop only in being two columns instead of four. */
@media (min-width: 768px) {
  .masaar-investment { padding-block: 90px; }
  .masaar-investment__inner { gap: 48px; }

  .masaar-investment__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
  }

  .masaar-investment .masaar-metric {
    min-block-size: 200px;
    gap: var(--space-24);
  }
}

@media (min-width: 1200px) {
  /* 4 x 316 + 3 x 16 = 1312 = the content width. */
  .masaar-investment__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}