/**
 * Meridian Sections — Photo Statement
 *
 * Figma 97:29509. A statement — eyebrow, heading, lede and a checklist — set in
 * one column of a full-bleed photograph, with the scrim darkest behind the copy.
 * Drawn as "Our Guiding Principles"; the section knows nothing about principles.
 */

.md-section.md-statement {
	position: relative;
	/* Keeps the media's stacking to itself rather than competing with whatever
	 * Elementor puts around the section. */
	isolation: isolate;
	display: grid;
	align-items: center;
	overflow: hidden;
	/*
	 * The comp has no vertical padding: a 598px band with a 437px copy block
	 * centred in it, which is 80px either side. Stated as both so short copy
	 * keeps the band's height and long copy still gets its breathing room.
	 */
	min-height: var(--md-statement-min, 37.375rem); /* 598px */
	padding-block: var(--md-section-pt, 5rem) var(--md-section-pb, 5rem);
	/* Behind the photograph, and the ground if none is set. */
	background-color: var(--md-color-surface-invert, #0a1628);
	color: var(--md-white, #fff);

	/* The comp's wash: solid at the copy edge, gone by the far edge. */
	--md-scrim-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 1) 0%,
		rgba(0, 0, 0, 0.5) 50%,
		rgba(0, 0, 0, 0) 100%
	);
}

.md-statement--copy-right {
	--md-scrim-image: linear-gradient(
		to left,
		rgba(0, 0, 0, 1) 0%,
		rgba(0, 0, 0, 0.5) 50%,
		rgba(0, 0, 0, 0) 100%
	);
}

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

/* --- Media --------------------------------------------------------------- */
/* .md-scrim (theme) draws the wash on this element's ::after, above the
 * photograph and below the copy. */
.md-statement__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Anchored on the media wrapper, not the section, so the rule travels if this
 * box is ever reused — and two classes still beat `.elementor img`. */
.md-statement__media .md-statement__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.md-statement > .md-container {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* --- Copy ---------------------------------------------------------------- */
.md-statement__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.md-statement__copy > * {
	margin: 0;
}

.md-statement__text {
	/* 436px in the comp, inside a 478px column. */
	max-width: 100%;
	/* 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-statement__copy > * + .md-statement__text {
	margin-block-start: 1.75rem; /* 28px */
}

.md-statement__copy > * + .md-statement__list,
.md-statement__copy > * + .md-statement__actions {
	margin-block-start: 2.5rem; /* 40px */
}

/* --- Checklist ----------------------------------------------------------- */
/*
 * The list is .md-checklist from sections.css; this comp's skin is 14px lines
 * with green markers, spaced by a row gap, in two columns 48px apart.
 */
.md-statement__list {
	--md-checklist-marker: var(--md-green, #5dae71);
	--md-checklist-col-gap: var(--md-space-xl, 3rem); /* 48px */
}

/* --- Two-up ------------------------------------------------------------- */
@media (min-width: 62em) {
	.md-statement__grid {
		/* The copy takes one half of the same 478.5/96 grid as its siblings; the
		 * other half is left to the photograph. */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 6rem; /* 96px */
	}

	.md-statement--copy-right .md-statement__copy {
		grid-column: 2;
	}
}

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

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

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