/*!
 * Monal Group — monal-lead-quote
 *
 * Converted from design/pages.css (the approved HTML prototype).
 * Desktop values come straight from Figma 329:3498: every length is
 * Figma px / 10 expressed in --monal-u.
 */

/* ==========================================================================
   LEADERSHIP — quote   329:3498 - 329:3512
   ========================================================================== */
.monal-lead-quote { position: relative; padding-top: var(--monal-page-gap); }
.monal-lead-quote__inner { display: grid; gap: calc(var(--monal-u) * 3); }
/* The rule runs up beside the heading (it starts 3.4 above the quote), so the
   heading shares the quote's indent, as on desktop where both sit at x241.91
   against the rule at x188. Unindented, the rule ran into the "L". */
.monal-lead-quote__title { margin-left: calc(var(--monal-u) * 1.8); color: var(--monal-c-ink); }
/* The editor's <br> is the desktop line break; below 1200 the quote wraps to
   the column instead (the render adds the space that keeps words apart). */
.monal-lead-quote__br { display: none; }
.monal-lead-quote__body { position: relative; margin: calc(var(--monal-u) * 1.6) 0 0; padding-left: calc(var(--monal-u) * 1.8); }
.monal-lead-quote__rule {
  position: absolute; left: 0; top: calc(var(--monal-u) * -3.4); bottom: 0;
  width: calc(var(--monal-u) * .5); background: var(--monal-c-orange);
  transform-origin: 50% 0;
}
.monal-lead-quote__body p {
  font-weight: 600; font-size: max(calc(var(--monal-u) * 1.6), 14px); line-height: 1.64;
  color: var(--monal-c-muted);
}
.monal-lead-quote__card {
  padding: calc(var(--monal-u) * 2.4);
  background: rgba(237, 120, 44, .1);
  border-radius: calc(var(--monal-u) * 2) 0 calc(var(--monal-u) * 2) 0;
}
.monal-lead-quote__card h3 {
  font-weight: 500; font-size: max(calc(var(--monal-u) * 2), 18px); line-height: 1.2;
  letter-spacing: -.04em; color: var(--monal-c-ink);
}
.monal-lead-quote__card p { margin-top: calc(var(--monal-u) * 1); }

@media (min-width: 1200px) {
  /* Figma band 690 - 1059.9; "Leadership Quote" at y744. */
  .monal-lead-quote { padding-top: calc(var(--monal-u) * 5.4); min-height: calc(var(--monal-u) * 36.99); }
  .monal-lead-quote__br { display: inline; }
  .monal-lead-quote__inner { grid-template-columns: calc(var(--monal-u) * 69) minmax(0, 1fr); gap: calc(var(--monal-u) * 14.6); align-items: start; }
  /* Figma puts the quote text at x241.91 with the rule at x188, so the
     heading shares that 53.91 offset rather than a round 50. */
  .monal-lead-quote__title { padding-top: calc(var(--monal-u) * .4); margin-left: calc(var(--monal-u) * 5.39); }
  .monal-lead-quote__body { margin: calc(var(--monal-u) * 5) 0 0; padding-left: calc(var(--monal-u) * 5.39); }
  .monal-lead-quote__rule { top: calc(var(--monal-u) * -11.26); height: calc(var(--monal-u) * 17.78); bottom: auto; }
  .monal-lead-quote__body p { font-size: calc(var(--monal-u) * 2.2); line-height: calc(var(--monal-u) * 3.6); }
  .monal-lead-quote__card {
    margin-top: calc(var(--monal-u) * 1.5);
    width: calc(var(--monal-u) * 70.75); min-height: calc(var(--monal-u) * 17.6);
    padding: calc(var(--monal-u) * 1.24) calc(var(--monal-u) * 3.4) calc(var(--monal-u) * 2) calc(var(--monal-u) * 5.53);
    border-radius: calc(var(--monal-u) * 3.5) 0 calc(var(--monal-u) * 3.5) 0;
  }
  .monal-lead-quote__card h3 { font-size: calc(var(--monal-u) * 3.8); line-height: calc(var(--monal-u) * 7.2); letter-spacing: calc(var(--monal-u) * -.152); }
  .monal-lead-quote__card p { margin-top: calc(var(--monal-u) * .36); width: calc(var(--monal-u) * 60.94); }
}
