/* ==========================================================================
   Member Resources — /member-resources/ (templates/template-member-resources.php)
   Figma 12514:5643. Spec: roadmap/phase-08-content-pages/artifacts/page-member-resources-spec.md
   Loaded after about.css (functions.php): the page modifier below ties with its base on
   specificity and wins on source order. The card itself is global (cards.css).
   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--member-resources .about-feature-intro__lead {
  max-width: 1024px;                    /* Figma 12515:8866 box w=1024 */
}

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

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

.resource-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* client 2026-10-16: four cards, one row of four (Figma 12515:9316 drew 3 columns for six) */
  gap: var(--space-6);                  /* Figma 12515:9316 columnGap=24 rowGap=24 */
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

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

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

/* 4 across only above 1272: there a card gets (1272 - 160 pad - 72 gaps) / 4 = 260px, the readability floor.
   Below it 2 x 2, never 3 + 1. */
@media (max-width: 1272px) {
  .resource-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* derived: 4 -> 2 wrap, no carousel */
  }
}

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

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

  .resource-cards__empty {
    font-size: 16px;                    /* Figma Variables mobile: Text Medium 18->16 */
  }
}

/* Same cutoff as member-advice-support.css: below 560 a column would drop under ~250px. */
@media (max-width: 560px) {
  .resource-cards__grid {
    grid-template-columns: minmax(0, 1fr); /* derived: 2 -> 1 */
  }
}