/*
 * Layout primitives: container, section, stack, cluster, grid (docs/DESIGN_SYSTEM.md section 4).
 * Mobile first; breakpoints 600 / 1024 / 1280 px are written in em (37.5em / 64em / 80em).
 */
@layer layout {
	/* Centred column with the fluid gutter. */
	.container {
		width: 100%;
		max-width: var(--container);
		margin-inline: auto;
		padding-inline: var(--gutter);
	}

	.container--wide {
		max-width: var(--container-wide);
	}

	.container--narrow {
		max-width: var(--container-narrow);
	}

	/* A horizontal band of the page. Alternate the tint to create rhythm; never put two deep
	   sections next to each other. */
	.section {
		padding-block: var(--space-section);
	}

	.section--tint {
		background: var(--color-surface-tint);
	}

	.section--tint-2 {
		background: var(--color-surface-tint-2);
	}

	/* A slim band, such as the trust strip under the hero: less space above and below, hairlines at both edges. */
	.section--compact {
		padding-block: var(--space-6);
		border-block: var(--border-hairline);
	}

	.section--deep {
		background: var(--color-surface-deep);
		color: var(--color-text-inverse);
	}

	.section--deep :focus-visible {
		outline-color: var(--color-focus-on-dark);
	}

	/* Links on a deep surface are light; the link colour is the deep band's own colour. */
	.section--deep a:not(.btn) {
		color: var(--color-text-inverse);
	}

	/* Vertical rhythm between siblings; the space is set per use with --stack-space. */
	.stack {
		display: flex;
		flex-direction: column;
	}

	.stack > * + * {
		margin-block-start: var(--stack-space, var(--space-5));
	}

	/* Items in a wrapping row. */
	.cluster {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--cluster-space, var(--space-4));
	}

	/* Card grids use explicit column counts so the layout is predictable: default cards are 1 column
	   below 600 px, 2 from 600 px and 3 from 1024 px; compact cards are 2, 3 and 4 from 1280 px. */
	.grid {
		display: grid;
		gap: var(--space-5);
		grid-template-columns: 1fr;
	}

	@media (min-width: 37.5em) {
		.grid--cards {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (min-width: 64em) {
		.grid--cards {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	/* The last card of an odd number takes the whole row while there are two columns, so no card is left on its own
	   beside a gap (cards.css lays it out side by side). */
	@media (min-width: 37.5em) {
		.grid--cards > :last-child:nth-child(odd):not(:first-child) {
			grid-column: 1 / -1;
		}
	}

	@media (min-width: 64em) {
		.grid--cards > :last-child:nth-child(odd):not(:first-child) {
			grid-column: auto;
		}
	}

	.grid--compact {
		grid-template-columns: repeat(2, 1fr);
	}

	@media (min-width: 48em) {
		.grid--compact {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	@media (min-width: 80em) {
		.grid--compact {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	/* Portraits (trainers): two columns, four from 1024 px. Not three on a tablet: four trainers would leave one alone. */
	.grid--portraits {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-5) var(--space-4);
	}

	@media (min-width: 64em) {
		.grid--portraits {
			grid-template-columns: repeat(4, 1fr);
			gap: var(--space-5);
		}
	}

	/* Chips and logo strips only: intrinsic columns. */
	.grid--auto {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	}
}