/**
 * Meridian Sections — Intro Statement
 *
 * Figma 21:11494. A heading and a short paragraph on a 768px measure, used as
 * the standing head of a page or a section.
 *
 * .md-intro is the shared typography block: the standalone widget wraps it in a
 * full-width band, and the Project Explorer renders the same block between its
 * filters and its results. Only the chrome differs, so the two cannot drift.
 */

/* --- Standalone band ----------------------------------------------------- */
.md-section.md-intro-section {
	padding-block: var(--md-section-pt, 4rem) var(--md-section-pb, 4rem);
	background-color: var(--md-white, #fff);
}

/*
 * The standalone band reads its lede a step larger than the shared default — 18px,
 * which is --md-text-body, the size the rest of the site sets body copy at.
 *
 * Scoped to .md-intro-section rather than changed on the block, because the same
 * block is the Project Explorer's intro and the Project Overview's narrative, and
 * neither asked to move. It also improves the measure rather than hurting it: this
 * lede is capped at 768px, which is about 96 characters at the 16px default and
 * about 85 at 18px,
 * so the longer type is the shorter line.
 */
.md-intro-section .md-intro__text {
	--md-intro-size: var(--md-text-body, 1.125rem); /* 18px */
}

/*
 * The rule runs to the viewport edge, as drawn: in the comp the band is
 * full-width and the container inside it is inset, so the border belongs to the
 * band rather than to the content column.
 */
.md-intro-section--divided {
	border-block-end: var(--md-border-width, 1px) solid
		var(--md-color-rule, #ebebeb);
}

/* --- Shared block -------------------------------------------------------- */
/*
 * The measure is on the children, not on .md-intro itself, so the block stays
 * as wide as its host. A host that draws a rule on it — the Project Explorer
 * does — gets a rule across the content column rather than one stopping dead at
 * 768px. The comp achieves the same with a 768px container inside a full-width
 * band; two capped children render identically with one less element.
 *
 * 48rem is deliberately not --md-container-narrow (720px): that token is the
 * long-form reading width for a whole page, this is a panel width inside a
 * wider section.
 */
.md-intro__title,
.md-intro__text {
	max-width: 48rem; /* 768px */
}

.md-intro--center {
	text-align: center;
}

.md-intro--center .md-intro__title,
.md-intro--center .md-intro__text {
	margin-inline: auto;
}

.md-intro__title {
	margin: 0;
	color: var(--md-color-heading, #0a1628);
	font-family: var(--md-font-heading, "Cabin", sans-serif);
	/* The token already clamps 26 → 30px, and the comp's 30px is its 1440 end. */
	font-size: var(--md-text-h2, 1.875rem);
	font-weight: var(--md-weight-bold, 700);
	line-height: var(--md-leading-heading, 1.2); /* 36 / 30 */
}

/*
 * A wrapper now, not the paragraph itself: the Intro Copy control is a rich
 * editor, so the paragraphs inside are the editor's. Type is set here and
 * inherited by them, which keeps one declaration rather than one per element.
 */
.md-intro__text {
	margin: 0;
	color: var(--md-color-text-body, #364153);
	/*
	 * The third property on this block, for the same reason as the other two: it is
	 * shared by three sections and they do not agree. The default is now the 16px
	 * body-copy floor rather than the 15px drawn, so the Project Explorer's intro
	 * and the Project Overview's narrative both move; the standalone band still
	 * overrides to 18px above.
	 */
	font-size: var(--md-intro-size, var(--md-text-small, 1rem)); /* 16px */
	/*
	 * A property because the comps genuinely differ: 21:11494 leaves the leading on
	 * "auto" (~1.3 in Cabin) while 232:46 sets 24.375px on 15px, which is 1.625 —
	 * the site's --md-leading-body. This comp's default keeps the auto value, so
	 * neither existing consumer moves.
	 */
	line-height: var(--md-intro-leading, normal);
}

/* The editor's paragraphs arrive with the browser's 1em margins. */
.md-intro__text > p {
	margin: 0;
}

/*
 * One property for both gaps rather than two: 21:11494 draws 20px under the heading
 * and 232:46 draws 24px, but neither comp shows a second paragraph, so a separate
 * paragraph gap would be a value invented rather than measured.
 */
.md-intro__title + .md-intro__text,
.md-intro__text > p + p {
	margin-block-start: var(--md-intro-gap, 1.25rem); /* 20px */
}

/*
 * Rich text can now carry a link, which nothing styled before because the field
 * could only hold plain text.
 */
.md-intro__text a {
	color: var(--md-blue, #006bb6);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.md-intro__text a:hover,
.md-intro__text a:focus-visible {
	color: var(--md-blue-dark, #005893);
}