/* ==========================================================================
   Become a Member — page-scoped styles
   Figma node 11277:7459. Spec: roadmap/phase-08-content-pages/artifacts/page-become-a-member-spec.md

   Reuses (no overrides here): page-banner (banners.css), .about-feature-intro
   (about.css), .content-block__* (about.css), .colour-form-cta__* base +
   responsive (partnerships.css), .btn--* (buttons.css).

   Desktop-first: mobile @media (max-width) blocks live AFTER desktop rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Block 4 — Feature Intro lead width
   -------------------------------------------------------------------------- */
/* Lead fills the content width so it wraps to 3 lines per Figma 11277:7469
   (Heading/H5 fill-width). The shared base .about-feature-intro__lead caps at
   900px "for readability" (About Us); this page follows the Figma width. QA #124. */
.about-feature-intro--member .about-feature-intro__lead {
  max-width: none;
}

/* --------------------------------------------------------------------------
   Block 5 — Section_Info wrapper (white) + 5a Membership information
   Figma 11277:7470 (wrapper) / 11277:7471 (5a)
   -------------------------------------------------------------------------- */
.member-info-section {
  display: flex;
  flex-direction: column;
  gap: 112px;                             /* QA #132 — 112px after Membership Details (5a) before How-it-works (Figma 11277:7471 padding-bottom 112) */
  padding: 112px 80px;                    /* Figma 11277:7471 padding 112 80 */
  background-color: var(--color-white);   /* Figma 11277:7470/7471 #FFFFFF */
}

/* Tagline + H2 grouped: column gap 22 (Figma 11277:7474). Overrides base
   .content-block__heading-wrap (margin-only) used elsewhere. */
.member-info-section .content-block__heading-wrap,
.how-it-works .content-block__heading-wrap {
  display: flex;
  flex-direction: column;
  gap: 22px;                              /* Figma 11277:7474 heading-wrap gap 22 */
  margin: 0;
}

/* H2 intentionally uses the base .content-block__heading (44px/1.1). Figma B3
   shows 48px, but we follow the later sitewide Pastel 2026-06-15 decision (44px)
   for consistency with the B2 pages. B3-Q7 — PM 2026-06-23. No override here. */

/* Item title "Who can become a member?" / "Types of members we accept". */
.member-info-section .content-block__copy .content-block__copy-title {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;                       /* Figma 11277:8231 Text/Large/Bold */
  font-size: 20px;                        /* Figma 11277:8231 20px */
  line-height: 1.4;
  color: #000;                            /* Figma 11277:8231 #000000 — untokenized one-off */
}

/* Item body copy + bullets: 18px #000 (Figma 11277:8233 / 11277:8238). */
.member-info-section .content-block__copy p {
  font-size: 18px;                        /* Figma 11277:8233 Text/Medium/Normal */
  color: #000;                            /* Figma 11277:8233 #000000 — untokenized one-off */
}

.member-info-section .content-block__list-bullets {
  margin: 0;
  padding-left: 1.25em;
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: disc;
}

.member-info-section .content-block__list-bullets li {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 18px;                        /* Figma 11277:8238 Text/Medium/Normal */
  line-height: 1.5;
  color: #000;                            /* Figma 11277:8238 #000000 — untokenized one-off */
}

/* Text column + photo share the viewport in a fixed 598:618 ratio (Figma 11277:7471
   text 598 / image 618). flex-basis 0 + proportional grow → both shrink TOGETHER as
   the viewport narrows (text 598px at 1440 satisfies QA #126; below that the text
   column narrows in step with the photo instead of staying fixed and turning the
   photo into a mini-copy — QA #125 follow-up). Stacks to 1 column at ≤1024. */
.member-info-section .content-block__box--list {
  flex: 598 1 0;
  min-width: 0;                          /* allow the text column to shrink below content width */
  gap: 48px;                             /* QA #128 — heading → text content (base box--list is 36) */
}

/* Text content (Figma 11277:8206): items + CTA each 36px apart. */
.member-info-section .content-block__copy-group {
  display: flex;
  flex-direction: column;
  gap: 36px;                              /* Figma 11277:8206 col gap 36 (item → item → CTA, drives the 36px under the button per QA #130) */
}

/* Within an item, title → body → bullets are one tight block (QA #129 — Figma has
   no gap inside the text; base .content-block__copy is 18px). */
.member-info-section .content-block__copy {
  gap: 0;
}

/* "I'm ready to join" CTA is a copy-group child, so its top spacing comes from the
   group's 36px gap (no margin-top needed). It lives OUTSIDE .content-block__copy, so
   about.css `.content-block__copy a` (tangerine + underline) no longer leaks onto it —
   the .btn base keeps it navy-on-white with the design-system white-on-navy :hover
   (QA #131 — the old `color:navy` override here was beating that hover → invisible text). */
.member-info-section .content-block__copy-group .btn--secondary {
  align-self: flex-start;
}

.code-of-conduct-band .content-block__copy a.btn--primary {
  color: var(--color-white);              /* Figma 11361:2248 white label (about.css `.content-block__copy a` tangerine leak) */
  text-decoration: none;
}

/* 5a row: top-align so the photo keeps its own aspect ratio instead of being
   stretched to the (shorter) text-column height. QA #125/#130. */
.member-info-section .content-block__inner {
  align-items: flex-start;
}

/* 5a image: 82px top-right corner cut (Figma 11277:8229). A FIXED aspect-ratio
   frame is the fix for QA #125 — the old `align-self:stretch` locked the frame to
   the text height while its width shrank with the viewport, so object-fit:cover
   cropped the (landscape) photo harder and harder. With a fixed ratio the frame
   scales uniformly (photo shrinks, never crops more). Ratio tuned so the photo sits
   ~36px below the "I'm ready to join" button at 1440 (QA #130). */
.member-info-section .content-block__image {
  flex: 618 1 0;                          /* ratio partner of the 598 text column — shrinks proportionally with it */
  align-self: flex-start;
  aspect-ratio: 618 / 670;                /* Figma 11277:8227 frame (crop ~61%w × 100%h of the 4096×2731 source); height tuned so photo bottom sits 36px below the button at 1440 (QA #130) */
  min-width: 0;
  min-height: 0;
  border-radius: 0;                       /* clip-path supersedes radius */
  clip-path: var(--corner-cut-clip);      /* Figma 11277:8229 82px diagonal cut */
}

.member-info-section .content-block__image img {
  object-position: 61% 50%;               /* Figma 11277:8228 cropTransform — visible window centred at x≈0.61 of the source */
}

/* --------------------------------------------------------------------------
   Block 5b — How it works panel + step cards
   Figma 11278:8241 (panel) / EL-b025a069 (step card)
   -------------------------------------------------------------------------- */
/* Single column: Figma 11278:8241 has ONE child (Content wrapper #11278:8242,
   mode:column), so heading+intro stack ABOVE the cards — NOT a left/right split. */
.how-it-works {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;                 /* Figma 11278:8242 Content wrapper column */
  gap: 36px;                              /* Figma 11278:8242 gap 36 (heading-group → cards) */
  padding: 48px;                          /* Figma 11278:8241 padding 48 */
  background-color: var(--color-navy-lightest-50); /* Figma 11278:8241 rgba(230,231,233,0.5) */
  border-radius: var(--radius-sm);        /* Figma 11278:8241 borderRadius 4 */
}

.how-it-works__content {
  display: flex;
  flex-direction: column;
  gap: 36px;                              /* Figma 11278:8242 gap 36 (tagline/heading → intro) */
}

.how-it-works__intro {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 18px;                        /* Figma 11281:9093 Text/Medium/Normal */
  line-height: 1.5;
  color: var(--color-navy-darkest);       /* Figma 11281:9093 #03060C */
}

.how-it-works__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;             /* Figma 11278:8259 grid repeat(1, minmax(0,1fr)) */
  gap: 24px;                              /* Figma 11278:8259 gap 24 */
}

.step-card {
  display: flex;
  flex-direction: column;
  gap: 18px;                              /* Figma EL-b025a069 gap 18 */
  padding: 24px;                          /* Figma EL-b025a069 padding 24 */
  background-color: var(--color-white);   /* Figma EL-b025a069 #FFFFFF */
  border: 1px solid var(--color-navy-lightest); /* Figma EL-b025a069 stroke #E6E7E9 */
  border-radius: var(--radius-sm);        /* Figma EL-b025a069 borderRadius 4 */
  box-shadow: var(--shadow-md);           /* Figma EL-b025a069 shadow medium */
}

.step-card__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;                              /* Figma EL-b025a069 header gap 18 */
}

.step-card__number {
  flex: 0 0 auto;
  width: 44px;                            /* Figma EL-b025a069 44×44 */
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;                     /* Figma circle */
  background-color: var(--color-tangerine-lighter); /* Figma #FFE0CC */
  color: var(--color-tangerine-dark);     /* Figma #CC5100 */
  font-family: var(--font-family);
  font-weight: 700;                       /* Figma Text/Large/Bold */
  font-size: 20px;                        /* Figma 20px */
  line-height: 1;
}

.step-card__title {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;                       /* Figma Heading/H6 */
  font-size: 20px;                        /* Figma 20px */
  line-height: 1.3;
  color: var(--color-navy);               /* Figma #0B1628 */
}

.step-card__desc {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;                        /* Figma steps 1–4 Text/Regular/Normal 16px */
  line-height: 1.5;
  color: var(--color-navy);               /* Figma #0B1628 */
}

/* Steps 5–6 description = 18px verbatim from Figma (1–4 = 16px). Flagged to
   designer as a likely slip — see spec open question. */
.step-card__desc--lg {
  font-size: 18px;                        /* Figma steps 5–6 Text/Medium/Normal 18px */
}

/* --------------------------------------------------------------------------
   Block 6 — Code of Conduct band
   Figma 11361:2231
   -------------------------------------------------------------------------- */
.code-of-conduct-band {
  padding: 112px 80px;                    /* Figma 11361:2232 padding 112 80 */
  background-color: var(--color-accent-light-blue); /* Figma 11361:2231 #CBDAE6 */
}

/* Single column (heading above copy) — base .content-block__inner is a 2-col row. */
.code-of-conduct-band .content-block__inner--coc {
  flex-direction: column;
  gap: 48px;                              /* Figma 11361:2234 gap 48 */
  align-items: flex-start;
}

.code-of-conduct-band .content-block__box--coc {
  width: 100%;                            /* QA #136 — text stretches to full page width (was max-width 648) */
  max-width: none;
  flex: 1 1 auto;
  gap: 48px;                              /* QA #134 — heading → copy gap 48 (was box 24 + heading-wrap margin 12 = 36) */
}

/* QA #134 — drop the base heading-wrap bottom margin here so the 48px box gap above
   is the only heading → copy spacing (otherwise it stacks to 24+12+... ). */
.code-of-conduct-band .content-block__heading-wrap {
  margin-bottom: 0;
}

/* CoC H2 uses base .content-block__heading (44px/1.1) — sitewide Pastel, see B3-Q7. */

.code-of-conduct-band .content-block__copy--coc {
  gap: 36px;                              /* Figma 11361:2240 gap 36 */
}

.code-of-conduct-band .content-block__copy--coc p {
  font-size: 18px;                        /* Figma 11361:2243 Text/Medium/Normal 18px */
  color: #000;                            /* Figma 11361:2243 #000000 — untokenized one-off */
}

.code-of-conduct-band .content-block__copy--coc .btn {
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   Block 7 — Membership Application (Colour Form CTA) page overrides
   Figma 11361:2326. Base .colour-form-cta__* lives in partnerships.css.
   -------------------------------------------------------------------------- */

/* Outer section padding 112 80 (Figma 11361:2326); base is 64 80 112. Mobile
   values re-asserted below so this desktop override does not leak down. */
.colour-form-cta--membership {
  padding: 112px 80px;                    /* Figma 11361:2326 padding 112 80 */
}

/* Heading is an <h1> here (Figma 11361:2334 Heading/H1 54px bold); base class is H2 44px/400. */
.colour-form-cta--membership .colour-form-cta__heading {
  font-size: 54px;                        /* Figma 11361:2334 Heading/H1 54px */
  font-weight: 700;                       /* Figma 11361:2334 Frutiger 65 Bold */
  line-height: 1.1;
}

/* Watermark: larger + top-anchored vs partnerships (606×606 bottom-left). */
.colour-form-cta--membership .colour-form-cta__logo-watermark {
  width: 679px;                           /* Figma 11361:2363 678.49 */
  height: 691px;                          /* Figma 11361:2363 691.27 */
  left: -142px;                           /* Figma 11361:2363 x:-142.28 */
  top: 391px;                             /* Figma 11361:2363 y:391 (from card top) */
  bottom: auto;
}

/* ==========================================================================
   Mobile — @media (max-width) AFTER desktop (css-architecture.md)
   No Figma mobile frame for B3: derived per roadmap/mobile-derivation-catalog.md.
   ========================================================================== */

/* Form CTA stacks at ≤1024 (partnerships.css base) and the watermark hides there.
   The shared base leaves `.colour-form-cta__content { flex: 0 1 476px }`, which in
   the now-COLUMN card becomes a 476px basis HEIGHT — so the short "Apply now" copy
   (~147px) is padded out to 476px, leaving a large gap before the form. Shrink the
   basis so the copy hugs and sits close to the form once stacked. Scoped to this
   page so Partnerships (longer copy) is unaffected. */
@media (max-width: 1024px) {
  .colour-form-cta--membership .colour-form-cta__content {
    flex: 0 1 160px;
  }

  /* 5a stacks to one column at ≤1024 (about.css base). Re-assert full-width text
     column (the desktop 598px override out-specifies about.css's stacked 100%) and
     swap the photo to a full 3:2 frame — the source is 3:2, so it shows whole, full
     width, no crop. Restores stretch that the desktop flex-start top-align removed. */
  .member-info-section .content-block__inner {
    align-items: stretch;
  }
  .member-info-section .content-block__box--list {
    width: 100%;
    flex: none;
  }
  .member-info-section .content-block__image {
    flex: none;                          /* drop the desktop ratio-grow: in column mode it governs height (basis 0) → collapses the photo */
    width: 100%;
    align-self: stretch;
    aspect-ratio: 3 / 2;
  }
}

@media (max-width: 768px) {
  .member-info-section {
    padding: 50px 20px;                   /* derived — container cap */
    gap: 32px;
  }

  /* H2 mobile size (32px) comes from the base .content-block__heading @768 in
     about.css (Pastel) — no page override needed (B3-Q7). */

  .how-it-works {
    gap: 32px;                            /* tighter than desktop 36 on mobile */
    padding: 32px 20px;
  }

  .code-of-conduct-band {
    padding: 50px 20px;                   /* derived — container cap */
  }

  /* Re-assert partnerships mobile padding so the desktop override above does not leak. */
  .colour-form-cta--membership {
    padding: 48px 24px 64px;              /* partnerships.css mobile parity */
  }

  .colour-form-cta--membership .colour-form-cta__heading {
    font-size: 38px;                      /* derived — H1 mobile step-down */
  }
}

@media (max-width: 402px) {
  .colour-form-cta--membership {
    padding: 32px 16px 48px;              /* partnerships.css 402 parity */
  }
}