/* ============================================================
   Gateway page (gateway.html) - "Join the Movement" (2026-09-25, Maggie's
   mockup in GEM branding). Loaded by gateway.html only; every rule here is
   gw-* so nothing in styles.css is edited or reused except the tokens, the
   .btn / .btn--primary classes and the page's existing short gold divider
   (.gateway-hero__divider). The older .gateway-* rules in styles.css now
   match nothing on this page and are left in place.

   Structure: main.gw carries the photograph for the WHOLE content area
   (2026-09-25 v2: gateway-bg-v2, the seated woman above the mist) -> .gw-hero
   (heading, divider, subheading on the bare picture) -> .gw-cards (three
   white cards rising into the picture: image, title, line, full-width
   primary button) -> the retained comment blocks.

   Measured pairs: heading and subheading --purple-deep on the REAL
   photograph pixels behind them (see the task report); on the white cards
   title --purple-deep 14.49:1, line --text-warm 8.59:1, button white on
   --purple-bright 6.46:1 (hover --purple 12.33:1).
   ============================================================ */

/* ---- the picture, under everything from the header to the footer. No wash,
   no dark overlay.
   From 1024px: cover, anchored top-right (100% 0), so the sunrise and the
   seated woman on the right stay in view whatever the crop; the area is one
   continuous image, so nothing behind the cards can show an edge.
   From 1024px the copy is LEFT-aligned in the container: the woman sits at
   68-84% of the picture's width, which under a right-anchored cover crop is
   the middle of a 1024px screen - a centred heading block would run across
   her at every desktop width - while the left half of the picture is open
   sky and mountains.
   Below 1024px the stacked cards make the area far taller than the picture,
   and cover would blow it up: the 1280px export is anchored top-LEFT at a
   fixed height instead - clamp(830px, 200vw, 900px) - so the centred copy
   sits on sky and the mountain line (the woman is outside that crop), and
   from 520px down it hands over to the flat colour sampled from the
   picture's own mist band (#D0A8A8, the mean of the clouds at 25-75% x,
   70-86% y), fully flat by 820px, behind the card stack. The same colour is
   the ground below, to the footer. */
.gw {
  --gw-overlap: 5.5rem;              /* how far the cards rise into the hero */
  --gw-mist: #D0A8A8;
  background-color: var(--gw-mist);
  background-image:
    linear-gradient(180deg,
      rgba(208, 168, 168, 0) 0px,
      rgba(208, 168, 168, 0) 520px,
      rgba(208, 168, 168, 0.55) 680px,
      #D0A8A8 820px),
    url("../img/gateway/gateway-bg-v2-1280.webp");
  background-size: auto clamp(830px, 200vw, 900px);
  background-position: 0 0;
  background-repeat: no-repeat;
}
@media (min-width: 64rem) {
  .gw {
    background-color: var(--cream);
    background-image: url("../img/gateway/gateway-bg-v2-1536.webp");
    background-size: cover;
    background-position: 100% 0;
  }
}
.gw-hero {
  position: relative;
  text-align: center;
  padding-top: clamp(3.25rem, 7vw, 5.5rem);
  padding-bottom: calc(var(--gw-overlap) + clamp(3rem, 6vw, 5rem));
}
@media (min-width: 64rem) {
  .gw-hero { min-height: 30rem; text-align: left; }   /* 480px of sky above the card row; copy on the left, clear of the woman */
  .gw-hero__title { margin-left: 0; }
  .gw-hero__sub { margin-left: 0; }
  .gw-hero .gateway-hero__divider { margin-left: 0; }
}
.gw-hero__inner { position: relative; }
/* the copy sits directly on the picture - no plate (removed 2026-09-25) */
.gw-hero__copy {
  display: inline-block;
  max-width: 100%;
}
.gw-hero__title {
  margin: 0 auto;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2rem, 4.8vw, 3.25rem);
  line-height: 1.12;
  color: var(--purple-deep);
  text-wrap: balance;
}
.gw-hero__sub {
  margin: 1.1rem auto 0;
  max-width: 34ch;
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  line-height: 1.45;
  color: var(--purple-deep);
}

/* ---- the three cards: white, the site radius and soft shadow, image on top
   (a fixed 4:3 box, so nothing shifts as the picture arrives), centred body,
   the button at the foot of every card so the three line up. */
.gw-cards {
  position: relative;
  margin-top: calc(-1 * var(--gw-overlap));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: transparent;           /* the picture (or its mist colour) runs on to the footer */
}
.gw-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 480px;                  /* one centred column below 1024px */
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 64rem) {
  .gw-grid { max-width: none; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 2.5vw, 2rem); }
}
.gw-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(46, 33, 80, 0.08);
  transition: box-shadow 0.2s ease;
}
.gw-card:hover,
.gw-card:focus-within { box-shadow: 0 10px 28px rgba(46, 33, 80, 0.16); }
.gw-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}
.gw-card__img--left  { object-position: 30% center; }   /* Patients: the subject sits left of centre */
.gw-card__img--right { object-position: 70% center; }   /* Professionals: right of centre */
.gw-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 2.5vw, 1.75rem);
}
.gw-card__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  line-height: 1.2;
  color: var(--purple-deep);         /* 14.49:1 on white */
  text-wrap: balance;
}
.gw-card__line {
  margin: 0.55rem 0 1.4rem;
  max-width: none;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--text-warm);           /* 8.59:1 on white */
}
.gw-card .gw-card__btn {
  margin-top: auto;                  /* the foot of every card, whatever the line's length */
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.0625rem;
}
.gw-card .gw-card__btn > span { margin-left: 0.45rem; }
.gw-card .gw-card__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .gw-card { transition: none; }
}