/*!
 * Careers Hero — 1:3088 - 1:3091, eyebrow, H1 and lead, with the page art (1:3003, 1:3086).
 *
 * Figma 1:3002 in the Monal-Pages file AlYDxKHhVoiNp5UI47BElc.
 *
 * Split from design/careers.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 — Careers page and single job
   HTML prototype stylesheet, split by design/_split-careers-css.php into
   widgets/monal-careers-hero/, widgets/monal-careers-list/ and
   assets/monal/css/monal-job.css (the single job template). Re-run it after
   any change here.

   Figma file AlYDxKHhVoiNp5UI47BElc (Monal-Pages), frame 1:3002
   "The Monal Group | Careers", 1920 x 2761. Every desktop length is the
   Figma value / 10 in --monal-u. Mobile is written first and is derived.
   The single job page has no frame: it is built from the same pieces
   (Interpretation, see figma-ui-ux-context.md).
   ========================================================================== */

/* ==========================================================================
   1. HERO  1:3088 - 1:3091
   ========================================================================== */
.monal-careers-hero { position: relative; padding: calc(var(--monal-u) * 11) 0 0; text-align: center; }

/* 1:3088 — Poppins Medium 16/24 uppercase. */
.monal-careers-hero__eyebrow {
  font-weight: 500; font-size: max(calc(var(--monal-u) * 1.3), 12px); line-height: 1.5;
  text-transform: uppercase; color: var(--monal-c-ink);
}

/* 1:3090 — Poppins Medium 66/72, -2.64 tracking, one line in 745.678. */
.monal-careers-hero__title {
  margin-top: calc(var(--monal-u) * 1.4);
  font-weight: 500; font-size: max(calc(var(--monal-u) * 3.4), 28px); line-height: 1.08;
  letter-spacing: -.04em; color: var(--monal-c-ink);
}

/* 1:3091 — Poppins Regular 22/34 at 70%, w920. */
.monal-careers-hero__lead { margin: calc(var(--monal-u) * 1.6) auto 0; max-width: calc(var(--monal-u) * 40); }


/* Page art in the hero (drawn here: Elementor's lazy-load blanks
   backgrounds in containers further down until they near the screen). */
.monal-careers-hero__glow { display: none; }

@media (min-width: 1200px) {
  
    /* --- hero --------------------------------------------------------------- */
    /* Eyebrow y245, title y293 (24 below), lead y395 (30 below the 72 line);
       the section ends with the lead (2 x 34, so y463). */
    .monal-careers-hero { padding-top: calc(var(--monal-u) * 24.5); }
  
    .monal-careers-hero__eyebrow { font-size: max(calc(var(--monal-u) * 1.6), 12px); line-height: max(calc(var(--monal-u) * 2.4), 18px); }
  
    .monal-careers-hero__title {
      margin: calc(var(--monal-u) * 2.4) auto 0; width: calc(var(--monal-u) * 74.5678); max-width: 100%;
      font-size: calc(var(--monal-u) * 6.6); line-height: calc(var(--monal-u) * 7.2);
      letter-spacing: calc(var(--monal-u) * -.264);
    }
  
    .monal-careers-hero__lead {
      margin-top: calc(var(--monal-u) * 3); width: calc(var(--monal-u) * 92); max-width: none;
      font-size: calc(var(--monal-u) * 2.2); line-height: calc(var(--monal-u) * 3.4);
    }
  
    /* 1:3003 — the corner flourish at (1752.36, -40.54), as on Brands. */
    .monal-careers-hero > .monal-page__deco--corner { right: calc(var(--monal-u) * -34.344); top: calc(var(--monal-u) * -4.054); }
  
    /* 1:3086 — the blurred ellipse, 225.357 at (-112.68, 286.32); the
       653.357 SVG is it plus its blur, so its box starts at (-326.68, 72.32). */
    .monal-careers-hero > .monal-careers-hero__glow {
      display: block; z-index: -1;
      left: calc(50% - var(--monal-u) * 128.668); top: calc(var(--monal-u) * 7.232);
      width: calc(var(--monal-u) * 65.336); height: calc(var(--monal-u) * 65.336);
      background-image: url(../../assets/monal/img/pages/lead-ellipse.svg);
    }
}