/**
 * Moore Health — Layout
 *
 * Containers, sections, grids and split arrangements.
 * Structure only — no colour or type decisions beyond section surfaces.
 *
 * @package MooreHealth
 */

/* ---------------------------------------------------------------------
 * Containers
 * --------------------------------------------------------------------- */

.mh-container {
	width: 100%;
	max-width: var(--mh-container);
	margin-inline: auto;
	padding-inline: var(--mh-gutter);
}

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

.mh-container--narrow {
	max-width: calc(var(--mh-measure) + (var(--mh-gutter) * 2));
}

.mh-container--form {
	max-width: calc(var(--mh-measure-form) + (var(--mh-gutter) * 2));
}

/* Constrains running text to roughly 62–72 characters. */
.mh-measure {
	max-width: var(--mh-measure);
}

.mh-measure--tight {
	max-width: 34rem;
}

/* ---------------------------------------------------------------------
 * Sections
 * --------------------------------------------------------------------- */

.mh-section {
	position: relative;
	padding-block: var(--mh-section-y);
}

.mh-section--tight {
	padding-block: var(--mh-section-y-tight);
}

.mh-section--loose {
	padding-block: var(--mh-section-y-loose);
}

.mh-section--flush-top {
	padding-top: 0;
}

.mh-section--flush-bottom {
	padding-bottom: 0;
}

/* Surfaces */
.mh-section--alt {
	background-color: var(--mh-bg-alt);
}

.mh-section--panel {
	background-color: var(--mh-bg-panel);
}

.mh-section--warm {
	background-color: var(--mh-bg-warm);
}

.mh-section--dark {
	background-color: var(--mh-bg-dark);
	color: var(--mh-text-inverse-muted);
}

.mh-section--dark h1,
.mh-section--dark h2,
.mh-section--dark h3,
.mh-section--dark h4,
.mh-section--dark .mh-h1,
.mh-section--dark .mh-h2,
.mh-section--dark .mh-h3 {
	color: var(--mh-text-inverse);
}

.mh-section--dark .mh-lead,
.mh-section--dark p {
	color: var(--mh-text-inverse-muted);
}

.mh-section--dark a:not(.mh-button) {
	color: var(--mh-pure-white);
}

.mh-section--gradient {
	background-image: var(--mh-gradient-navy);
	color: var(--mh-text-inverse-muted);
}

/* ---------------------------------------------------------------------
 * Section heading block
 *
 * Left aligned by default. Centring is opt-in and used sparingly.
 * --------------------------------------------------------------------- */

.mh-section-head {
	max-width: var(--mh-measure);
	margin-bottom: var(--mh-space-6);
}

.mh-section-head--center {
	margin-inline: auto;
	text-align: center;
}

.mh-section-head__intro {
	margin-top: var(--mh-space-4);
	font-size: var(--mh-size-body-lg);
	line-height: var(--mh-leading-body-lg);
}

/* Heading left, supporting copy right — for wide editorial bands. */
.mh-section-head--split {
	display: grid;
	gap: var(--mh-space-4);
	max-width: none;
	align-items: end;
}

@media (min-width: 960px) {
	.mh-section-head--split {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		gap: var(--mh-space-7);
	}

	.mh-section-head--split .mh-section-head__intro {
		margin-top: 0;
	}
}

/* ---------------------------------------------------------------------
 * Stack — vertical rhythm helper
 * --------------------------------------------------------------------- */

.mh-stack {
	display: flex;
	flex-direction: column;
	gap: var(--mh-space-3);
}

.mh-stack--sm {
	gap: var(--mh-space-2);
}

.mh-stack--lg {
	gap: var(--mh-space-5);
}

.mh-stack--xl {
	gap: var(--mh-space-6);
}

/* ---------------------------------------------------------------------
 * Cluster — horizontal group that wraps
 * --------------------------------------------------------------------- */

.mh-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mh-space-3);
}

.mh-cluster--sm {
	gap: var(--mh-space-2);
}

/* ---------------------------------------------------------------------
 * Grid
 * --------------------------------------------------------------------- */

.mh-grid {
	display: grid;
	gap: var(--mh-space-4);
}

@media (min-width: 720px) {
	.mh-grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mh-grid {
		gap: var(--mh-space-5);
	}
}

@media (min-width: 960px) {
	.mh-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mh-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 720px) and (max-width: 959px) {
	.mh-grid--3,
	.mh-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------------
 * Split — asymmetric copy / visual arrangement
 * --------------------------------------------------------------------- */

.mh-split {
	display: grid;
	gap: var(--mh-space-5);
	align-items: center;
}

@media (min-width: 960px) {
	.mh-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--mh-space-8);
	}

	/* 55 / 45 copy-led split, used by the homepage hero. */
	.mh-split--55-45 {
		grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
	}

	.mh-split--60-40 {
		grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
	}

	.mh-split--40-60 {
		grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
	}

	.mh-split--top {
		align-items: start;
	}

	/* Visual first on desktop, copy first in the DOM for mobile and SR order. */
	.mh-split--reverse > :first-child {
		order: 2;
	}
}

/* ---------------------------------------------------------------------
 * Media frame — enforces intentional aspect ratios
 * --------------------------------------------------------------------- */

.mh-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--mh-radius-lg);
	background-color: var(--mh-sky);
}

.mh-media > img,
.mh-media > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mh-media--4-5 {
	aspect-ratio: 4 / 5;
}

.mh-media--5-4 {
	aspect-ratio: 5 / 4;
}

.mh-media--4-3 {
	aspect-ratio: 4 / 3;
}

.mh-media--3-2 {
	aspect-ratio: 3 / 2;
}

.mh-media--16-10 {
	aspect-ratio: 16 / 10;
}

.mh-media--square {
	aspect-ratio: 1 / 1;
}

/* ---------------------------------------------------------------------
 * Placeholder
 *
 * Development-only visual stand-in. The label is emitted by
 * mh_image_placeholder() and suppressed once MH_HIDE_PLACEHOLDER_LABELS
 * is set, so nothing needs to change here before launch.
 * --------------------------------------------------------------------- */

.mh-placeholder {
	display: grid;
	place-items: center;
	padding: var(--mh-space-4);
	background-color: var(--mh-sky);
	background-image: linear-gradient(135deg, rgba(22, 93, 255, 0.08) 0%, rgba(234, 229, 222, 0.55) 100%);
	color: var(--mh-slate);
	text-align: center;
}

.mh-placeholder__label {
	font-size: var(--mh-size-label);
	font-weight: var(--mh-weight-bold);
	letter-spacing: var(--mh-tracking-label);
	text-transform: uppercase;
	opacity: 0.7;
}

.mh-placeholder--warm {
	background-image: linear-gradient(135deg, rgba(234, 229, 222, 0.9) 0%, rgba(220, 234, 255, 0.7) 100%);
}

/* ---------------------------------------------------------------------
 * Reveal on scroll — progressive enhancement.
 *
 * The `mh-js` class is added to <html> by navigation.js. Without JS every
 * element stays visible, so content never depends on the observer running.
 * --------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.mh-js .mh-reveal {
		opacity: 0;
		transform: translateY(18px);
		transition:
			opacity 600ms var(--mh-ease),
			transform 600ms var(--mh-ease);
	}

	.mh-js .mh-reveal.is-revealed {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------------
 * Spacing and text utilities
 *
 * A deliberately small set, covering only the one-off adjustments templates
 * genuinely need between components. Anything reused more than a couple of
 * times belongs in components.css as a named part instead.
 * --------------------------------------------------------------------- */

.mh-mt-1 { margin-top: var(--mh-space-1); }
.mh-mt-2 { margin-top: var(--mh-space-2); }
.mh-mt-3 { margin-top: var(--mh-space-3); }
.mh-mt-4 { margin-top: var(--mh-space-4); }
.mh-mt-5 { margin-top: var(--mh-space-5); }
.mh-mt-6 { margin-top: var(--mh-space-6); }
.mh-mt-7 { margin-top: var(--mh-space-7); }

.mh-mb-1 { margin-bottom: var(--mh-space-1); }
.mh-mb-2 { margin-bottom: var(--mh-space-2); }
.mh-mb-3 { margin-bottom: var(--mh-space-3); }
.mh-mb-4 { margin-bottom: var(--mh-space-4); }
.mh-mb-5 { margin-bottom: var(--mh-space-5); }

/* Resets an element's own margin, e.g. a <dl> or <ul> inside a stack. */
.mh-flush { margin: 0; }

.mh-text-muted { color: var(--mh-slate); }

/* An unstyled list, for link groups that are semantically lists but not bullets. */
.mh-list-bare {
	list-style: none;
	padding: 0;
}

/* Fills its container — used by placeholder blocks inside a fixed-ratio box. */
.mh-fill { height: 100%; }

/**
 * A link that inherits its surroundings, for a heading wrapped in an anchor.
 * The underline returns on hover so the link is still discoverable.
 */
.mh-link-plain {
	color: inherit;
	text-decoration: none;
}

.mh-link-plain:hover {
	color: var(--mh-blue);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* ---------------------------------------------------------------------
 * Page shell
 * --------------------------------------------------------------------- */

.mh-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.mh-main {
	flex: 1 0 auto;
}