/* ==========================================================================
   Member Advice & Support — /member-advice/ (templates/template-member-advice-support.php)
   Figma 12514:5049. Spec: roadmap/phase-08-content-pages/artifacts/page-member-advice-support-spec.md
   Loaded after about.css and partnerships.css (functions.php): the two page modifiers
   below tie with their bases on specificity and win on source order.
   Desktop-first: every media query is max-width and follows the desktop rules.
   ========================================================================== */

/* Block 4 — Feature Intro: the lead box is 1024 wide here (base caps at 900). */
.about-feature-intro--advice-support .about-feature-intro__lead {
  max-width: 1024px;                    /* Figma 12528:9503 box w=1024 */
}

/* Block 5 — Section_Cards */
.advice-resource-cards {
  padding: 112px 80px;                  /* Figma 12528:9504 pad T=112 R=80 B=112 L=80 */
  background-color: var(--color-navy-lightest-50); /* Figma 12528:9504 #e6e7e9 opacity 0.5 */
}

.advice-resource-cards__inner {
  max-width: 1280px;                    /* Figma 12528:9505 w=1280 */
  margin: 0 auto;
}

.advice-resource-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* Figma 12528:9507 grid columns=4 */
  gap: var(--space-6);                  /* Figma 12528:9507 columnGap=24 rowGap=24 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.advice-resource-cards__grid > li {
  display: flex;
  min-width: 0;
}

.advice-resource-cards__grid .card--resource {
  flex: 1 1 auto;                       /* Figma 12528:9508 sizingV=FILL — cards share the row height */
}

.advice-resource-cards__empty {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-navy);
}

/* Block 6 — Colour Form CTA: top padding 112 (base 64). */
.colour-form-cta--advice {
  padding-top: 112px;                   /* Figma 12528:9946 pad T=112 */
}

/* The mailto run overrides only link + decoration, so it keeps the white base colour
   (the global link colour is tangerine — invisible on this card). The underline follows
   the text colour: white (QA 2026-09-24 MAS #2 reverses the dark-orange try). */
.colour-form-cta--advice .colour-form-cta__copy a {
  color: inherit;                       /* Figma 12528:9956 run 2 — no colour override, base #ffffff */
  text-decoration: underline;           /* Figma 12528:9956 run 2 decoration=UNDERLINE */
  text-decoration-color: currentColor;
}

/* GF's foundation sheet gives textarea.large min-block-size 18rem (288px), which beats the
   partnerships.css height of 180. Out-specify it here (QA 2026-09-24 #2). */
.colour-form-cta--advice .colour-form-cta__form-box .gform_wrapper .gfield textarea {
  min-block-size: 0;
  height: 180px;                        /* Figma 12528:9981 Text Area h=180 */
}

/* Side by side between 1025 and ~1280 the form box drops under 460px, and a half-width
   column (~120px at 1032) is narrower than the "Organisation/company*" label (178px, one
   unbreakable word), which then runs over its neighbour (QA 2026-09-24 MAS #5). Sized by
   the box, not the viewport: the half pairs go full width whenever the box is that narrow. */
.colour-form-cta--advice .colour-form-cta__form-box {
  container: advice-form / inline-size;
}

@container advice-form (max-width: 460px) {
  .colour-form-cta--advice .colour-form-cta__form-box .gform_wrapper .gfield.gfield--width-half {
    grid-column: 1 / -1;                /* derived: 2 -> 1 field column below a 178px label */
  }
}

/* After an AJAX submit the box holds one line of confirmation copy in a box sized for the
   form; centre it in the space it keeps (QA 2026-09-24 MAS #3). No Figma frame for this state. */
.colour-form-cta--advice .colour-form-cta__form-box:has(.gform_confirmation_message) {
  justify-content: center;
  text-align: center;
}

/* After an AJAX submit GF swaps the form for a short confirmation; the card collapses
   and the absolute white watermark would ride up over the white copy. Same fix as
   about-our-advocacy.css (QA 2026-06-24 #17). */
.colour-form-cta--advice .colour-form-cta__card:has(.gform_confirmation_message) .colour-form-cta__logo-watermark,
.colour-form-cta--advice .colour-form-cta__card:has(.gform_confirmation_wrapper) .colour-form-cta__logo-watermark,
.colour-form-cta--advice .colour-form-cta__card:has([id^="gform_confirmation"]) .colour-form-cta__logo-watermark {
  display: none;
}

/* ==========================================================================
   Responsive — no mobile frame; derived per roadmap/mobile-derivation-catalog.md
   ========================================================================== */

/* 4 across only above 1280: at 1280 a card would get (1280 - 160 pad - 72 gaps) / 4 = 262px, the readability floor. */
@media (max-width: 1280px) {
  .advice-resource-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* derived: 4 -> 2 wrap, no carousel */
  }
}

@media (max-width: 1024px) {
  /* Base stacks the card at 1024 with a 270px content basis sized for the Partnerships
     copy; this copy is longer, so hug it instead (about-our-advocacy.css precedent). */
  .colour-form-cta--advice .colour-form-cta__content {
    flex: 0 1 auto;
  }

  /* Same trap for the form box: its 400px width basis becomes a 400px height once stacked,
     which leaves the post-submit confirmation in a mostly empty box (QA 2026-09-24 MAS #3). */
  .colour-form-cta--advice .colour-form-cta__form-box {
    flex: 0 1 auto;
  }
}

@media (max-width: 768px) {
  .advice-resource-cards {
    padding: 50px 20px;                 /* Section Padding large 112 -> 50 */
  }

  .advice-resource-cards__grid {
    gap: var(--space-4);                /* derived: card-grid gap 24 -> 16 */
  }

  .colour-form-cta--advice {
    padding-top: 50px;                  /* Section Padding large 112 -> 50 */
  }
}

@media (max-width: 560px) {
  .advice-resource-cards__grid {
    grid-template-columns: minmax(0, 1fr); /* derived: 2 -> 1 below ~260px per card */
  }
}