/**
 * Meridian Sections — Project Overview
 *
 * Figma 232:46. A heading and a narrative paragraph on a 768px measure, with a wide
 * photograph beneath, on the dotted ground and closed with a hairline.
 *
 * The band is the third section on the project page drawn to this shell — Project
 * Intro (214:884) and Capabilities (206:33) are the others — so the padding, the
 * wash and the rule are all the same values, and the copy block itself is the shared
 * .md-intro from intro-statement.css. What is here is the two type deltas, the photo
 * box and the band.
 */

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

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

/*
 * Measured from the 1:1 render: 20px pitch, a flat-topped 5px dot, ground #fcfdfd,
 * and ink solving to 0.06 — so only the direction and the size come off the
 * primitive's defaults, the same two values Capabilities and Project Intro set.
 * 0deg is "to top", so the wash is clear at the bottom and white at the top.
 */
.md-overview.md-dots {
	--md-dot-wash: 0deg;
	--md-dot-size: 2.5px;
}

/* --- Copy ----------------------------------------------------------------- */
/*
 * Both deltas from .md-intro's own comp, set on the block so its children inherit
 * them. Scoped to this section so Intro Statement and the Project Explorer keep
 * their own values.
 */
.md-overview .md-intro {
	--md-intro-leading: var(--md-leading-body, 1.625); /* 24.375px on 15px */
	--md-intro-gap: var(--md-space-md, 1.5rem); /* 24px */
}

/* --- 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
 * and the gap above it are this comp's own.
 *
 * A height rather than the comp's ratio, which is exactly 16:5 (1041 / 325.3125).
 * That ratio is only 3.2:1 at the drawn width, and holding it down to a phone gives
 * a 102px sliver of photograph. Project Intro draws the same wide, short band
 * directly above this one and resolves it the same way, which also keeps the two
 * bands a consistent height.
 */
.md-overview__media {
	height: var(--md-overview-media-height, 20.3125rem); /* 325px */
}

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