/* ============================================================
   SECTION 7 — MEMBERSHIP (90svh)
   Benefits-left (icon + stacked title/caption per row — component
   styling in css/components/benefit-row.css) and headline+pouch
   stacked together on the right, so the headline sits directly above
   the pouch and shares its left edge. Mobile keeps its own simple
   stacked flow (pouch, then head, then benefits) — only the desktop
   composition differs.
   ============================================================ */
/* content-height (no forced --band) — uniform padding-based gap to the
   neighbouring sections (see base.css .panel) */
.membership-grid {
  display: flex;
  flex-direction: column-reverse; /* pouch above copy on mobile */
  align-items: center;
  text-align: center;
  gap: var(--s4);
}
/* width:100% (not the align-items:center default of shrink-to-fit) — a
   flex item under align-items:center sizes to its own content's
   fit-content width instead of stretching, and the headline's own
   longest possible (unwrapped) line was wider than the actual mobile
   viewport, so the box grew past the true available width instead of
   forcing the heading to wrap within it — a real overflow bug, not
   just a visual nuance. */
.membership-product { width: 100%; }
@media (min-width: 768px) {
  /* heading top-left with the benefit list beneath it (both in the left
     column), the refill pouch a full-height object in the right column —
     the same copy-left / product-right composition as the Hero.
     .membership-product un-boxes via display:contents so head / figure
     become direct grid items placed by area. */
  .membership-grid {
    display: grid;
    /* minmax(0,1fr), not bare 1fr — a bare 1fr track's automatic minimum
       is "auto" (its content's min-content size), which doesn't shrink;
       at tablet-ish widths (~768-1024px) the head/benefits column's own
       content (e.g. a long unwrapped benefit caption) has a min-content
       width of ~550px, well over half the section, so the pouch column
       next to it was being squeezed down to almost nothing to compensate
       (confirmed: pouch column computed to ~40px at 804px viewport width).
       minmax(0,1fr) lets this column actually shrink/wrap instead. */
    grid-template-columns: minmax(0, 1fr) minmax(0, min(480px, 44%));
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "head     figure"
      "benefits figure";
    align-items: start;
    column-gap: clamp(56px, 7vw, 112px);
    row-gap: clamp(24px, 3.5svh, 44px);
    text-align: left;
  }
  .membership-product { display: contents; }
  /* container-type for the shared --type-headline token's cqw term
     (css/tokens.css, consumed by .hero-headline in hero.css). This
     column is `minmax(0,1fr)` (no flat px cap of its own), but the
     shared .wrap container itself caps at --container, so past that
     point this column ALSO stops growing — confirmed as the single
     worst overflow of the three sections this affected (200px, "More
     than a bottle" visibly clipped behind the pouch at 2560px wide,
     before the shared-token fix). No section-specific font-size
     override needed here any more. */
  .membership-head { grid-area: head; display: flex; flex-direction: column; container-type: inline-size; }
  .membership-head .hero-headline { order: 1; }
  /* "Made for the long run" demoted from an eyebrow to a hero-sub-style
     subheading below the title — same treatment as the transparency sub
     "Trust starts long / before the bottle" */
  .membership-head .eyebrow {
    order: 2;
    margin-top: var(--s3);
    max-width: 34ch;
    font-weight: 400;
    font-size: min(clamp(19px, 2.6svh, 23px), 3.4vw);
    line-height: 1.5;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--text-muted);
  }
  .membership-benefits { grid-area: benefits; margin-top: 0; }
  /* pouch spans both rows and is centred in that full-height right column */
  .membership-figure {
    grid-area: figure;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    /* raised 20%, then a further 10% per request (30% total) — transform
       doesn't affect the flex centring math or the pf-img height formula
       below, it just shifts the whole already-centred pouch up on the
       page. */
    transform: translateY(-30%);
  }
  /* enlarge the pouch to fill the section height, the way the hero bottle
     fills the hero — sized off the real viewport height. (The image itself
     is now cropped to tight, even margins, so no translateY nudge is needed
     to pull the cap up any more.) */
  .membership-figure .pf-img { height: min(calc((100svh - 120px) * 0.78), 760px); }
}
/* short/landscape viewport (see hero.css's matching query) — the pouch's
   height formula shrinks a lot here, and centring it (the normal desktop
   treatment) leaves it floating mid-column with dead space above instead
   of starting at the heading's own top. flex-start makes it hug the top
   of the stretched figure column instead — that column's top already
   lines up with the heading's top via the shared grid-area span, so this
   is the same "start right under the heading" the mobile layout gets via
   align-self:stretch (css/sections/membership.css's max-width:767 block). */
@media (min-width: 768px) and (max-height: 600px) {
  .membership-figure { align-items: flex-start; }
  /* the desktop formula above (`(100svh - 120px) * 0.78`) squeezes the
     pouch hard at this height — the flat 120px offset alone is ~29% of a
     420px-tall viewport before the 0.78 multiplier even applies, so it
     renders noticeably smaller than the other product figures' own
     landscape overrides (e.g. products.css's trio bottles at 40vh). Give
     it its own vh-based formula, same proportion, no fixed offset to eat
     into a viewport this short. */
  .membership-figure .pf-img { height: clamp(200px, 78vh, 400px); }
  /* no font-size override needed here any more — desktop now uses the
     shared --type-headline token with no section-specific override (see
     the container-type comment above), so hero.css's bare `.hero-
     headline` landscape rule applies cleanly with nothing left to fight
     it on specificity. */
  /* cancel the desktop-only "raise 20%" translate above — this breakpoint
     already top-aligns the pouch (align-items:flex-start) instead of
     centring it, so the two adjustments would otherwise stack. */
  .membership-figure { transform: none; }
}

/* ---- benefit rows: icon + stacked title/caption, left column ---- */
.membership-benefits {
  /* was its own clamp(24px, 3.5svh, 40px) — folded into the shared
     standard tier (4svh, not 3.5) per the type-system audit; the ~4.5px
     difference at typical viewport heights is not visually meaningful,
     and this was one of five near-identical copies of the same idea. */
  margin-top: var(--space-fluid-standard);
  width: min(460px, 100%);
}
.membership-benefits li {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 20px);
  /* "40-48px" row rhythm — plain margin, not a divider border:
     whitespace alone carries the separation ("no decorative elements"
     is an explicit goal here, unlike section 2's dividers) */
  margin-top: clamp(40px, 4.5svh, 48px);
}
.membership-benefits li:first-child { margin-top: 0; }
/* short/landscape viewport (see hero.css's matching query) — none of
   this list's rhythm was ever height-aware: row gap and the list's own
   top margin were svh-based but already sitting at their floor by 420px
   tall, and the icon was a flat 52px with no override at all. Four rows
   at full desktop size is what pushed this section's total height (594px
   measured) so far past the actual 420px viewport — only 2 of 4 rows
   were even visible without scrolling. */
@media (min-width: 768px) and (max-height: 600px) {
  .membership-benefits { margin-top: 12px; }
  .membership-benefits li { margin-top: clamp(10px, 3vh, 16px); gap: 12px; }
  .membership-benefits .benefit-icon { width: 28px; height: 28px; }
  .membership-benefits .feature-title { font-size: 11px; }
  .membership-benefits .feature-caption { margin-top: 2px; font-size: 12px; line-height: 1.3; }
}

/* ---- MOBILE: head spans the top (big hero-style heading + a hero-sub-
   style subheading beneath it), then a two-column row with the benefit
   list on the LEFT and the refill pouch on the RIGHT showing only its
   left half (the rest runs off the screen edge). .membership-product
   un-boxes via display:contents so its head + figure become direct grid
   items alongside the benefit list and can be placed by area. ---- */
@media (max-width: 767px) {
  /* figure now spans BOTH rows (head + benefits) in its own column, same
     area pattern as desktop's "head figure / benefits figure" — its top
     edge lines up exactly with the heading's own top instead of starting
     further down beside the benefit list. align-items:start (not center)
     so the figure's stretched height doesn't get vertically re-centred
     against the (shorter) head+benefits column. */
  .membership-grid {
    display: grid;
    grid-template-columns: 1fr minmax(0, 42%);
    grid-template-areas:
      "head    figure"
      "benefits figure";
    align-items: start;
    column-gap: clamp(8px, 2vw, 16px);
    row-gap: clamp(28px, 5svh, 48px);
    text-align: left;
  }
  .membership-product { display: contents; }

  /* item 9 — heading IS the hero headline now (literally .hero-headline,
     not a lookalike clone — see build/components/Membership.mjs), so its
     mobile size comes for free from hero.css's own mobile override; the
     old eyebrow is demoted to a hero-sub-style subheading placed BELOW
     the heading (order:2), matching the hero's headline-then-sub reading
     order. */
  .membership-head {
    grid-area: head;
    display: flex;
    flex-direction: column;
  }
  .membership-head .hero-headline { order: 1; }
  .membership-head .eyebrow {
    order: 2;
    margin-top: var(--s3);
    max-width: 34ch;
    font-weight: 400;
    font-size: clamp(21px, 5.2vw, 25px);
    line-height: 1.5;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--text-muted);
  }

  /* item 12 — benefit block to the LEFT of the pouch. Row rhythm tightened
     a touch to fit the narrower column; headings match "NO FRAGRANCE"
     (12px tracked caps) and captions drop to the shared body tier. */
  .membership-benefits {
    grid-area: benefits;
    margin: 0;
    width: 100%;
    text-align: left;
  }
  .membership-benefits li { margin-top: clamp(26px, 4svh, 38px); }
  .membership-benefits li:first-child { margin-top: 0; }
  /* smaller icon in the narrow mobile column (desktop bumps it to 52px) */
  .membership-benefits .benefit-icon { width: 38px; height: 38px; }
  .membership-benefits .feature-title {
    font-size: var(--t-label);
    letter-spacing: 0.16em;
  }
  .membership-benefits .feature-caption {
    margin-top: 6px;
    font-size: var(--t-body);
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--text-muted);
  }

  /* item 11 — pouch shows only its LEFT half; the right half runs off the
     true screen edge (figure clips, and margin-right bleeds the clip edge
     out past the content gutter to the real viewport edge). align-self:
     stretch (not a fixed height clamp) makes the figure span the full
     combined height of the head+benefits column next to it, so its own
     top edge lands exactly level with the heading's top — enlarging it
     automatically instead of guessing at a bigger clamp value. */
  .membership-figure {
    grid-area: figure;
    align-self: stretch;
    position: relative;
    display: block;
    overflow: hidden;
    margin-right: -20px;
  }
  .membership-figure .product-figure {
    position: static;
    display: block;
    height: 100%;
  }
  .membership-figure .pf-img {
    position: absolute;
    top: 0;
    right: 0;
    /* centre the pouch on the figure's right edge → left half visible,
       right half clipped beyond the screen edge. height:100% now fills
       the stretched figure exactly (see above); width:auto preserves
       the pouch's own aspect ratio off that height. */
    transform: translateX(50%);
    width: auto;
    height: 100%;
    max-width: none;
  }
}