/* =========================================================================
   intro.css - (3) INTRO · id="intro"
   Figma frame 1:4, y 994..2066 (1072px). Copy 1:27 (820x360 at x550 y1195,
   Futurism Light 40/100% centred), CTA 1:59 (dark, x855 y1579), four
   197x322 image crops (1:32..1:35) and the line-art flower 1:5 whose top
   edge sits at y1748 and continues under the dark "why" photo.
   Desktop (>=1024px) is Figma-exact via --u; below that the layout flows.
   ========================================================================= */

#intro {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #fff;
}

#intro .intro__inner {
  position: static;
  max-inline-size: none;
  padding: 0;
}

#intro .intro__text {
  position: relative;
  z-index: 2;
  margin-inline: auto;
  text-align: center;
}

#intro .intro__p {
  margin: 0;
  color: var(--fg-brown);
  font-family: var(--font-heb);
  font-weight: var(--fw-light);
}

#intro .intro__media {
  position: absolute;
  z-index: 1;
  margin: 0;
  pointer-events: none;
}

#intro .intro__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

#intro .intro__lineart {
  position: absolute;
  z-index: 0;
  left: 0;
  display: block;
  max-inline-size: none;
  block-size: auto;
  margin: 0;
  pointer-events: none;
}

/* ----- Desktop: Figma geometry ---------------------------------------- */
@media (min-width: 1024px) {
  #intro { block-size: calc(1072 * var(--u)); }

  #intro .intro__text {
    inline-size: calc(820 * var(--u));
    padding-block-start: calc(201 * var(--u));
  }

  #intro .intro__p {
    font-size: calc(40 * var(--u));
    line-height: 1;
  }

  /* 1:27 is one text box: the paragraph gap is one empty 40px line */
  #intro .intro__p + .intro__p { margin-block-start: calc(40 * var(--u)); }

  /* 1:59 at x855 y1579: 24px below the 360px copy box (last line of the box is empty), 9px left of centre */
  #intro .intro__cta {
    position: relative;
    left: calc(-9 * var(--u));
    margin-block-start: calc(64 * var(--u));
  }

  #intro .intro__media {
    inline-size: calc(197 * var(--u));
    block-size: calc(322 * var(--u));
  }
  #intro .intro__media--left-outer  { left: calc(76 * var(--u));   top: calc(155 * var(--u)); }
  #intro .intro__media--left-inner  { left: calc(293 * var(--u));  top: calc(302 * var(--u)); }
  #intro .intro__media--right-inner { left: calc(1429 * var(--u)); top: calc(315 * var(--u)); }
  #intro .intro__media--right-outer { left: calc(1647 * var(--u)); top: calc(155 * var(--u)); }

  /* 1:5 rendered at frame width; its top edge is at 1748 - 994 = 754 */
  #intro .intro__lineart {
    top: calc(754 * var(--u));
    inline-size: calc(1920 * var(--u));
  }
}

/* ----- Tablet + mobile: flowing layout -------------------------------- */
/* --m-w  image width, --m-t2 top of the inner pair, --la-h visible line-art height */
@media (max-width: 1023.98px) {
  #intro {
    --m-w: clamp(76px, 15vw, 132px);
    --m-t1: clamp(1.25rem, 3vw, 2rem);
    --m-t2: calc(var(--m-t1) + var(--m-w) * .45);
    --la-w: max(150vw, 600px);
    --la-h: calc(var(--la-w) * 660 / 3840);
    padding-block: calc(var(--m-t2) + var(--m-w) * 1.635 + clamp(1.5rem, 4vw, 2.5rem))
                   calc(var(--la-h) + clamp(1.5rem, 5vw, 3rem));
  }

  #intro .intro__text {
    max-inline-size: min(34rem, calc(100% - 2 * var(--container-pad)));
  }

  #intro .intro__p {
    font-size: clamp(1.1rem, 3.2vw, 1.6rem);
    line-height: 1.35;
  }
  #intro .intro__p + .intro__p { margin-block-start: 1em; }

  #intro .intro__cta { margin-block-start: clamp(1.5rem, 4vw, 2rem); }

  #intro .intro__media {
    top: var(--m-t1);
    inline-size: var(--m-w);
    aspect-ratio: 197 / 322;
  }
  #intro .intro__media--left-outer  { left: clamp(0px, 3.96vw, 40px); }
  #intro .intro__media--right-outer { right: clamp(0px, 3.96vw, 40px); }
  #intro .intro__media--left-inner  { left: calc(clamp(0px, 3.96vw, 40px) + var(--m-w) * 1.1); top: var(--m-t2); }
  #intro .intro__media--right-inner { right: calc(clamp(0px, 3.96vw, 40px) + var(--m-w) * 1.1); top: var(--m-t2); }

  /* flower centre sits at ~43.6% of the exported strip */
  #intro .intro__lineart {
    bottom: 0;
    left: 50%;
    inline-size: var(--la-w);
    transform: translateX(-43.6%);
  }
}

/* phones: only the outer pair, side by side above the copy */
@media (max-width: 480px) {
  #intro { --m-w: clamp(72px, 24vw, 100px); --m-t2: var(--m-t1); }
  #intro .intro__media--left-inner,
  #intro .intro__media--right-inner { display: none; }
}