/* =========================================================
   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. RESPONSIVE PAGE TITLE
   Shared Astra page-title treatment for standard WP pages.
   Home is excluded because home-shell.css controls it.
   ========================================================= */


/* =========================================================
   COMPACT
   < 600px
   ========================================================= */

@media (max-width: 599.98px) {

	body.page:not(.home) .entry-header {
		padding-top: 18px;
	}

	body.page:not(.home) .entry-header .entry-title {
		position: relative;

		display: inline-block;

		margin-bottom: 0;
		padding-bottom: 10px;
	}

	body.page:not(.home) .entry-header .entry-title::after {
		content: "";

		position: absolute;
		left: 0;
		bottom: 0;

		width: 52px;
		height: 3px;

		border-radius: 999px;

		background: var(--meridian-primary);
	}
}


/* =========================================================
   MEDIUM
   600px — 839.98px
   ========================================================= */

@media (min-width: 600px) and (max-width: 839.98px) {

	body.page:not(.home) .entry-header {
		padding-top: 28px;
	}

	body.page:not(.home) .entry-header .entry-title {
		position: relative;

		display: inline-block;

		margin-bottom: 0;
		padding-bottom: 10px;
	}

	body.page:not(.home) .entry-header .entry-title::after {
		content: "";

		position: absolute;
		left: 0;
		bottom: 0;

		width: 52px;
		height: 3px;

		border-radius: 999px;

		background: var(--meridian-primary);
	}
}



/* =========================================================
   7. MOBILE PAGE TITLE
   Shared Astra page-title treatment for standard WP pages.
   ========================================================= */

@media (max-width: 767px) {

	body.page .entry-header {
		padding-top: 18px;
	}

	body.page .entry-header .entry-title {
		position: relative;

		display: inline-block;

		margin-bottom: 0;
		padding-bottom: 10px;
	}

	body.page .entry-header .entry-title::after {
		content: "";

		position: absolute;
		left: 0;
		bottom: 0;

		width: 52px;
		height: 3px;

		border-radius: 999px;

		background: var(--meridian-primary);
	}
}

/* =========================================================
   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);
	}
}