/**
 * Meridian Sections — Project Intro
 *
 * Figma 214:884. A heading and lede beside a Project Details card, with a wide
 * photograph beneath, on a dotted ground.
 */

.md-section.md-pintro {
	padding-block: var(--md-section-pt, 4rem) var(--md-section-pb, 4.0625rem); /* 64 / 65 */
}

.md-pintro--ruled {
	border-block-end: var(--md-border-width, 1px) solid
		var(--md-color-rule, #ebebeb);
}

/*
 * Measured from the 1:1 render: the dots fade to nothing at the top and reach full
 * strength at the bottom, the ground settles on #fcfdfd, and the ink solves to
 * 0.066 — which are the primitive's pitch, ground and --md-color-dot defaults.
 * 0deg is "to top", so the wash is transparent at the bottom and white at the top.
 *
 * --md-dot-size was missed on the first pass and this band shipped with the
 * primitive's 3px dots. Re-measured against 206:33, the section immediately below
 * it on the same page: both draw a flat-topped 5px dot on a 20px pitch (x 0–4,
 * y 698–702 in the 1:1 render), so both need the 2.5px radius.
 */
.md-pintro.md-dots {
	--md-dot-wash: 0deg;
	--md-dot-size: 2.5px;
}

/* --- Two-up -------------------------------------------------------------- */
/*
 * 496.5px columns with a 48px gap in the comp — an even split of the content
 * column, so two equal fractions rather than fixed widths.
 *
 * start, not stretch: the copy is shorter than the details card and the comp
 * leaves it that way instead of stretching one to match the other.
 */
.md-pintro__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: var(--md-space-xl, 3rem); /* 48px */
}

@media (min-width: 62em) {
	.md-pintro__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- Copy ---------------------------------------------------------------- */
.md-pintro__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 30 is its 1440 end. */
	font-size: var(--md-text-h2, 1.875rem);
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.2; /* 36 / 30 */
}

.md-pintro__text {
	margin: 0;
	color: var(--md-color-text-body, #364153);
	/* 16px, not the 15px drawn — the site's body-copy floor. See --md-text-small. */
	font-size: var(--md-text-small, 1rem); /* 16px */
	line-height: 1.625; /* 26px */
}

.md-pintro__title + .md-pintro__text {
	margin-block-start: 1.25rem; /* 20px */
}

/* Body Copy is a rich editor, so the paragraphs inside are the editor's. */
.md-pintro__text > p {
	margin: 0;
}

.md-pintro__text > p + p {
	margin-block-start: 1.25rem;
}

.md-pintro__text a {
	color: var(--md-blue, #006bb6);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* --- Details card -------------------------------------------------------- */
.md-pintro__details {
	padding: var(--md-space-md, 1.5rem); /* 24px */
	border-radius: 0.625rem; /* 10px */
	background-color: var(--md-color-surface-tint, #f9fafb);
}

/*
 * 10px at 0.2em — a step smaller and tighter than the 11px/0.22em eyebrow used
 * elsewhere, which is why it is stated rather than borrowed.
 */
.md-pintro__details-label {
	margin: 0 0 var(--md-space-sm, 1rem); /* 16px */
	color: var(--md-blue, #006bb6);
	font-size: 0.625rem; /* 10px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.5; /* 15px */
	letter-spacing: 0.2em; /* 2px on 10px */
	text-transform: uppercase;
}

.md-pintro__dl {
	display: flex;
	flex-direction: column;
	gap: var(--md-space-xs, 0.75rem); /* 12px */
	margin: 0;
}

/*
 * The term and its value are one unit, so they are wrapped rather than relying on
 * dt/dd being adjacent — which keeps the 12px gap between pairs and not inside
 * them.
 */
.md-pintro__pair {
	display: flex;
	flex-direction: column;
}

.md-pintro__dt {
	/*
	 * The comp's #99a1af. See the README: on this tint it is about 2.5:1, short of
	 * AA — the fourth section to use this grey and fall short of it.
	 */
	color: var(--md-color-text-subtle, #99a1af);
	font-size: var(--md-text-micro, 0.6875rem); /* 11px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.5; /* 16.5px */
	letter-spacing: 0.025em; /* 0.275px on 11px */
	text-transform: uppercase;
}

.md-pintro__dd {
	margin: 0.125rem 0 0; /* 2px */
	color: var(--md-color-text, #0a1628);
	font-size: 0.875rem; /* 14px */
	font-weight: var(--md-weight-semibold, 600);
	line-height: 1.5; /* 21px */
}

/* --- Media --------------------------------------------------------------- */
/*
 * .md-media-cell supplies the 10px radius, the clip, the placeholder grey and the
 * two-class object-fit rule that beats Elementor's `.elementor img`. Only the
 * height is this comp's own.
 */
.md-pintro__media {
	height: var(--md-pintro-media-height, 21.25rem); /* 340px */
}

.md-pintro__grid + .md-pintro__media {
	margin-block-start: var(--md-space-xl, 3rem); /* 48px */
}