/* ═══════════════════════════════════════════════════════════════════════════
   RELATED GRID — the shared sizing behind every "explore more" row

   Three modules end a page with the same thing: a centred row of square-ish
   cards inviting the reader somewhere similar.

     .psi-related__grid        project pages — "Explore more projects like this one"
     .tpi-related__grid        topic pages   — related topics, and related projects
     .ce-cs-more-schools__grid case studies  — "More schools like this"

   They were the same component in three files, and each carried its own copy
   of the track sizing. Copies drift: the case-studies one was still on
   repeat(3, 1fr) long after the other two moved to capped tracks, so at iPad
   landscape it drew 351px cards beside the projects page's 250px ones. Fixing
   that meant editing the same four declarations in a third place, which is the
   point at which a shared class earns itself.

   WHAT LIVES HERE: only what is genuinely identical in all three — the track,
   the centring and the gap. Add .ce-related-grid to the markup ALONGSIDE the
   module's own class; the module class keeps everything particular to it.

   WHAT DELIBERATELY DOES NOT: the phone layouts, which are not the same. The
   projects row goes to a single column between 601 and 767px where the others
   stay two-up, and the case-studies cards drop the tile inset that the other
   two never had. Those live with their modules, and because this file is
   enqueued with the global components — before any of the three, which load
   per template — a module rule of equal specificity still wins on source
   order.
   ═══════════════════════════════════════════════════════════════════════════ */

.ce-related-grid {
	display: grid;
	/* auto-fit, not auto-fill: auto-fill keeps unused column tracks at full
	   width, so justify-content: center would have a full-width row to centre
	   within and visibly do nothing. auto-fit collapses them, so the row
	   shrinks to the cards' own width — and adapts on its own if the card
	   count ever changes. */
	grid-template-columns: repeat(auto-fit, minmax(225px, 275px));
	justify-content: center;
	gap: 1.5rem;
}

/* ── Four across on iPad landscape, not three and a lone orphan ──────────────
   The repetition count for repeat(auto-fit, minmax(min, max)) is worked out
   from the track's MAX size when that is a definite length — not the min, as
   the 225px floor suggests. So the sum that decides how many columns appear is
   275 + 24 per card, and iPad landscape's 1101px row fits
   floor((1101 + 24) / 299) = 3 of them. The fourth card dropped to a second
   row on its own, under a heading promising a set.

   225px was never the number doing the work here, in other words: lowering the
   cap is the only thing that adds a column. 250 makes it
   floor((1101 + 24) / 274) = 4, with ~25px of slack so a slightly narrower row
   still holds four rather than sitting exactly on the boundary.

   The window is deliberately narrow — 1151px to 1250px — because outside it
   the smaller cap would shrink cards without buying a column, and a card that
   loses 25px for nothing is a regression, not a fix:

     below 1151px  the row is under 1072px and holds three at 250 exactly as it
                   holds three at 275, so iPad portrait keeps its full-size
                   layout and nothing changes;
     above 1250px  the 275 cap fits four on its own (a 1172px row), so desktop
                   keeps the larger card it has always had.

   The two ranges meet with no gap: 1250px gives 4x250, 1251px gives 4x275.
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1151px) and (max-width: 1250px) {
	.ce-related-grid {
		grid-template-columns: repeat(auto-fit, minmax(225px, 250px));
	}
}