/**
 * Meridian Sections — Featurette
 *
 * A two-up band: copy beside a photograph. Two comps draw it.
 *
 * - Figma 21:12284 — eyebrow, heading, short lede and a row of pills on flat
 *   white. Drawn as "Where We Work"; nothing in here is about service areas, so
 *   it carries any short claim next to an image.
 * - Figma 232:131 — a heading and a narrative paragraph, on the dotted ground,
 *   beside a photograph whose leading edge carries a brand-blue rule. Drawn as
 *   "CaseSection" on a case study page, and equally content-agnostic: it is a
 *   shape for prose beside an image. Carried by .md-featurette--narrative, at the
 *   end of this file.
 *
 * The first comp's artboard is 1152 wide, which is why its tracks read as
 * 502.5px: that is a 50/50 split of the 1056px content column. The second is
 * drawn at 1149 with 480.5px tracks, which is the same 50/50 split of its own
 * 1041px column. Both translate to two equal fractions, so they hold at the
 * site's container widths rather than at an artboard's.
 */

.md-section.md-featurette {
	padding-block: var(--md-section-pt, 5rem) var(--md-section-pb, 5rem);
	background-color: var(--md-white, #fff);
}

/*
 * The rule sits on top, not underneath — the comp places this band after the
 * market sections, which draw no closing rule of their own.
 */
.md-featurette--ruled {
	border-block-start: var(--md-border-width, 1px) solid
		var(--md-color-rule, #ebebeb);
}

/*
 * The closing counterpart, off by default because the comp does not draw it.
 * Worth having: this band is not always followed by a section that opens with a
 * rule of its own, and the two together are how it reads as an enclosed band.
 *
 * Both can be on at once, which is the enclosed case. Named --ruled-end rather
 * than reusing --ruled so the two never depend on source order.
 */
.md-featurette--ruled-end {
	border-block-end: var(--md-border-width, 1px) solid
		var(--md-color-rule, #ebebeb);
}

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

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

/*
 * Rhythm through sibling combinators so a missing element leaves no gap: an
 * instance with no eyebrow must not push its heading down by 12px. Each
 * override carries more classes than the 20px baseline, so none of this depends
 * on source order.
 */
.md-featurette__copy > * + * {
	margin-block-start: 1.25rem; /* 20px */
}

.md-featurette__copy > .md-featurette__eyebrow + .md-featurette__title {
	margin-block-start: var(--md-space-xs, 0.75rem); /* 12px */
}

.md-featurette__copy > * + .md-featurette__pills {
	margin-block-start: var(--md-space-md, 1.5rem); /* 24px */
}

.md-featurette__copy > * + .md-featurette__actions {
	margin-block-start: var(--md-space-lg, 2rem); /* 32px */
}

.md-featurette__eyebrow {
	color: var(--md-color-eyebrow, #006bb6);
	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.22em; /* 2.42px on 11px */
	text-transform: uppercase;
}

.md-featurette__title {
	color: var(--md-color-heading, #0a1628);
	font-family: var(--md-font-heading, "Cabin", sans-serif);
	/*
	 * 36px, which sits between the h2 (30) and h1 (60) tokens, so it is stated
	 * here rather than bent into one of them. Stepped down on small screens the
	 * way the token scale steps its own headings.
	 */
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); /* 28 → 36px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.111; /* 40 / 36 */
}

.md-featurette__text {
	/*
	 * 355px in the comp, inside a 502px column — a deliberate measure, not the
	 * column width. A longer paragraph than the comp's will run tall before it
	 * runs wide.
	 *
	 * A property because that measure is a judgement about this comp's sentence,
	 * not a rule: longer copy often wants the whole column. The Copy Measure
	 * control writes it, and the fallback keeps the comp's value as the default.
	 * Set on .md-featurette__copy by the control and inherited from there, so a
	 * multi-paragraph lede stays on one measure.
	 */
	max-width: var(--md-featurette-measure, 22.1875rem); /* 355px */
	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 */
}

.md-featurette__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--md-space-2xs, 0.5rem); /* 8px */
}

/* --- Media --------------------------------------------------------------- */
/*
 * Shared with Featurette Dots (13:8733), which draws the same rounded photo box
 * at 5:4 rather than this comp's 514 × 377 — hence the ratio being a property
 * with this comp's value as the default.
 */
.md-featurette__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--md-fmedia-ratio, 514 / 377);
	border-radius: 0.625rem; /* 10px */
	/* Visible while a large photograph decodes, and the comp's own placeholder. */
	background-color: var(--md-grey-100, #eceef1);
}

/*
 * Two classes deliberately: Elementor's `.elementor img` is (0,1,1) and would
 * beat a lone .md-featurette__img, dropping the radius and the height.
 *
 * Anchored on the media wrapper rather than on .md-featurette, because Featurette
 * Dots reuses this box inside a .md-fdots section — a section-scoped selector
 * silently stops applying the moment the box is reused, which is precisely how
 * the Project Explorer lost its object-fit.
 */
.md-featurette__media .md-featurette__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

	/*
	 * Placement, not DOM order — the copy stays first in the markup either way,
	 * so the heading is read before the photograph and the stacked layout needs
	 * no reordering.
	 */
	.md-featurette--media-left .md-featurette__media {
		grid-column: 1;
		grid-row: 1;
	}
}

/*
 * 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-featurette__text > p {
	margin: 0;
}

.md-featurette__text > p + p {
	/* 20px, which is what the old sibling paragraphs inherited from
	 * .md-featurette__copy > * + * — unchanged rendering. */
	margin-block-start: 1.25rem;
}

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

/* --- Narrative variant — Figma 232:131 ----------------------------------- *
 * At the end of the file so these rules beat the standard ones they override on
 * equal specificity, and so the two-up query below is the last word on the gap.
 * ----------------------------------------------------------------------- */

/*
 * Three classes, not two. `.md-section.md-featurette` sets `background-color:
 * var(--md-white)` at (0,2,0), and .md-dots sets its tint at (0,1,0) — so adding
 * the dotted ground to a Featurette paints the dots over white and silently loses
 * the #fcfdfd tint underneath them. Restating the colour here at (0,3,0) is what
 * makes the primitive's ground actually apply.
 *
 * Measured from the 1:1 render: 20px pitch, 5px dots, and an ink alpha solving to
 * 0.058 against a #fbfcfc ground — which is --md-color-dot's 0.06 default. 270deg
 * is "to left", so the wash is opaque at the left edge and clear at the right,
 * which is why the dots read behind the photograph and not behind the copy.
 */
.md-section.md-featurette--narrative.md-dots {
	--md-dot-wash: 270deg;
	--md-dot-size: 2.5px;

	background-color: var(--md-dot-ground, #fcfdfd);
}

/* 30px is exactly --md-text-h2, so the token carries it and steps down on small
 * screens on its own, rather than a second clamp being invented. */
.md-featurette--narrative .md-featurette__title {
	font-size: var(--md-text-h2, 1.875rem); /* 30px */
	line-height: 1.375; /* 41.25 / 30 */
}

/* Prose leading rather than the standard comp's "auto" — 24.375px on 15px is
 * --md-leading-body, the value the rest of the site's body copy uses. */
.md-featurette--narrative .md-featurette__text {
	line-height: var(--md-leading-body, 1.625);
}

/* --- Narrative media ----------------------------------------------------- */
/*
 * 480.5 × 360.375 is exactly 4:3, so this is the ratio property rather than a
 * height — the box holds its proportion at any container width.
 *
 * The radius goes square on the leading edge, where the rule sits, and keeps the
 * 10px on the trailing one. Physical corners in one shorthand rather than four
 * logical properties: the site is LTR-only, and `border-radius: 0 X X 0` says
 * "square on the left" more plainly than two `border-*-start-radius` lines.
 */
.md-featurette--narrative .md-featurette__media {
	--md-fmedia-ratio: 4 / 3;

	border-radius: 0 0.625rem 0.625rem 0;
}

/*
 * The comp's 3px brand-blue rule. A pseudo-element rather than a border, because
 * the comp draws it *over* the photograph — a border on a border-box element would
 * shrink the image by 3px instead, and would also change what aspect-ratio is
 * measuring. The media box is already `position: relative; overflow: hidden`.
 */
.md-featurette--narrative .md-featurette__media::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset-block: 0;
	inset-inline-start: 0;
	width: 3px;
	background-color: var(--md-blue, #006bb6);
}

/*
 * With the photograph on the left, the marked edge follows it: the rule belongs to
 * the edge facing the copy, which is what makes the two columns read as one unit
 * rather than as an image with a stripe on it.
 */
.md-featurette--narrative.md-featurette--media-left .md-featurette__media {
	border-radius: 0.625rem 0 0 0.625rem;
}

.md-featurette--narrative.md-featurette--media-left
	.md-featurette__media::before {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

/* --- Narrative two-up ---------------------------------------------------- */
@media (min-width: 62em) {
	/*
	 * 80px between the columns, against the standard comp's 48px. Only the column
	 * gap: the row gap is what separates the copy from the photograph once they
	 * stack, and 80px there is too much air on a phone.
	 */
	.md-featurette--narrative .md-featurette__grid {
		column-gap: 5rem; /* 80px */
	}
}