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

/* ==========================================================================
   STORY — Our Journey   329:3433
   Two 335x542 panels, the rear one offset +360.89/+54, an orange badge
   overlapping the lower left, and the copy column at x1084.
   ========================================================================== */
.monal-story-journey { position: relative; padding-top: var(--monal-page-gap); }
.monal-story-journey__inner { display: grid; gap: calc(var(--monal-u) * 3); }
/* Without a cap the pair stretches to the full container, so at 1024 each
   panel came out 473 x 766 - nearly double its desktop size, and the page grew
   taller than it is on desktop. Capping the pair keeps them near the Figma
   proportion at every width; below ~630px the container is narrower than the
   cap, so it simply stops applying. */
.monal-story-journey__art {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--monal-u) * 1.4);
  /* An explicit width, not max-width: auto margins on a grid item switch it
     from stretch to fit-content, which collapses aspect-ratio panels. */
  width: min(100%, calc(var(--monal-u) * 62)); margin-inline: auto;
  /* Desktop insets the front panel 88 of the pair's 784 so the badge can
     overhang its left edge; the same 11.2% inset keeps that on mobile. */
  padding-left: calc(min(100%, var(--monal-u) * 62) * .112);
}
.monal-story-journey__panel {
  width: 100%;
  border-radius: 0 calc(var(--monal-u) * 3) 0 calc(var(--monal-u) * 3);
  background: var(--monal-c-green-10);
  aspect-ratio: 335 / 542;
}
.monal-story-journey__panel--rear { margin-top: calc(var(--monal-u) * 2.4); }
/* As on desktop, the badge sits across the front panel's left edge instead of
   hanging below it into the heading. Its bottom is flush with the panel's
   (the rear panel's 2.4 drop), which keeps it clear of the panel's centred
   content at 320, and 40% of the pair keeps its right edge well inside the
   front panel at every phone width. */
.monal-story-journey__badge {
  position: absolute; left: 0; bottom: calc(var(--monal-u) * 2.4);
  display: grid; place-items: center; text-align: center;
  width: 40%; min-height: calc(var(--monal-u) * 6.4);
  padding: calc(var(--monal-u) * .8);
  background: var(--monal-c-orange); color: #fff;
  border-radius: 0 calc(var(--monal-u) * 1.4) 0 calc(var(--monal-u) * 1.4);
  font-weight: 600; font-size: max(calc(var(--monal-u) * 1.3), 12px); line-height: 1.15;
  text-transform: uppercase;
}
.monal-story-journey__title { color: var(--monal-c-ink); }
.monal-story-journey__body { margin-top: calc(var(--monal-u) * 1.6); display: grid; gap: calc(var(--monal-u) * 1.6); }

@media (min-width: 1200px) {
  /* Figma band 1161.59 - 1907.8. */
  .monal-story-journey { padding-top: 0; min-height: calc(var(--monal-u) * 74.62); }
  .monal-story-journey__inner {
    grid-template-columns: calc(var(--monal-u) * 89.6) minmax(0, 1fr);
    gap: 0;
    align-items: start;
  }
  /* The desktop panels are absolutely positioned against this box, so the
     mobile cap must not narrow it. */
  .monal-story-journey__art {
    display: block; height: calc(var(--monal-u) * 59.62);
    width: auto; margin-inline: 0; padding-left: 0;
  }
  .monal-story-journey__panel {
    position: absolute; width: calc(var(--monal-u) * 33.51); height: calc(var(--monal-u) * 54.22);
    aspect-ratio: auto; border-radius: 0 calc(var(--monal-u) * 5) 0 calc(var(--monal-u) * 5);
  }
  .monal-story-journey__panel--front { left: calc(var(--monal-u) * 8.8); top: 0; z-index: 1; }
  .monal-story-journey__panel--rear  { left: calc(var(--monal-u) * 44.89); top: calc(var(--monal-u) * 5.4); margin: 0; }
  .monal-story-journey__badge {
    left: 0; bottom: auto; top: calc(var(--monal-u) * 38.29); z-index: 2;
    width: calc(var(--monal-u) * 22.4); min-height: calc(var(--monal-u) * 8.36);
    border-radius: 0 calc(var(--monal-u) * 2) 0 calc(var(--monal-u) * 2);
    font-size: calc(var(--monal-u) * 1.8); line-height: calc(var(--monal-u) * 2);
  }
  .monal-story-journey__copy { padding-top: calc(var(--monal-u) * 12.01); }
  .monal-story-journey__body { margin-top: calc(var(--monal-u) * 5); gap: calc(var(--monal-u) * 3.6); width: calc(var(--monal-u) * 63.63); }
  .monal-story-journey__body p { line-height: calc(var(--monal-u) * 3.6); }
}