/*!
 * Impact Cards — 1:3605 - 1:3626, three outlined cards with icon discs.
 *
 * 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).
 */



/* ==========================================================================
   4. MAKING A DIFFERENCE  1:3605
   ========================================================================== */
/* --monal-impact-disc drives the whole icon disc, so desktop and mobile only
   differ in that one value. Figma 1:3613: a 130 disc, 63 of it above the card
   (1:3611 at y2726.68), with the 63.993 icon (1:3622 / 1:3624 / 1:3626)
   centred in it. Below 1200 the disc is a derived 100, everything scaled
   with it. */
.monal-impact-cards {
  position: relative; padding: var(--monal-page-gap) 0 0; text-align: center;
  --monal-impact-disc: calc(var(--monal-u) * 10);
}

.monal-impact-cards__title { margin-top: calc(var(--monal-u) * 1.6); }

.monal-impact-cards__lead {
  margin: calc(var(--monal-u) * 2) auto 0;
  width: min(100%, calc(var(--monal-u) * 102.98));
}

.monal-impact-cards__grid {
  display: grid; gap: calc(var(--monal-u) * 9.3) calc(var(--monal-u) * 2.2);
  margin: calc(var(--monal-u) * 9.3) 0 0; padding: 0; list-style: none;
}

/* 1:3611 — 499.984 x 282.767, 1px #d9d9d9, radius TL 30 / BR 50. The disc
   overlaps the top edge (63 of 130 above it), so the card carries the top
   padding that clears it: the disc's lower 51.54% plus the frame's 44.5 to
   the title (1:3612 at 111.53 below the card top). */
.monal-impact-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--monal-impact-disc) * .5154 + var(--monal-u) * 4.45) calc(var(--monal-u) * 2.4) calc(var(--monal-u) * 3);
  border: 1px solid #d9d9d9;
  border-radius: calc(var(--monal-u) * 3) 0 calc(var(--monal-u) * 5) 0;
}

/* The -1px: an absolute child is offset from the card's padding edge, which
   sits inside its 1px border, so without it the disc landed 1px low. */
.monal-impact-card__disc {
  position: absolute; left: 50%; top: calc(var(--monal-impact-disc) * -.4846 - 1px);
  display: grid; place-items: center;
  width: var(--monal-impact-disc); height: var(--monal-impact-disc);
  margin-left: calc(var(--monal-impact-disc) * -.5);
  border-radius: 50%; background: #ffe5d7;
}

/* 1:3622 / 1:3624 / 1:3626 are filled "black" in the export, not orange,
   and 63.993 / 130 = 49.23% of the disc. */
.monal-impact-card__disc .monal-i {
  width: calc(var(--monal-impact-disc) * .4923); height: calc(var(--monal-impact-disc) * .4923);
  background: var(--monal-c-black);
}

/* 1:3612 — Poppins Regular 30/34 at 70%, black. */
.monal-impact-card__title {
  margin: 0; font-weight: 400; text-wrap: balance;
  font-size: max(calc(var(--monal-u) * 2), 17px); line-height: calc(var(--monal-u) * 2.8);
  color: rgba(0, 0, 0, .7);
}

.monal-impact-card__text {
  margin: calc(var(--monal-u) * 1.4) 0 0;
  width: min(100%, calc(var(--monal-u) * 38.81));
}

@media (min-width: 768px) {
  
    /* The people band stays stacked until the desktop overlap layout takes
       over at 1200: side by side here would leave the cluster 336 wide, which
       is 73 per tile — narrower than the label inside it. */
    .monal-impact-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--monal-u) * 2.2); }
}

@media (min-width: 1200px) {
  
  
    /* --- cards ----------------------------------------------------------- */
    /* 1:3606 — the eyebrow at y2303.97, 180.28 under the pillars' copy. */
    .monal-impact-cards { padding-top: calc(var(--monal-u) * 18.03); }
  
    .monal-impact-cards__eyebrow {
      font-size: max(calc(var(--monal-u) * 1.6), 12px); line-height: calc(var(--monal-u) * 2.4);
    }
  
    .monal-impact-cards__title {
      width: calc(var(--monal-u) * 74.57); max-width: 100%; margin: calc(var(--monal-u) * 2.4) auto 0;
      font-size: calc(var(--monal-u) * 6.6); line-height: calc(var(--monal-u) * 7.2);
      letter-spacing: calc(var(--monal-u) * -.264);
    }
  
    .monal-impact-cards__lead {
      width: calc(var(--monal-u) * 102.98); margin-top: calc(var(--monal-u) * 3);
      font-size: calc(var(--monal-u) * 2.2); line-height: calc(var(--monal-u) * 3.4);
    }
  
    /* 1:3613 — the disc at y2663.68; 1:3611 the card at y2726.68. The row box
       starts at the disc, so the gap above is measured to y2663.68. */
    .monal-impact-cards__grid {
      grid-template-columns: repeat(3, calc(var(--monal-u) * 50));
      gap: calc(var(--monal-u) * 2.2);
      margin-top: calc(var(--monal-u) * 13.271);
      justify-content: space-between;
    }
  
    /* The frame's 130 disc. The base rules derive the rest from it: top -63,
       icon 63.993, card top padding 111.5 (6.7 + 44.5). */
    .monal-impact-cards { --monal-impact-disc: calc(var(--monal-u) * 13); }
  
    .monal-impact-card {
      min-height: calc(var(--monal-u) * 28.28);
      border-radius: calc(var(--monal-u) * 3) 0 calc(var(--monal-u) * 5) 0;
    }
  
    /* 1:3612 — 30/34 at y2838.21, 111.53 below the card top. */
    .monal-impact-card__title {
      font-size: calc(var(--monal-u) * 3); line-height: calc(var(--monal-u) * 3.4);
    }
  
    /* 1:3610 — y2888.19, w388.055. */
    .monal-impact-card__text {
      width: calc(var(--monal-u) * 38.81); margin-top: calc(var(--monal-u) * 1.6);
      font-size: calc(var(--monal-u) * 2.2); line-height: calc(var(--monal-u) * 3.4);
    }
}