/**
 * TP1 Article single (templates/single-post.html, inc/article.php; Figma Article Template
 * 224:6755, 1440 x 3344).
 *
 * Own partial: article prose + the template's own bands. The shared parts are skinned by
 * their own partials (P15 share row, P6 related cards, P10 newsletter, P16-style heading).
 * This file sorts BEFORE lts-global.css / lts-hub-cards.css (basename order), so every rule
 * out-specifies the foundation (`.lts-article ...` + the element/class) instead of relying on
 * position; computed values were checked in the browser.
 *
 * 1440 geometry (page y, design px):
 *   title band 121-331 (210, Horizon): kicker 14px +0.13em Tide (built Tide Dark, J10) at y152,
 *   H1 Medium 48/50 Tide at y208 (box 819), byline 20px +0.13em at y272 -> padding 31 / 30 / 14 / 33.
 *   video slot 844 x 474 (16:9) centred, 53 under the band, 86 above the direct answer.
 *   direct answer Medium 32 Deep; prose Regular 18/24 Body ink (measure 1007); H-slots Medium 24
 *   Deep (measure 1113); 23 under the answer, 55 above a heading, 24 under it.
 *   share label 91 under the prose, icons 16 under the label, "Keep going" band 63 below the icons.
 *
 * Derived (no tablet / mobile frame; designer review): the column reflows, gaps shrink under
 * 782, the direct answer scales 26-32, the H3 (not drawn: Figma shows one H-slot style) is the
 * 18.4 Large size in Medium, blockquote / list / figure styling.
 *
 * The pillar swatch in the kicker is the pillar's `lts_colour` (Figma has the kicker all Tide):
 * the text stays accent text for contrast and the swatch carries the colour.
 */

.lts-article {
	--lts-article-gap-band: 3.3125rem; /* 53: band to video / answer */
	--lts-article-answer: clamp(1.625rem, 2.2222vw, 2rem); /* 32 at 1440 */
}

/* The parent pads a hero-less <main> by --kd-no-hero-top: the band sits flush under the header. */
.wp-site-blocks > main#kd-main.lts-article {
	padding-top: 0;
}

/* -- Title band (HORIZON) --------------------------------------------------------- */

/* The band's text column lines up with the 76rem column below it (body, share, Keep going):
   the page gutter up to 1440, then half of what is left beyond the column. */
.lts-article .wp-block-group.lts-article__band {
	padding: 1.9375rem 0 2.0625rem; /* 31 / 33 */
	padding-inline: max(
		var(--wp--custom--layout--gutter),
		calc((100% - var(--wp--style--global--content-size)) / 2)
	);
}

.lts-article .lts-article__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 0 1.875rem; /* 30 */
	color: var(--lts-accent-text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.8571; /* 26 / 14 */
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.lts-article .lts-article__kicker a {
	color: inherit;
	text-decoration: none;
}

.lts-article .lts-article__kicker a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.lts-article .lts-article__sep {
	margin-inline: 0.75em; /* "content hub  |  [Pillar]" */
}

.lts-article .lts-article__pillar {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
}

.lts-article .lts-article__swatch {
	flex: none;
	box-sizing: border-box;
	width: 0.8em;
	height: 0.8em;
	border: 1px solid
		color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent);
	border-radius: 50%;
	background: var(--lts-article-swatch, transparent);
}

.lts-article .lts-article__pillar.is-pillar-hearth {
	--lts-article-swatch: var(--wp--preset--color--accent);
}

.lts-article .lts-article__pillar.is-pillar-tide {
	--lts-article-swatch: var(--wp--preset--color--primary);
}

.lts-article .lts-article__pillar.is-pillar-horizon {
	--lts-article-swatch: var(--wp--preset--color--tint);
}

.lts-article .lts-article__pillar.is-pillar-dusk {
	--lts-article-swatch: var(--wp--preset--color--secondary);
}

.lts-article h1.wp-block-post-title.lts-article__title {
	max-width: 69.5625rem; /* 1113 = Figma's own article content box (224:6819). The 819 title box is the 41-char placeholder "[Question title...]"; real card questions run to 58 chars and need >= 1020 for the drawn one line (at 819, 8 of 9 seeded titles wrap to 2). F2b: kept, not a font compensation. */
	margin: 0 0 0.875rem; /* 14 */
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.0417; /* 50 / 48 */
	text-wrap: balance;
}

.lts-article .wp-block-group.lts-article__byline {
	gap: 0;
	margin: 0;
	color: var(--lts-accent-text);
	font-size: var(--wp--custom--typography--eyebrow);
	line-height: 1.3; /* 26 / 20 */
	letter-spacing: var(--wp--custom--typography--tracking-eyebrow);
	text-transform: uppercase;
}

.lts-article .lts-article__byline > * {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.lts-article .lts-article__byline .lts-article__date {
	color: inherit;
}

.lts-article .lts-article__byline .lts-article__date::before {
	content: "·";
	content: "·" / "";
	margin-inline: 0.5em;
}

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

.lts-article .wp-block-group.lts-article__body {
	padding: var(--lts-article-gap-band) var(--wp--custom--layout--gutter) 0;
}

.lts-article .lts-article__body .wp-block-post-content {
	color: var(--wp--preset--color--body-ink);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3043; /* 24 / 18.4 */
}

.lts-article .lts-article__body .wp-block-post-content > * {
	margin-block: 0 1.4375rem; /* 23 */
}

.lts-article
	.lts-article__body
	.wp-block-post-content
	> :where(p, ul, ol, blockquote) {
	max-width: 62.9375rem; /* 1007 */
}

.lts-article .lts-article__body .wp-block-post-content > :where(h2, h3, h4) {
	max-width: 69.5625rem; /* 1113 */
}

/* The video slot: an embed block, 844 wide, always 16:9 (reserved box, no layout shift). */
.lts-article
	.lts-article__body
	.wp-block-post-content
	> .wp-block-embed.is-type-video {
	max-width: 52.75rem; /* 844 */
	margin: 0 auto 5.375rem; /* 86 to the answer */
}

.lts-article
	.lts-article__body
	.wp-block-embed.is-type-video
	.wp-block-embed__wrapper {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
}

.lts-article
	.lts-article__body
	.wp-block-embed.is-type-video
	.wp-block-embed__wrapper::before {
	content: none;
}

.lts-article .lts-article__body .wp-block-embed.is-type-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.lts-article .lts-article__body .wp-block-embed.is-type-video figcaption {
	margin-block: 0.75rem 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	text-align: center;
}

/* Direct answer: Medium 32/38 Deep. */
.lts-article
	.lts-article__body
	.wp-block-post-content
	> p.is-style-direct-answer {
	max-width: 69.5625rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--lts-article-answer);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.1875; /* 38 / 32 */
}

/* Editor parity: the base rule is unscoped so the post editor shows the same answer style. */
p.is-style-direct-answer {
	color: var(--wp--preset--color--contrast);
	font-size: clamp(1.625rem, 2.2222vw, 2rem);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.1875;
}

/* H-slots: Medium 24/28 Deep (the foundation H2 / H3 are section-scale: 48 / 27.6). */
.lts-article .lts-article__body .wp-block-post-content > h2 {
	margin-block: 3.4375rem 1.5rem; /* 55 / 24 */
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.1667; /* 28 / 24 */
}

/* The parent's `!important` h3 shrink (<= 1024) reads --lts-h3-size, set on the element. */
.lts-article .lts-article__body .wp-block-post-content > h3 {
	--lts-h3-size: var(--wp--preset--font-size--large);
	margin-block: 2.5rem 1rem;
	font-size: var(--lts-h3-size);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.3;
}

.lts-article
	.lts-article__body
	.wp-block-post-content
	> :where(h2, h3, h4):first-child {
	margin-top: 0;
}

.lts-article .lts-article__body .wp-block-post-content > :where(h2, h3) + p {
	margin-top: 0;
}

.lts-article .lts-article__body .wp-block-post-content > :where(ul, ol) {
	padding-inline-start: 1.5em;
}

.lts-article .lts-article__body .wp-block-post-content li + li {
	margin-top: 0.5rem;
}

.lts-article .lts-article__body .wp-block-post-content > blockquote {
	padding-inline-start: 1.5rem;
	border-inline-start: 4px solid var(--wp--preset--color--accent-2);
}

.lts-article
	.lts-article__body
	.wp-block-post-content
	> figure.wp-block-image
	img {
	height: auto;
	border-radius: 8px;
}

.lts-article .lts-article__body .wp-block-post-content > :last-child {
	margin-bottom: 0;
}

/* Editor parity: article H2 / H3 scale in the POST editor (root container blocks). */
.editor-styles-wrapper.post-type-post .is-root-container > h2.wp-block-heading {
	margin-block: 3.4375rem 1.5rem;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1667;
}

.editor-styles-wrapper.post-type-post .is-root-container > h3.wp-block-heading {
	margin-block: 2.5rem 1rem;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
}

/* -- Share ------------------------------------------------------------------------ */

.lts-article .wp-block-group.lts-article__share {
	padding: 5.6875rem var(--wp--custom--layout--gutter) 3.9375rem; /* 91 / 63 */
}

.lts-article .lts-article__share .lts-article__share-label {
	margin: 0 0 1rem; /* 16 to the icons */
}

/* -- "Keep going" band (P6 pattern): it sits outside the page gutter here ---------- */

.lts-article .lts-hub-related-band {
	padding-inline: var(--wp--custom--layout--gutter);
}

/* -- Newsletter (P10): 126 below the band, 139 above the footer stripe ---------------------- */

.lts-article .wp-block-group.lts-article__newsletter {
	padding-block: 3.375rem 3.6875rem; /* +54 above, +59 below the band's own 72 / 80 */
}

/* -- Tablet / mobile (derived) ------------------------------------------------------ */

@media (max-width: 1023.98px) {
	.lts-article .lts-article__byline {
		font-size: var(--wp--preset--font-size--medium);
	}
}

@media (max-width: 781.98px) {
	.lts-article {
		--lts-article-gap-band: 2rem;
	}

	.lts-article .wp-block-group.lts-article__band {
		padding-block: 1.5rem;
	}

	.lts-article .lts-article__kicker {
		margin-bottom: 1rem;
	}

	.lts-article h1.wp-block-post-title.lts-article__title {
		margin-bottom: 0.75rem;
	}

	.lts-article
		.lts-article__body
		.wp-block-post-content
		> .wp-block-embed.is-type-video {
		margin-bottom: 2.5rem;
	}

	.lts-article .lts-article__body .wp-block-post-content > h2 {
		margin-top: 2.5rem;
	}

	.lts-article .wp-block-group.lts-article__share {
		padding-block: 3rem 2.5rem;
	}

	.lts-article .wp-block-group.lts-article__newsletter {
		padding-block: 0;
	}
}