/* =========================================================================
   Insights article — desktop: Figma "INSGHTS - ARTICLE" (1246:2086, 1728); mobile: 1287:189 (440).
   White page; Related Insights + footer on black (body.has-dark-end).
   Desktop: tag pill x606 y202 (35 tall, pad 15, #A9A9A9 1px r79, Plex Mono 16 caps #787878),
     title y269 96/96 300 880w, hero y562 from x606 to the right edge, 740 tall. Body: text column
     x606 922w; lede (excerpt) x65 433w 24/43 +2% black, level with the first paragraph.
     Blocks 101 apart (hero → body 100; quote 90, note 127 above — Figma's only instance of each); heading → its
     content 40.5. H2 56/64 300; p 24/38 +2% #4B4B4B, a blank line (38) between paragraphs.
   Mobile: pill x20 y239 (34 tall, pad 16, Azeret Mono 12/20 caps #8E8E8E), title y353 48/52 300,
     hero y518 full width 479 tall; body inset 24 (392w): lede 24/30 at +80, blocks 60 apart,
     heading → content 32.5; H2 24/30 400; p 16/24 #4B4B4B, 24 between paragraphs.
   ========================================================================= */

/* ---------- Head + hero ---------- */
.article-head { padding-top: calc(239 * var(--u)); }
.article-head__tag {
	display: inline-flex;
	align-items: center;
	height: calc(34 * var(--u));
	padding: 0 calc(15 * var(--u));
	border: 1px solid #a9a9a9;
	border-radius: 79px;
	font-family: var(--mono);
	font-size: calc(12 * var(--u));
	line-height: calc(20 / 12);
	text-transform: uppercase;
	color: #8e8e8e;
}
.article-head__title { margin-top: calc(80 * var(--u)); font-weight: 300; font-size: calc(48 * var(--u)); line-height: calc(52 / 48); }

.article-hero { margin: calc(61 * var(--u)) 0 0; }
.article-hero picture { display: block; }
.article-hero img,
.article-hero video { display: block; width: 100%; height: calc(479 * var(--u)); object-fit: cover; }
.article-hero .article-hero__desktop { display: none; } /* a video + a phone version: CSS picks one */

/* ---------- Body ---------- */
.article-body { padding-inline: calc(24 * var(--u)); }
.article-body > .article-lede { margin-top: calc(80 * var(--u)); } /* > : beats core's flow-layout first-child reset */
.article-lede p { font-size: calc(24 * var(--u)); line-height: calc(30 / 24); }

.article-content { margin-top: calc(51 * var(--u)); color: #4b4b4b; font-size: calc(16 * var(--u)); line-height: calc(24 / 16); }
.article-content > * + * { margin-top: calc(60 * var(--u)); }
.article-content > h2 + *,
.article-content > p + ul,
.article-content > p + ol { margin-top: calc(32.5 * var(--u)); }
.article-content > p + p { margin-top: calc(24 * var(--u)); }
.article-content h2 { font-weight: 400; font-size: calc(24 * var(--u)); line-height: calc(30 / 24); color: var(--black); }

/* Pull quote: Figma's “ mark (41×35 / 46×39), text, then a 3px teal rule. */
.article-content .wp-block-quote { margin-inline: 0; color: var(--black); }
.article-content .wp-block-quote::before {
	content: "";
	display: block;
	width: calc(41 * var(--u));
	height: calc(35 * var(--u));
	margin-bottom: calc(32 * var(--u));
	background: url(../../img/fx/quote-mark.svg) no-repeat 0 0 / contain;
}
.article-content .wp-block-quote p { max-width: calc(330 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(30 / 24); }
.article-content .wp-block-quote::after { content: ""; display: block; height: 3px; margin-top: calc(32 * var(--u)); background: var(--teal); }

/* Numbered steps (list .is-style-steps): teal number, title, description under the title.
   Mobile: number + 6 → title and description at x54 (Figma's 01; its 02/03 boxes are 5–6 wider). */
.article-content .is-style-steps { list-style: none; padding: 0; counter-reset: step; }
.article-content .is-style-steps li { position: relative; padding-left: calc(30 * var(--u)); counter-increment: step; }
.article-content .is-style-steps li + li { margin-top: calc(24 * var(--u)); }
.article-content .is-style-steps li::before {
	content: counter(step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	font-size: calc(20 * var(--u));
	line-height: calc(28 / 20);
	color: #16b2a0;
}
.article-content .is-style-steps strong { display: block; margin-bottom: calc(17 * var(--u)); font-weight: 400; font-size: calc(20 * var(--u)); line-height: calc(28 / 20); color: var(--black); }

/* Dot list (list .is-style-dots): 8px teal dot centred on the item. */
.article-content .is-style-dots { list-style: none; padding: 0; color: var(--black); }
.article-content .is-style-dots li { position: relative; padding-left: calc(31 * var(--u)); }
.article-content .is-style-dots li + li { margin-top: calc(16 * var(--u)); }
.article-content .is-style-dots li::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--teal); }

/* Images + captions */
.article-content .wp-block-image { margin-inline: 0; margin-bottom: 0; } /* top margin = the block spacing above */
.article-content .wp-block-image img { display: block; width: 100%; height: calc(366 * var(--u)); object-fit: cover; border-radius: 4px; }
.article-content .wp-element-caption { margin: calc(16 * var(--u)) 0 0; font-weight: 300; font-size: calc(14 * var(--u)); line-height: calc(20 / 14); color: #4b4b4b; }

/* Note box (group .is-style-note): teal at 20%. */
.article-content .is-style-note { padding: calc(24 * var(--u)) calc(25 * var(--u)) calc(25 * var(--u)); background: rgb(0 217 191 / 0.2); }
.article-content .is-style-note .note-label,
.article-content .is-style-note > p:first-child:not(:only-child) { /* the label: its first line (or .note-label) */ font-size: calc(24 * var(--u)); line-height: calc(30 / 24); color: var(--black); }
.article-content .is-style-note > * + * { margin-top: calc(25 * var(--u)); }

/* Image pair (columns .is-style-image-pair): stacked on mobile, two up on desktop. */
.article-content .is-style-image-pair { display: grid; gap: calc(33 * var(--u)); }
.article-content .is-style-image-pair .wp-block-image img { height: calc(361 * var(--u)); border-radius: 0; }

/* Closing statement (paragraph .is-style-closing) */
.article-content .is-style-closing { font-weight: 300; font-size: calc(36 * var(--u)); line-height: calc(40 / 36); letter-spacing: 0.02em; color: var(--black); }

.article { padding-bottom: calc(61 * var(--u)); }

/* ---------- Related Insights (black) ---------- */
.article-related { padding: calc(60 * var(--u)) 0 calc(20 * var(--u)); background: var(--black); color: var(--white); }
.article-related__title { font-weight: 300; font-size: calc(36 * var(--u)); line-height: calc(40 / 36); letter-spacing: 0.02em; }
.article-related .related__nav { display: none; }
.article-related__track {
	display: grid;
	max-width: none; /* WP post-template caps it at 100% — the track bleeds past the column */
	grid-auto-flow: column;
	grid-auto-columns: calc(297 * var(--u));
	gap: calc(12 * var(--u));
	margin: calc(32 * var(--u)) calc(-1 * var(--gutter)) 0;
	padding: 0 var(--gutter);
	scroll-padding-inline: var(--gutter);
	overflow-x: auto;
	scroll-snap-type: none; /* free scrolling (slider.js) */
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.article-related__track::-webkit-scrollbar { display: none; }
.article-related__item { scroll-snap-align: start; }
.article-related .insight-tile__media { height: calc(400 * var(--u)); border-radius: 4px; }
.article-related .insight-tile__cat { line-height: calc(16 / 14); color: #808080; }

@media (min-width: 1200px) {
	.article-head { padding-top: calc(202 * var(--u)); padding-left: calc(var(--gutter) + 542 * var(--u)); }
	.article-head__tag { height: calc(35 * var(--u)); padding: 0 calc(15 * var(--u)); font-family: var(--plex); font-size: calc(16 * var(--u)); line-height: calc(33 / 16); letter-spacing: -0.01em; color: #787878; }
	.article-head__title { max-width: calc(880 * var(--u)); margin-top: calc(32 * var(--u)); font-size: calc(96 * var(--u)); line-height: 1; }
	.article-hero { margin-top: calc(101 * var(--u)); padding-left: calc(var(--gutter) + 542 * var(--u)); }
	.article-hero img,
	.article-hero video { height: calc(740 * var(--u)); }
	.article-hero .article-hero__desktop { display: block; }
	.article-hero .article-hero__phone { display: none; }

	.article-body {
		display: grid;
		grid-template-columns: calc(542 * var(--u)) calc(922 * var(--u));
		align-items: start;
		padding-inline: var(--gutter);
		margin-top: calc(100 * var(--u));
	}
	.article-body > .article-lede { grid-column: 1; margin-top: calc(105 * var(--u)); padding-left: 1px; } /* level with the first paragraph (H2 64 + 41) */
	.article-body:has(.article-content > p:first-child) > .article-lede { margin-top: 0; } /* article opens on a paragraph */
	.article-body > .article-content { grid-column: 2; }
	.article-lede p { max-width: calc(433 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(43 / 24); letter-spacing: 0.02em; }

	.article-content { margin-top: 0; font-size: calc(24 * var(--u)); line-height: calc(38 / 24); }
	/* +2% on every element, so each computes it from its own size (an inherited em becomes px). */
	.article-content * { letter-spacing: 0.02em; }
	.article-content > * + * { margin-top: calc(101 * var(--u)); }
	.article-content > h2 + *,
	.article-content > p + ul,
	.article-content > p + ol { margin-top: calc(40.5 * var(--u)); }
	.article-content > p + p { margin-top: calc(38 * var(--u)); }
	.article-content > .wp-block-quote { margin-top: calc(90 * var(--u)); }
	.article-content > .is-style-note { margin-top: calc(127 * var(--u)); }
	.article-content h2 { max-width: calc(880 * var(--u)); font-weight: 300; font-size: calc(56 * var(--u)); line-height: calc(64 / 56); letter-spacing: 0; }

	.article-content .wp-block-quote::before { width: calc(46 * var(--u)); height: calc(39 * var(--u)); }
	.article-content .wp-block-quote p { max-width: calc(498 * var(--u)); font-size: calc(32 * var(--u)); line-height: calc(45 / 32); }
	.article-content .wp-block-quote::after { width: calc(574 * var(--u)); }

	/* Figma's description boxes are 881 wide from x662 — 15 past the text column; copied, so they wrap as designed. */
	.article-content .is-style-steps li { padding-left: calc(56 * var(--u)); margin-right: calc(-15 * var(--u)); }
	.article-content .is-style-steps li + li { margin-top: calc(32 * var(--u)); }
	.article-content .is-style-steps li::before { font-weight: 500; font-size: calc(24 * var(--u)); line-height: calc(38 / 24); letter-spacing: 0.02em; }
	.article-content .is-style-steps strong { position: relative; left: calc(-7 * var(--u)); margin-bottom: calc(17 * var(--u)); font-weight: 500; font-size: calc(24 * var(--u)); line-height: calc(38 / 24); letter-spacing: 0.02em; }
	.article-content .is-style-steps li { font-size: calc(20 * var(--u)); line-height: calc(30 / 20); }

	.article-content .is-style-dots li { padding-left: calc(32 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(30 / 20); }
	.article-content .is-style-dots li + li { margin-top: calc(16.5 * var(--u)); }

	.article-content .wp-block-image img { height: calc(608 * var(--u)); }
	.article-content .wp-element-caption { max-width: calc(784 * var(--u)); margin-top: calc(32 * var(--u)); font-weight: 400; font-size: calc(16 * var(--u)); line-height: calc(24 / 16); }

	.article-content .is-style-note { padding: calc(32 * var(--u)) calc(32 * var(--u)) calc(33 * var(--u)) calc(32 * var(--u)); }
	.article-content .is-style-note p { max-width: calc(685 * var(--u)); font-family: var(--nhg); font-weight: var(--nhg-weight); font-size: calc(20 * var(--u)); line-height: calc(30 / 20); }
	.article-content .is-style-note .note-label,
	.article-content .is-style-note > p:first-child:not(:only-child) { font-size: calc(32 * var(--u)); line-height: calc(45 / 32); }
	.article-content .is-style-note > * + * { margin-top: calc(10 * var(--u)); }

	.article-content .is-style-image-pair { grid-template-columns: repeat(2, calc(446 * var(--u))); gap: calc(27 * var(--u)); }
	.article-content .is-style-image-pair .wp-block-image img { height: calc(402 * var(--u)); }
	.article-content .is-style-image-pair .wp-element-caption { font-size: calc(20 * var(--u)); line-height: calc(24 / 20); }

	.article-content .is-style-closing { font-size: calc(56 * var(--u)); line-height: calc(64 / 56); letter-spacing: 0; }

	.article { padding-bottom: calc(161 * var(--u)); }

	.article-related { padding: calc(160 * var(--u)) 0 calc(52 * var(--u)); } /* + footer 108 = Figma's 160 to "Let’s create…" */
	.article-related__head { display: flex; justify-content: space-between; align-items: flex-start; }
	.article-related .related__nav { display: flex; }
	.article-related__title { font-size: calc(56 * var(--u)); line-height: calc(64 / 56); letter-spacing: 0; }
	/* Three in view at x64 / 605 / 1156 (Figma's uneven 35 / 45 gaps, as the Insights list). */
	.article-related__track { grid-auto-columns: auto; gap: 0; margin: calc(80 * var(--u)) 0 0; padding: 0; scroll-padding-inline: 0; }
	.article-related__item { width: calc(541 * var(--u)); padding-right: calc(35 * var(--u)); }
	.article-related__item:nth-child(3n + 2) { width: calc(551 * var(--u)); padding-right: calc(45 * var(--u)); }
	.article-related .insight-tile__media { height: calc(653 * var(--u)); }
	.article-related .insight-tile__cat { line-height: calc(30 / 20); }
	.article-related .insight-tile__title { max-width: calc(405 * var(--u)); }
}