/* Section component: CARD GRID (linked text cards, optionally in groups). First built for
   the Ministries landing directory (WO-16); shared, so any page with more than three
   linked cards that carry body text can use it (playbook §2 "Card grid").
   One self-contained <section class="cardgrid" data-section="…">:
     .section-head                  the shared head (rule, word eyebrow, H2, optional lead)
     .cardgrid__group               OPTIONAL: one per group, in staging's order
       .cardgrid__group-head        a hairline, the group title (H3) and an optional count
     ul.cardgrid__list              the cards (any count). Without groups, put the list
                                    straight in the rail and use H3 card titles
       li.gcard                     one card: optional word tag, title, description, CTA
         a.gcard__link              the ONLY link: it wraps the title, and its ::after
                                    stretches over the whole card (one tab stop per card;
                                    the accessible name is the title alone)
   Columns: 3 at ≥1024px (2 when a list holds exactly two cards), 2 at 600–1023px,
   1 below 600px. Cards in a row share one height.
   One link-card pattern (14bc, Nolan's C1/C2): the cards are JOINED in one bordered, rounded block on hairlines (the Routing grid's look,
   so a short last row leaves quiet space, not a gap), same slim padding as every link card (--linkcard-pad-*), the footer is the name
   at the left and the circle arrow at the far right (the circle is in base.css). No shadow, no lift, no border on hover: hover and
   keyboard focus tint the card and run the circle's hover (colour, arrow nudges inside, circle never moves). Keyboard focus draws the
   focus ring inside the whole card.
   No per-card reveal (joined cards are always shown, see below).
   Tokens only; no new colours. */

.cardgrid { padding-block: var(--section-y); }

/* ---- Groups (optional) --------------------------------------------------- */
.cardgrid__group + .cardgrid__group { margin-top: clamp(48px, 36px + 3vw, 88px); }
.cardgrid__group-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s-5);
  margin-bottom: clamp(20px, 16px + 1vw, 32px);
}
.cardgrid__group-head > .rule { flex: 0 0 100%; margin-bottom: var(--s-5); }
.cardgrid__group-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h3-list); line-height: var(--lh-h3-list); letter-spacing: var(--tr-title);
}
/* Staging's item count for the group, when it shows one (a quantity, not a numbered label) */
.cardgrid__count {
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-eyebrow); line-height: 1.33;
  letter-spacing: var(--tr-eyebrow); color: var(--color-text-2);
}

/* ---- Card list: joined cards on 1px hairlines (the Routing grid's technique: the block's colour shows through the gap); a short last row's last card
   takes the leftover columns, so there is never an empty cell ---------- */
.cardgrid__list {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none;
  border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: hidden; background: var(--color-border);
}
@media (min-width: 600px) { .cardgrid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cardgrid__list > li:nth-child(odd):last-child { grid-column: span 2; } }
@media (min-width: 1024px) {
  .cardgrid__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cardgrid__list > li:nth-child(odd):last-child { grid-column: auto; }
  .cardgrid__list > li:nth-child(3n+1):last-child { grid-column: span 3; }
  .cardgrid__list > li:nth-child(3n+2):last-child { grid-column: span 2; }
  .cardgrid__list:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cardgrid__list:has(> li:nth-child(2):last-child) > li { grid-column: auto; }
}

/* ---- Card ------------------------------------------------------------------ */
.gcard {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--linkcard-pad-y) var(--linkcard-pad-x);
  background: var(--color-surface-2); color: var(--color-text-1);
  transition: background-color var(--dur-base) var(--ease-out);
}
/* The card may carry data-reveal (the wnm2026 sections). Joined cards don't fade in one by one: until each is revealed the block's hairline
   colour would show as a grey slab (14bc). So they are always shown; only the hover tint transitions. */
.motion-ok .gcard[data-reveal] { opacity: 1; transform: none; transition: background-color var(--dur-base) var(--ease-out); }

/* Optional word tag (staging's short code, e.g. "KID"); decorative, aria-hidden */
.gcard__tag {
  align-self: flex-start;
  padding: 3px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--color-border);
  font-family: var(--font-body); font-weight: 500; font-size: 11px; line-height: 1.4;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--c-forest);
}
.gcard__title {
  font-family: var(--linkcard-title-font); font-weight: var(--linkcard-title-weight);
  font-size: var(--linkcard-title-size); line-height: var(--linkcard-title-leading); letter-spacing: var(--linkcard-title-tracking);
  text-wrap: balance;
}
.gcard__link { color: inherit; }
.gcard__link::after { content: ""; position: absolute; inset: 0; }
.gcard__link:focus-visible { outline: none; }
.gcard__link:focus-visible::after { outline: 2px solid var(--focus, var(--color-focus)); outline-offset: -4px; }
.gcard__desc { margin-bottom: var(--s-1); font-family: var(--linkcard-desc-font); font-size: var(--linkcard-desc-size); line-height: var(--linkcard-desc-leading); color: var(--linkcard-desc-color); max-width: 44ch; }
/* The footer: hairline, the name at the left, the circle arrow at the far right (same as a Routing card's) */
.gcard__cta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: calc(var(--s-4) + var(--circle-md) + 1px);
  margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--color-border);
  font: 600 var(--fs-small)/1.5 var(--font-body); color: var(--c-forest);
}

/* Hover + keyboard focus: a quiet tint (the circle's own hover is in base.css) */
.gcard:hover, .gcard:has(.gcard__link:focus-visible) { background: var(--c-white); }

/* On a phone the group title and existing group spacing provide the separation. */
@media (max-width: 599px) {
  .vc_row .cardgrid__group-head > .rule { display: none; }
}