/**
 * Meridian Sections — Capabilities
 *
 * Figma 206:33. An eyebrow and heading over a wrapping row of chips naming the
 * scopes the company self-performs, on the dotted ground, closed with a hairline.
 *
 * The band is the same shell as Project Intro (214:884), which sits directly above
 * it on the project page: 64/65 padding, the 0deg dot wash, the same closing rule.
 * Nothing here restates that recipe — it comes from .md-dots and the tokens.
 */

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

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

/*
 * Two properties, both measured from the 1:1 render rather than eyeballed. The
 * ground settles on #fcfdfd and the ink solves to 0.062–0.066, which are the
 * primitive's --md-dot-ground and --md-color-dot defaults, and the pitch is the
 * default 20px.
 *
 * What differs: the wash runs bottom-to-top (0deg is "to top", so it is clear at
 * the bottom and white at the top), and the dots are 5px across, not the 3px the
 * earlier sections draw — a flat-topped 5px profile on a 20px pitch, the same
 * figure Featurette Dots measured from 13:8733.
 */
.md-caps.md-dots {
	--md-dot-wash: 0deg;
	--md-dot-size: 2.5px;
}

/* --- Chips ---------------------------------------------------------------- */
/*
 * Only when a head precedes it, so a chips-only instance has no orphaned gap
 * above it — the same idiom .md-shead uses between its eyebrow and title.
 */
.md-caps__head + .md-caps__list {
	margin-block-start: 2.5rem; /* 40px */
}

/*
 * A wrapping row rather than a grid: the chips are different widths because their
 * labels are, and the comp lets each keep its own — the rows break at 3, 3, 3 only
 * because that is where the widths happen to land.
 */
.md-caps__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--md-space-xs, 0.75rem); /* 12px */
}

/*
 * Two classes, not one: .md-pill and .md-caps__item both weigh (0,1,0), so a
 * single-class override would come down to stylesheet order rather than to
 * specificity.
 *
 * The two deltas from the primitive's Featurette defaults: this comp draws a 10px
 * radius rather than a full pill, and sets the label at regular weight rather than
 * semibold.
 */
.md-caps .md-caps__item {
	--md-pill-radius: 0.625rem; /* 10px */
	--md-pill-weight: var(--md-weight-regular, 400);

	/*
	 * The primitive holds every pill on one line, which is right for a scrolling
	 * nav row and wrong here: "Structural concrete for transportation
	 * infrastructure" measures ~315px, and a 320px phone leaves 272px between the
	 * gutters. flex-shrink has to come off `none` with it — a nowrap chip that
	 * cannot shrink overflows whatever the white-space value says.
	 *
	 * Neither affects the comp: a chip only shrinks once it would otherwise
	 * overflow its line, and at 1440 none of them do.
	 */
	flex: 0 1 auto;
	white-space: normal;
}