/**
 * MediaOne Widgets — shared media + text layout.
 *
 * Two sections are the same shape: an image beside a column of copy. Digimetrics
 * puts the image first at 7/12, About puts it second at 1/2. Both stack on
 * mobile with the copy on top, so the reader gets the message before the
 * picture.
 *
 * Modifiers: `mow-mt--media-first` puts the image left, `mow-mt--wide-media`
 * widens it to 7/12. Only the media column is sized — the copy takes whatever
 * is left, so the two can never add up to more than the row.
 */

.mow-mt {
	--mow-mt-media: 50%;
	--mow-mt-gap: 3rem;
}

/* Digimetrics runs a wider image column (the original's md:w-7/12). The default
   lives here rather than in a control default, so the section keeps its shape
   even if someone clears the slider. */
.mow-mt--wide-media {
	--mow-mt-media: 58.333333%;
}

.mow-mt__layout {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--mow-mt-gap);
}

.mow-mt__media,
.mow-mt__copy {
	width: 100%;
}

/* Stacked, the copy always leads — the reader gets the message before the
   picture. The original did this with `flex-col-reverse`, which only worked
   because the image happened to be first in the DOM. This states the intent
   instead, so the rule survives a markup change. */
.mow-mt--media-first .mow-mt__media {
	order: 1;
}

.mow-mt__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 25px 50px -12px rgba(0, 14, 62, 0.25);
}

/* Eyebrow with the short rule the original faked with an absolutely-positioned
   span and a hard-coded 3.5rem margin. */
.mow-mt__eyebrow {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mow-faint);
}

.mow-mt__eyebrow::before {
	content: "";
	width: 3rem;
	flex: 0 0 auto;
	border-top: 1px solid #d1d5db;
}

.mow-mt__label {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mow-blue);
	background: var(--mow-sky);
	padding: 5px 16px;
	border-radius: 100px;
	margin-bottom: 14px;
}

.mow-mt__title {
	font-weight: 900;
	font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
	line-height: 1.25;
	margin-top: 0.5rem;
}

.mow-mt__hl {
	color: var(--mow-orange);
}

.mow-mt__copy {
	text-align: var(--mow-align, start);
}

.mow-mt__body {
	margin-top: 1rem;
	color: var(--mow-muted);
	line-height: 1.7;
}

.mow-mt__body p + p {
	margin-top: 1rem;
}

.mow-mt__body strong {
	color: var(--mow-deep);
}

.mow-mt__cta {
	margin-top: 2rem;
}

@media (min-width: 768px) {

	.mow-mt__layout {
		flex-direction: row;
		gap: var(--mow-mt-gap);
	}

	/* Both columns are sized as a share of the row and allowed to shrink, so the
	   gap comes out of each in proportion and the ratio between them holds. A
	   fixed-width media column plus a "take the rest" copy column would give the
	   whole gap to the copy and skew the split. */
	.mow-mt__media {
		width: auto;
		flex: 0 1 var(--mow-mt-media);
	}

	/* min-width:0 lets long words wrap instead of forcing the column wider. */
	.mow-mt__copy {
		width: auto;
		flex: 0 1 calc(100% - var(--mow-mt-media));
		min-width: 0;
	}

	/* Image left, copy right. Without this the copy stays first, matching the
	   About section. */
	.mow-mt--media-first .mow-mt__media {
		order: -1;
	}
}