/*
 * ANPS Agency: post.css (handle `anps-post`, also an editor style)
 * =============================================================================
 * Single post, generic page, 404 and index templates (inc/post.php), ported
 * from design/html/single-post-desktop.html and single-post-mobile.html:
 * hero, cover section, three-column body, prose content styles for core
 * blocks (paragraph, headings, lists, quote, code, table, inline code, links),
 * "Keep reading" band and the post CTA band. Block-specific rules live in each
 * block's style.css (src/blocks/{toc,share,byline,…}).
 *
 * Prose rules use :where() so block styles (takeaways, FAQ, code, table)
 * always win; the editor canvas gets them through the post content root.
 */

/* ----------------------------------------------------------------- hero -- */

.post-hero {
	padding-top: 96px;
	background: var(--py);
}

.post-hero-in {
	padding-top: 64px;
	padding-bottom: 72px;
}

.post-hero-grid {
	margin-top: 56px;
}

.post-head {
	display: flex;
	flex-direction: column;
	grid-column: 1 / span 9;
	gap: 32px;
}

.post-hero .post-title {
	font-size: clamp(48px, 4.2vw, 80px);
	text-wrap: balance;
}

.post-dek {
	max-width: 980px;
}

.post-dek p {
	margin: 0;
}

.post-hero-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px;
}

.post-hero-solo .post-hero-in {
	padding-bottom: 120px;
}

/* ------------------------------------------------------------ cover/body -- */

.post-cover-sec {
	background: var(--paper);
}

.post-cover-sec > .wrap {
	padding-top: 56px;
}

.post-body {
	align-items: start;
	padding-top: 80px;
	padding-bottom: 120px;
}

.post-toc {
	grid-column: 1 / span 3;
	align-self: stretch;
	padding-right: 24px;
}

.post-article {
	grid-column: 4 / span 6;
	min-width: 0;
	max-width: 760px;
}

.post-rail {
	position: sticky;
	top: 132px;
	display: flex;
	flex-direction: column;
	grid-column: 10 / span 3;
	gap: 32px;
	padding-left: 24px;
}

.post-article {
	line-height: 1.7;
}

.post-article > .wp-block-anps-post-tags {
	margin-top: 56px;
}

.post-article > .wp-block-anps-author-box {
	margin-top: 40px;
}

/* ---------------------------------------------------------------- prose -- */

.prose,
:where(.editor-styles-wrapper.post-type-post) .wp-block-post-content {
	max-width: 760px;
	font-size: 20px;
	line-height: 1.7;
	letter-spacing: -0.005em;
	color: var(--ink);
}

.prose :where(p),
.editor-styles-wrapper.post-type-post .wp-block-post-content :where(p) {
	margin: 0 0 1.15em;
}

.prose :where(h2),
.editor-styles-wrapper.post-type-post .wp-block-post-content :where(h2) {
	margin: 2.1em 0 0.65em;
	font-size: clamp(30px, 2.2vw, 42px);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.035em;
	scroll-margin-top: 24px; /* + html scroll-padding-top 96px = 120px below the top */
}

.prose :where(h3),
.editor-styles-wrapper.post-type-post .wp-block-post-content :where(h3) {
	margin: 1.8em 0 0.6em;
	font-size: clamp(24px, 1.6vw, 30px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.03em;
	scroll-margin-top: 24px; /* + html scroll-padding-top 96px = 120px below the top */
}

.prose :where(h4, h5, h6),
.editor-styles-wrapper.post-type-post .wp-block-post-content :where(h4, h5, h6) {
	margin: 1.6em 0 0.5em;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.4;
}

.prose > :where(:first-child),
:where(.editor-styles-wrapper.post-type-post) .wp-block-post-content > :where(:first-child) {
	margin-top: 0;
}

.prose :where(a:not([class])),
.editor-styles-wrapper.post-type-post .wp-block-post-content :where(a:not([class])) {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--y);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	transition: text-decoration-color 0.3s;
}

.prose :where(a:not([class])):hover,
.editor-styles-wrapper.post-type-post .wp-block-post-content :where(a:not([class])):hover {
	text-decoration-color: var(--ink);
}

.prose :where(code),
.editor-styles-wrapper.post-type-post .wp-block-post-content :where(code) {
	padding: 0.12em 0.4em;
	border-radius: 3px;
	background: var(--g1);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.82em;
	font-variant-ligatures: none;
}

.prose :where(ul, ol),
.editor-styles-wrapper.post-type-post .wp-block-post-content :where(ul, ol) {
	margin: 0 0 1.3em;
	padding-left: 1.3em;
}

.prose :where(li),
.editor-styles-wrapper.post-type-post .wp-block-post-content :where(li) {
	margin: 0.45em 0;
	padding-left: 0.2em;
}

.prose :where(li)::marker,
.editor-styles-wrapper.post-type-post .wp-block-post-content :where(li)::marker {
	color: var(--ink2);
}

.prose :where(strong, b),
.editor-styles-wrapper.post-type-post .wp-block-post-content :where(strong, b) {
	font-weight: 600;
}

.prose :where(blockquote),
.editor-styles-wrapper.post-type-post .wp-block-post-content :where(blockquote) {
	margin: 2em 0;
	padding: 28px 0 0;
	border: 0;
	border-top: 1px solid var(--ink);
}

.prose :where(blockquote p),
.editor-styles-wrapper.post-type-post .wp-block-post-content :where(blockquote p) {
	margin: 0;
	font-size: clamp(26px, 1.9vw, 34px);
	line-height: 1.25;
	letter-spacing: -0.025em;
}

.prose :where(blockquote cite),
.editor-styles-wrapper.post-type-post .wp-block-post-content :where(blockquote cite) {
	display: block;
	margin-top: 16px;
	font-size: 15px;
	font-style: normal;
	color: var(--ink2);
}

.prose :where(img),
.editor-styles-wrapper.post-type-post .wp-block-post-content :where(img) {
	border-radius: 2px;
}

.prose :where(figure:not(.code):not(.tablewrap)),
.editor-styles-wrapper.post-type-post .wp-block-post-content :where(figure:not(.code):not(.tablewrap)) {
	margin: 2em 0;
}

.prose :where(figcaption:not(.code figcaption)),
.editor-styles-wrapper.post-type-post .wp-block-post-content :where(figcaption:not(.code figcaption)) {
	margin-top: 10px;
	font-size: 15px;
	color: var(--ink2);
}

/* Editor canvas: core/code before the render filter turns it into figure.code. */
.editor-styles-wrapper.post-type-post pre.wp-block-code {
	margin: 2em 0;
	padding: 22px 20px;
	border: 0;
	border-radius: 4px;
	font-size: 15px;
	line-height: 1.7;
	font-variant-ligatures: none;
}

.editor-styles-wrapper.post-type-post pre.wp-block-code code {
	padding: 0;
	outline: 0;
	background: none;
	font-size: inherit;
	color: inherit;
}

.prose .wp-block-anps-faq,
:where(.editor-styles-wrapper.post-type-post) .wp-block-post-content .wp-block-anps-faq {
	margin-bottom: 0;
}

/* FAQ questions follow the prose line height (1.7 desktop, 1.65 mobile). */
.prose .wp-block-anps-faq.is-style-prose .fq,
:where(.editor-styles-wrapper.post-type-post) .wp-block-post-content .wp-block-anps-faq.is-style-prose .fq {
	line-height: inherit;
}

/* ----------------------------------------------------------------- code -- */

figure.code {
	margin: 2em 0;
	font-size: inherit;
	font-variant-ligatures: none;
	overflow: hidden;
	border-radius: 4px;
	background: var(--dark);
	color: color-mix(in srgb, var(--cream) 84%, transparent);
}

figure.code figcaption {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 12px 20px;
	border-bottom: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 13px;
	color: color-mix(in srgb, var(--cream) 60%, transparent);
}

figure.code pre {
	margin: 0;
	padding: 22px 20px;
	overflow-x: auto;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 15px;
	line-height: 1.7;
	letter-spacing: normal;
	color: inherit;
	white-space: pre;
	tab-size: 4;
}

figure.code code {
	display: inline;
	padding: 0;
	overflow-wrap: normal;
	white-space: inherit;
	border-radius: 0;
	background: none;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

.code .k,
.code .n {
	color: var(--yline);
}

.code .f {
	color: var(--cream);
}

.code .s {
	color: color-mix(in srgb, var(--yline) 55%, var(--cream));
}

.code .c {
	color: color-mix(in srgb, var(--cream) 60%, transparent);
}

/* ---------------------------------------------------------------- table -- */

.tablewrap {
	margin: 2em 0;
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: 4px;
}

.tablewrap table {
	width: 100%;
	border-collapse: collapse;
	table-layout: auto;
	font-size: 16px;
	line-height: 1.45;
}

.tablewrap :is(thead, tbody, tfoot) {
	border: 0;
}

.tablewrap caption {
	padding: 14px 18px;
	caption-side: top;
	font-size: 14px;
	text-align: left;
	color: var(--ink2);
}

.tablewrap :is(th, td) {
	padding: 14px 18px;
	border: 0;
	border-top: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.tablewrap thead th {
	background: var(--g1);
	font-weight: 500;
}

.tablewrap tbody th {
	font-weight: 500;
}

/* -------------------------------------------------------- keep reading -- */

.post-related {
	background: var(--g1);
}

.post-related-in {
	padding-top: 120px;
	padding-bottom: 120px;
}

.post-related-head {
	align-items: end;
	margin-bottom: 48px;
	padding-bottom: 48px;
	border-bottom: 1px solid var(--line);
}

.post-related-head .d2 {
	grid-column: 1 / span 6;
}

.post-related-all {
	display: flex;
	grid-column: 10 / span 3;
	justify-content: flex-end;
}

/* ------------------------------------------------------------ CTA band -- */

.post-cta {
	background: var(--py);
}

.post-cta-in {
	align-items: end;
	padding-top: 128px;
	padding-bottom: 128px;
}

.post-cta-h {
	grid-column: 1 / span 7;
}

.post-cta-body {
	display: flex;
	flex-direction: column;
	grid-column: 8 / span 5;
	gap: 28px;
}

.post-cta-m {
	display: none;
}

.post-cta-body .wp-block-buttons {
	display: flex;
}

/* --------------------------------------------------------------- tablet -- */

@media (max-width: 900px) {

	.post-head {
		grid-column: 1 / -1;
	}

	.post-body {
		display: block;
	}

	.post-toc {
		margin-bottom: 32px;
		padding-right: 0;
	}

	.post-article {
		max-width: none;
	}

	.post-rail {
		position: static;
		margin-top: 28px;
		padding-left: 0;
	}

	.post-related-head .d2 {
		grid-column: 1 / span 8;
	}

	.post-related-all {
		grid-column: 9 / span 4;
	}

	.post-cta-h,
	.post-cta-body {
		grid-column: 1 / -1;
	}

	.post-cta-body {
		margin-top: 28px;
	}
}

/* --------------------------------------------------------------- mobile -- */

@media (max-width: 600px) {

	.post-hero {
		padding-top: 72px;
	}

	.post-hero-in {
		display: flex;
		flex-direction: column;
		gap: 18px;
		padding-top: 24px;
		padding-bottom: 32px;
	}

	.post-hero .crumbs ol {
		font-size: 13px;
	}

	/* The mobile post design ends the trail at the category. */
	.single-post .post-hero .crumbs li:last-child:not(:first-child) {
		display: none;
	}

	.post-hero-grid {
		display: block;
		margin-top: 0;
	}

	.post-head {
		gap: 18px;
	}

	.post-head .wp-block-anps-post-category {
		display: none;
	}

	.post-hero .post-title {
		font-size: 36px;
		line-height: 1.08;
	}

	.post-dek {
		font-size: 18px;
		line-height: 1.4;
	}

	.post-hero-solo .post-hero-in {
		padding-bottom: 56px;
	}

	.post-cover-sec > .wrap {
		padding-top: 24px;
	}

	.post-body {
		padding-top: 28px;
		padding-bottom: 56px;
	}

	.post-article {
		line-height: 1.65;
	}

	.post-article > .wp-block-anps-post-tags {
		margin-top: 40px;
	}

	.post-article > .wp-block-anps-author-box {
		margin-top: 28px;
	}

	.prose,
	:where(.editor-styles-wrapper.post-type-post) .wp-block-post-content {
		font-size: 18px;
		line-height: 1.65;
	}

	.prose :where(h2),
	.editor-styles-wrapper.post-type-post .wp-block-post-content :where(h2) {
		font-size: 28px;
		scroll-margin-top: 18px; /* + html scroll-padding-top 72px */
	}

	figure.code pre {
		padding: 16px;
		font-size: 13px;
	}

	.post-related-in {
		display: flex;
		flex-direction: column;
		gap: 40px;
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.post-related-head {
		display: contents;
	}

	.post-related-head .d2 {
		font-size: 32px;
	}

	.post-related-all {
		order: 2;
		justify-content: flex-start;
	}

	.post-cta-in {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.post-cta-h {
		font-size: 40px;
	}

	/* One sentence that wraps naturally on mobile (the desktop line break is dropped). */
	.post-cta-h .ln,
	.post-cta-h .ln > span {
		display: inline;
	}

	.post-cta-body {
		gap: 20px;
		margin-top: 0;
	}

	.post-cta-d {
		display: none;
	}

	.post-cta-m {
		display: block;
		font-size: 18px;
	}

	.post-cta-body .btn-d {
		display: flex;
		width: 100%;
	}
}