/**
 * Single article — Figma "Article Inner".
 *
 * Desktop 10344:5194 — 1440 wide, content inset 120 (8.3333%), 80 above and
 *   below, 60 between the header and the body. Breadcrumb 18/24 uppercase
 *   ls 0.72, grey 600 with grey 800 separators and the current crumb in Dark
 *   Green; 16 to an H1 48/58 bold capitalize. Body is 780 + 40 + 380: photo 400
 *   tall radius 20, 40 to the prose; Table of Contents card in the right column.
 * Mobile 10344:5614 — 375 wide, inset 20, 40 above and below, 32 between the
 *   header and the body. Breadcrumb 16/22 ls 0.64 (the separators stay 18/24),
 *   12 to an H1 36/46. One column: photo 200 tall radius 12, 12 to the card, 24
 *   to the prose.
 *
 * Card 10344:5247 / 10344:5628 — white, radius 10, the "card" drop shadow,
 *   padding 24 → 20. "Table of Contents" 24/32 → 20/28 semibold over a 1px
 *   grey 400 rule, 8 → 6 below the title and 20 → 16 below the rule. Rows 16 → 6
 *   apart, each a Dark Green arrow in a 28 → 26 box, 12 → 8 from 18/28 → 16/26
 *   black text.
 *
 * Prose blocks, mobile → desktop: 24 → 40 between one section and the next;
 *   16 → 20 under an H2, 12 → 16 under an H3 or H4, 8 → 12 under an H5, 12 → 16
 *   under the pull-quote, 12 from a paragraph to its list, 6 between list items,
 *   and one blank line (26 → 28) between paragraphs.
 *
 * This frame carries Mobile/H3 (24/32) and Mobile/H4 (20/28) variables that the
 * shared scale in main.css does not — it was written when no mobile token for
 * either existed. They are applied here only, so the blocks built against the
 * shared scale are left as they are.
 */

.ae-article {
	/* Figma: 40 at 375 → 80 at 1440. */
	padding-block: clamp(40px, calc(40px + 40 * var(--ae-fluid)), 80px);
	background-color: var(--ae-color-white, #fff);
}

/* Promo strip (Figma 10344:5276) — full-bleed under the article body. */

.ae-article__promo,
.ae-article__promo-link {
	display: block;
	width: 100%;
}

.ae-article__promo-image {
	display: block;
	width: 100%;
	height: auto;
}

.ae-article__inner {
	display: flex;
	flex-direction: column;
	/* Figma: 32 at 375 → 60 at 1440. */
	gap: clamp(32px, calc(32px + 28 * var(--ae-fluid)), 60px);
}

/* Header ------------------------------------------------------------------ */

.ae-article__header {
	display: flex;
	flex-direction: column;
	/* Figma: 12 at 375 → 16 at 1440. */
	gap: clamp(12px, calc(12px + 4 * var(--ae-fluid)), 16px);
}

.ae-article__crumbs {
	display: flex;
	flex-wrap: wrap;
	column-gap: 8px;
	row-gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.ae-article__crumbs {
		row-gap: 8px;
	}
}

.ae-article__crumb {
	display: flex;
	gap: 8px;
	/* Figma: 16/22 ls 0.64 at 375 → 18/24 ls 0.72 at 1440. */
	font-size: clamp(16px, calc(16px + 2 * var(--ae-fluid)), 18px);
	line-height: clamp(22px, calc(22px + 2 * var(--ae-fluid)), 24px);
	font-weight: 400;
	letter-spacing: clamp(0.64px, calc(0.64px + 0.08 * var(--ae-fluid)), 0.72px);
	text-transform: uppercase;
	color: var(--ae-color-grey-600, #676767);
}

.ae-article__crumb-link {
	text-decoration: none;
}

.ae-article__crumb-link:hover,
.ae-article__crumb-link:focus-visible {
	text-decoration: underline;
}

.ae-article__crumb--current {
	color: var(--ae-color-green-dark, #02846e);
}

/* The separator keeps the full 18/24 at both frames. */
.ae-article__crumb-sep {
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 0.72px;
	color: var(--ae-color-grey-800, #404040);
}

.ae-article__title {
	margin: 0;
	text-transform: capitalize;
	color: var(--ae-color-black, #000);
	/* H1 is already 36/46 → 48/58 bold in main.css. */
	font-size: clamp(36px, calc(36px + 12 * var(--ae-fluid)), 48px);
	line-height: clamp(46px, calc(46px + 12 * var(--ae-fluid)), 58px);
	font-weight: 700;
	overflow-wrap: break-word;
}

/* Body -------------------------------------------------------------------- */

.ae-article__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

/* One column until the sidebar appears: 24 between the stacked pieces. */
.ae-article__body > * + * {
	margin-top: 24px;
}

.ae-article__photo + .ae-article__aside {
	margin-top: 12px;
}

/* Photo ------------------------------------------------------------------- */

.ae-article__photo {
	/* Figma: 200 at 375 → 400 at 1440. */
	height: clamp(200px, calc(200px + 200 * var(--ae-fluid)), 400px);
	/* Figma: radius 12 at 375 → 20 at 1440. */
	border-radius: clamp(12px, calc(12px + 8 * var(--ae-fluid)), 20px);
	overflow: hidden;
}

.ae-article__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 767px) {
	.ae-article__photo {
		height: auto;
	}

	.ae-article__image {
		height: auto;
		object-fit: contain;
	}
}

/* Table of Contents ------------------------------------------------------- */

.ae-article__toc {
	display: flex;
	flex-direction: column;
	/* Figma: 16 at 375 → 20 at 1440. */
	gap: clamp(16px, calc(16px + 4 * var(--ae-fluid)), 20px);
	/* Figma: padding 20 at 375 → 24 at 1440. */
	padding: clamp(20px, calc(20px + 4 * var(--ae-fluid)), 24px);
	border-radius: 10px;
	background-color: var(--ae-color-white, #fff);
	box-shadow: var(--ae-shadow-card, 0 1px 4px 0 rgba(2, 2, 2, 0.1));
}

.ae-article__toc-header {
	/* Figma: 6 at 375 → 8 at 1440 between the title and the rule. */
	padding-bottom: clamp(6px, calc(6px + 2 * var(--ae-fluid)), 8px);
	border-bottom: 1px solid var(--ae-color-grey-400, #c7c7c7);
}

.ae-article__toc-title {
	margin: 0;
	/* Figma: 20/28 at 375 → 24/32 at 1440. */
	font-size: clamp(20px, calc(20px + 4 * var(--ae-fluid)), 24px);
	line-height: clamp(28px, calc(28px + 4 * var(--ae-fluid)), 32px);
	font-weight: 600;
	text-transform: capitalize;
	color: var(--ae-color-black, #000);
	overflow-wrap: break-word;
}

.ae-article__toc-list {
	display: flex;
	flex-direction: column;
	/* Figma: 6 at 375 → 16 at 1440. */
	gap: clamp(6px, calc(6px + 10 * var(--ae-fluid)), 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ae-article__toc-link {
	display: flex;
	align-items: flex-start;
	/* Figma: 8 at 375 → 12 at 1440. */
	gap: clamp(8px, calc(8px + 4 * var(--ae-fluid)), 12px);
	color: var(--ae-color-black, #000);
	text-decoration: none;
}

.ae-article__toc-link:hover .ae-article__toc-text,
.ae-article__toc-link:focus-visible .ae-article__toc-text {
	text-decoration: underline;
}

.ae-article__toc-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	/* Figma: 26 at 375 → 28 at 1440. */
	width: clamp(26px, calc(26px + 2 * var(--ae-fluid)), 28px);
	height: clamp(26px, calc(26px + 2 * var(--ae-fluid)), 28px);
}

.ae-article__toc-icon .ae-icon {
	/* Figma: the glyph is 16 at 375 → 19.385 at 1440. */
	width: clamp(16px, calc(16px + 3.385 * var(--ae-fluid)), 19.385px);
	height: clamp(16px, calc(16px + 3.385 * var(--ae-fluid)), 19.385px);
}

.ae-article__toc-text {
	/* Par: 16/26 → 18/28. */
	font-size: clamp(16px, calc(16px + 2 * var(--ae-fluid)), 18px);
	line-height: clamp(26px, calc(26px + 2 * var(--ae-fluid)), 28px);
	overflow-wrap: break-word;
}

/* Prose ------------------------------------------------------------------- */

.ae-article__content {
	/* Par: 16/26 → 18/28, Greyscale/Grey 800. */
	font-size: clamp(16px, calc(16px + 2 * var(--ae-fluid)), 18px);
	line-height: clamp(26px, calc(26px + 2 * var(--ae-fluid)), 28px);
	color: var(--ae-color-grey-800, #404040);
	overflow-wrap: break-word;
}

.ae-article__content > * {
	margin: 0;
}

/* Between one section and the next. */
.ae-article__content > * + h2,
.ae-article__content > * + h3,
.ae-article__content > * + h4,
.ae-article__content > * + h5 {
	margin-top: clamp(24px, calc(24px + 16 * var(--ae-fluid)), 40px);
}

.ae-article__content > h2 + * {
	margin-top: clamp(16px, calc(16px + 4 * var(--ae-fluid)), 20px);
}

.ae-article__content > h3 + *,
.ae-article__content > h4 + * {
	margin-top: clamp(12px, calc(12px + 4 * var(--ae-fluid)), 16px);
}

.ae-article__content > h5 + * {
	margin-top: clamp(8px, calc(8px + 4 * var(--ae-fluid)), 12px);
}

.ae-article__content > blockquote + * {
	margin-top: clamp(12px, calc(12px + 4 * var(--ae-fluid)), 16px);
}

/* Figma separates paragraphs with one blank line. */
.ae-article__content > p + p {
	margin-top: clamp(26px, calc(26px + 2 * var(--ae-fluid)), 28px);
}

.ae-article__content > p + ul {
	margin-top: 12px;
}

.ae-article__content > *:first-child {
	margin-top: 0;
}

.ae-article__content h2,
.ae-article__content h3,
.ae-article__content h4,
.ae-article__content h5 {
	color: var(--ae-color-black, #000);
	font-weight: 600;
}

/* H2: 28/38 → 32/42, the only heading the design sets in caps. */
.ae-article__content h2 {
	font-size: clamp(28px, calc(28px + 4 * var(--ae-fluid)), 32px);
	line-height: clamp(38px, calc(38px + 4 * var(--ae-fluid)), 42px);
	text-transform: uppercase;
}

/* H3: 24/32 → 26/34. */
.ae-article__content h3 {
	font-size: clamp(24px, calc(24px + 2 * var(--ae-fluid)), 26px);
	line-height: clamp(32px, calc(32px + 2 * var(--ae-fluid)), 34px);
	text-transform: capitalize;
}

/* H4: 20/28 → 24/32. */
.ae-article__content h4 {
	font-size: clamp(20px, calc(20px + 4 * var(--ae-fluid)), 24px);
	line-height: clamp(28px, calc(28px + 4 * var(--ae-fluid)), 32px);
	text-transform: capitalize;
}

/* H5: 18/26 → 22/30. */
.ae-article__content h5 {
	font-size: clamp(18px, calc(18px + 4 * var(--ae-fluid)), 22px);
	line-height: clamp(26px, calc(26px + 4 * var(--ae-fluid)), 30px);
	text-transform: capitalize;
}

/*
 * Body copy is justified — five of the six paragraph blocks on the frame are,
 * the exception being the two under the pull-quote.
 */
.ae-article__content p,
.ae-article__content li {
	text-align: justify;
}

/* Pull-quote -------------------------------------------------------------- */

.ae-article__content blockquote {
	position: relative;
	padding: 12px 20px 12px 40px;
	border: 0;
	background-color: var(--ae-color-blue-025, #f0f8fd);
}

/* The 4px rule Figma draws inside the band, not against its edge. */
.ae-article__content blockquote::before {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 20px;
	width: 4px;
	background-color: var(--ae-color-blue-600, #0c8ce9);
}

.ae-article__content blockquote > * {
	margin: 0;
}

.ae-article__content blockquote > * + * {
	margin-top: clamp(26px, calc(26px + 2 * var(--ae-fluid)), 28px);
}

/* Lists ------------------------------------------------------------------- */

.ae-article__content ul {
	/* Figma marks each row with its own dot rather than a list marker. */
	margin: 0;
	padding: 0;
	list-style: none;
}

.ae-article__content ul li {
	position: relative;
	/* Figma: a 26 → 28 icon box then a 6 gap. */
	padding-left: clamp(32px, calc(32px + 2 * var(--ae-fluid)), 34px);
}

.ae-article__content ul li + li {
	margin-top: 6px;
}

.ae-article__content ul li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: clamp(26px, calc(26px + 2 * var(--ae-fluid)), 28px);
	height: clamp(26px, calc(26px + 2 * var(--ae-fluid)), 28px);
	/*
	 * The exported dot, held at its drawn 28px box so the 8px circle stays 8px
	 * however tall the row box is.
	 */
	background: url("../images/icon-list-bullet.svg") center / 28px 28px no-repeat;
}

/* Desktop ----------------------------------------------------------------- */

@media (min-width: 1025px) {

	.ae-article__body {
		/* Figma 1440: 780 + 40 + 380 inside a 1200 column — 380/1200. */
		grid-template-columns: minmax(0, 1fr) 31.6667%;
		grid-template-areas:
			"photo aside"
			"content aside";
		column-gap: 40px;
		align-items: start;
	}

	.ae-article__photo {
		grid-area: photo;
	}

	/* The mobile 12 between the photo and the card has no meaning in a column. */
	.ae-article__aside,
	.ae-article__photo + .ae-article__aside {
		grid-area: aside;
		margin-top: 0;
	}

	.ae-article__content {
		grid-area: content;
		margin-top: 40px;
	}

	/* Nothing in the first row to clear when the article has no photo. */
	.ae-article__body:not(:has(.ae-article__photo)) .ae-article__content {
		margin-top: 0;
	}
}