/**
 * =====================================================================
 * ACTIVITIES INDEX COMPONENT — STYLES
 * =====================================================================
 * Copied verbatim from the current static design system's
 * ".index-list"/".mandates-section" rules (css/style.css). NOT
 * REPEATED HERE: .section, .section--ivory, .container, .eyebrow,
 * .lede, .index-head (shared with the future impact_stat component —
 * see assets/css/global.css) — already defined elsewhere.
 *
 * "ol.index-list" (NOT a bare selector): same fix confirmed live on
 * statistics' ".stat__num" — a bare single-class selector loses to
 * Blocksy's own base styling.
 * =====================================================================
 */

/* Homepage only: the field photograph now runs flush beneath this
   section, so it doesn't need its own closing whitespace — full top
   padding is kept, bottom is dropped to 0. */
.mandates-section { padding-bottom: 56px; }

/*
 * Nine real, ordered mandates read as a two-column contents page, the
 * way an index actually sets — not one full-width row stretched edge
 * to edge, and not identical bordered boxes either. A vertical rule
 * between columns is the one classic-print gesture.
 */
ol.index-list {
  list-style: none; margin: 0; padding-top: 24px;
  border-top: 1px solid var(--ink);
  column-count: 2; column-gap: 64px; column-rule: 1px solid var(--line);
}
.index-list li { break-inside: avoid; border-bottom: 1px solid var(--line); }
.index-list a {
  display: grid; grid-template-columns: 34px 1fr 20px; align-items: baseline; gap: 16px;
  padding: 22px 0;
}
span.index-list__num {
  /* font-family needs "!important" here, not just "span." — this
     theme's own global.css "Brand Override Layer" forces every plain
     span to --font-sans with !important (to reliably beat Blocksy);
     any span that intentionally wants a DIFFERENT font must match that
     !important to actually apply. Same fix as .eyebrow/.crumbs. */
  --forced-font: var(--font-mono); font-family: var(--forced-font) !important; font-size: 12px; color: var(--slate); font-variant-numeric: tabular-nums; align-self: start; padding-top: 6px;
}
.index-list__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
span.index-list__title {
  --forced-font: var(--font-serif); font-family: var(--forced-font) !important; font-size: var(--step-2); color: var(--ink);
  transition: color 0.25s var(--ease);
}
.index-list a:hover .index-list__title { color: var(--red); }
.index-list__desc { font-size: 16.5px; line-height: 1.5; color: var(--slate); }
span.index-list__arrow {
  font-family: var(--font-sans) !important; font-size: 15px; color: var(--line); align-self: start; padding-top: 4px;
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}
.index-list a:hover .index-list__arrow { transform: translateX(4px); color: var(--red); }
@media (max-width: 800px) {
  ol.index-list { column-count: 1; }
}
@media (max-width: 480px) {
  .index-list a { grid-template-columns: 28px 1fr; }
  .index-list__arrow { display: none; }
}