/* numbered_grid block.
   Big numerals against the copy, hairline rules between the rows. No literal
   colour: every value is a token (hard rules 1 and 6).

   The dark-ground chain below is the same list of bg-* classes the content
   block uses, and for the same reason: this block can be dropped on any of the
   seven grounds the field offers, so it cannot assume a light one. */

.numbered-grid__head { margin-bottom: 2.4rem; max-width: var(--measure); }
.numbered-grid__head .section-intro { margin-top: .6rem; }

/* gap: 0, with the padding inside each item, so the rules under a row meet
   across the column boundary and read as one line rather than as dashes. */
.numbered-grid__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.numbered-grid--cols-2 .numbered-grid__list { grid-template-columns: repeat(2, 1fr); }
.numbered-grid--cols-3 .numbered-grid__list { grid-template-columns: repeat(3, 1fr); }

.numbered-grid__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 1.1rem;
  padding: 1.5rem 1.75rem 1.5rem 0;
  border-bottom: 2px solid var(--line);
  /* typography.css gives every li a marker slot; this block draws its own. */
  margin: 0;
}
/* The first column has no rule to its left, so its copy would sit 1.75rem
   further in than the heading above it. Padding only on the inner edge. */
.numbered-grid--cols-2 .numbered-grid__item:nth-child(2n),
.numbered-grid--cols-3 .numbered-grid__item:nth-child(3n) { padding-right: 0; }
.numbered-grid--cols-2 .numbered-grid__item:nth-child(2n-1),
.numbered-grid--cols-3 .numbered-grid__item:not(:nth-child(3n-2)) { padding-left: 1.75rem; }

.numbered-grid__number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.1rem);
  line-height: .95;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.numbered-grid__body { display: block; }
.numbered-grid__text { display: block; font-size: 1.25rem; line-height: 1.45; color: var(--text); }
.numbered-grid__description { display: block; margin-top: .4rem; font-size: var(--fs-min); line-height: 1.55; color: var(--muted); }

/* ------------------------------------------------------------- dark grounds */
.numbered-grid:is(.bg-blue, .bg-dark-blue, .bg-black, .bg-red) .numbered-grid__item { border-bottom-color: rgba(var(--on-dark-rgb), .18); }
.numbered-grid:is(.bg-blue, .bg-dark-blue, .bg-black, .bg-red) .numbered-grid__number { color: var(--accent-on-dark); }
.numbered-grid:is(.bg-blue, .bg-dark-blue, .bg-black, .bg-red) .numbered-grid__text { color: var(--white); }
.numbered-grid:is(.bg-blue, .bg-dark-blue, .bg-black, .bg-red) .numbered-grid__description { color: rgba(var(--on-dark-rgb), .78); }

/* --------------------------------------------------------------- responsive */
/* One column on a phone, and the inner-edge padding goes with it — there is no
   inner edge left to sit against. */
@media (max-width: 64em) {
  .numbered-grid--cols-3 .numbered-grid__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40em) {
  .numbered-grid__list { grid-template-columns: 1fr !important; }
  .numbered-grid__item { padding-inline: 0 !important; }
}