/* Related pages, "Keep exploring" (T45, T45b): a white section above the footer with up to 4
   compact page cards (css/shared/pageCard.css), shown here as grey cards with no border, as in the
   prototype. Grid: 1 column on phones, 2 from 600 px, 4 from 1024 px. With fewer cards they keep
   their width and sit from the left. Tokens only, mobile first. */

.related__heading { margin-bottom: var(--space-5); }
.related__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}
.related__item { margin: 0; min-width: 0; }
@media (min-width: 600px) {
  .related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .related__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* When the page's last block is a call-to-action band, the band's own margin is the gap
   (prototype: no top padding there). Blocks sit in Umbraco's block list wrapper. */
.cta + .related,
:has(> .cta:last-child) + .related { padding-top: 0; }

/* Grey cards on the white section (prototype #F0F0F0, no border; hover pale blue). Only here:
   the compact card elsewhere keeps its white look. */
.related .page-card--compact {
  border: 0;
  background: var(--color-surface-quiet);
}
.related .page-card--compact:hover { background: var(--c-pale-end); }