/*!
 * Impact Numbers — 1:3475 - 1:3500, including the 971.999 x 399.812 panel.
 *
 * Figma 1:3433 in the Monal-Pages file AlYDxKHhVoiNp5UI47BElc — note this is
 * NOT the file the Newsroom/Awards page came from, so node ids do not carry.
 *
 * Split from design/impact.css, which stays the source of truth. Mobile first;
 * desktop values are the frame's, as --monal-u units (1u == 1 Figma px / 10).
 */



/* ==========================================================================
   2. BIG IMPACT NUMBERS  1:3475
   ========================================================================== */
/* Below 1200 every section leads with the shared --monal-page-gap
   (monal-pages.css: 6u on phones, 8u from 768), the same rhythm Leadership
   uses. The desktop rules replace it with each band's Figma gap. */
.monal-impact-numbers { position: relative; padding: var(--monal-page-gap) 0 0; }

.monal-impact-numbers__grid { display: grid; gap: calc(var(--monal-u) * 3); }

.monal-impact-numbers__label {
  margin: calc(var(--monal-u) * 2.4) 0 0;
  font-weight: 500; text-transform: uppercase;
  font-size: max(calc(var(--monal-u) * 1.5), 12px); line-height: calc(var(--monal-u) * 2.8);
}

.monal-impact-numbers__text {
  margin: calc(var(--monal-u) * 1.2) 0 0;
  width: min(100%, calc(var(--monal-u) * 43.93));
}


/* 1:3478 — not a flat panel: a #787878 wash at 10%, full strength on the
   left and fading out to the right, with a 1px #ED782C rule down the left
   edge (Vector 32 in the exported group). */
/* One column on a phone: at 375 a two-up grid leaves 124 per cell, which is
   narrower than the placeholder value, so the columns ran into each other. */
.monal-impact-stats {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--monal-u) * 2.4) calc(var(--monal-u) * 3);
  margin: 0; padding: calc(var(--monal-u) * 2.4); list-style: none;
  border-left: 1px solid var(--monal-c-orange);
  background: linear-gradient(to right, rgba(120, 120, 120, .1), rgba(120, 120, 120, 0));
}

/* 1:3484 — Libertinus Serif Display 34/51.481, tracking -1.36. */
.monal-impact-stat__v {
  display: block; overflow-wrap: anywhere;
  font-family: var(--monal-f-display); font-weight: 400;
  font-size: max(calc(var(--monal-u) * 2.4), 20px); line-height: 1.2;
  letter-spacing: -.04em; color: var(--monal-c-ink);
}

/* 1:3485 — Poppins Regular 24 at 70%. */
.monal-impact-stat__k {
  display: block; margin-top: calc(var(--monal-u) * .8);
  font-size: max(calc(var(--monal-u) * 1.6), 13px); line-height: 1.4;
  color: var(--monal-c-muted);
}

@media (min-width: 768px) {
  
    .monal-impact-numbers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  
    .monal-impact-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  
  
    /* --- numbers --------------------------------------------------------- */
    /* The hero ends with the tab row (752.34 + 28); 1:3478 is at y930.34, so
       the gap is 150. */
    .monal-impact-numbers { padding-top: calc(var(--monal-u) * 15); }
  
    .monal-impact-numbers__grid {
      grid-template-columns: calc(var(--monal-u) * 56) calc(var(--monal-u) * 97.2);
      gap: 0;
      align-items: start;
    }
  
    /* 1:3497 — 66/78, w353.496, y952.24 (21.9 into the band). */
    /* 1:3497 carries Figma's capitalize, so it reads "Big Impact Numbers". */
    .monal-impact-numbers .monal-impact-numbers__title {
      text-transform: capitalize;
      width: calc(var(--monal-u) * 35.35);
      margin-top: calc(var(--monal-u) * 2.19);
      font-size: calc(var(--monal-u) * 6.6); line-height: calc(var(--monal-u) * 7.8);
      letter-spacing: calc(var(--monal-u) * -.264);
    }
  
    /* 1:3500 at y1158.24 — 50 under the two-line title; 1:3499 20 after that. */
    .monal-impact-numbers__label {
      margin-top: calc(var(--monal-u) * 5);
      font-size: calc(var(--monal-u) * 2.2); line-height: calc(var(--monal-u) * 2.8);
    }
  
    .monal-impact-numbers__text {
      width: calc(var(--monal-u) * 43.93); margin-top: calc(var(--monal-u) * 2);
      font-size: calc(var(--monal-u) * 2.2); line-height: calc(var(--monal-u) * 3.4);
    }
  
    /* 1:3478 — 971.999 x 399.812, values at x860/x1197 (112 and 449 in).
       Both the value and its label inherit 1:3481's 51.481 leading, which is
       what makes the panel add up:
         64.73 + 51.481 + 8.689 + 51.481 + 60.519 + 51.481 + 8.689 + 51.481
         + 51.251 = 399.81 */
    .monal-impact-stats {
      width: calc(var(--monal-u) * 97.2);
      grid-template-columns: calc(var(--monal-u) * 33.7) 1fr;
      gap: calc(var(--monal-u) * 6.052) 0;
      padding: calc(var(--monal-u) * 6.473) calc(var(--monal-u) * 11.2) calc(var(--monal-u) * 5.125);
      align-content: start;
    }
  
    .monal-impact-stat__v {
      font-size: calc(var(--monal-u) * 3.4); line-height: calc(var(--monal-u) * 5.148);
      letter-spacing: calc(var(--monal-u) * -.136);
    }
  
    /* 1:3485 at y1055.24 — 8.689 under the value. */
    .monal-impact-stat__k {
      margin-top: calc(var(--monal-u) * .869);
      font-size: calc(var(--monal-u) * 2.4); line-height: calc(var(--monal-u) * 5.148);
    }
}