/* ============================================================
   Course page: Your next step (template-parts/offering/
   next-step.php). CW v2 desktop y 5609-6447, mobile y 8452-10834;
   docs/notes/course-page.md 4.11, 5.11 and 9. Cream section
   (.section--cream): the shared section header (main.css: eyebrow
   "Structured progression", H2, the offering's outcome sentence and
   the "View all courses & workshops" arrow link - beside the intro's
   last line from 1024px, under it below), then the related courses
   and workshops as the shared offering cards (offering-card.css; the
   list also carries .offering-card-grid).

   Cards: Doc 02 relates two or three offerings, never the design's
   four. They fill the first columns of a card grid, left-aligned
   under the header they follow; the rest of the row stays empty
   rather than two or three cards stretching across 1280px.
   - Phones (< 768): one column of inset cards, 42px from the screen
     edges (318 wide at 402, as drawn), at most 416px and centred on
     wider phones; 36px apart.
   - Tablet (768-1023): two columns, 36px apart (329-444px cards):
     three cards make a row of two and one under the first.
   - Small desktops (1024-1199): three columns, 20px apart (cards
     292px at 1024, 343 at 1199) - four would leave the cards
     214-252px, too narrow for a course card's real values; three
     offerings make one row.
   - Desktop (>= 1200): the four columns of every other card row (the
     homepage's Popular Courses & Workshops, the listing), the
     designed 36px apart (241px at 1200, 293 at 1440).
   Spacing as the homepage's card sections (brief 12, QH7): the
   shared section padding (112 / 80; the file has 115 / 66 above the
   eyebrow and 81 under the cards) and the header's 48 / 32px to the
   cards (the file 42 / 49). The file's mobile text inset (23px) is
   the site gutter here (14px at 402).

   Related pages (Coaching; none exist yet) go through the same card
   with no format, duration, level or price. Until the card has a
   variant for them, the two format words it would add ("Course" in
   the meta row, "View course") are hidden on those items below.
   ============================================================ */

.offering-next-step__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: var(--gap-cards);
	margin: 0;
	padding: 0 max(0px, var(--inset-card-mobile) - var(--gutter));
	list-style: none;
}

/* A grid cell, so the card inside stretches to the row height. */
.offering-next-step__item {
	display: grid;
	width: 100%;
	max-width: 26rem;
}

/* A related page: no format word from the card (see above). */
.offering-next-step__item--page .offering-card__meta-item--format,
.offering-next-step__item--page .offering-card__cta-format {
	display: none;
}

/* ============================================================
   Tablet: two columns
   ============================================================ */

@media (min-width: 768px) {
	.offering-next-step__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 0;
	}

	.offering-next-step__item {
		max-width: none;
	}
}

/* ============================================================
   Desktop: three columns 20px apart at 1024-1199, then the four
   columns of the other card rows, 36px apart; filled from the left
   ============================================================ */

@media (min-width: 1024px) {
	.offering-next-step__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--gap-grid);
	}
}

@media (min-width: 1200px) {
	.offering-next-step__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--gap-cards);
	}
}