/**
 * Article content.
 *
 * Everything an editor writes in Gutenberg lands inside .wpx-prose. Rather
 * than pushing each post into fixed fields — which fights content that
 * genuinely differs post to post — the blocks themselves are styled to match
 * the rest of the theme.
 *
 * Covers: headings, tables, lists, quotes, code, images with captions,
 * buttons, separators, embeds, and the details/summary accordions used for
 * FAQ sections.
 */

/* ==========================================================================
   Rhythm
   ==========================================================================
   Spacing hangs off each block's own bottom margin rather than a
   `> * + *` child rule.

   The child combinator only reaches blocks that sit directly inside
   .wpx-prose. Content imported from another site is often wrapped — in a
   div, a section, a stray container from the old template — and every one
   of those wrappers puts the paragraphs out of reach. Bottom margins work
   at any depth, which is what content of unknown shape needs.
   ========================================================================== */

.wpx-prose {
	color: var(--wpx-text-muted);
	font-size: var(--wpx-text-base);
	line-height: 1.75;
}

.wpx-prose p,
.wpx-prose ul,
.wpx-prose ol,
.wpx-prose dl,
.wpx-prose blockquote,
.wpx-prose pre,
.wpx-prose figure,
.wpx-prose table,
.wpx-prose .wp-block-table,
.wpx-prose .wp-block-image,
.wpx-prose .wp-block-buttons,
.wpx-prose .wp-block-embed,
.wpx-prose details,
.wpx-prose iframe,
.wpx-prose > div {
	margin-block-end: var(--wpx-space-5);
}

/* Running prose sits a little tighter than a block against a figure. */
.wpx-prose p { margin-block-end: var(--wpx-space-4); }

/* An image or table on its own line needs air on both sides. */
.wpx-prose figure,
.wpx-prose .wp-block-image,
.wpx-prose .wp-block-table,
.wpx-prose .wp-block-embed,
.wpx-prose iframe {
	margin-block: var(--wpx-space-5);
}

/* No trailing gap at the end of the article, and none above the first block. */
.wpx-prose > :first-child { margin-block-start: 0; }
.wpx-prose > :last-child { margin-block-end: 0; }

/* A wrapper contributed by imported content should not add a second gap on
   top of the gaps its own children already carry. */
.wpx-prose > div > :last-child { margin-block-end: 0; }

/* Content pasted as plain text separated by line breaks has no paragraphs to
   space. Give the breaks some room so it does not read as one block. */
.wpx-prose br { content: ""; display: block; margin-block-end: var(--wpx-space-2); }

/* ==========================================================================
   Headings
   ========================================================================== */

.wpx-prose h2 {
	position: relative;
	margin-block: var(--wpx-space-7) var(--wpx-space-4);
	padding-inline-start: var(--wpx-space-4);
	font-size: var(--wpx-text-2xl);
	color: var(--wpx-text);
	line-height: 1.25;
}

/* An accent bar rather than an underline: it survives a two-line heading,
   which the underline did not. */
.wpx-prose h2::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.18em;
	bottom: 0.18em;
	width: 4px;
	border-radius: var(--wpx-radius-pill);
	background: linear-gradient( 180deg, var(--wpx-accent), var(--wpx-secondary) );
}

.wpx-prose h3 {
	margin-block: var(--wpx-space-6) var(--wpx-space-3);
	font-size: var(--wpx-text-xl);
	color: var(--wpx-text);
}

.wpx-prose h4 {
	margin-block: var(--wpx-space-5) var(--wpx-space-2);
	font-size: var(--wpx-text-lg);
	color: var(--wpx-text);
}

.wpx-prose h2:first-child,
.wpx-prose h3:first-child { margin-block-start: 0; }

/* ==========================================================================
   Text
   ========================================================================== */

/* Deliberately not `.wpx-prose p { margin: 0 }`. That selector carries one
   more element than the rhythm rule above it, so it won every paragraph and
   removed the space between them. Reset the first child instead, and let the
   rhythm rule own the gaps. */


.wpx-prose strong,
.wpx-prose b { color: var(--wpx-text); font-weight: var(--wpx-weight-bold); }

.wpx-prose a {
	color: var(--wpx-accent);
	text-decoration: underline;
	text-decoration-color: rgb(from var(--wpx-accent) r g b / 0.35);
	text-underline-offset: 3px;
	transition: color var(--wpx-transition), text-decoration-color var(--wpx-transition);
}

.wpx-prose a:hover {
	color: var(--wpx-accent-hover);
	text-decoration-color: currentColor;
}

/* A centred link line on its own — the "you may also like" pattern — reads
   as a callout rather than a stray sentence. */
.wpx-prose p.has-text-align-center:has(> a:only-child),
.wpx-prose p[style*="text-align:center"]:has(> a:only-child) {
	padding: var(--wpx-space-4);
	background: var(--wpx-surface-2);
	border: 1px solid var(--wpx-border);
	border-inline-start: 3px solid var(--wpx-accent);
	border-radius: var(--wpx-radius);
}

/* ==========================================================================
   Lists
   ========================================================================== */

.wpx-prose ul,
.wpx-prose ol {
	margin-inline: 0;
	padding-inline-start: 0;
	list-style: none;
}

.wpx-prose li {
	position: relative;
	padding-inline-start: var(--wpx-space-6);
	margin-block-end: var(--wpx-space-3);
}

.wpx-prose ul > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 6px;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--wpx-accent);
	transform: rotate(45deg);
}

/* Numbered steps get a real numeral in an accent chip. */
.wpx-prose ol { counter-reset: wpx-step; }

.wpx-prose ol > li { counter-increment: wpx-step; padding-inline-start: var(--wpx-space-7); }

.wpx-prose ol > li::before {
	content: counter(wpx-step);
	position: absolute;
	inset-inline-start: 0;
	top: 0.1em;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	background: var(--wpx-surface-3);
	border: 1px solid var(--wpx-border-strong);
	border-radius: var(--wpx-radius-pill);
	color: var(--wpx-accent);
	font-size: var(--wpx-text-xs);
	font-weight: var(--wpx-weight-bold);
	line-height: 1;
}

.wpx-prose li > ul,
.wpx-prose li > ol { margin-block-start: var(--wpx-space-2); }

/* ==========================================================================
   Tables
   ========================================================================== */

/* Wrapped so a wide spec table scrolls instead of breaking the column. */
.wpx-prose .wp-block-table,
.wpx-prose figure.wp-block-table {
	margin-inline: 0;
	overflow-x: auto;
	border-radius: var(--wpx-radius);
	border: 1px solid var(--wpx-border);
}

.wpx-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wpx-text-sm);
	background: var(--wpx-surface-1);
}

.wpx-prose thead th,
.wpx-prose table tr:first-child th {
	background: linear-gradient( 180deg, var(--wpx-surface-4), var(--wpx-surface-3) );
	color: var(--wpx-text);
	font-weight: var(--wpx-weight-bold);
	font-size: var(--wpx-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-align: start;
	border-block-end: 2px solid var(--wpx-accent);
}

.wpx-prose th,
.wpx-prose td {
	padding: var(--wpx-space-3) var(--wpx-space-4);
	border-block-end: 1px solid var(--wpx-border);
	vertical-align: top;
}

.wpx-prose tbody tr:nth-child(odd) { background: rgb(from var(--wpx-surface-2) r g b / 0.55); }

.wpx-prose tbody tr:last-child th,
.wpx-prose tbody tr:last-child td { border-block-end: 0; }

.wpx-prose tbody tr { transition: background var(--wpx-transition); }
.wpx-prose tbody tr:hover { background: rgb(from var(--wpx-accent) r g b / 0.07); }

/* First column of a two-column spec table reads as the label. */
.wpx-prose tbody td:first-child,
.wpx-prose tbody th:first-child {
	color: var(--wpx-text);
	font-weight: var(--wpx-weight-medium);
	white-space: nowrap;
}

/* ==========================================================================
   Images and figures
   ========================================================================== */

.wpx-prose figure,
.wpx-prose .wp-block-image { margin-inline: 0; }

.wpx-prose img {
	border-radius: var(--wpx-radius);
	border: 1px solid var(--wpx-border);
}

.wpx-prose figcaption {
	margin-block-start: var(--wpx-space-2);
	font-size: var(--wpx-text-xs);
	color: var(--wpx-text-dim);
	text-align: center;
}

.wpx-prose .wp-block-gallery { gap: var(--wpx-space-3); }

/* Embeds keep their ratio without an inline style per post. */
.wpx-prose .wp-block-embed__wrapper { position: relative; }

.wpx-prose iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--wpx-radius);
}

/* ==========================================================================
   Quotes, code, separators
   ========================================================================== */

.wpx-prose blockquote {
	margin-inline: 0;
	padding: var(--wpx-space-4) var(--wpx-space-5);
	background: var(--wpx-surface-2);
	border-inline-start: 3px solid var(--wpx-accent);
	border-radius: 0 var(--wpx-radius) var(--wpx-radius) 0;
	color: var(--wpx-text-muted);
}

.wpx-prose blockquote p { margin: 0; }
.wpx-prose blockquote cite { display: block; margin-block-start: var(--wpx-space-2); font-size: var(--wpx-text-sm); color: var(--wpx-text-dim); }

.wpx-prose code {
	background: var(--wpx-surface-3);
	border: 1px solid var(--wpx-border);
	padding: 0.15em 0.45em;
	border-radius: var(--wpx-radius-sm);
	font-size: 0.9em;
	color: var(--wpx-secondary);
	white-space: nowrap;
}

.wpx-prose pre {
	padding: var(--wpx-space-4);
	background: var(--wpx-surface-1);
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius);
	overflow-x: auto;
}

.wpx-prose pre code { background: none; border: 0; padding: 0; white-space: pre; color: var(--wpx-text-muted); }

.wpx-prose hr,
.wpx-prose .wp-block-separator {
	border: 0;
	height: 1px;
	margin-block: var(--wpx-space-6);
	background: linear-gradient( 90deg, transparent, var(--wpx-border-strong), transparent );
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* A download button written as a block should match the theme's buttons
   rather than arriving in the editor's default blue. */
.wpx-prose .wp-block-button__link,
.wpx-prose .wp-block-buttons .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wpx-space-2);
	padding: var(--wpx-space-4) var(--wpx-space-6);
	background: linear-gradient( 135deg, var(--wpx-accent), var(--wpx-secondary) );
	color: var(--wpx-accent-ink);
	border: 0;
	border-radius: var(--wpx-radius);
	font-weight: var(--wpx-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	box-shadow: 0 8px 22px -8px rgb(from var(--wpx-accent) r g b / 0.7);
	transition: transform 220ms var(--wpx-ease-out), box-shadow 220ms var(--wpx-ease), filter 220ms var(--wpx-ease);
}

.wpx-prose .wp-block-button__link:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
	box-shadow: 0 12px 28px -8px rgb(from var(--wpx-accent) r g b / 0.85);
	color: var(--wpx-accent-ink);
}

.wpx-prose .wp-block-buttons { justify-content: center; gap: var(--wpx-space-3); }

.wpx-prose .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wpx-accent);
	color: var(--wpx-accent);
	box-shadow: none;
}

/* ==========================================================================
   FAQ accordions
   ==========================================================================
   Styles the native details/summary element, which is what most FAQ blocks
   and plugins output underneath.
   ========================================================================== */

.wpx-prose details {
	margin-inline: 0;
	background: var(--wpx-surface-2);
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius);
	overflow: hidden;
	transition: border-color var(--wpx-transition);
}


.wpx-prose details[open] { border-color: var(--wpx-accent); }

.wpx-prose summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wpx-space-3);
	padding: var(--wpx-space-4);
	background: var(--wpx-surface-3);
	color: var(--wpx-text);
	font-weight: var(--wpx-weight-bold);
	cursor: pointer;
	list-style: none;
	transition: background var(--wpx-transition), color var(--wpx-transition);
}

.wpx-prose summary::-webkit-details-marker { display: none; }

.wpx-prose summary:hover { background: var(--wpx-surface-4); }

.wpx-prose details[open] summary { color: var(--wpx-accent); }

/* A plus that becomes a minus, drawn rather than typed so it lines up. */
.wpx-prose summary::after {
	content: "";
	position: relative;
	flex: none;
	width: 14px;
	height: 14px;
	background:
		linear-gradient( var(--wpx-accent), var(--wpx-accent) ) center / 14px 2px no-repeat,
		linear-gradient( var(--wpx-accent), var(--wpx-accent) ) center / 2px 14px no-repeat;
	transition: transform 260ms var(--wpx-ease-out);
}

.wpx-prose details[open] summary::after {
	background: linear-gradient( var(--wpx-accent), var(--wpx-accent) ) center / 14px 2px no-repeat;
	transform: rotate(180deg);
}

.wpx-prose details > *:not(summary) {
	padding: var(--wpx-space-4);
	margin: 0;
}

.wpx-prose details > *:not(summary) + *:not(summary) { padding-block-start: 0; }

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 899px) {
	.wpx-prose { font-size: var(--wpx-text-sm); }
	.wpx-prose h2 { font-size: var(--wpx-text-xl); margin-block-start: var(--wpx-space-6); }
	.wpx-prose h3 { font-size: var(--wpx-text-lg); }
	.wpx-prose th, .wpx-prose td { padding: var(--wpx-space-2) var(--wpx-space-3); }
	.wpx-prose tbody td:first-child { white-space: normal; }
	.wpx-prose .wp-block-button__link { width: 100%; justify-content: center; padding-inline: var(--wpx-space-4); }
	.wpx-prose li { padding-inline-start: var(--wpx-space-5); }
	.wpx-prose ol > li { padding-inline-start: var(--wpx-space-6); }
	.wpx-prose ol > li::before { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.wpx-prose .wp-block-button__link:hover { transform: none; }
	.wpx-prose summary::after { transition: none; }
}

/* ==========================================================================
   Alignment
   ==========================================================================
   base.css sets images to display:block for layout reasons, which silently
   cancels the text-align an editor uses to centre a picture. Handle every
   way WordPress expresses alignment, for both block and classic content.
   ========================================================================== */

/* Classic editor and pasted HTML. */
.wpx-prose img.aligncenter,
.wpx-prose figure.aligncenter,
.wpx-prose .aligncenter {
	display: block;
	margin-inline: auto;
}

.wpx-prose img.alignleft,
.wpx-prose figure.alignleft,
.wpx-prose .alignleft {
	float: left;
	margin: 0 var(--wpx-space-5) var(--wpx-space-4) 0;
	max-width: 50%;
}

.wpx-prose img.alignright,
.wpx-prose figure.alignright,
.wpx-prose .alignright {
	float: right;
	margin: 0 0 var(--wpx-space-4) var(--wpx-space-5);
	max-width: 50%;
}

.wpx-prose .alignnone { display: block; margin-inline: 0; }

/* Clear floats so a following heading is not pulled up beside an image. */
.wpx-prose h2,
.wpx-prose h3 { clear: both; }

/* Block editor: a paragraph centred in the editor holds an inline image. */
.wpx-prose p.has-text-align-center,
.wpx-prose .has-text-align-center { text-align: center; }

.wpx-prose p.has-text-align-center img,
.wpx-prose .has-text-align-center img {
	display: inline-block;
	margin-inline: auto;
}

.wpx-prose p.has-text-align-right { text-align: right; }
.wpx-prose p.has-text-align-left { text-align: left; }

/* An image block with no alignment set still centres, because a lone
   screenshot floating against the left margin reads as a mistake. */
.wpx-prose .wp-block-image,
.wpx-prose figure:not(.alignleft):not(.alignright) {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wpx-prose .wp-block-image img,
.wpx-prose figure:not(.alignleft):not(.alignright) img {
	margin-inline: auto;
}

/* A bare image on its own line — no figure, no class — is the commonest
   case in imported content. */
.wpx-prose > p > img:only-child {
	display: block;
	margin-inline: auto;
}

.wpx-prose .alignwide,
.wpx-prose .alignfull { margin-inline: auto; }

/* ==========================================================================
   Buttons written as plain HTML
   ==========================================================================
   Imported posts often carry a download button as an anchor with its own
   class rather than a button block. Pick up the usual names so it matches
   the theme instead of arriving in the source site's colour.
   ========================================================================== */

.wpx-prose a.button,
.wpx-prose a.btn,
.wpx-prose a.download-button,
.wpx-prose a.wp-block-button__link,
.wpx-prose .su-button,
.wpx-prose .maxbutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wpx-space-2);
	padding: var(--wpx-space-4) var(--wpx-space-6);
	background: linear-gradient( 135deg, var(--wpx-accent), var(--wpx-secondary) ) !important;
	color: var(--wpx-accent-ink) !important;
	border: 0;
	border-radius: var(--wpx-radius);
	font-weight: var(--wpx-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	box-shadow: 0 8px 22px -8px rgb(from var(--wpx-accent) r g b / 0.7);
	transition: transform 220ms var(--wpx-ease-out), filter 220ms var(--wpx-ease);
}

.wpx-prose a.button:hover,
.wpx-prose a.btn:hover,
.wpx-prose a.download-button:hover,
.wpx-prose .su-button:hover,
.wpx-prose .maxbutton:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
}

/* Buttons pasted in from another site arrive with their own colours, often
   from a stylesheet that loads after this one. Anything that is a link alone
   on its own line and styled like a button is normalised — matched by inline
   background, by the usual class names, and by a bare <button> in content.
   `!important` is warranted here: the competing declaration is inline. */
.wpx-prose p:has(> a[style*="background"]:only-child),
.wpx-prose p:has(> a.button:only-child),
.wpx-prose p:has(> a.btn:only-child) { text-align: center; }

.wpx-prose a[style*="background"]:only-child,
.wpx-prose a[style*="background-color"],
.wpx-prose a[class*="download"],
.wpx-prose a[class*="btn"],
.wpx-prose a[class*="button"]:not(.wpx-chip),
.wpx-prose button:not([class*="wpx-"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wpx-space-2);
	padding: var(--wpx-space-4) var(--wpx-space-6) !important;
	background: linear-gradient( 135deg, var(--wpx-accent), var(--wpx-secondary) ) !important;
	background-color: transparent !important;
	color: var(--wpx-accent-ink) !important;
	border: 0 !important;
	border-radius: var(--wpx-radius) !important;
	font-weight: var(--wpx-weight-bold) !important;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none !important;
	box-shadow: 0 8px 22px -8px rgb(from var(--wpx-accent) r g b / 0.7);
	transition: transform 220ms var(--wpx-ease-out), filter 220ms var(--wpx-ease);
}

.wpx-prose a[style*="background"]:hover,
.wpx-prose a[class*="download"]:hover,
.wpx-prose a[class*="btn"]:hover,
.wpx-prose a[class*="button"]:not(.wpx-chip):hover,
.wpx-prose button:not([class*="wpx-"]):hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
}

/* ==========================================================================
   Comments
   ========================================================================== */

.wpx-comments { margin-block-start: var(--wpx-space-7); }

.wpx-comments__list {
	list-style: none;
	margin: 0 0 var(--wpx-space-6);
	padding: 0;
}

.wpx-comments__list .children {
	list-style: none;
	margin: var(--wpx-space-3) 0 0;
	padding-inline-start: var(--wpx-space-5);
	border-inline-start: 2px solid var(--wpx-border);
}

/* Beyond two levels a threaded reply has no width left, so deeper replies
   stop indenting rather than becoming a column of single words. */
.wpx-comments__list .children .children { padding-inline-start: var(--wpx-space-3); }
.wpx-comments__list .children .children .children { padding-inline-start: 0; border-inline-start: 0; }

.wpx-comment { margin-block-end: var(--wpx-space-4); }

.wpx-comment__body {
	padding: var(--wpx-space-4);
	background: var(--wpx-surface-2);
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius);
}

.wpx-comment__header {
	display: flex;
	align-items: center;
	gap: var(--wpx-space-3);
	margin-block-end: var(--wpx-space-3);
}

.wpx-comment__avatar img {
	border-radius: var(--wpx-radius-pill);
	border: 1px solid var(--wpx-border-strong);
	display: block;
}

.wpx-comment__meta { display: flex; flex-direction: column; gap: 2px; }

.wpx-comment__author {
	font-weight: var(--wpx-weight-bold);
	color: var(--wpx-text);
	font-size: var(--wpx-text-sm);
}

.wpx-comment__date { font-size: var(--wpx-text-xs); color: var(--wpx-text-dim); }

.wpx-comment__content { font-size: var(--wpx-text-sm); }
.wpx-comment__content > * + * { margin-block-start: var(--wpx-space-3); }

.wpx-comment__pending {
	margin: 0 0 var(--wpx-space-3);
	padding: var(--wpx-space-2) var(--wpx-space-3);
	background: var(--wpx-surface-3);
	border-inline-start: 3px solid var(--wpx-secondary);
	font-size: var(--wpx-text-xs);
	color: var(--wpx-text-muted);
}

.wpx-comment__footer { margin-block-start: var(--wpx-space-3); }

.wpx-comment__reply a {
	font-size: var(--wpx-text-xs);
	font-weight: var(--wpx-weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
}

.wpx-comment.bypostauthor > .wpx-comment__body {
	border-color: var(--wpx-accent);
	box-shadow: inset 3px 0 0 var(--wpx-accent);
}

/* --- Form ---------------------------------------------------------------- */

.wpx-comments .comment-form { display: grid; gap: var(--wpx-space-4); }

.wpx-comments .comment-form p { margin: 0; }

.wpx-comments .comment-form label {
	display: block;
	margin-block-end: var(--wpx-space-2);
	font-size: var(--wpx-text-sm);
	font-weight: var(--wpx-weight-medium);
	color: var(--wpx-text);
}

.wpx-comments__notes { font-size: var(--wpx-text-xs); color: var(--wpx-text-dim); }

.wpx-comments .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: var(--wpx-space-2);
	font-size: var(--wpx-text-xs);
	color: var(--wpx-text-dim);
}

.wpx-comments .comment-form-cookies-consent label { margin: 0; font-weight: 400; font-size: inherit; }

.wpx-comments .comment-form-cookies-consent input { width: auto; }

.wpx-comments__closed {
	padding: var(--wpx-space-3);
	background: var(--wpx-surface-2);
	border: 1px dashed var(--wpx-border);
	border-radius: var(--wpx-radius);
	text-align: center;
	font-size: var(--wpx-text-sm);
	color: var(--wpx-text-dim);
}

/* Author, email and URL sit on one row where there is room. */
@media (min-width: 700px) {
	.wpx-comments .comment-form {
		grid-template-columns: repeat(3, 1fr);
	}

	.wpx-comments .comment-form-comment,
	.wpx-comments .comment-notes,
	.wpx-comments .comment-form-cookies-consent,
	.wpx-comments .form-submit,
	.wpx-comments .comment-reply-title { grid-column: 1 / -1; }
}

/* ==========================================================================
   Page and article headers
   ========================================================================== */

.wpx-page__header,
.wpx-article__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wpx-space-3);
	margin-block-end: var(--wpx-space-5);
}

.wpx-page__cover,
.wpx-article__cover {
	margin: 0 0 var(--wpx-space-6);
}

.wpx-page__cover img,
.wpx-article__cover img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--wpx-radius-lg);
	border: 1px solid var(--wpx-border);
}

.wpx-article__cover figcaption {
	margin-block-start: var(--wpx-space-2);
	font-size: var(--wpx-text-xs);
	color: var(--wpx-text-dim);
	text-align: center;
}

/* --- Tags ---------------------------------------------------------------- */

.wpx-article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wpx-space-2);
	margin-block-start: var(--wpx-space-6);
	padding-block-start: var(--wpx-space-5);
	border-block-start: 1px solid var(--wpx-border);
}

.wpx-tag {
	padding: var(--wpx-space-1) var(--wpx-space-3);
	background: var(--wpx-surface-2);
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius-pill);
	font-size: var(--wpx-text-xs);
	color: var(--wpx-text-muted);
	text-decoration: none;
	transition: border-color var(--wpx-transition), color var(--wpx-transition), transform var(--wpx-transition);
}

.wpx-tag:hover {
	border-color: var(--wpx-accent);
	color: var(--wpx-accent);
	transform: translateY(-1px);
}

/* --- Previous / next ------------------------------------------------------ */

.wpx-postnav {
	margin-block-start: var(--wpx-space-6);
	padding-block: var(--wpx-space-5);
	border-block: 1px solid var(--wpx-border);
}

.wpx-postnav .nav-links {
	display: grid;
	gap: var(--wpx-space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.wpx-postnav .nav-links { grid-template-columns: 1fr 1fr; }
	.wpx-postnav .nav-next { text-align: end; }
}

.wpx-postnav a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--wpx-space-3) var(--wpx-space-4);
	background: var(--wpx-surface-2);
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius);
	text-decoration: none;
	transition: border-color var(--wpx-transition), transform 220ms var(--wpx-ease-out);
}

.wpx-postnav a:hover {
	border-color: var(--wpx-accent);
	transform: translateY(-2px);
}

.wpx-postnav__label {
	font-size: var(--wpx-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wpx-text-dim);
}

.wpx-postnav__title {
	font-size: var(--wpx-text-sm);
	font-weight: var(--wpx-weight-medium);
	color: var(--wpx-text);
	line-height: 1.35;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.wpx-postnav a:hover,
	.wpx-tag:hover { transform: none; }
}