/*!
 * Impact Hero — 1:3464 / 1:3465 / 1:3466 and the strand row 1:3467.
 *
 * 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).
 */

/* ==========================================================================
   Monal Group — Impact page
   HTML prototype stylesheet. Sections are grouped exactly as they will be
   split into widgets, so the conversion is markup-only.

   Figma file AlYDxKHhVoiNp5UI47BElc (Monal-Pages)
     Impact  1:3433  (1920 x 4008)

   This is a DIFFERENT file from the one the Newsroom/Awards page came from
   (HMsyfBDyK17zNdsEPfBtal); node ids do not carry between them.

   Sizing follows the established system: 1 unit of --monal-u == 1 Figma px/10,
   so every desktop length below is the Figma value divided by ten. Mobile is
   written first and is a derivation, not a Figma frame — the client supplied
   desktop only.
   ========================================================================== */

/* ==========================================================================
   1. HERO  1:3464 / 1:3465 / 1:3466
   ========================================================================== */
/* 11u on mobile, the same first-section clearance the other inner pages use:
   the floating header ends at 7.9u. */
.monal-impact-hero {
  position: relative;
  padding: calc(var(--monal-u) * 11) 0 0;
  text-align: center;
}

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

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


/* --- the hero backdrop -------------------------------------------------- */
/* Four decorative layers in the frame, all behind the type:
     1:3435  an 815.777 orange radiance, rotated 180 and multiplied at 50%
     1:3436  a 384.392 band at y297.94, rotated 180, with the centre notch
     1:3437  the blurred corner group bleeding off the top right
     1:3462  a blurred orange glow off the left edge
   Mobile keeps a plain wash; the full set arrives with the desktop layout. */
.monal-impact-hero__deco,
.monal-impact-hero__ring {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  display: block; overflow: hidden;
}

.monal-impact-hero__ring { display: none; }

.monal-impact-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; right: 0; top: 0; height: calc(var(--monal-u) * 38.44);
  background: linear-gradient(to bottom, rgba(237, 120, 44, .14), rgba(255, 255, 255, 0));
}

/* 1:3436, the notched band, is the hero's signature in the frame: orange
   collecting under the lead with the notch pointing at the strand row. It was
   desktop-only, which left phones with a flat wash. Below 1200 it spans the
   hero down to 4u above the strands, so the notch tip sits in the gap above
   them. The SVG's own gradient is transparent across its top quarter once
   turned, so it fades in under the header with no edge. Turned on the
   pseudo-element, which GSAP never touches. */
.monal-impact-hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; right: 0; top: 0; bottom: calc(var(--monal-u) * 4);
  background: url(../../assets/monal/img/pages/impact-band.svg) center / 100% 100% no-repeat;
  transform: rotate(180deg);
}


/* 1:3467 — the section row, 20 gap with 17.051 rules between. */
.monal-impact-tabs {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: calc(var(--monal-u) * 1) calc(var(--monal-u) * 2);
  margin: calc(var(--monal-u) * 4) 0 0; padding: 0; list-style: none;
}

.monal-impact-tabs li { display: flex; align-items: center; gap: calc(var(--monal-u) * 2); }

/* 1:3469 — a 1px #ED782C rule, not a tint of the text colour. It belongs to
   the item before the break, so a row that wraps never starts a new line with
   a stranded rule. */
.monal-impact-tabs li:not(:last-child)::after {
  content: ""; width: 1px; height: calc(var(--monal-u) * 1.71);
  background: var(--monal-c-orange);
}

.monal-impact-tabs b {
  font-weight: 500; text-transform: uppercase;
  font-size: max(calc(var(--monal-u) * 1.6), 13px); line-height: calc(var(--monal-u) * 2.8);
}

@media (max-width: 767px) {
  
    .monal-impact-tabs {
      width: min(100%, calc(var(--monal-u) * 36)); margin-inline: auto;
      justify-content: space-between;
      gap: calc(var(--monal-u) * 1.2) calc(var(--monal-u) * .8);
    }
  
    /* Same specificity as the rule that draws it, or :not(:last-child) wins. */
    .monal-impact-tabs li:not(:last-child)::after { content: none; }
  
    .monal-impact-tabs b { font-size: max(calc(var(--monal-u) * 1.2), 12px); letter-spacing: -.02em; }
}

@media (min-width: 1200px) {
  
    /* --- hero ------------------------------------------------------------ */
    /* The band starts at the page top; the eyebrow sits at y245. */
    .monal-impact-hero { padding-top: calc(var(--monal-u) * 24.5); }
  
  
    /* 1:3435 — 1920 x 815.777 from y-459.337, rotated 180, multiply at 50%.
       The source is inset inside its box (169.77% x 171.12% at -34.89%). */
    .monal-impact-hero::before {
      left: 50%; right: auto; width: 100vw; margin-left: -50vw;
      top: calc(var(--monal-u) * -45.934); height: calc(var(--monal-u) * 81.578);
      /* Figma sizes the source 169.77% x 171.12% of the box and offsets it
         left by 34.89% OF THE BOX, which is -669.89 — a CSS percentage in
         background-position means something else, so both are absolute. */
      background: url(../../assets/monal/img/pages/impact-texture.jpg) calc(var(--monal-u) * -66.989) 0 / calc(var(--monal-u) * 325.958) calc(var(--monal-u) * 139.596) no-repeat;
      mix-blend-mode: multiply; opacity: .5;
      transform: rotate(180deg);
    }
  
    /* 1:3436 — the notched band at y297.94, also rotated 180, so its notch
       points down and the orange collects along the bottom edge. */
    .monal-impact-hero::after {
      content: ""; position: absolute; z-index: -1; pointer-events: none;
      left: 50%; right: auto; bottom: auto; width: 100vw; margin-left: -50vw;
      top: calc(var(--monal-u) * 29.794); height: calc(var(--monal-u) * 38.439);
      background: url(../../assets/monal/img/pages/impact-band.svg) center calc(var(--monal-u) * .484) / 100% calc(var(--monal-u) * 37.954) no-repeat;
      transform: rotate(180deg);
    }
  
    /* 1:3437 — the corner group, 817.373 x 957.892 once its blur is included. */
    .monal-impact-hero__deco { overflow: visible; }
  
    .monal-impact-hero__deco::before {
      content: ""; position: absolute;
      left: 50%; margin-left: calc(var(--monal-u) * 60.53);
      top: calc(var(--monal-u) * -24.321);
      width: calc(var(--monal-u) * 81.737); height: calc(var(--monal-u) * 95.789);
      background: url(../../assets/monal/img/pages/impact-corner.svg) center / 100% 100% no-repeat;
    }
  
    /* 1:3461 — a 6% ring sweeping in from the right, mirrored and turned.
       Its box is 427.2 x 494.8 at x1723.6 / y565.5, most of it off the frame. */
    .monal-impact-hero__ring { display: block; overflow: visible; }
  
    .monal-impact-hero__ring::before {
      content: ""; position: absolute;
      left: 50%; margin-left: calc(var(--monal-u) * 76.36);
      top: calc(var(--monal-u) * 56.55);
      width: calc(var(--monal-u) * 42.72); height: calc(var(--monal-u) * 49.48);
      background: url(../../assets/monal/img/pages/impact-ring.svg) center / 100% 100% no-repeat;
      transform: scaleX(-1) rotate(38.86deg);
    }
  
    /* 1:3462 — the blurred glow off the left edge; 653.357 once blurred. */
    .monal-impact-hero__deco::after {
      content: ""; position: absolute;
      left: 50%; margin-left: calc(var(--monal-u) * -128.669);
      top: calc(var(--monal-u) * 7.232);
      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;
    }
  
    /* max(), as the mobile rules do: the desktop layer scales with 100vw/192,
       so a bare 1.6u reads 10.7 at 1280. 1920 is unaffected. */
    .monal-impact-hero__eyebrow {
      font-size: max(calc(var(--monal-u) * 1.6), 12px); line-height: calc(var(--monal-u) * 2.4);
    }
  
    /* 1:3465 — 66/72, w745.678, y293 (24 under the eyebrow). */
    .monal-impact-hero__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);
    }
  
    /* 1:3466 — y467, which is 30 under the two-line title. */
    .monal-impact-hero__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:3467 — y752.34, 217.34 under the two-line lead. */
    .monal-impact-tabs {
      margin-top: calc(var(--monal-u) * 21.73);
      gap: calc(var(--monal-u) * 2);
    }
  
    .monal-impact-tabs li { gap: calc(var(--monal-u) * 2); }
  
    .monal-impact-tabs b {
      font-size: calc(var(--monal-u) * 2.2); line-height: calc(var(--monal-u) * 2.8);
    }
}