/*
 * Section: Article — Figma 2328:3858.
 *
 * Shares of the 1676 frame:
 *   50 above     → 2.983vw     12 over the row → 0.716vw
 *   151.984 row  → 9.069vw     162 gap         → 13.5% of the 1200 column
 *   412 image    → 24.582vw    32 under it     → 1.910vw
 *   58/69        → 3.461/4.117vw
 *   18/29.25     → 1.074/1.745vw
 *   24/32        → 1.432/1.910vw
 */

/*
 * 64 below, not 32: the frame's body container (2328:4297) is a fixed 1272 with
 * 1240 of content in it, so 32 of it is empty — and the band under this one
 * starts at the frame's 1486, which only adds up with that 32 kept.
 */
.section-article {
	padding-block: 2.983vw 3.819vw; /* 50 / 32 + the container's own 32 of slack */
	background: #fff;
}

.section-article__container {
	width: var(--content);
	max-width: 100%;
	margin-inline: auto;
}

/*
 * The frame's row is 151.984 tall with both columns centred in it — the
 * heading is 69 and the key message 59, so neither fills it and the height is
 * what sets the space above the image. 12 sits over the row (2328:3861).
 *
 * A minimum rather than a height: the frame's headline is one line, and the
 * real ones run to three. The row holds 151.984 until the title needs more and
 * then grows, pushing the image down rather than running over it.
 */
.section-article__head {
	display: flex;
	align-items: center;
	min-height: 9.069vw; /* 151.984 */
	margin-top: 0.716vw; /* 12 */
	padding-block: 1.910vw; /* 32 — clear of the row's own edges once it grows */
}

/* 477 + 162 + 561 = 1200: the row fills the column exactly. */
.section-article__heading {
	flex: 0 0 39.75%; /* 477 / 1200 */
	margin: 0;
	color: var(--harbor);
	font-size: 3.461vw; /* 58 */
	font-weight: 700;
	line-height: 4.117vw; /* 69 */
	letter-spacing: -0.026em; /* -1.52 */
}

.section-article__summary {
	flex: 0 0 46.75%; /* 561 / 1200 */
	margin: 0 0 0 13.5%; /* 162 */
	color: var(--steel);
	font-size: 1.074vw; /* 18 */
	font-weight: 600;
	line-height: 1.745vw; /* 29.25 */
}

/* 1200x412, cropped — the frame's rectangle is a fill, not a fitted picture. */
.section-article__media {
	height: 24.582vw; /* 412 */
	margin: 0;
	overflow: hidden;
}

.section-article__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--article-focus, var(--img-focus, 50% 50%));
}

.section-article__body {
	margin-top: 1.910vw; /* 32 */
	color: var(--night);
	font-size: 1.074vw; /* 18 */
	font-weight: 600;
	line-height: 1.745vw; /* 29.25 */
}

/*
 * The frame writes the gaps as empty lines inside one text node, so every gap
 * in the copy is exactly one 29.25 line — including the one above a sub
 * heading. Nothing follows a sub heading but the line under it, hence the
 * reset on the element after one.
 */
.section-article__body > * {
	margin: 0;
}

.section-article__body > * + * {
	margin-top: 1.745vw; /* 29.25 */
}

.section-article__body h2,
.section-article__body h3,
.section-article__body h4 {
	color: inherit;
	font-size: 1.432vw; /* 24 */
	font-weight: 800;
	line-height: 1.910vw; /* 32 */
	letter-spacing: -0.025em; /* -0.6 */
}

.section-article__body h2 + *,
.section-article__body h3 + *,
.section-article__body h4 + * {
	margin-top: 0;
}

.section-article__body a {
	color: var(--harbor);
}

.section-article__body ul,
.section-article__body ol {
	padding-left: 1.432vw;
}

.section-article__body img {
	max-width: 100%;
	height: auto;
}

/* Below the handover the frame's ratio would set the body at 11px, so the
   section hands back to the preset ramp and the two columns stack. */
@media (max-width: 1024px) {
	.section-article {
		padding-block: 48px 48px;
	}

	.section-article__head {
		display: block;
		height: auto;
		margin-top: 0;
	}

	.section-article__heading {
		font-size: var(--wp--preset--font-size--heading-xl);
		line-height: 1.19;
	}

	.section-article__summary {
		margin: 20px 0 0;
		font-size: var(--wp--preset--font-size--body);
		line-height: 1.625;
	}

	.section-article__media {
		height: auto;
		margin-top: 32px;
	}

	.section-article__image {
		height: auto;
	}

	.section-article__body {
		margin-top: 32px;
		font-size: var(--wp--preset--font-size--body);
		line-height: 1.625;
	}

	.section-article__body > * + * {
		margin-top: 29.25px;
	}

	.section-article__body h2,
	.section-article__body h3,
	.section-article__body h4 {
		font-size: var(--wp--preset--font-size--heading-md);
		line-height: 1.333;
	}
}

/* Single article ---------------------------------------------------------
 *
 * Nothing to add: the frame opens a blog post with the topic's own dark header
 * (2328:3839) and the article follows it with the section's own 50, exactly as
 * it does inside a page.
 */