/**
 * Meridian Sections — Featurette Dots
 *
 * Figma 13:8733. The Featurette's two-up band on a dotted ground, with a larger
 * heading and a green dot artwork floating between the columns. Drawn as
 * "Mission".
 *
 * Shared with its sibling: .md-shead (+ --lg) for the head, .md-dots for the
 * ground, and .md-featurette__media / __img for the photo box — featurette.css
 * is a declared dependency, and the only thing this section changes about the
 * box is its aspect ratio.
 */

.md-section.md-fdots {
	position: relative;
	padding-block: var(--md-section-pt, 6rem) var(--md-section-pb, 6rem);
}

/*
 * 5px dots here, against the 3px the older sections draw. Measured.
 *
 * On .md-dots rather than on the section, now that the ground is switchable: a dot
 * size on a band with no dots is a property describing nothing.
 */
.md-fdots.md-dots {
	--md-dot-size: 2.5px;
}

/*
 * Mirrors the ground.
 *
 * Only the wash has a handedness to mirror. The dot grid is a radial-gradient
 * tiled on a square pitch, so it is already symmetric and flipping it is a
 * no-op; what reads as direction is the wash that erases the dots as it fades
 * to white, which runs left-to-right by default. Reversing its angle moves the
 * erased side from the right to the left, which is the whole flip.
 *
 * So this sets the angle rather than doing anything with transform: a transform
 * on the section would take the content with it, and one on a pseudo-element
 * would mean inventing a layer the primitive does not have.
 *
 * Chained with .md-dots for the same reason the dot size above is: a wash
 * direction on a band with no dots is a property describing nothing. Equal
 * specificity to that rule is fine — they set different properties.
 */
.md-fdots--flip.md-dots {
	--md-dot-wash: 270deg;
}

/* Closes with a rule, where the Featurette opens with one — this band sits
 * above content rather than below it in the comp. */
.md-fdots--ruled {
	border-block-end: var(--md-border-width, 1px) solid
		var(--md-color-rule, #ebebeb);
}

.md-fdots__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--md-space-xl, 3rem);
}

/* --- Media --------------------------------------------------------------- */
.md-fdots__media-col {
	/* The artwork is positioned against this, not against the section, so it
	 * stays pinned to the photo's top-right corner at any width. */
	position: relative;
	min-width: 0;
}

.md-fdots__media {
	/* 478.5 × 382.8 in the comp. */
	--md-fmedia-ratio: 5 / 4;
}

/*
 * The dot artwork overhangs the photo's top-right corner exactly as drawn
 * (left 501, top 58 on the comp's 1152 artboard). The box itself is
 * .md-dot-accent in sections.css; only the position is this section's.
 */
.md-fdots__artwork {
	inset-block-start: -2.375rem; /* -38px */
	inset-inline-end: -2.4375rem; /* -39px */
}

/*
 * Bottom placement, which the comp does not draw — the overhang is mirrored
 * rather than invented, so it hangs off the bottom corner by the same 38px.
 *
 * Two classes so this cannot depend on rule order: the base rule sets
 * inset-block-start and both weigh the same on one class.
 */
.md-fdots__artwork.md-fdots__artwork--bottom {
	inset-block: auto -2.375rem; /* start: auto, end: -38px */
}

/* --- Copy ---------------------------------------------------------------- */
.md-fdots__copy > * {
	margin: 0;
}

.md-fdots__text {
	/*
	 * 428px in the comp, inside a 478px column.
	 *
	 * A property for the same reason the Featurette's is: that measure is a
	 * judgement about the comp's own sentence, not a rule, and longer copy usually
	 * wants more of the column. The Copy Measure control writes it on
	 * .md-fdots__copy and it inherits from there, so a multi-paragraph lede stays
	 * on one measure. Its own property rather than sharing the Featurette's,
	 * because the two comps set different defaults — 428 here against 355 — and a
	 * shared name would make one of them override the other wherever both appear.
	 */
	max-width: 100%; /* 428px */
	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: normal; /* the comp's "auto" leading */
}

/* 28px under the heading, then between paragraphs. Sibling combinators so an
 * instance without a heading has no orphaned gap. */
.md-fdots__copy > * + .md-fdots__text {
	margin-block-start: 1.75rem; /* 28px */
}

.md-fdots__copy > * + .md-fdots__actions {
	margin-block-start: var(--md-space-lg, 2rem);
}

/* --- Two-up ------------------------------------------------------------- */
@media (min-width: 62em) {
	.md-fdots__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6rem; /* 96px */
		/* self-center on both columns in the comp: the copy is shorter than the
		 * photo and sits centred against it. */
		align-items: center;
	}

	/*
	 * The markup is copy-then-photo so the heading is read first; the comp draws
	 * the photo on the left, so both are placed explicitly rather than following
	 * DOM order.
	 */
	.md-fdots__media-col {
		grid-column: 1;
		grid-row: 1;
	}

	.md-fdots__copy {
		grid-column: 2;
		grid-row: 1;
	}

	.md-fdots--media-right .md-fdots__media-col {
		grid-column: 2;
	}

	.md-fdots--media-right .md-fdots__copy {
		grid-column: 1;
	}

	/* The overhang mirrors with the photo. */
	.md-fdots--media-right .md-fdots__artwork {
		inset-inline: -2.4375rem auto;
	}

	/*
	 * With the other column absent there is no second column to place against,
	 * so the survivor spans the row instead of leaving a hole beside itself.
	 */
	.md-fdots__copy:only-child,
	.md-fdots__media-col:only-child {
		grid-column: 1 / -1;
	}
}

/*
 * Below the two-column breakpoint the artwork has no gutter to sit in and would
 * hang outside the section, so it goes. It is decoration; nothing is lost.
 */
@media (max-width: 61.9375em) {
	.md-fdots__artwork {
		display: none;
	}
}

/*
 * Body Copy is a rich editor now, so this class is a wrapper and the paragraphs
 * inside it are the editor's. Type is set on the wrapper and inherited; only the
 * browser's default paragraph margins need dealing with here.
 */
.md-fdots__text > p {
	margin: 0;
}

.md-fdots__text > p + p {
	margin-block-start: 1.75rem;
}

/* Rich text can carry a link, which plain text never could. */
.md-fdots__text a {
	color: var(--md-blue, #006bb6);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}