/*
 * Article template + insight cards (board #14) — reference:
 * prototypes/h-dusk-coral-article.html (.ar-hero, .ar-wrap, .ar-toc,
 * .prose, .ar-aside, .ar-author, .ar-related). Template:
 * templates/single.html; patterns article-*, related-insights,
 * insights-teasers, insights-index; block cluedit/toc.
 *
 * Content is core blocks with class names; the prose styles apply to the
 * core blocks an editor inserts (headings, lists, quote, table, details),
 * so no special markup is needed. Sizes: font-size presets, or the exact
 * reference sizes in settings.custom.fontSize.article (ADR-0007). Colours:
 * palette, gradients and settings.custom.color.* (ADR-0006).
 * Loaded only where these blocks render (inc/article.php) and in the
 * editor canvas.
 */

/* Components here are disjoint (hero, contents, prose, cards), so source
   order groups them by component rather than by selector specificity. */
/* stylelint-disable no-descending-specificity */

:where(.cluedit-article, .cluedit-insight-list, .cluedit-toc) {
	--cluedit-article-crumbs: var(--wp--custom--color--article--crumbs);
	--cluedit-article-meta: var(--wp--custom--color--article--meta);
	--cluedit-article-lead: var(--wp--custom--color--hero--lead);
	--cluedit-article-badge: var(--wp--custom--color--hero--badge);
	--cluedit-article-sticky: calc(98px + var(--wp-admin--admin-bar--height, 0px));
	--cluedit-avatar-top: var(--wp--custom--color--hero--avatar-top);
	--cluedit-avatar-coral: var(--wp--custom--color--hero--avatar-coral);
	/* stylelint-disable-next-line @stylistic/max-line-length */
	--cluedit-avatar: linear-gradient(180deg, var(--cluedit-avatar-top) 0%, var(--cluedit-avatar-coral) 22%, var(--wp--preset--color--mauve) 48%, var(--wp--preset--color--dusk-blue) 74%, var(--wp--preset--color--navy) 100%);
}

/* Sections carry their own spacing: no flow-layout gaps. */
main.cluedit-article-page > *,
article.cluedit-article > *,
.cluedit-article .cluedit-article__hero :where(p, h1, div, nav, figure, ol),
.cluedit-article .cluedit-article__body > *,
.cluedit-article .cluedit-article__column > *,
.cluedit-article .cluedit-article__aside > *,
.cluedit-article .cluedit-author :where(div, p) {
	margin-block: 0;
}

/* ---------- Hero ---------- */
.cluedit-article .cluedit-article__hero {
	position: relative;
	box-sizing: border-box;
	padding: 56px var(--cluedit-pad-hero) 0;
	overflow: hidden;
	isolation: isolate;
	background-image: var(--wp--preset--gradient--hero);
	background-size: 120% 120%;
	color: var(--wp--preset--color--surface);
	animation: cluedit-article-drift 18s ease-in-out infinite alternate;
}

.cluedit-article__hero::before,
.cluedit-article__hero::after {
	content: "";
	position: absolute;
	z-index: 0;
	bottom: -600px;
	left: 50%;
	width: 2200px;
	height: 900px;
	margin-left: -1100px;
	background: url(../images/hero-arcs.svg) center / 100% 100% no-repeat;
	opacity: 0.55;
	pointer-events: none;
	animation: cluedit-article-breathe 10s ease-in-out infinite;
}

.cluedit-article__hero::after {
	background-image: url(../images/hero-arcs-inner.svg);
	animation-delay: -5s;
}

.cluedit-article .cluedit-article__hero-inner {
	display: grid;
	position: relative;
	z-index: 1;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 56px;
	align-items: center;
	padding-bottom: 64px;
}

.cluedit-article .cluedit-article__hero-inner:not(:has(.cluedit-article__visual)) {
	grid-template-columns: minmax(0, 744px);
}

.cluedit-article .cluedit-article__intro {
	min-width: 0;
}

/* Breadcrumbs (core/breadcrumbs): Home / Insights / Category. */
.cluedit-article .cluedit-article__crumbs {
	margin-bottom: 26px;
	color: var(--cluedit-article-crumbs);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.55;
}

.cluedit-article .cluedit-article__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cluedit-article .cluedit-article__crumbs li {
	margin: 0;
}

/* Core draws the "/" separator (hidden from screen readers). */
.cluedit-article .cluedit-article__crumbs li:not(:last-child)::after {
	margin: 0 0 0 8px;
	opacity: 0.6;
}

.cluedit-article .cluedit-article__crumbs a {
	color: inherit;
	text-decoration: none;
}

.cluedit-article .cluedit-article__crumbs a:hover {
	color: var(--wp--preset--color--surface);
	text-decoration: underline;
}

/* Badge: category · reading time (real post fields). */
.cluedit-article .cluedit-article__badge {
	display: inline-block;
	box-sizing: border-box;
	margin-bottom: 27px;
	padding: 6px 12px;
	border:
		1px solid
		color-mix(in srgb, var(--wp--preset--color--surface) 14%, transparent);
	border-radius: var(--wp--custom--radius--pill);
	background: color-mix(in srgb, var(--wp--preset--color--surface) 2%, transparent);
	color: var(--cluedit-article-badge);
	font-size: var(--wp--preset--font-size--2-xs);
	line-height: 1.55;
}

.cluedit-article .cluedit-article__badge::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	box-shadow:
		0 0 12px
		color-mix(in srgb, var(--wp--preset--color--peach) 53%, transparent);
	vertical-align: 1px;
}

.cluedit-article .cluedit-article__badge > * {
	display: inline;
}

.cluedit-article .cluedit-article__title {
	margin: 18px 0 22px;
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--custom--font-size--article--title);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.08;
	overflow-wrap: break-word;
}

.cluedit-article .cluedit-article__dek p {
	max-width: 620px;
	margin: 0;
	color: var(--cluedit-article-lead);
	font-size: var(--wp--custom--font-size--article--dek);
	line-height: 1.55;
}

/* Meta: avatar placeholder (no external avatar request), author, dates. */
.cluedit-article .cluedit-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin-top: 32px;
	color: var(--cluedit-article-meta);
	font-size: var(--wp--custom--font-size--article--meta);
	line-height: 1.55;
}

.cluedit-article .cluedit-article__meta::before,
.cluedit-article .cluedit-author::before {
	content: "";
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--cluedit-avatar);
}

.cluedit-article .cluedit-article__author {
	color: var(--wp--preset--color--surface);
	font-weight: 600;
}

/* Dots: author · date · updated. The second dot stays with the date, so a
   wrapped "Updated" line starts clean (as in the reference). */
.cluedit-article .cluedit-article__meta .cluedit-article__date::before,
.cluedit-article .cluedit-article__meta:has(.cluedit-article__updated) .cluedit-article__date::after {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-right: 14px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--surface) 40%, transparent);
	vertical-align: middle;
}

.cluedit-article .cluedit-article__meta:has(.cluedit-article__updated) .cluedit-article__date::after {
	margin: 0 0 0 14px;
}

/* Title highlight (post meta "Title highlight"; the title stays plain text). */
.cluedit-article .cluedit-article__title-accent {
	color: var(--wp--preset--color--accent);
}

/* ---------- Hero illustration (pattern cluedit/article-hero-illustration,
   shown by cluedit/article-visual). Reference .ar-visual: 496×340 box,
   workflow card 92% wide, result card 58% wide in the corner. ---------- */
.cluedit-article .cluedit-article__visual {
	min-width: 0;
}

.cluedit-article-illustration {
	--cluedit-visual-shadow: 0 30px 60px -20px var(--wp--custom--color--hero--shadow-ink);
	position: relative;
}

.cluedit-article-illustration.cluedit-article-illustration :where(p, div) {
	margin-block: 0;
}

.cluedit-article-illustration .cluedit-article-illustration__stack {
	position: relative;
	height: 340px;
}

.cluedit-article-illustration .cluedit-article-illustration__card {
	position: absolute;
	box-sizing: border-box;
	border-radius: var(--wp--custom--radius--m);
	box-shadow: var(--cluedit-visual-shadow);
}

.cluedit-article-illustration .cluedit-article-illustration__card--flow {
	top: 0;
	left: 0;
	width: 92%;
	padding: 23px;
	border:
		1px solid
		color-mix(in srgb, var(--wp--preset--color--surface) 20%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--surface) 10%, transparent);
	color: var(--wp--preset--color--surface);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	animation: cluedit-article-float 7s ease-in-out infinite;
}

.cluedit-article-illustration .cluedit-article-illustration__card--result {
	right: 0;
	bottom: 0;
	width: 58%;
	padding: 18px 23px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	animation: cluedit-article-float 8s ease-in-out -2s infinite;
}

.cluedit-article-illustration .cluedit-article-illustration__title {
	font-size: var(--wp--preset--font-size--m);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.08;
}

.cluedit-article-illustration .cluedit-article-illustration__meta {
	color: var(--wp--custom--color--hero--card-meta);
	font-size: var(--wp--custom--font-size--article--visual--meta);
	line-height: 1.55;
}

.cluedit-article-illustration .cluedit-article-illustration__card--result .cluedit-article-illustration__meta {
	color: var(--wp--preset--color--mute);
}

.cluedit-article-illustration .cluedit-article-illustration__rows {
	display: grid;
	gap: 8px;
	margin-top: 12px;
}

.cluedit-article-illustration .cluedit-article-illustration__row {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 12px;
	border-radius: var(--wp--custom--radius--s);
	background: color-mix(in srgb, var(--wp--preset--color--surface) 7%, transparent);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.55;
}

.cluedit-article-illustration .cluedit-article-illustration__row > p:first-child {
	min-width: 0;
	font-weight: 600;
}

.cluedit-article-illustration .cluedit-article-illustration__tag {
	flex: none;
	padding: 3px 9px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--custom--color--hero--tag-bg);
	color: var(--wp--custom--color--hero--tag-ink);
	font-size: var(--wp--custom--font-size--article--visual--tag);
	font-weight: 600;
	line-height: 1.55;
}

.cluedit-article-illustration .cluedit-article-illustration__figure {
	margin-top: 6px;
	font-size: var(--wp--custom--font-size--article--visual--figure);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.55;
}

/* Progress bar: track + fill, decoration only. */
.cluedit-article-illustration .cluedit-article-illustration__card--result::after {
	content: "";
	display: block;
	height: 6px;
	margin-top: 12px;
	border-radius: 99px;
	background:
		var(--wp--preset--gradient--dusk) left center / 80% 100% no-repeat,
		var(--wp--custom--color--hero--track);
	animation: cluedit-article-fill 3.5s var(--cluedit-ease) infinite alternate;
}

/* ---------- Body: contents | text | aside ---------- */
.cluedit-article .cluedit-article__body {
	display: grid;
	box-sizing: border-box;
	grid-template-columns: 200px minmax(0, 1fr) 256px;
	gap: 40px;
	align-items: start;
	padding: 72px var(--cluedit-pad-x) 96px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
}

.cluedit-article .cluedit-article__column {
	min-width: 0;
	max-width: var(--wp--custom--layout--reading);
}

/* ---------- Contents (cluedit/toc) ---------- */
.cluedit-toc {
	position: sticky;
	top: var(--cluedit-article-sticky);
	font-size: var(--wp--custom--font-size--article--meta);
	line-height: 1.55;
}

.cluedit-toc .cluedit-toc__label {
	margin: 0 0 12px;
	color: var(--wp--preset--color--mute);
	font-size: var(--wp--preset--font-size--2-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.55;
	text-transform: uppercase;
}

.cluedit-toc .cluedit-toc__hint {
	margin: 0;
	color: var(--wp--preset--color--mute);
}

.cluedit-toc .cluedit-toc__list {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cluedit-toc .cluedit-toc__list li {
	margin: 0;
}

.cluedit-toc .cluedit-toc__list a {
	display: block;
	padding: 8px 12px;
	border-radius: var(--wp--custom--radius--s);
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition:
		background-color 0.3s,
		color 0.3s;
}

.cluedit-toc .cluedit-toc__list a:hover {
	background-color: var(--wp--custom--color--article--toc-hover);
}

.cluedit-toc .cluedit-toc__list a[aria-current] {
	background-image: var(--wp--preset--gradient--thumb-a);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.cluedit-toc .cluedit-share {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.cluedit-toc .cluedit-share li {
	margin: 0;
}

.cluedit-toc .cluedit-share li[hidden] {
	display: none;
}

.cluedit-toc .cluedit-share :is(a, button) {
	display: block;
	padding: 8px 12px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--s);
	background: transparent;
	color: var(--wp--preset--color--text);
	font: inherit;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.55;
	text-decoration: none;
	cursor: pointer;
}

.cluedit-toc .cluedit-share :is(a, button):hover {
	border-color: var(--wp--preset--color--ink);
}

.cluedit-toc .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* ---------- Prose (post content) ---------- */
.cluedit-article .cluedit-prose {
	color: var(--wp--preset--color--text);
	font-size: var(--wp--custom--font-size--article--body);
	line-height: 1.75;
	counter-reset: cluedit-article-faq;
}

.cluedit-article .cluedit-prose > * {
	margin-block: 0;
}

.cluedit-article .cluedit-prose > * + * {
	margin-top: 22px;
}

.cluedit-article .cluedit-prose > h2 {
	margin-top: 60px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--custom--font-size--article--h-2);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.12;
	scroll-margin-top: 22px;
}

.cluedit-article .cluedit-prose > h3 {
	margin-top: 36px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--custom--font-size--article--h-3);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.08;
	scroll-margin-top: 22px;
}

.cluedit-article .cluedit-prose > h4 {
	margin-top: 30px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--custom--font-size--article--body);
	font-weight: 600;
	line-height: 1.4;
}

.cluedit-article .cluedit-prose > :is(h2, h3, h4):first-child {
	margin-top: 0;
}

.cluedit-article .cluedit-prose a:not(.wp-element-button) {
	border-bottom: 1px solid currentcolor;
	color: var(--wp--preset--color--dusk-blue);
	font-weight: 600;
	text-decoration: none;
}

.cluedit-article .cluedit-prose a:not(.wp-element-button):hover {
	border-bottom-width: 2px;
}

.cluedit-article .cluedit-prose :is(ul, ol) {
	padding-left: 22px;
}

.cluedit-article .cluedit-prose li + li {
	margin-top: 8px;
}

.cluedit-article .cluedit-prose li::marker {
	color: var(--wp--preset--color--mauve);
	font-weight: 700;
}

.cluedit-article .cluedit-prose strong {
	font-weight: 700;
}

/* Key takeaways (pattern cluedit/article-takeaways). */
.cluedit-article .cluedit-prose .cluedit-takeaways {
	box-sizing: border-box;
	padding: 26px 28px;
	border: 1px solid var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--l);
	background-image: var(--wp--preset--gradient--thumb-a);
	box-shadow:
		0 20px 50px -34px
		color-mix(in srgb, var(--wp--preset--color--navy) 40%, transparent);
}

.cluedit-article .cluedit-prose .cluedit-takeaways > * {
	margin-block: 0;
}

.cluedit-article .cluedit-prose .cluedit-takeaways__label {
	display: inline-block;
	margin-bottom: 14px;
	color: var(--wp--preset--color--dusk-blue);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	line-height: 1.75;
}

.cluedit-article .cluedit-prose .cluedit-takeaways :is(ul, ol) {
	padding-left: 20px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--custom--font-size--article--takeaways);
	line-height: 1.6;
}

/* Process steps (pattern cluedit/article-flow): a real ordered list. */
.cluedit-article .cluedit-prose .cluedit-flow {
	display: grid;
	position: relative;
	box-sizing: border-box;
	gap: 10px;
	padding: 34px 28px;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--l);
	background-image: var(--wp--preset--gradient--dusk);
}

.cluedit-article .cluedit-prose .cluedit-flow::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 60% at 50% 110%, var(--wp--custom--color--article--flow-shade), transparent 70%);
}

.cluedit-article .cluedit-prose .cluedit-flow > * {
	position: relative;
	margin-block: 0;
}

.cluedit-article .cluedit-prose .cluedit-flow__steps {
	display: grid;
	gap: 42px;
	padding: 0;
	list-style: none;
}

.cluedit-article .cluedit-prose .cluedit-flow__steps li {
	display: flex;
	position: relative;
	box-sizing: border-box;
	gap: 10px;
	align-items: center;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	padding: 13px 16px;
	border:
		1px solid
		color-mix(in srgb, var(--wp--preset--color--surface) 30%, transparent);
	border-radius: var(--wp--custom--radius--s);
	background: color-mix(in srgb, var(--wp--preset--color--surface) 14%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 500;
	line-height: 1.75;
}

/* Step dot. */
.cluedit-article .cluedit-prose .cluedit-flow__steps li::after {
	content: "";
	flex: none;
	order: -1;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	opacity: 0.8;
}

/* Connector between steps. */
.cluedit-article .cluedit-prose .cluedit-flow__steps li + li::before {
	content: "";
	position: absolute;
	top: -33px;
	left: 50%;
	width: 2px;
	height: 22px;
	margin-left: -1px;
	background: linear-gradient(var(--wp--preset--color--surface), transparent);
}

.cluedit-article .cluedit-prose .cluedit-flow__steps li:last-child {
	justify-content: center;
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
	font-weight: 700;
	animation: cluedit-article-glow 2.8s ease-in-out infinite;
}

.cluedit-article .cluedit-prose .cluedit-flow__steps li:last-child::after {
	display: none;
}

.cluedit-article .cluedit-prose .cluedit-flow__caption {
	margin-top: 8px;
	color: var(--wp--custom--color--article--flow-caption);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.75;
	text-align: center;
}

/* Quote (core/quote). */
.cluedit-article .cluedit-prose > .wp-block-quote {
	margin-block: 44px;
	padding: 0;
	border: 0;
}

.cluedit-article .cluedit-prose .wp-block-quote p {
	margin: 0;
	background: linear-gradient(90deg, var(--wp--preset--color--dusk-blue), var(--wp--preset--color--mauve) 60%, var(--wp--preset--color--mauve));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: var(--wp--custom--font-size--article--quote);
	font-style: normal;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.25;
}

.cluedit-article .cluedit-prose .wp-block-quote cite {
	display: block;
	margin-top: 12px;
	color: var(--wp--preset--color--mute);
	font-size: var(--wp--custom--font-size--article--meta);
	font-style: normal;
	line-height: 1.75;
}

/* Table (core/table): scrolls inside its frame on small screens. */
.cluedit-article .cluedit-prose > .wp-block-table {
	box-sizing: border-box;
	overflow-x: auto;
	overflow-y: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--m);
	box-shadow:
		0 14px 34px -26px
		color-mix(in srgb, var(--wp--preset--color--navy) 40%, transparent);
}

.cluedit-article .cluedit-prose .wp-block-table table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.5;
}

.cluedit-article .cluedit-prose .wp-block-table :is(thead, tbody, tfoot) {
	border: 0;
}

.cluedit-article .cluedit-prose .wp-block-table :is(th, td) {
	padding: 14px 16px;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
	vertical-align: top;
}

.cluedit-article .cluedit-prose .wp-block-table thead th {
	background-image: var(--wp--preset--gradient--navy);
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
}

/* Opt-in "Row headings" table style: the first cell of each body row is a
   row header (<th scope="row"> on the site; the first cell while editing). */
.cluedit-prose .wp-block-table.is-style-cluedit-row-headings tbody :is(th[scope="row"], td:first-child) {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	white-space: nowrap;
}

.cluedit-article .cluedit-prose .wp-block-table tr:last-child > * {
	border-bottom: 0;
}

.cluedit-article .cluedit-prose .wp-block-table figcaption {
	margin: 0;
	padding: 10px 16px;
	border-top: 1px solid var(--wp--preset--color--line);
	background: var(--wp--custom--color--article--table-caption-bg);
	color: var(--wp--preset--color--mute);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
	text-align: left;
}

/* FAQ (core/details, pattern cluedit/article-faq): numbered, "+" icon. */
.cluedit-article .cluedit-prose > .wp-block-details {
	border-top: 1px solid var(--wp--preset--color--line);
	counter-increment: cluedit-article-faq;
}

.cluedit-article .cluedit-prose > .wp-block-details:not(:has(+ .wp-block-details)) {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.cluedit-article .cluedit-prose .wp-block-details > summary {
	display: grid;
	grid-template-columns: 44px 1fr 24px;
	gap: 8px;
	padding: 20px 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--custom--font-size--article--body);
	font-weight: 500;
	line-height: 1.75;
	list-style: none;
	cursor: pointer;
}

.cluedit-article .cluedit-prose .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.cluedit-article .cluedit-prose .wp-block-details > summary::before {
	content: counter(cluedit-article-faq, decimal-leading-zero);
	padding-top: 3px;
	color: var(--wp--preset--color--mute);
	font-size: var(--wp--custom--font-size--article--meta);
}

.cluedit-article .cluedit-prose .wp-block-details > summary::after {
	content: "";
	justify-self: end;
	width: 20px;
	height: 20px;
	margin-top: 5px;
	background-color: var(--wp--preset--color--mauve);
	-webkit-mask: url(../icons/plus.svg) center / contain no-repeat;
	mask: url(../icons/plus.svg) center / contain no-repeat;
	transition: transform 0.35s var(--cluedit-ease);
}

.cluedit-article .cluedit-prose .wp-block-details[open] > summary::after {
	transform: rotate(45deg);
}

.cluedit-article .cluedit-prose .wp-block-details > :not(summary) {
	margin: 0;
	padding: 0 24px 18px 52px;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--custom--font-size--article--faq-answer);
	line-height: 1.75;
}

@supports (interpolate-size: allow-keywords) {

	.cluedit-article .cluedit-prose {
		interpolate-size: allow-keywords;
	}

	.cluedit-article .cluedit-prose .wp-block-details::details-content {
		block-size: 0;
		overflow: clip;
		opacity: 0;
		transition:
			block-size 0.35s var(--cluedit-ease),
			opacity 0.35s var(--cluedit-ease),
			content-visibility 0.35s allow-discrete;
	}

	.cluedit-article .cluedit-prose .wp-block-details[open]::details-content {
		block-size: auto;
		opacity: 1;
	}
}

.cluedit-article .cluedit-prose .wp-block-details.is-animating {
	overflow: hidden;
}

/* ---------- Author ---------- */
.cluedit-article .cluedit-article__column > .cluedit-author {
	display: grid;
	box-sizing: border-box;
	grid-template-columns: 72px 1fr;
	gap: 18px;
	align-items: center;
	margin-top: 56px;
	padding: 24px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--l);
	background: var(--wp--preset--gradient--light);
}

.cluedit-article .cluedit-author::before {
	width: 72px;
	height: 72px;
}

.cluedit-article .cluedit-author__name {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--custom--font-size--article--author-name);
	font-weight: 700;
	line-height: 1.75;
}

.cluedit-article .cluedit-author .cluedit-author__bio {
	margin-top: 4px;
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.6;
}

/* ---------- Aside CTA ---------- */
.cluedit-article .cluedit-article__aside {
	position: sticky;
	top: var(--cluedit-article-sticky);
	box-sizing: border-box;
	padding: 0 24px 24px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--l);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--shadow--raised);
}

.cluedit-article .cluedit-article__aside::before {
	content: "";
	display: block;
	height: 8px;
	margin: 0 -24px 29px;
	background: var(--wp--preset--color--accent);
}

.cluedit-article .cluedit-article__aside .cluedit-article__aside-label {
	margin-bottom: 14px;
	color: var(--wp--preset--color--mute);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	line-height: 1.55;
}

.cluedit-article .cluedit-article__aside .cluedit-article__aside-title {
	margin-bottom: 10px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--custom--font-size--article--h-3);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.cluedit-article .cluedit-article__aside .cluedit-article__aside-text {
	margin-bottom: 18px;
	color: var(--wp--preset--color--mute);
	font-size: var(--wp--custom--font-size--article--aside-text);
	line-height: 1.55;
}

.cluedit-article .cluedit-article__aside .wp-block-button__link {
	justify-content: space-between;
	width: 100%;
}

/* ---------- Insight cards (homepage, related, listing) ---------- */
.cluedit-section.cluedit-insights.cluedit-related {
	background: var(--wp--preset--gradient--light);
}

.cluedit-section.cluedit-related .cluedit-section__head .cluedit-section-title {
	margin-bottom: 16px;
}

/* The Query block carries the reference 56px gap above the cards. */
.cluedit-section .cluedit-insight-list {
	margin-top: 56px;
}

.cluedit-section .cluedit-insight-list .cluedit-cards {
	margin-top: 0;
	padding: 0;
	list-style: none;
}

.cluedit-insight-list .cluedit-cards > li {
	margin: 0;
}

.cluedit-insight-list .cluedit-cards > li > .cluedit-teaser {
	height: 100%;
}

.cluedit-insight-list .cluedit-cards > li:nth-child(3n + 1) .cluedit-teaser__thumb {
	background-image: var(--wp--preset--gradient--thumb-a);
}

.cluedit-insight-list .cluedit-cards > li:nth-child(3n + 2) .cluedit-teaser__thumb {
	background-image: var(--wp--preset--gradient--thumb-b);
}

.cluedit-insight-list .cluedit-cards > li:nth-child(3n) .cluedit-teaser__thumb {
	background-image: var(--wp--preset--gradient--thumb-c);
}

/* Featured image covers the thumbnail; without one the category word shows. */

/* No z-index: later in the thumbnail than the word, earlier than the
   title's full-card link area. */
.cluedit-insight-list .cluedit-teaser__thumb .cluedit-teaser__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

.cluedit-insight-list .cluedit-teaser__thumb .cluedit-teaser__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cluedit-insight-list .cluedit-teaser__meta > * {
	display: inline;
}

.cluedit-insight-list .cluedit-teaser__title a {
	overflow-wrap: break-word;
}

.cluedit-section .cluedit-insight-list .cluedit-insights__empty {
	box-sizing: border-box;
	max-width: 620px;
	margin: 0 auto;
	padding: 28px 24px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--l);
	background: var(--wp--preset--color--surface-warm);
	color: var(--wp--preset--color--mute);
	font-size: var(--wp--preset--font-size--l);
	line-height: 1.55;
	text-align: center;
}

.cluedit-insight-list .cluedit-insights__pagination {
	gap: 8px;
	margin-top: 44px;
	font-size: var(--wp--preset--font-size--s);
}

.cluedit-insight-list .cluedit-insights__pagination :is(a, .current) {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.cluedit-insight-list .cluedit-insights__pagination .current {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--surface);
}

/* ---------- Tablet: no aside ---------- */
@media (max-width: 1279px) {

	.cluedit-article .cluedit-article__body {
		grid-template-columns: 200px minmax(0, 720px);
		gap: 56px;
	}

	.cluedit-article .cluedit-article__aside {
		display: none;
	}
}

@media (max-width: 1100px) {

	.cluedit-article .cluedit-article__visual {
		width: 100%;
		max-width: 520px;
	}
}

/* ---------- Mobile: one column, contents above the text ---------- */
@media (max-width: 800px) {

	.cluedit-article .cluedit-article__hero {
		padding-top: 36px;
	}

	/* Reference: two columns down to 801px; stacked below. */
	.cluedit-article .cluedit-article__hero-inner {
		grid-template-columns: minmax(0, 1fr);
		padding-bottom: 44px;
	}

	.cluedit-article .cluedit-article__title {
		font-size: var(--wp--custom--font-size--article--title-mobile);
	}

	.cluedit-article-illustration .cluedit-article-illustration__stack {
		height: 300px;
	}

	.cluedit-article-illustration .cluedit-article-illustration__card--flow {
		padding: 20px;
	}

	.cluedit-article-illustration .cluedit-article-illustration__card--flow .cluedit-article-illustration__title {
		font-size: var(--wp--custom--font-size--article--visual--title-mobile);
	}

	.cluedit-article-illustration .cluedit-article-illustration__card--result {
		padding: 17px;
	}

	.cluedit-article-illustration .cluedit-article-illustration__figure {
		font-size: var(--wp--custom--font-size--article--visual--figure-mobile);
	}

	.cluedit-article .cluedit-article__dek p {
		font-size: var(--wp--preset--font-size--m);
	}

	.cluedit-article .cluedit-article__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
		padding: 44px var(--cluedit-pad-x) 64px;
	}

	.cluedit-toc {
		position: static;
	}

	.cluedit-toc .cluedit-share,
	.cluedit-toc .cluedit-share__status {
		display: none;
	}

	.cluedit-article .cluedit-prose {
		font-size: var(--wp--preset--font-size--m);
	}

	.cluedit-article .cluedit-prose > h2 {
		margin-top: 46px;
		font-size: var(--wp--custom--font-size--article--h-2-mobile);
	}

	.cluedit-article .cluedit-prose .wp-block-quote p {
		font-size: var(--wp--custom--font-size--article--quote-mobile);
	}

	.cluedit-article .cluedit-prose .wp-block-details > summary {
		grid-template-columns: 30px 1fr 20px;
	}

	.cluedit-article .cluedit-prose .wp-block-details > :not(summary) {
		padding-left: 38px;
	}

	.cluedit-article .cluedit-article__column > .cluedit-author {
		grid-template-columns: minmax(0, 1fr);
	}

	.cluedit-section .cluedit-insight-list {
		margin-top: 35px;
	}
}

@keyframes cluedit-article-float {

	50% {
		transform: translateY(-10px);
	}
}

@keyframes cluedit-article-fill {

	from {
		background-size: 35% 100%, auto;
	}
}

@keyframes cluedit-article-drift {

	to {
		background-position: 100% 60%;
	}
}

@keyframes cluedit-article-breathe {

	50% {
		transform: scale(1.04);
	}
}

@keyframes cluedit-article-glow {

	50% {
		box-shadow:
			0 0 0 8px
			color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent);
	}
}

/* ---------- Service pages (ADR-0011): hero actions, cards ---------- */
.cluedit-article .cluedit-service__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 26px;
	align-items: center;
	margin-top: 28px;
}

.cluedit-article .cluedit-service__actions .wp-block-buttons {
	margin: 0;
}

.cluedit-article .cluedit-service__more {
	margin: 0;
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.55;
}

.cluedit-article .cluedit-service__more a {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	color: var(--cluedit-article-lead);
	text-decoration: none;
	text-underline-offset: 3px;
}

.cluedit-article .cluedit-service__more a:hover {
	text-decoration: underline;
}

.cluedit-article .cluedit-service__more a::after {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background-color: currentcolor;
	-webkit-mask: url(../icons/arrow-right.svg) center / contain no-repeat;
	mask: url(../icons/arrow-right.svg) center / contain no-repeat;
}


/* Services have no aside: contents | text from 801px. */
@media (min-width: 801px) {

	.cluedit-service .cluedit-article__body {
		grid-template-columns: 200px minmax(0, 720px);
		gap: 56px;
		justify-content: center;
	}
}