/*!
 * Monal Group — monal-lead-values
 *
 * Converted from design/pages.css (the approved HTML prototype).
 * Desktop values come straight from Figma 329:3500: every length is
 * Figma px / 10 expressed in --monal-u.
 */

/* ==========================================================================
   LEADERSHIP — values   329:3500 - 329:3549
   Three 500x197 cards, pitch 521.09, each with a 122.8 orange tile
   overlapping the top-right corner and a rule under the title.
   ========================================================================== */
.monal-lead-values { position: relative; padding-top: var(--monal-page-gap); }
.monal-lead-values__head { text-align: center; }
.monal-lead-values__lead { margin: calc(var(--monal-u) * 1.6) auto 0; max-width: calc(var(--monal-u) * 94.82); }
.monal-lead-values__grid {
  display: grid; gap: calc(var(--monal-u) * 5.2);
  margin-top: calc(var(--monal-u) * 6);
  list-style: none;
}
/* The Home page restores its grids at 768 (brands goes to three columns
   there), so the value row does the same instead of staying stacked all the
   way to 1200 - three full-width cards waste a tablet viewport. */
@media (min-width: 768px) {
  .monal-lead-values__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(var(--monal-u) * 2.4);
  }
}
.monal-value {
  position: relative;
  padding: calc(var(--monal-u) * 2.4) calc(var(--monal-u) * 2.4) calc(var(--monal-u) * 2.4) calc(var(--monal-u) * 2.4);
  border-radius: 0 calc(var(--monal-u) * 3) 0 calc(var(--monal-u) * 3);
  min-height: calc(var(--monal-u) * 19.73);
}
.monal-value--dark { background: var(--monal-c-green); color: #fff; }
.monal-value--light { background: #fff; border: 1px solid rgba(44, 90, 79, .2); color: var(--monal-c-ink); }
.monal-value__title {
  font-family: var(--monal-f-display); font-weight: 400;
  font-size: max(calc(var(--monal-u) * 2.4), 22px); line-height: 1.05; letter-spacing: -.04em;
}
.monal-value--light .monal-value__title { color: var(--monal-c-green); }
.monal-value__rule {
  display: block; width: calc(var(--monal-u) * 9.36); height: 1px;
  margin-top: calc(var(--monal-u) * .8);
  background: currentColor; opacity: .45;
}
.monal-value__text {
  margin-top: calc(var(--monal-u) * 1.2);
  font-size: max(calc(var(--monal-u) * 1.5), 14px); line-height: 1.4; opacity: .7;
}
.monal-value__tile {
  position: absolute; right: calc(var(--monal-u) * 1.6); top: calc(var(--monal-u) * -2.4);
  width: calc(var(--monal-u) * 8); height: calc(var(--monal-u) * 8);
  background: center / contain no-repeat;
  display: grid; place-items: center;
}
.monal-value__tile i {
  display: block; width: 55%; height: 55%;
  background: center / contain no-repeat;
}

@media (min-width: 1200px) {
  /* Figma band 1700 - 2360; H2 at y1755.28. */
  .monal-lead-values { padding-top: calc(var(--monal-u) * 5.53); min-height: calc(var(--monal-u) * 66); }
  .monal-lead-values__lead { margin-top: calc(var(--monal-u) * 5.37); width: calc(var(--monal-u) * 94.82); max-width: none; line-height: calc(var(--monal-u) * 3.6); }
  .monal-lead-values__grid {
    grid-template-columns: repeat(3, calc(var(--monal-u) * 50.1));
    gap: calc(var(--monal-u) * 2.01);
    justify-content: space-between;
    margin-top: calc(var(--monal-u) * 13.02);
  }
  .monal-value {
    height: calc(var(--monal-u) * 19.73); min-height: 0;
    padding: calc(var(--monal-u) * 2.79) calc(var(--monal-u) * 4) 0;
  }
  .monal-value__title { font-size: calc(var(--monal-u) * 3.2); line-height: calc(var(--monal-u) * 4.2); letter-spacing: calc(var(--monal-u) * -.128); }
  /* Figma sets "Vision" at 40px where the other two are 32px. */
  .monal-value--first .monal-value__title { font-size: calc(var(--monal-u) * 4); letter-spacing: 0; }
  /* Figma sets the rule beside the title, not under it: node 329:3532 starts
     at x351.3 where the "Vision" glyphs end at 331.4 - a ~20 gap on the same
     line. Both go inline-block so they share a line. */
  .monal-value__title { display: inline-block; vertical-align: middle; }
  .monal-value__rule {
    display: inline-block; vertical-align: middle;
    width: calc(var(--monal-u) * 9.36);
    margin: 0 0 0 calc(var(--monal-u) * 1.73);
  }
  .monal-value__text { margin-top: calc(var(--monal-u) * .9); width: calc(var(--monal-u) * 39.02); font-size: calc(var(--monal-u) * 2); line-height: calc(var(--monal-u) * 2.8); }
  /* Figma 329:3530: tile at x540.56, 122.836 square, against a card running
     188.43 -> 689.394 - so its right edge sits 26 INSIDE the card, not
     hanging over it. The old -2.1 pushed it 21 past the edge and into the
     neighbouring card. */
  .monal-value__tile {
    right: calc(var(--monal-u) * 2.6); top: calc(var(--monal-u) * -5.82);
    width: calc(var(--monal-u) * 12.28); height: calc(var(--monal-u) * 12.28);
  }
}

/* Figma 329:3514 — the ellipse bleeding off the left edge. */
.monal-lead-values > .monal-page__deco {
  left: calc(var(--monal-u) * -11.3); top: calc(var(--monal-u) * -24);
  width: calc(var(--monal-u) * 65.34); height: calc(var(--monal-u) * 65.34);
  background-image: url(../../assets/monal/img/pages/lead-ellipse.svg);
}
/* Desktop: the node map puts 329:3514 beside the HERO (centre (0, 539)), not
   here - it hung 1248 too low, so the hero lost its glow. The hero widget now
   draws it (.monal-lead-hero__glow). This section instead draws 329:3515
   (225.357 at x1777.69, y1709.72), which sits beside these cards: centre
   (1890.37, 1822.4), so the blurred 653.357 box starts at (1563.69, 1495.72)
   and this section at y1700. It must be drawn from here: Elementor's
   lazy-load blanks backgrounds in a container until that container nears the
   viewport, so art painted far outside its own section (as the gallery's copy
   was, 865 above it) never appears. z-index -1 keeps it under the cards. */
@media (min-width: 1200px) {
  .monal-lead-values > .monal-page__deco {
    z-index: -1;
    left: calc(50% + var(--monal-u) * 60.369); top: calc(var(--monal-u) * -20.428);
  }
}