/* =========================================================
   MERIDIAN LAYOUT
   Global containers, sections, spacing, clusters, and grids.
   Page-specific layout does not belong here.
   ========================================================= */


/* =========================================================
   1. CONTAINERS
   ========================================================= */

.meridian-container {
	box-sizing: border-box;

	width: min(100% - 32px, 1200px);

	margin-inline: auto;
}

.meridian-container--wide {
	width: min(100% - 32px, 1280px);
}

.meridian-container--reading {
	width: min(100% - 32px, 800px);
}

.meridian-container--narrow {
	width: min(100% - 32px, 640px);
}


/* =========================================================
   2. SECTIONS
   ========================================================= */

.meridian-section {
	padding-block: var(--meridian-space-48);
}

.meridian-section--generous {
	padding-block: var(--meridian-space-64);
}


/* =========================================================
   3. FLOW / STACK
   ========================================================= */

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


/* =========================================================
   4. CLUSTER
   ========================================================= */

.meridian-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	gap: var(--meridian-space-16);
}


/* =========================================================
   5. RESPONSIVE GRID
   ========================================================= */

.meridian-grid {
	display: grid;

	grid-template-columns:
		repeat(
			auto-fit,
			minmax(min(100%, 280px), 1fr)
		);

	gap: var(--meridian-space-24);
}


/* =========================================================
   6. GRID / FLEX CHILD SAFETY
   Prevent intrinsic content from forcing overflow.
   ========================================================= */

:where(
	.meridian-grid,
	.meridian-hero
) > * {
	min-width: 0;
}


/* =========================================================
   7. TABLET
   ========================================================= */

@media (min-width: 768px) {

	.meridian-section {
		padding-block: var(--meridian-space-64);
	}

	.meridian-section--generous {
		padding-block: var(--meridian-space-80);
	}
}


/* =========================================================
   8. DESKTOP
   ========================================================= */

@media (min-width: 1024px) {

	.meridian-section {
		padding-block: var(--meridian-space-80);
	}

	.meridian-section--generous {
		padding-block: var(--meridian-space-96);
	}
}