/*
 * Page structure: the content wrap, sections, section headings and the grids
 * every listing uses. Components never set their own outer width; layout does.
 */
@layer layout {
	.gp-wrap { width: 100%; max-width: calc(var(--gp-wrap) + var(--gp-gutter) * 2); margin-inline: auto; padding-inline: var(--gp-gutter); }
	.gp-wrap--narrow { max-width: calc(var(--gp-wrap-narrow) + var(--gp-gutter) * 2); }
	.gp-section { padding-block: calc(var(--gp-section) / 2); }
	.gp-section--first { padding-top: var(--gp-section); }
	.gp-section--last { padding-bottom: var(--gp-section); }
	.gp-band { background: var(--gp-paper-2); border-block: 1px solid var(--gp-line-2); }

	/* Section heading: title left, "see all" link right. */
	.gp-sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--gp-s3) var(--gp-s6); margin-bottom: var(--gp-s6); }
	.gp-sec-head h2 { font-size: var(--gp-heading-section); }

	.gp-sec-head p { color: var(--gp-muted); max-width: var(--gp-measure-lede); margin-top: var(--gp-s2); }

	/* Auto-fill card grids. --min sets the narrowest card. */
	.gp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--min, var(--gp-grid-card-min)), 100%), 1fr)); gap: var(--gap, var(--gp-s4)); }
	.gp-grid--sm { --min: var(--gp-grid-small-min); --gap: var(--gp-s3); }
	.gp-grid--lg { --min: var(--gp-grid-large-min); }
	.gp-grid--fit { grid-template-columns: repeat(auto-fit, minmax(min(var(--min, var(--gp-grid-card-min)), 100%), 1fr)); }

	/* Bento: one feature card spanning 2x2, the rest single cells. */
	.gp-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gp-s4); }
	.gp-bento > :first-child { grid-column: span 2; grid-row: span 2; }
	@media (max-width: 61.25rem) {
		.gp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}
	@media (max-width: 38.75rem) {
		.gp-bento { grid-template-columns: minmax(0, 1fr); }
		.gp-bento > :first-child { grid-column: auto; grid-row: auto; }
	}

	/* Main column plus a side card that drops below on narrow screens. */
	.gp-split { display: flex; flex-wrap: wrap; gap: var(--gp-s8) var(--gp-s10); align-items: flex-start; }
	.gp-split > .gp-split-main { flex: 999 1 var(--gp-split-main-basis); min-width: 0; }
	.gp-split > .gp-split-side { flex: 1 1 var(--gp-split-side-basis); max-width: var(--gp-split-side-max); }
	@media (max-width: 38.75rem) { .gp-split > .gp-split-side { max-width: none; } }

	.gp-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gp-s2); }
	.gp-stack { display: flex; flex-direction: column; gap: var(--stack, var(--gp-s4)); }
}