/* ==========================================================================
   Why Join? — page-scoped styles
   Figma node 11256:1179. Spec: roadmap/phase-08-content-pages/artifacts/page-why-join-spec.md

   Reuses (no overrides here): page-banner (banners.css), .content-block__* image-left
   (about.css), .card / .card--icon-strip / .card-grid--3 (cards.css), .section-tagline
   (typography.css), .btn--* (buttons.css), .colour-form-cta__* base + responsive
   (partnerships.css).

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

/* --------------------------------------------------------------------------
   Block 4 — Section_Why join (Figma 11256:1237) — white content-block, image-left
   Base .content-block__* (image-left, corner-cut) lives in about.css; only the
   section wrapper padding/background is page-scoped.
   -------------------------------------------------------------------------- */
.why-join-content-block {
  padding: 112px 80px;                    /* Figma 11256:1237 layout_padding 112 80 */
  background-color: var(--color-white);   /* Figma 11256:1237 #FFFFFF */
}

/* Whole-block responsive fix (mirror of Become-a-Member MEMBERSHIP DETAILS,
   become-a-member.css .member-info-section). Two parts:

   1. Text column + image are flex RATIO PARTNERS (Figma 11256:1239 — box 496 /
      image 720): flex-basis 0 + proportional grow → both shrink TOGETHER as the
      viewport narrows. The about.css base leaves the text box fixed at 496px, so
      only the image shrank and the photo turned into a mini-copy beside a big
      fixed text column.
   2. The image gets a FIXED aspect-ratio frame + align-self:flex-start instead of
      the base align-self:stretch — stretch locked the frame to the text-column
      height while the width shrank, so object-fit:cover cropped the landscape photo
      harder and harder. A fixed ratio scales uniformly (photo shrinks, never crops
      more). Figma 11256:1250 frame 720×560 (FILL cover, needsCropping false).
      Corner-cut clip-path inherited from the base .content-block__image--left. */
.why-join-content-block .content-block__inner--image-left {
  align-items: flex-start;                /* top-align — neither column stretches to the other's height */
}

.why-join-content-block .content-block__box {
  flex: 496 1 0;                          /* Figma 11256:1239 Content Box 496 — ratio partner (was fixed width:496/flex-shrink:0) */
  width: auto;
  min-width: 0;                           /* allow the text column to shrink below its content width */
}

/* Copy weight (Figma 11256:1248): the text node is Text/Regular/BOLD, with the
   middle paragraphs as 55-Roman (normal) spans → paras 1 + 4 bold, 2 + 3 normal.
   The about.css base .content-block__copy p is normal weight, so all four rendered
   normal. Set the base bold here; the inline font-weight:400 spans on paras 2/3
   (template) keep them normal. Colour is uniform #03060C (base) — no change. */
.why-join-content-block .content-block__copy p {
  font-weight: 700;                       /* Figma 11256:1248 Text/Regular/Bold (Frutiger 65 Bold) */
}

.why-join-content-block .content-block__image--left {
  flex: 720 1 0;                          /* Figma 11256:1239 image 720 — ratio partner of the 496 text column */
  align-self: flex-start;                 /* was stretch (base) — stop locking height to the text column */
  aspect-ratio: 720 / 560;                /* Figma 11256:1250 frame 720×560 — uniform scale, no narrowing crop */
  min-height: 0;                          /* height tracks the ratio, not the base min-height */
  max-height: 499px;                      /* cap so the photo is never taller than the text column (object-fit:cover absorbs the cap) */
}

/* --------------------------------------------------------------------------
   Block 5 — Section_Benefits (Figma 11256:1181) — light-blue band
   -------------------------------------------------------------------------- */
.why-join-benefits {
  padding: 112px 80px;                    /* Figma 11256:1181 layout_padding 112 80 */
  background-color: var(--color-accent-light-blue); /* Figma 11256:1181 #CBDAE6 */
}

.why-join-benefits__inner {
  max-width: 1280px;                      /* Figma 11256:1183 w1280 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;                              /* Figma 11256:1182 Content Wrapper gap 48 (intro → card grid). Was 112 (that's the section root gap 11256:1181, which has a single child). QA 2026-06-25 wrote 64 but live Figma is 48. */
}

/* Intro row: tagline+H2 left, CTA right */
.why-join-benefits__intro {
  display: flex;
  flex-direction: row;                    /* Figma 11256:1183 row */
  justify-content: space-between;
  align-items: flex-start;                /* button pinned to the top-right, not vertically centred on the taller title column (Figma 11256:1183) */
  gap: 24px;
}

.why-join-benefits__intro-content {
  display: flex;
  flex-direction: column;
  gap: 22px;                              /* Figma 11256:1184 gap 22 (tagline → H2) */
}

.why-join-benefits__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                       /* Figma 11256:1188 Heading/H2 Roman */
  font-size: 44px;                        /* Figma 11256:1188 44px (verbatim — not 48) */
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-navy);               /* Figma 11256:1188 #0B1628 */
}

.why-join-benefits__intro > .btn {
  flex: 0 0 auto;                         /* keep CTA from shrinking */
}

/* Grid is a <ul>: kill the default list bullets/indent, and make each card fill
   its grid cell so all cards in a row are EQUAL HEIGHT (Figma 11256:1194 — uniform
   card height; ours varied with text length). */
.why-join-benefits__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 24px;                              /* Figma 11256:1194 grid gap 24 (base .card-grid is 32) */
}

.why-join-benefits__grid > li {
  display: flex;                          /* card stretches to the (grid-stretched) cell height */
}

.why-join-benefits__grid > li > .card--icon-strip {
  flex: 1;                                /* fill the cell width; align-items:stretch fills the height */
}

/* Benefit card (reuses .card--icon-strip from cards.css). Card content holds a
   Content Top group (icon-row + body) then optional actions row. */
.why-join-benefits .card__content {
  gap: 18px;                              /* Figma 11256:1195 content gap 18 (Content Top → actions); base icon-strip is 12 */
}

.why-join-benefits .card__content-top {
  display: flex;
  flex-direction: column;
  gap: 12px;                              /* Figma 11256:1195 Content Top gap 12 (icon-row → body) */
}

.why-join-benefit-card__tagline-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;                               /* Figma 11256:1195 icon-row gap 8 (icon + tagline) */
}

/* Tagline Small — 12px/700/ls0.04em/tangerine/uppercase (Figma 11256:1195–1200).
   New text style: distinct from .section-tagline (16px + decorative line). Page-scoped. */
.why-join-benefit-card__tagline {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-tangerine);          /* Figma 11256:1195 #FF6600 */
}

.why-join-benefits .card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;                              /* Figma 11256:1195 Content gap 16 (H6 → desc) */
}

.why-join-benefits .card__body .card__title {
  margin: 0;
}

.why-join-benefits .card__body .card__excerpt {
  margin: 0;
}

/* Pin the link to the card bottom so links align across an equal-height row
   ("на дне"). The card fills its grid cell (vertical:fill, Figma 10303:38799) and
   .card__content is flex:1, so margin-top:auto pushes Actions to the bottom. */
.why-join-benefits .card__actions {
  margin-top: auto;
}

.why-join-benefits .card__actions .btn--link {
  font-size: 14px;                        /* Figma 11256:1195 Link label 14px (base .btn is 16) */
  text-decoration: none;                  /* Figma 11256:1195 — Link variant has no underline (base .btn--link underlines) */
}

/* --------------------------------------------------------------------------
   Block 6 — Section_Discounts (Figma 11256:2669) — navy-lightest-50 band, #discounts
   -------------------------------------------------------------------------- */
.discounts {
  padding: 112px 80px;                    /* Figma 11256:2669 layout_padding 112 80 */
  background-color: var(--color-navy-lightest-50); /* Figma 11256:2669 rgba(230,231,233,0.5) */
}

.discounts__inner {
  max-width: 1280px;                      /* Figma 11256:2671 w1280 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;                              /* Figma 11256:2670 Content Wrapper gap 48 (intro → card grid). Was 112 (section root gap, single child). QA 2026-06-25 wrote 64 but live Figma is 48. */
}

.discounts__intro {
  display: flex;
  flex-direction: row;                    /* Figma 11256:2671 row */
  justify-content: space-between;
  align-items: flex-start;                /* Figma 11256:2671 align flex-start */
  gap: 24px;
}

.discounts__intro-text {
  display: flex;
  flex-direction: column;
  gap: 22px;                              /* Figma 11256:2672 Content gap 22 (tagline → heading); was 0 — title sat right under the tagline */
}

.discounts__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                       /* Figma 11256:2676 Heading/H2 Roman */
  font-size: 44px;                        /* Figma 11256:2676 44px (verbatim — not 48) */
  line-height: 1.2;
  color: var(--color-navy);               /* Figma 11256:2676 #0B1628 */
}

.discounts__intro > .btn {
  flex: 0 0 auto;
}

/* 7 image cards reuse .card; page-scoped overrides for image height + colours + gaps. */
.discounts-card-grid {
  gap: 24px;                              /* Figma 11256:2682 gap 24 (base .card-grid is 32) */
}

.discounts-card {
  border: 1px solid var(--color-navy-lightest); /* Figma 11256:2683 stroke #E6E7E9 */
  box-shadow: var(--shadow-md);           /* Figma 11256:2683 shadow medium (base .card is shadow-xs) */
}

/* Image is INSET inside the 24px Content padding (Figma 11256:2683 — same card
   component 10303:38810 as Advocacy Key Industry Issues), NOT edge-to-edge. */
.discounts-card .card__image {
  margin: 24px 24px 0;                    /* Figma 11256:2683 Content padding 24 — image inset top + sides */
  height: 250px;                          /* Figma 11256:2683 image H 250 */
  aspect-ratio: auto;                     /* override base .card__image 16/10 */
}

.discounts-card .card__content {
  padding-top: 18px;                      /* Figma 11256:2683 gap 18 image → text (image carries the 24px top inset) */
  gap: 16px;                              /* Figma 11256:2683 inner Content gap 16 (title → desc); base is 8 */
}

.discounts-card .card__title {
  font-size: 20px;                        /* Figma 11256:2683 Heading/H6 20px (base .card__title is 18) */
  line-height: 1.3;
}

.discounts-card .card__excerpt {
  font-size: 14px;                        /* Figma 11256:2683 Text/Small/Normal 14px (base is 16) */
  line-height: 1.4;
  color: var(--color-navy);               /* Figma 11256:2683 #0B1628 (base .card__excerpt is neutral-dark) */
}

/* --------------------------------------------------------------------------
   Block 7 — Section_Colour Form CTA (Membership Application — SHARED)
   Figma 11361:4784. Base .colour-form-cta__* lives in partnerships.css. Overrides
   below are identical to Become a Member (same Figma form-CTA archetype).
   -------------------------------------------------------------------------- */
.colour-form-cta--why-join {
  padding: 112px 80px;                    /* Figma 11361:4784 padding 112 80 (base is 64 80 112) */
}

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

/* Watermark: larger + top-anchored (Figma 11361:4831 678.49×691.27 @ x:-142.28 y:391). */
.colour-form-cta--why-join .colour-form-cta__logo-watermark {
  width: 679px;                           /* Figma 11361:4831 678.49 */
  height: 691px;                          /* Figma 11361:4831 691.27 */
  left: -142px;                           /* Figma 11361:4831 x:-142.28 */
  top: 391px;                             /* Figma 11361:4831 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.
   Shrink the content flex-basis so the short "Apply now" copy hugs the form once
   stacked (same as Become a Member). */
@media (max-width: 1024px) {
  .colour-form-cta--why-join .colour-form-cta__content {
    flex: 0 1 160px;
  }

  /* Block 4 stacks to one column here (about.css base). Reset the desktop
     ratio-grow: with flex-basis 0 it would govern HEIGHT in a column and collapse
     the box/photo; flex-start would stop them filling the width. Photo becomes a
     full-width frame (keeps the desktop 720/560 ratio → whole image, no crop). */
  .why-join-content-block .content-block__inner--image-left {
    align-items: stretch;
  }
  .why-join-content-block .content-block__box {
    flex: none;
    width: 100%;
  }
  .why-join-content-block .content-block__image--left {
    flex: none;
    width: 100%;
    align-self: stretch;
    max-height: none;                     /* lift the desktop cap when stacked — show the whole full-width photo */
  }
}

@media (max-width: 768px) {
  .why-join-content-block {
    padding: 50px 20px;                   /* derived — container cap (about.css content-block pattern) */
  }

  .why-join-benefits {
    padding: 64px 24px;                   /* derived — mobile-derivation-catalog */
  }

  .why-join-benefits__inner {
    gap: 48px;                            /* tighten 112 section gap on mobile */
  }

  .why-join-benefits__intro {
    flex-direction: column;               /* derived — space-between row stacks */
    align-items: flex-start;
    gap: 24px;
  }

  .why-join-benefits__heading {
    font-size: 32px;                      /* sitewide H2 mobile */
  }

  .discounts {
    padding: 50px 20px;                   /* derived — container cap */
  }

  .discounts__inner {
    gap: 48px;
  }

  .discounts__intro {
    flex-direction: column;               /* derived — space-between row stacks */
    align-items: flex-start;
    gap: 24px;
  }

  .discounts__heading {
    font-size: 32px;                      /* sitewide H2 mobile */
  }

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

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

@media (max-width: 402px) {
  .why-join-benefits {
    padding: 48px 16px;                   /* derived — phone breakpoint */
  }

  .discounts {
    padding: 48px 16px;
  }

  .colour-form-cta--why-join {
    padding: 32px 16px 48px;              /* partnerships.css 402 parity */
  }
}