/*
 * Single article (docs/08 `/news/{slug}/`, `/blog/{slug}/`; Phase 15): the
 * breadcrumbs, the article header, the featured image, the prose styles for
 * the core blocks posts use (paragraphs, headings, lists, quotes, images,
 * tables, code, separators, embeds) and the related-posts section. Loaded on
 * single posts only (functions.php).
 *
 * The redesign has no article page: this template is derived from the design
 * system (tokens, chips, cards, the section rhythm) and awaits design approval
 * (docs/08, GATE 3). theme.json tokens and base.css aliases only; the prose
 * column is the content width (760px). Literal values: 1px borders.
 */

.sc-article > *,
.sc-article-header > *,
.sc-prose > * {
	margin-block: 0;
}

/* Imported content (for example Medium exports) can carry class names the
   theme's layout utilities use; inside the prose they are only wrappers, so
   the theme's section spacing does not apply. */
.sc-prose .section {
	padding-block: 0;
}

/* ---------- Links (breadcrumbs, prose) ---------- */

.sc-breadcrumbs a {
	color: var(--c-muted);
	text-decoration: underline;
	text-decoration-color: var(--line);
	text-underline-offset: 0.2em;
}

.sc-prose a {
	color: var(--c-orange);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sc-breadcrumbs a:hover {
	color: var(--c-text);
}

.sc-prose a:hover {
	color: var(--c-orange-hover);
}

/* ---------- Header ---------- */

.sc-article-header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--article--header-gap);
	padding: var(--wp--custom--article--header-padding);
}

.sc-breadcrumbs p {
	margin: 0;
	font-size: var(--wp--custom--font-size--breadcrumbs);
	color: var(--c-muted);
}

.sc-breadcrumbs-sep {
	margin-inline: var(--wp--custom--article--breadcrumbs-gap);
	color: var(--c-faint);
}

.sc-breadcrumbs [aria-current="page"] {
	color: var(--c-text);
}

.sc-article-title {
	font-size: var(--wp--preset--font-size--h-2);
}

.sc-article-byline {
	font-size: var(--wp--custom--font-size--byline);
	color: var(--c-muted);
}

.sc-chip.sc-chip-topic {
	border-color: color-mix(in srgb, var(--c-blue) 50%, transparent);
	color: var(--c-blue);
}

/* ---------- Featured image (the page's LCP image) ---------- */

.sc-article-image {
	aspect-ratio: var(--wp--custom--article--image-ratio);
	margin: 0 0 var(--wp--custom--article--image-offset);
	overflow: hidden;
	border: 1px solid var(--line-soft);
	border-radius: var(--r-card);
	background: var(--c-black);
}

.sc-article-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Prose ---------- */

.sc-prose {
	padding-bottom: var(--wp--custom--article--content-bottom);
	color: var(--c-text);
}

.sc-prose > * + * {
	margin-top: var(--wp--custom--article--prose-gap);
}

.sc-prose > :where(h2) {
	margin-top: var(--wp--custom--article--heading-offset);
}

.sc-prose > :where(h3, h4, h5, h6) {
	margin-top: var(--wp--custom--article--subheading-offset);
}

.sc-prose :where(ul, ol) {
	padding-left: var(--wp--custom--article--list-indent);
}

.sc-prose :where(li) + li,
.sc-prose :where(li) > :where(ul, ol) {
	margin-top: var(--wp--custom--article--list-gap);
}

.sc-prose :where(blockquote) {
	margin-inline: 0;
	padding: var(--wp--custom--article--quote-padding);
	border-left: var(--wp--custom--article--quote-border) solid var(--c-orange);
	font-size: var(--wp--preset--font-size--lead);
}

.sc-prose :where(blockquote) > * {
	margin-block: 0;
}

.sc-prose :where(blockquote cite) {
	display: block;
	margin-top: var(--wp--custom--article--caption-offset);
	font-size: var(--wp--custom--font-size--caption);
	font-style: normal;
	color: var(--c-muted);
}

.sc-prose > :where(figure, .wp-block-image, .wp-block-table, .wp-block-embed) {
	margin-block: var(--wp--custom--article--figure-offset);
}

.sc-prose :where(img) {
	max-width: 100%;
	height: auto;
	border-radius: var(--r-sm);
}

.sc-prose :where(figcaption) {
	margin-top: var(--wp--custom--article--caption-offset);
	font-size: var(--wp--custom--font-size--caption);
	color: var(--c-muted);
}

.sc-prose :where(table) {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--custom--font-size--table);
}

/* With a class, so they beat core's `.wp-block-table` cell borders. */
.sc-prose th,
.sc-prose td {
	padding: var(--wp--custom--article--cell-padding);
	border: 1px solid var(--line-soft);
	text-align: left;
	vertical-align: top;
}

.sc-prose .wp-block-table thead {
	border-bottom: 1px solid var(--line-soft);
}

.sc-prose th {
	background: var(--c-panel);
	font-family: var(--f-display);
	font-weight: 600;
}

.sc-prose :where(code) {
	padding: var(--wp--custom--article--code-padding);
	border-radius: var(--r-input);
	background: var(--c-panel);
	font-size: var(--wp--custom--font-size--code);
}

.sc-prose :where(hr) {
	margin-block: var(--wp--custom--article--rule-offset);
	border: 0;
	border-top: 1px solid var(--line-soft);
}

/* ---------- Related posts ---------- */

.sc-related :where(.wrap) > * {
	margin-block: 0;
}

.sc-related-title {
	margin-bottom: var(--wp--custom--article--related-heading-offset);
}