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

/* ==========================================================================
   STORY — hero   329:3364
   Figma: eyebrow y245, H1 y293 (72/78), lead y479, and behind them a 648px
   "M" at y373 with an arc, four rotated tiles, the CTA, a caption and the
   scroll cue. On desktop the art is an absolutely-positioned stage sized to
   the 1920 frame so every piece keeps its exact Figma coordinate; on mobile
   the stage collapses to a simple centred M with the CTA beneath it.
   ========================================================================== */
.monal-story-hero { position: relative; padding-top: calc(var(--monal-u) * 11); }
/* The page containers are Elementor column flexboxes with flex-wrap: wrap,
   which measure an item's height at its fit-content width before stretching
   it. The M's aspect-ratio box and width-relative margins then measure a few
   px short (4 at 375), so the journey started inside the hero. A definite
   width makes the measurement match the layout - the same fix as
   monal-lead-feature / -gallery. */
.e-con > .elementor-widget-monal-story-hero { width: 100%; }
.monal-story-hero__head { position: relative; z-index: 2; text-align: center; }
.monal-story-hero__title {
  margin-top: calc(var(--monal-u) * 1.4);
  /* The two heading lines are forced breaks, so the longer one ("Turning
     Moments Into", ~10.2em wide) must fit the column or "Into" drops onto a
     line of its own. 8.2vw keeps it inside the 24px gutters down to 320;
     from ~415 up the 34px design size applies. */
  font-weight: 500; font-size: min(calc(var(--monal-u) * 3.4), 8.2vw); line-height: 1.08;
  letter-spacing: -.04em; color: var(--monal-c-black);
}
.monal-story-hero__title em {
  font-family: var(--monal-f-serif); font-weight: 600; font-style: italic;
  font-size: 1.125em;   /* Figma 81 against 72 */
}
.monal-story-hero__lead {
  margin: calc(var(--monal-u) * 1.6) auto 0;
  max-width: calc(var(--monal-u) * 34);
}

.monal-story-hero__stage {
  position: relative; z-index: 1;
  margin: calc(var(--monal-u) * 4) auto 0;
  display: grid; place-items: center;
}
/* story-arc.svg carries the orange M and its arc; story-m.svg is the soft
   radial backdrop behind it. On mobile only the M is kept — the backdrop is
   barely visible at that size and the rotated tiles would crowd the column. */
/* story-arc.svg exports at 919.921x734.481 but its Figma node (329:3380) is
   711.923x449.381 - the extra is the blurred glow bleeding past the bounds.
   The aspects differ, so `contain` letterboxed the file into the box and drew
   the M at ~61% of its intended size. Sizing the background to 919.921/711.923
   restores native scale and lets the blur bleed out, which the section clips. */
/* The element is sized to the SVG's own canvas (919.921 x 734.481), NOT to the
   Figma node box (711.923 x 449.381). The file is bigger than its node because
   the blurred glow bleeds past the bounds; painting it into a node-sized box
   clipped that blur and drew a hard-edged rectangle behind the M. At natural
   size nothing is clipped and the glow fades out properly.
   The M core is offset from the SVG's centre, so the box is nudged (+18, -69)
   in Figma px, scaled per breakpoint, to keep the glyph on its node. */
.monal-story-hero__m {
  /* 374.8 is wider than a 320 viewport, so cap it: aspect-ratio keeps the
     arc in proportion as it narrows. The desktop rule below overrides all of
     this. */
  --monal-story-m-w: min(calc(var(--monal-u) * 37.48), 100%);
  display: block; position: relative;
  width: var(--monal-story-m-w); aspect-ratio: 919.921 / 734.481;
  /* In the stacked layout the CTA sits inside the arc, under the M, rather
     than below an empty arc. On the 919.921 canvas the M's cap line is at
     y233.4, the arc (centre 437.4/663.4, r356) is wide enough for the 209px
     button from y516 down even at 320, and its feet end at y663.4. So the
     top margin trims the glow-only band above the M and the bottom margin
     ends the layout box at y516, where the CTA starts (the glow and the arc's
     feet still paint below it). The arc is centred on x437.4, not the canvas
     centre 460, so `left` moves the box by the difference without affecting
     layout. */
  margin: calc(var(--monal-story-m-w) * -.2537) 0 calc(var(--monal-story-m-w) * -.2375);
  left: calc(var(--monal-story-m-w) * .0245);
  background: url(../../assets/monal/img/pages/story-arc.svg) center / 100% 100% no-repeat;
}
.monal-story-hero__glow,
.monal-story-hero__tile,
.monal-story-hero__scroll { display: none; }

/* Positioned so it paints above the arc's glow, which overlaps it. */
.monal-story-hero__cta { position: relative; z-index: 1; }

/* "PLACEHOLDER / The Beginning" caption. */
.monal-story-hero__caption { margin-top: calc(var(--monal-u) * 4); text-align: center; }
.monal-story-hero__kicker {
  display: block; font-weight: 500; font-style: italic;
  font-size: max(calc(var(--monal-u) * 1.4), 13px); line-height: 1.2;
  letter-spacing: -.05em; text-transform: uppercase; color: var(--monal-c-ink);
}
.monal-story-hero__caption-title {
  display: block; margin-top: calc(var(--monal-u) * .6);
  font-family: var(--monal-f-display); font-weight: 400;
  font-size: max(calc(var(--monal-u) * 2.4), 22px); line-height: .84;
  letter-spacing: -.04em; color: var(--monal-c-black);
}
.monal-story-hero__caption-rule {
  display: block; width: calc(var(--monal-u) * 18.52); max-width: 100%;
  height: 1px; margin: calc(var(--monal-u) * 1.2) auto 0;
  background: var(--monal-c-orange);
}

@media (min-width: 1200px) {
  /* Figma band 0 - 1161.59; eyebrow baseline at y245. */
  .monal-story-hero { padding-top: calc(var(--monal-u) * 24.5); padding-bottom: 0; min-height: calc(var(--monal-u) * 116.16); }
  .monal-story-hero__title {
    margin-top: calc(var(--monal-u) * 2);
    width: calc(var(--monal-u) * 74.57); margin-inline: auto;
    font-size: calc(var(--monal-u) * 7.2); line-height: calc(var(--monal-u) * 7.8);
    letter-spacing: calc(var(--monal-u) * -.288);
  }
  .monal-story-hero__lead {
    margin-top: calc(var(--monal-u) * 3);
    width: calc(var(--monal-u) * 69.6); max-width: none;
  }

  /* The stage is the full 1920 frame, so children carry raw Figma offsets. */
  .monal-story-hero__stage {
    position: absolute; z-index: 1; left: 50%; top: calc(var(--monal-u) * 37.36);
    width: calc(var(--monal-u) * 192); height: calc(var(--monal-u) * 57.1);
    margin: 0; transform: translateX(-50%);
    display: block; place-items: unset;
    pointer-events: none;
  }
  .monal-story-hero__stage > * { position: absolute; }
  .monal-story-hero__glow {
    display: block; left: 50%; top: 0;
    margin-left: calc(var(--monal-u) * -32.4);
    width: calc(var(--monal-u) * 64.8); height: calc(var(--monal-u) * 64.8);
    background: url(../../assets/monal/img/pages/story-m.svg) center / contain no-repeat;
  }
  .monal-story-hero__m {
    /* Natural SVG size, placed so the M core lands on node 329:3380
       (604.04, 592.21). See the base rule for why the box is not the node. */
    left: 50%; top: calc(var(--monal-u) * .71);
    margin: 0 0 0 calc(var(--monal-u) * -44.2);
    width: calc(var(--monal-u) * 91.99); height: calc(var(--monal-u) * 73.45);
    aspect-ratio: auto;
  }
  .monal-story-hero__tile {
    display: block; width: calc(var(--monal-u) * 7); height: calc(var(--monal-u) * 7);
  }
  /* Figma gives each tile a rotated bounding box (93-95.6) around a 70 square;
     these lefts/tops place that 70 square's centre on the Figma centre. */
  .monal-story-hero__tile--1 { left: calc(var(--monal-u) * 31.08);  top: calc(var(--monal-u) * 34.28); }
  .monal-story-hero__tile--2 { left: calc(var(--monal-u) * 61.31);  top: calc(var(--monal-u) * 46.02); }
  .monal-story-hero__tile--3 { left: calc(var(--monal-u) * 121.1);  top: calc(var(--monal-u) * 41.68); }
  .monal-story-hero__tile--4 { left: calc(var(--monal-u) * 153.27); top: calc(var(--monal-u) * 39.75); }
  /* The art, not the tile, carries the rotation, so the tile stays free for
     GSAP's scale-in. */
  .monal-story-hero__tile-art {
    display: block; width: 100%; height: 100%;
    background: center / contain no-repeat;
  }
  .monal-story-hero__tile--1 .monal-story-hero__tile-art { transform: rotate(-25deg); }
  .monal-story-hero__tile--2 .monal-story-hero__tile-art { transform: rotate(-30deg); }
  .monal-story-hero__tile--3 .monal-story-hero__tile-art { transform: rotate(30deg); }
  .monal-story-hero__tile--4 .monal-story-hero__tile-art { transform: rotate(30deg); }
  .monal-story-hero__scroll {
    display: block; left: calc(var(--monal-u) * 92.67); top: calc(var(--monal-u) * 50.42);
    width: calc(var(--monal-u) * 6.65); height: calc(var(--monal-u) * 6.65);
    background: url(../../assets/monal/img/pages/story-scroll.svg) center / contain no-repeat;
    /* The export draws the arrow pointing right (its shaft is the horizontal
       "Arrow 4" path); Figma's own 90deg rotation on the node is what turns it
       downwards, so it has to be reapplied here. */
    transform: rotate(90deg);
  }
  .monal-story-hero__cta {
    pointer-events: auto;
    left: calc(var(--monal-u) * 51.31); top: calc(var(--monal-u) * 24.76);
    width: calc(var(--monal-u) * 23.49); min-height: calc(var(--monal-u) * 5.72);
    padding: 0; margin: 0;
  }
  .monal-story-hero__caption {
    pointer-events: auto;
    left: calc(var(--monal-u) * 123.58); top: calc(var(--monal-u) * 24.02);
    margin: 0; text-align: left;
  }
  .monal-story-hero__kicker { font-size: calc(var(--monal-u) * 2.5); line-height: calc(var(--monal-u) * 3); }
  .monal-story-hero__caption-title { margin-top: calc(var(--monal-u) * 1); font-size: calc(var(--monal-u) * 3.8); line-height: calc(var(--monal-u) * 3.2); }
  /* 329:3423 at y689.43: 3.68 under "The Beginning" (653.75 + its 32 line).
     It was 1.9u, which put the rule 15.35 low. */
  .monal-story-hero__caption-rule { width: calc(var(--monal-u) * 18.52); margin: calc(var(--monal-u) * .368) 0 0; }
}

/* The corner flourish, placed as in Figma 329:3365. At its desktop size its
   swoop cut straight through the lead paragraph on phones, so below 1200 it
   is drawn at half scale and stays in the corner. */
.monal-story-hero > .monal-page__deco--corner {
  width: calc(var(--monal-u) * 25.56); height: calc(var(--monal-u) * 27.63);
  right: calc(var(--monal-u) * -8.75); top: calc(var(--monal-u) * -2);
}
@media (min-width: 1200px) {
  .monal-story-hero > .monal-page__deco--corner {
    width: calc(var(--monal-u) * 51.11); height: calc(var(--monal-u) * 55.25);
    right: calc(var(--monal-u) * -17.5); top: calc(var(--monal-u) * -4);
  }
}