/* ==========================================================================
   MindMonks — mobile hero restructure
   Loaded only on the front page, only used below the theme's own mobile
   hero breakpoint (47.99rem). Overrides the theme's absolute-positioned
   "ambient backdrop" composition (see hero.css's own comment on this) with:
     1. the Stillness Field SVG centred on its own, above the copy
     2. the eyebrow / headline / lead / buttons in normal flow below it,
        left-aligned
   The DOM order from front-page.php is content-then-visual (the theme's own
   desktop/tablet layout relies on that source order); .mm-hero__visual gets
   order: 1 / .mm-hero__content gets order: 2 here so the visual order on
   mobile is SVG first, copy second, without touching the markup itself.
   JS in mindmonks-hero-mobile.js drives the scroll-based fade/shrink on
   .mm-hero__visual using the CSS custom properties below.
   ========================================================================== */

@media (max-width: 47.99rem) {

  .mm-hero {
    /* Theme sets this to 0 for the backdrop composition; a real top-of-flow
       visual wants breathing room above it again. */
    padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(2rem, 1rem + 4vw, 3rem);
  }

  .mm-hero__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 1rem + 2vw, 2rem);
  }

  /* Take the visual out of the theme's absolute/background treatment and
     put it back in normal flow, centred, above the copy. */
  .mm-hero__visual {
    order: 1;
    position: relative;
    inset: auto;
    width: min(78vw, 20rem);
    margin-inline: auto;
    justify-content: center;
    opacity: 1;
    pointer-events: auto;
    z-index: auto;
    -webkit-mask-image: none;
    mask-image: none;

    /* Scroll-driven fade/shrink target. JS updates --mm-hero-scroll from 0
       (top of hero, fully visible) to 1 (scrolled past). Falls back to 1
       (no shrink) if JS never runs, so the composition is never broken by
       a script failure. */
    --mm-hero-scroll: 0;
    transform: scale(clamp(0.72, calc(1 - var(--mm-hero-scroll) * 0.28), 1));
    opacity: clamp(0, calc(1 - var(--mm-hero-scroll) * 1.15), 1);
    will-change: transform, opacity;
  }

  .mm-stillness {
    width: 100%;
  }

  .mm-hero__content {
    order: 2;
    padding-top: 0;
    text-align: left;
    align-items: flex-start;
  }

  .mm-hero__title,
  .mm-hero__lead {
    text-align: left;
  }

  .mm-hero__title {
    max-width: 14ch;
  }
}

/* Respect reduced motion: no scroll-driven transform/opacity change at all,
   composition holds as a finished still image (same principle hero.css
   already applies to the field's own internal animation). */
@media (max-width: 47.99rem) and (prefers-reduced-motion: reduce) {
  .mm-hero__visual {
    transform: none !important;
    opacity: 1 !important;
  }
}