/* ==========================================================================
   Legacy Maker — client intake page

   Loaded ON TOP OF styles.css, never instead of it. Everything shared with
   the rest of the Heartcore estate — the colour tokens, the three brand
   faces, .band / .wrap / .nav / .footer / .display-* / .btn — comes from
   there unchanged, which is the whole point: this page was built by copying
   that stylesheet byte for byte out of Revenue Jump's public-optin, so the
   two sites cannot drift apart by accident.

   This file adds only what this page has that no other page does: the
   form-beside-photo grid, and the wrapper around GoHighLevel's iframe.

   Capri house rules, inherited and followed here:
     - radius 40 on cards, 999px pills on buttons
     - ZERO shadows anywhere. Separation is a 1px navy-15 border
     - flush colour bands, left-aligned text
     - F37 Bergman for display, F37 Moon for subheads, Work Sans for body

   ⚠ /css/ is served immutable for a year (see _headers). Editing this file
   means bumping its ?v= in index.html, or every returning visitor keeps the
   old copy and the change reaches nobody.
   ========================================================================== */

/* ---------- The two-column shell ----------

   Desktop: form left, photo right. Mobile: photo stacks UNDER the form.

   ⚠ DOM ORDER IS THE MOBILE LAYOUT. The form comes first in the markup and
   the photo second, so the single-column stack is form-then-photo with no
   ordering CSS at all — which is what was asked for. Do not reach for
   `order:` to "fix" the desktop side; the desktop rules are the ones that
   deviate from the source order, and they do it with grid columns.

   The form column is the wider of the two because a GoHighLevel form renders
   its own fields at its own widths inside an iframe we do not control. Give
   it under about 520px and its two-up field rows wrap into a ragged column
   that we cannot restyle from out here. The fr split below keeps it roughly
   58/42 of the available width. */
.intake-split {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;

  /* Capped well inside the 1600px .wrap and centred, which is what every
     other narrow section in this design system does (see .intake in Revenue
     Jump's intake.css). The brand guide's "left-aligned throughout" rule is
     about TEXT alignment, not column position — the text inside both columns
     is still flush left.

     The cap is doing real work rather than taste. The GoHighLevel form lays
     itself out at a fixed width of roughly 570px inside the iframe and
     CENTRES itself in whatever space it is given, so every pixel of column
     past that turns into white padding inside the card, not into a wider
     form. Uncapped on a 1920px screen the card ran ~730px wide with 80px of
     dead white down each side of the fields. The numbers below are chosen so
     the card's inner width lands close to that 570px: the form fills its
     card, and the card's own border is what frames it. */
  max-width: 74rem;
  margin-inline: auto;
}

@media (min-width: 62rem) {
  .intake-split {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }
}

/* ---------- The form column ---------- */

.intake-form__head {
  margin: 0 0 1.75rem;
}

.intake-form__head h1 {
  margin: 0 0 0.75rem;
}

.intake-form__head p {
  margin: 0;
  max-width: 34em;
}

/* The card the iframe sits in. White on cream with a hairline border, matching
   .wl-card on the Revenue Challenge pages — the GHL form renders on a white
   ground of its own, so without this it floats as a white rectangle with no
   edge against the cream band.

   overflow:hidden clips the iframe's corners to the card radius; the iframe
   carries its own 3px radius in the embed snippet and that is far too small
   to read as intentional next to a 40px card. */
/* Asymmetric padding, deliberately: the GoHighLevel form brings roughly 70px
   of its own padding above its first heading and a similar amount below its
   submit button, so matching our 2rem on the block axis stacked ~105px of
   white before the form began. The inline axis gets the full amount because
   the form's own side padding is much tighter and the fields would otherwise
   sit close to the border. Measure before changing either number — the inside
   of that iframe is cross-origin, so the only way to see it is on screen. */
.intake-form__card {
  background: var(--white);
  border: 1px solid var(--navy-15);
  border-radius: var(--card-radius);
  padding: clamp(0.5rem, 1vw, 0.875rem) clamp(1.25rem, 2.5vw, 2rem);
  overflow: hidden;
}

/* ⚠ DO NOT SET height ON THE IFRAME HERE, AND NEVER WITH !important.

   GoHighLevel's form_embed.js is iframe-resizer underneath. The form inside
   the frame measures itself ONCE, at init, and posts the number out as
   `[iFrameSizer]<id>:<height>:<width>:init`; the script writes that height
   straight onto the element as an inline style. Verified live on this page —
   the handshake reports 1400x572 and the script applies 1405px.

   An author-stylesheet declaration marked !important beats an inline style,
   so a height with !important here would win the cascade and freeze the form
   at whatever number we guessed. On a form that is ~1400px tall and taller
   still on a phone, every question past that point would sit behind a nested
   scrollbar. The height belongs to the measurement, not to us.

   min-height is the safe half of the pair: it holds the card open between
   first paint and the handshake so the page does not start as a 150px sliver
   and jolt downward, and the applied height is always larger, so it never
   competes. */
.intake-form__card iframe {
  display: block;
  width: 100%;
  min-height: 620px;
  border: none;
}

/* Shown only if form_embed.js never loads — an ad blocker, a corporate proxy,
   or GoHighLevel being down. Without it the visitor gets a blank white card
   and no way to know the page is broken rather than empty. Unhidden by the
   inline watchdog at the foot of index.html. */
.intake-form__fallback {
  margin: 1.25rem 0 0;
  font-family: var(--subhead);
  font-size: 0.9375rem;
  color: var(--navy);
}

/* ---------- The photo column ----------

   NOT sticky. It was, for one deploy, and sticky was solving the wrong
   problem: the page scrolled, the card scrolled away with it, and the photo
   hung on behind. The locked layout further down removes the page scroll
   entirely, so there is nothing left for it to stick to.

   The brand has no shadows, so the photo carries the same 40px radius as the
   card beside it and nothing else. 3:4 is the source aspect ratio, declared
   here as well as on the <img> so the column reserves its height before the
   file arrives and nothing jumps on load. The locked layout overrides the
   ratio; this is what stacked and short-viewport layouts use. */
.intake-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--card-radius);
}

/* ==========================================================================
   THE LOCKED LAYOUT — one screen, no page scroll, the form scrolling in place

   What this does, and it is a different shape of page rather than a tweak:
   the nav, the heading, the card, the photo and the footer are all laid out
   to fill exactly one viewport. The page itself does not scroll at all. The
   form scrolls INSIDE its card, so moving through the questions feels like
   working in a panel rather than dragging the whole page, the photo stays
   put because it never had to move, and the footer sits on the bottom edge
   because there is nowhere further down for it to be.

   ⚠ IT IS GATED ON HEIGHT AS WELL AS WIDTH, and the height half is the
   important one. `overflow: hidden` on the body makes anything that does not
   fit unreachable — no scrollbar, no way down. On a short window there is
   not enough room between the nav and the footer to hold a usable card, and
   the photo would crop to a letterboxed strip of her midsection. Below
   52rem tall the page falls back to ordinary scrolling, which is correct
   rather than a compromise: every rule in here is an enhancement over a
   layout that already works.

   Do not lower that threshold without looking at the photo at the new size.
   ========================================================================== */
@media (min-width: 62rem) and (min-height: 52rem) {

  /* The shell. Each link in this chain needs min-height:0, because a flex
     item's default min-height is auto — it refuses to shrink below its
     content — and one missing declaration anywhere here lets the card's
     1400px of form push the footer off the bottom of the screen instead of
     scrolling inside its own box. */
  html {
    height: 100%;
  }

  body {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  main {
    flex: 1;
    min-height: 0;
    display: flex;
  }

  .intake-band {
    flex: 1;
    min-height: 0;
    display: flex;
    /* The band's usual generous padding is most of a heading's worth of
       vertical space, and in here every pixel of it comes off the card. */
    padding-block: clamp(1.5rem, 2.5vh, 2.25rem);
  }

  .intake-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .intake-form__head {
    margin-bottom: clamp(1rem, 2vh, 1.75rem);
  }

  .intake-split {
    flex: 1;
    min-height: 0;

    /* ⚠ UNDOES align-items:start FROM THE BASE RULE, and without it none of
       the rest of this works. `start` sizes each column to its own content,
       so the form column became as tall as the whole 1658px form, the card
       filled it, and the card's flex:1 had nothing to push against —
       the form simply ran down the page and out through the footer.
       `stretch` is what makes both columns exactly the row's height. */
    align-items: stretch;
    /* Wider than the stacked layout's cap and a wider form column with it.
       The card now scrolls, so its width only has to suit the form inside —
       GoHighLevel renders this one at a configured 650px, and a card that
       fits that exactly is the difference between a form sitting in a panel
       and a form floating in one. */
    max-width: 80rem;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }

  .intake-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* ---- The card is the only thing on the page that scrolls ----
     overflow-y goes from hidden to auto, which is the whole feature. The
     iframe inside keeps its full measured height (~1400px) and this box
     shows a window onto it.

     ⚠ THE IFRAME MUST STAY AT ITS FULL HEIGHT for this to work. If anything
     ever pins it to the card's height instead, the card stops scrolling and
     GoHighLevel's own scrollbar takes over inside the frame — which looks
     nearly identical and behaves worse, because the form's own scroll
     position is not something this page can see or restore. */
  .intake-form__card {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;      /* don't hand the scroll to the page */

    /* A default scrollbar on a white card is the one piece of raw browser
       chrome in an otherwise finished page. Thin, in the brand's own hairline
       navy, on both engines that support it. */
    scrollbar-width: thin;
    scrollbar-color: var(--navy-15) transparent;
  }

  .intake-form__card::-webkit-scrollbar {
    width: 8px;
  }

  .intake-form__card::-webkit-scrollbar-thumb {
    background: var(--navy-15);
    border-radius: var(--pill);
  }

  .intake-form__card::-webkit-scrollbar-track {
    background: transparent;
  }

  /* ---- The photo matches the card exactly ----
     Its own 3:4 ratio is dropped so it can be whatever height the row is,
     and object-fit crops rather than squashes.

     object-position is 50% 18%, not the default 50% 50%. A full-length
     portrait in a box shorter than 3:4 has to lose something at top or
     bottom, and centring loses both ends at once — it took her face off
     first. Biasing towards the top keeps her head and shoulders in frame at
     every height this layout allows, and spends the crop on pavement. */
  .intake-photo,
  .intake-photo picture {
    display: block;
    height: 100%;
    min-height: 0;
  }

  .intake-photo img {
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 50% 18%;
  }

  /* Nothing is scrolling past it any more, so it does not need to stick, and
     a sticky element inside an overflow:hidden shell is dead weight. */
  .intake-photo {
    position: static;
  }

  /* Pulled in tight: in a locked layout this is a footer on the bottom edge
     of the screen, not the end of a long page, and it should not take a
     bite out of the card to say so. */
  .footer {
    padding-block: 1.25rem;
  }
}