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

/* ==========================================================================
   STORY — pull quote   329:3449
   A multiply-blended texture with an orange 20% gradient band notched at its
   bottom edge, and the quote set in Poppins Regular 66/72.
   ========================================================================== */
/* The one section that takes the page gap as a margin: it is a band whose
   texture fills its padding box, so padding-top would put the gap inside
   the band. The 4u / 6u padding is the band's own interior. */
.monal-story-quote { position: relative; margin-top: var(--monal-page-gap); padding: calc(var(--monal-u) * 4) 0 calc(var(--monal-u) * 6); }
.monal-story-quote__texture,
.monal-story-quote__band { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; z-index: 0; }
/* Both art layers are rotated 180 in Figma (329:3450 and 329:3451). The band
   SVG draws its notch as an upward apex at the top edge, so without the flip
   the notch appeared above the quote instead of below it. The artwork is
   flipped on a pseudo-element rather than the element itself, because GSAP
   animates .monal-story-quote__band and would overwrite its transform. */
/* On desktop the texture starts 478px above the band and both layers fade in
   on their own. Squeezed into the short mobile section each started with a
   hard top edge, so the texture reaches up into the section's top margin and
   both are masked in. */
.monal-story-quote__texture {
  top: calc(var(--monal-u) * -4); width: 100%; height: calc(100% + var(--monal-u) * 4);
  mix-blend-mode: multiply; opacity: .5;
}
.monal-story-quote__texture {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%);
          mask-image: linear-gradient(to bottom, transparent, #000 55%);
}
/* The band's own gradient starts abruptly 26.3% down its height (viewBox
   y100 of 379.5 once flipped); at 240px tall that kink read as a seam behind
   the glyph. Starting the mask at the same point turns it into a smooth
   ease-in, and the bottom - the warm part and the notch - is left intact. */
.monal-story-quote__band {
  -webkit-mask-image: linear-gradient(to bottom, transparent 26.3%, #000 85%);
          mask-image: linear-gradient(to bottom, transparent 26.3%, #000 85%);
}
.monal-story-quote__texture::before,
.monal-story-quote__band::before {
  content: ""; position: absolute; inset: 0; transform: rotate(180deg);
}
/* Stretched, not cover: the PNG is 2560x1279 (2.00) while the Figma node is
   1920x815.777 (2.35), so cover cropped it and pulled the warm area upwards. */
.monal-story-quote__texture::before {
  background: url(../../assets/monal/img/pages/quote-texture.png) center / 100% 100% no-repeat;
}
.monal-story-quote__band {
  bottom: calc(var(--monal-u) * -2); width: 100%; height: calc(var(--monal-u) * 24);
}
.monal-story-quote__band::before {
  background: url(../../assets/monal/img/pages/quote-band.svg) center / 100% 100% no-repeat;
}
/* Phones stack the glyph above the quote: beside it, the 52px glyph column
   left too little width for the forced first line, which broke as
   "Turning Moments / into". From 768 there is room for the desktop row. */
.monal-story-quote__inner {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  gap: calc(var(--monal-u) * 1.2); align-items: center; justify-content: center;
  text-align: center;
}
.monal-story-quote__mark {
  flex: none; width: calc(var(--monal-u) * 4); height: calc(var(--monal-u) * 2.2);
  background: url(../../assets/monal/img/pages/quote-mark.svg) center / contain no-repeat;
}
/* "Turning Moments into" is ~10.1em wide; 8.2vw keeps it on one line down to
   320, the same measure the hero heading uses. */
.monal-story-quote__text {
  font-weight: 400; font-size: min(max(calc(var(--monal-u) * 2.8), 24px), 8.2vw); line-height: 1.09;
  letter-spacing: -.04em; color: var(--monal-c-ink);
}

@media (min-width: 768px) {
  .monal-story-quote__inner { flex-direction: row; align-items: flex-start; text-align: left; }
  .monal-story-quote__mark { margin-top: calc(var(--monal-u) * .8); }
}

@media (min-width: 1200px) {
  /* Figma band 1907.8 - 2292.19; quote baseline at y2006.52. */
  .monal-story-quote { margin-top: 0; padding: calc(var(--monal-u) * 9.87) 0 0; min-height: calc(var(--monal-u) * 38.44); }
  .monal-story-quote__texture { top: calc(var(--monal-u) * -47.83); height: calc(var(--monal-u) * 81.58); }
  .monal-story-quote__texture,
  .monal-story-quote__band { -webkit-mask-image: none; mask-image: none; }
  .monal-story-quote__band { bottom: 0; height: calc(var(--monal-u) * 37.95); }
  .monal-story-quote__inner { gap: calc(var(--monal-u) * 5); }
  .monal-story-quote__mark { width: calc(var(--monal-u) * 8.52); height: calc(var(--monal-u) * 4.68); margin-top: calc(var(--monal-u) * 1.2); }
  .monal-story-quote__text {
    width: calc(var(--monal-u) * 67.77);
    font-size: calc(var(--monal-u) * 6.6); line-height: calc(var(--monal-u) * 7.2);
    letter-spacing: calc(var(--monal-u) * -.264);
  }
}