/*!
 * Impact People — 1:3501 - 1:3531, the tile cluster and the three strands.
 *
 * 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).
 */



/* ==========================================================================
   3. EMPOWERING PEOPLE  1:3501
   ========================================================================== */
/* The decorative glow bleeds past the right edge, as it does in the frame,
   so the band clips it rather than letting it widen the page. */
.monal-impact-people { position: relative; overflow-x: clip; padding: var(--monal-page-gap) 0 0; }

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

.monal-impact-people__text { margin: calc(var(--monal-u) * 2) 0 0; }

.monal-impact-people__text p + p { margin-top: calc(var(--monal-u) * 2.4); }


/* 1:3508 — three labelled columns under the copy. Three abreast leaves each
   about 96 wide on a phone, which is narrower than the word "Employment", so
   they stack until there is room. */
.monal-impact-pillars {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--monal-u) * 2);
  margin: calc(var(--monal-u) * 3) 0 0; padding: 0; list-style: none;
}

.monal-impact-pillar h3 {
  margin: 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);
  color: var(--monal-c-green);
}

.monal-impact-pillar p {
  margin: calc(var(--monal-u) * .8) 0 0;
  font-size: max(calc(var(--monal-u) * 1.4), 12px); line-height: calc(var(--monal-u) * 2.5);
  color: var(--monal-c-muted);
}


/* --- the pill cluster 1:3517 -------------------------------------------- */
/* Seven rounded tiles in four columns on a 227.57 pitch (213.288 wide, 14.282
   gutter), in two heights — 367.49 tall and 224 short — with 15 between the
   two tiles of a column. Columns 1-3 start level; column 4 drops 239, which
   is exactly short + 15, so every column ends together at 606.49.
   Mobile has no frame, so it halves to two columns. */
.monal-impact-pills {
  position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--monal-u) * 1.43);
  margin: 0; padding: 0; list-style: none;
}

.monal-impact-pills__col { display: flex; flex-direction: column; gap: calc(var(--monal-u) * 1.5); }

.monal-impact-pill {
  position: relative; display: grid; place-items: center;
  border-radius: calc(var(--monal-u) * 23);
  aspect-ratio: 213.288 / 367.49;
  text-align: center;
  overflow: hidden;
}

.monal-impact-pill--short { aspect-ratio: 213.288 / 224; }

.monal-impact-pill__t {
  font-weight: 600; opacity: .7; text-transform: uppercase;
  font-size: max(calc(var(--monal-u) * 1.2), 10px); line-height: calc(var(--monal-u) * 2.64);
}

/* The four fills, named for the frame. */
.monal-impact-pill--green { background: linear-gradient(to bottom, #2c5a4f, #5ec0a9); color: #fff; }

/* 1:3519 / 1:3523 are "to-t, from #f26b23" inside a rotate-180 wrapper, which
   nets out as #f26b23 at the top fading down to #ffe5d7. */
.monal-impact-pill--orange { background: linear-gradient(to bottom, #f26b23, #ffe5d7); color: #fff; }

.monal-impact-pill--peach { background: #ffe5d7; color: var(--monal-c-ink); }

.monal-impact-pill--mint { background: #bde2d9; color: var(--monal-c-ink); }

/* 1:3522 is the gradient at 20% opacity. It carries the monogram, so the
   opacity goes on the paint rather than the tile — otherwise the M fades
   with it. */
.monal-impact-pill--wash { background: none; }

.monal-impact-pill--wash::before {
  content: ""; position: absolute; inset: 0; opacity: .2;
  background: linear-gradient(to bottom, rgba(237, 120, 44, 0) 20.231%, #ed782c 159.91%);
}

/* 1:3525 — the monogram is drawn, not set: a 95.265 x 65.513 glyph. The
   label stays in the markup for assistive tech and is hidden visually. */
.monal-impact-pills__m {
  position: relative;
  display: block; width: calc(var(--monal-u) * 9.527); height: calc(var(--monal-u) * 6.551);
  background: var(--monal-c-orange);
  -webkit-mask: url(../../assets/monal/img/pages/impact-m.svg) center / contain no-repeat;
  mask: url(../../assets/monal/img/pages/impact-m.svg) center / contain no-repeat;
  font-size: 0; color: transparent;
}

@media (max-width: 767px) {
  
    .monal-impact-pills__col:nth-child(n+3) { display: none; }
}

@media (min-width: 768px) {
  
    /* The cluster takes its four columns here, with the fourth dropped as in
       the frame. */
    .monal-impact-pills { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  
    .monal-impact-pills__col--drop { padding-top: 18%; }
  
    .monal-impact-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  
  
    /* --- people ---------------------------------------------------------- */
    /* 1:3518 — the cluster starts at y1517.48, 187.33 under the stats panel. */
    .monal-impact-people { padding-top: calc(var(--monal-u) * 18.733); }
  
    /* 1:3463 — the second blurred glow, off the right edge beside the tiles. */
    .monal-impact-people::before {
      content: ""; position: absolute; z-index: -1; pointer-events: none;
      left: 50%; margin-left: calc(var(--monal-u) * 66.2);
      top: calc(var(--monal-u) * 24.548);
      width: calc(var(--monal-u) * 65.336); height: calc(var(--monal-u) * 65.336);
      background: url(../../assets/monal/img/pages/impact-glow.svg) center / 100% 100% no-repeat;
    }
  
    /* Not two columns: the cluster runs x188-1084 and the text column starts at
       x948, so they share horizontal space — the fourth tile column drops below
       the heading rather than sitting beside it. Both children therefore take
       the same grid cell and the row grows to whichever is taller. */
    .monal-impact-people__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
    }
  
    .monal-impact-people__grid > * { grid-area: 1 / 1; }
  
    .monal-impact-people__col { margin-left: calc(var(--monal-u) * 76); width: calc(var(--monal-u) * 78.4); }
  
    /* 1:3503 — 66/78, w784, y1543.97 (26.49 into the band). */
    .monal-impact-people .monal-impact-people__title {
      width: calc(var(--monal-u) * 78.4);
      margin-top: calc(var(--monal-u) * 2.649);
      font-size: calc(var(--monal-u) * 6.6); line-height: calc(var(--monal-u) * 7.8);
      letter-spacing: calc(var(--monal-u) * -.264);
    }
  
    /* 1:3505 — w560, y1760.49, 60.52 under the two-line title. */
    /* The heading starts at x948 but the copy and the strands are indented to
       x1172 — 224 further in — which is what keeps them clear of the fourth
       tile column (it ends at x1084). */
    .monal-impact-people__text {
      width: calc(var(--monal-u) * 56); margin-top: calc(var(--monal-u) * 6.05);
      margin-left: calc(var(--monal-u) * 22.4);
      font-size: calc(var(--monal-u) * 2.2); line-height: calc(var(--monal-u) * 3.2);
    }
  
    .monal-impact-people__text p + p { margin-top: calc(var(--monal-u) * 3.2); }
  
    /* 1:3508 — y2002.49, 50 under the copy. Columns at x1172/1372.8/1585.94. */
    /* Columns at x1172 / x1372.8 / x1585.94, so pitches of 200.8 and 213.14. */
    .monal-impact-pillars {
      grid-template-columns: calc(var(--monal-u) * 20.08) calc(var(--monal-u) * 21.31) 1fr;
      gap: 0;
      margin: calc(var(--monal-u) * 5) 0 0 calc(var(--monal-u) * 22.4);
    }
  
    .monal-impact-pillar h3 {
      font-size: calc(var(--monal-u) * 2.2); line-height: calc(var(--monal-u) * 2.8);
    }
  
    /* 1:3509 at y2044.97 — 42.48 under the label. */
    .monal-impact-pillar p {
      margin-top: calc(var(--monal-u) * 1.45);
      font-size: calc(var(--monal-u) * 2); line-height: calc(var(--monal-u) * 2.5);
    }
  
    .monal-impact-pillar:nth-child(1) p { width: calc(var(--monal-u) * 14.36); }
  
    .monal-impact-pillar:nth-child(2) p { width: calc(var(--monal-u) * 16.46); }
  
    .monal-impact-pillar:nth-child(3) p { width: calc(var(--monal-u) * 14.61); }
  
  
    /* Four 213.288 columns on a 227.57 pitch, the tiles at the frame's exact
       heights so the cluster closes on 606.49. */
    .monal-impact-pills {
      width: calc(var(--monal-u) * 89.57);
      grid-template-columns: repeat(4, calc(var(--monal-u) * 21.33));
      gap: calc(var(--monal-u) * 1.43);
    }
  
    .monal-impact-pills__col { gap: calc(var(--monal-u) * 1.5); }
  
    /* 1:3519 starts 239 lower, which is the short tile plus the 15 gap. */
    .monal-impact-pills__col--drop { padding-top: calc(var(--monal-u) * 23.9); }
  
    .monal-impact-pill { aspect-ratio: auto; height: calc(var(--monal-u) * 36.749); }
  
    .monal-impact-pill--short { aspect-ratio: auto; height: calc(var(--monal-u) * 22.4); }
  
    .monal-impact-pill__t {
      font-size: max(calc(var(--monal-u) * 1.694), 12px); line-height: calc(var(--monal-u) * 2.636);
    }
  
    .monal-impact-pills__m { font-size: calc(var(--monal-u) * 7.2); }
}