/*!
 * Impact CTA — 1:3590 - 1:3604, the closing green band.
 *
 * 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).
 */



/* ==========================================================================
   5. CTA BAND  1:3590
   ========================================================================== */
/* The last section before the footer, so below 1200 it also carries the
   page gap beneath it; the footer adds only its own 1u. */
.monal-impact-cta { position: relative; padding: var(--monal-page-gap) 0; }

/* 1:3593 — 1890 x 373.028, radius 50. The frame stacks three layers: a
   photograph, #2c5a4f blended on colour (so the photo keeps its luminance
   but takes the green hue), then rgba(44,90,79,.7) multiplied over both.
   The widget swaps the photograph by overriding --monal-impact-cta-img.
   The panel is the footer's twin: the same --monal-inset from the viewport
   and the same --monal-radius-panel at every width (1:3593 and the footer
   are both 1890 at x15, radius 50, at 1920). On phones the padding is the
   footer panel's 2.1u side padding on all four sides, so the CTA copy lines
   up with the footer copy directly beneath it. */
.monal-impact-cta__panel {
  position: relative; overflow: hidden; isolation: isolate;
  margin-inline: var(--monal-inset);
  padding: calc(var(--monal-u) * 2.1);
  border-radius: var(--monal-radius-panel);
  background: var(--monal-c-green) var(--monal-impact-cta-img, url(../../assets/monal/img/pages/impact-cta.jpg)) center / cover no-repeat;
  color: #fff;
}

.monal-impact-cta__panel::before,
.monal-impact-cta__panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}

.monal-impact-cta__panel::before { background: var(--monal-c-green); mix-blend-mode: color; }

.monal-impact-cta__panel::after { background: rgba(44, 90, 79, .7); mix-blend-mode: multiply; }

/* Above both blend layers: they are positioned siblings, so without this the
   70% multiply paints over the type and dims it. */
/* padding-inline: 0 - the panel's own padding is the gutter here; the
   .monal-container gutter on top of it doubled the side padding. */
.monal-impact-cta__grid { position: relative; z-index: 1; display: grid; gap: calc(var(--monal-u) * 2.4); padding-inline: 0; }

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

.monal-impact-cta__title { margin: calc(var(--monal-u) * 1.2) 0 0; color: #fff; }

.monal-impact-cta__text {
  margin: 0; color: rgba(255, 255, 255, .7);
  width: min(100%, calc(var(--monal-u) * 60.7));
}

/* 1:3598 — 268.302 x 74.157 solid orange, Poppins Bold 18/28 uppercase. */
.monal-impact-cta__btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(var(--monal-u) * 1.2);
  margin-top: calc(var(--monal-u) * 2.4);
  min-height: calc(var(--monal-u) * 7.42); padding: 0 calc(var(--monal-u) * 2.8);
  /* 1:3598 rounds the top-right and bottom-left by 20 and leaves the other
     two square, mirroring the card motif. */
  border-radius: 0 calc(var(--monal-u) * 2) 0 calc(var(--monal-u) * 2);
  background: var(--monal-c-orange); color: var(--monal-c-ink);
  font-weight: 700; text-transform: uppercase;
  font-size: max(calc(var(--monal-u) * 1.4), 12px); line-height: calc(var(--monal-u) * 2.8);
  transition: filter .3s;
}

.monal-impact-cta__btn:hover { filter: brightness(1.06); }

.monal-impact-cta__btn .monal-i {
  width: calc(var(--monal-u) * 1.15); height: calc(var(--monal-u) * 1.15);
  background: currentColor;
}

@media (min-width: 768px) {
  
    .monal-impact-cta__grid { grid-template-columns: 1fr 1fr; align-items: center; }
  
    /* Tablet mirrors the footer panel's own padding (3.6u / 2.1u). */
    .monal-impact-cta__panel { padding: calc(var(--monal-u) * 3.6) calc(var(--monal-u) * 2.1); }
}

@media (min-width: 1200px) {
  
  
    /* --- cta ------------------------------------------------------------- */
    /* 1:3593 — y3159.44, 150.44 under the cards. 1890 wide at x15, so it
       bleeds past the 1544 container by 173 each side. Its width comes from
       the base --monal-inset margins, as the footer's does: the old
       100vw-based width included the scrollbar, so wherever one shows the
       panel sat ~7px further out than the footer below it. */
    .monal-impact-cta { padding: calc(var(--monal-u) * 15.04) 0 0; }
  
    .monal-impact-cta__panel {
      min-height: calc(var(--monal-u) * 37.3);
      padding: calc(var(--monal-u) * 8.95) calc(var(--monal-u) * 26.15);
    }
  
    /* The eyebrow at y3248.96 and the copy at y3268.8 share the panel's top
       padding; the copy column starts at x1058.49, 782 from the title column. */
    .monal-impact-cta__grid {
      grid-template-columns: calc(var(--monal-u) * 70) calc(var(--monal-u) * 60.7);
      gap: calc(var(--monal-u) * 11.2);
      align-items: start;
    }
  
    .monal-impact-cta__eyebrow {
      font-size: calc(var(--monal-u) * 2.2); line-height: calc(var(--monal-u) * 2.8);
    }
  
    /* 1:3603 — 66/78 at y3286.96, 38 under the eyebrow. */
    .monal-impact-cta .monal-impact-cta__title {
      margin-top: calc(var(--monal-u) * 1);
      font-size: calc(var(--monal-u) * 6.6); line-height: calc(var(--monal-u) * 7.8);
      letter-spacing: calc(var(--monal-u) * -.264);
    }
  
    /* 1:3596 — w607.016, 22/30, and the button 90 below its top. */
    .monal-impact-cta__text {
      width: calc(var(--monal-u) * 60.7); margin-top: calc(var(--monal-u) * 1.98);
      font-size: calc(var(--monal-u) * 2.2); line-height: calc(var(--monal-u) * 3);
    }
  
    .monal-impact-cta__btn {
      margin-top: calc(var(--monal-u) * 3);
      width: calc(var(--monal-u) * 26.83); min-height: calc(var(--monal-u) * 7.42);
      font-size: calc(var(--monal-u) * 1.8); line-height: calc(var(--monal-u) * 2.8);
    }
}