/* card grid — row-cards / card-grid layouts
   Ported from design-export/base.css (Phase 3 Stage 2 split).
   No literal colour, no literal font family: every value is a token. */

.row-cards { display: grid; gap: var(--gap-grid); }
/* .card-grid is the grid container; the modifier sets the columns. The base rule
   must NOT set columns or, sitting later in the file than the --2-col/--3-col
   modifiers, it would override them (the 2-col grid was rendering as auto-fill,
   giving two ~⅓ cards and a gap). */
.card-grid { display: grid; gap: var(--gap-grid); }
.row-cards-2, .card-grid--2-col { grid-template-columns: repeat(2, 1fr); }
.row-cards-3, .card-grid--3-col { grid-template-columns: repeat(3, 1fr); }
.row-cards-4 { grid-template-columns: repeat(4, 1fr); }
/* auto-FIT (not auto-fill): empty tracks collapse, so 2 cards fill the row
   instead of leaving a ghost third column. */
.card-grid--auto { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* The events block names its layout .events-cards-Ngrid[-feature] rather than
   .row-cards-N, so map those to the same column counts. */
.events-cards-3grid, .events-cards-3grid-feature { grid-template-columns: repeat(3, 1fr); }
.events-cards-4grid, .events-cards-4grid-feature { grid-template-columns: repeat(4, 1fr); }
.events-cards-5grid, .events-cards-5grid-feature { grid-template-columns: repeat(5, 1fr); }

/* Same problem, same fix, for the course list. `.course-cards-Ngrid` is emitted
   by BOTH the courses block and multiple_course_lists, so it belongs here in the
   shared grid rather than in either block file. Neither count was mapped, so a
   block set to "3 tiles per row" resolved to the base .row-cards grid, which
   sets no columns, and rendered as one stacked column.
   4-col extracted from sites/dc/dc-child/style.css L7806-7811 (which gated it at
   64em); 3-col follows the field label, which states the count. */
.course-cards-3grid { grid-template-columns: repeat(3, 1fr); }
.course-cards-4grid { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 64em) {
  .row-cards-3, .row-cards-4, .card-grid--3-col,
  .events-cards-3grid, .events-cards-3grid-feature,
  .events-cards-4grid, .events-cards-4grid-feature,
  .events-cards-5grid, .events-cards-5grid-feature,
  .course-cards-3grid, .course-cards-4grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40em) {
  .row-cards-2, .row-cards-3, .row-cards-4,
  [class*="events-cards-"],
  .course-cards-3grid, .course-cards-4grid,
  .card-grid, .card-grid--2-col, .card-grid--3-col { grid-template-columns: 1fr; }
}