/* ==========================================================================
   ARTICLE (design files)
   A Workshop Note or blog post (patterns/workshop-single-layout.php), a legal page
   (templates/page-legal.html) and the single Download
   (patterns/download-single-layout.php): the header, the running text and the download panel.
   Loaded on those three single views only (inc/assets.php).
   ========================================================================== */

.nm-article-main,
.nm-download-single-main {
	padding: 0;
	margin-block-start: 0;
}

.nm-article-main > *,
.nm-article > *,
.nm-download-single-main > * {
	margin-block: 0;
}

/* --------------------------------------------------------------------------
   1. HEADER: breadcrumb, eyebrow, title, lead, byline, then the photo
   -------------------------------------------------------------------------- */

.nm-article-header__inner,
.nm-article-body {
	width: min(100% - 2 * var(--nm-page-gutter), var(--wp--style--global--content-size));
	margin-inline: auto;
}

.nm-article-header__inner {
	padding-block: clamp(var(--wp--preset--spacing--60), 5vw, var(--wp--preset--spacing--90)) var(--wp--preset--spacing--60);
}

.nm-article-header__inner > * {
	margin: 0;
}

.nm-article-header .nm-breadcrumb {
	margin-bottom: var(--wp--preset--spacing--50);
}

.nm-article-header__title {
	font-size: var(--wp--preset--font-size--heading-1);
}

.nm-article-header .nm-lead {
	max-width: 60ch;
	margin-top: var(--wp--preset--spacing--40);
}

.nm-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--nm-color-border);
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--small);
}

.nm-byline__who {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--deep-teal);
	font-weight: 600;
}

.nm-byline__item {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--technical-xs);
	letter-spacing: var(--nm-tracking-label);
	text-transform: uppercase;
}

.nm-article-hero {
	width: min(100% - 2 * var(--nm-page-gutter), var(--wp--style--global--wide-size));
	margin: 0 auto var(--wp--preset--spacing--80);
}

.nm-article-hero img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--nm-radius-media);
	object-fit: cover;
}

/* A header without a photo keeps the same space above the text. */
.nm-article-header:not(:has(.nm-article-hero)) {
	padding-bottom: var(--wp--preset--spacing--40);
}

/* --------------------------------------------------------------------------
   2. RUNNING TEXT (the post content, .nm-prose)
   -------------------------------------------------------------------------- */

.nm-article-body {
	padding-bottom: var(--nm-section-space);
}

.nm-article-body > *,
.nm-article .nm-prose > *,
.nm-download-main .nm-prose > *,
.nm-legal-article .nm-prose > * {
	margin-block: 0;
}

.nm-article .nm-prose,
.nm-download-main .nm-prose,
.nm-legal-article .nm-prose {
	max-width: none;
	color: var(--wp--preset--color--prose-ink);
}

.nm-article .nm-prose > * + *,
.nm-download-main .nm-prose > * + *,
.nm-legal-article .nm-prose > * + * {
	margin-top: var(--wp--preset--spacing--50);
}

.nm-article .nm-prose > h2,
.nm-download-main .nm-prose > h2,
.nm-legal-article .nm-prose > h2 {
	margin-top: var(--wp--preset--spacing--90);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--nm-color-border);
	color: var(--wp--preset--color--deep-teal);
	font-size: var(--wp--preset--font-size--heading-2);
}

.nm-article .nm-prose > h2:first-child,
.nm-download-main .nm-prose > h2:first-child,
.nm-legal-article .nm-prose > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.nm-article .nm-prose > h2 + *,
.nm-download-main .nm-prose > h2 + *,
.nm-legal-article .nm-prose > h2 + * {
	margin-top: var(--wp--preset--spacing--40);
}

.nm-article .nm-prose > h3,
.nm-download-main .nm-prose > h3,
.nm-legal-article .nm-prose > h3 {
	margin-top: var(--wp--preset--spacing--70);
	color: var(--wp--preset--color--deep-teal);
	font-size: var(--wp--preset--font-size--heading-4);
}

.nm-article .nm-prose > :is(.nm-callout, .nm-build-process, .wp-block-table),
.nm-download-main .nm-prose > :is(.nm-callout, .nm-build-process, .wp-block-table) {
	margin-top: var(--wp--preset--spacing--60);
}

/* A build process in the text: its heading is a section heading like the others. */
.nm-prose > .nm-build-process {
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--nm-color-border);
}

.nm-prose > .nm-build-process > .nm-build-process__heading {
	margin: 0 0 var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--deep-teal);
	font-size: var(--wp--preset--font-size--heading-2);
}

/* Plain lists in the text; styled lists keep their own layout. */
.nm-prose > .wp-block-list:not([class*="is-style-"]) {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	padding-left: 1.3em;
}

.nm-prose > .wp-block-list:not([class*="is-style-"]) > li {
	margin: 0;
}

/* Images keep their own shape; their captions are numbered (ProjectPage\prepare_article()). */
.nm-prose > .wp-block-image {
	margin-inline: 0;
}

.nm-prose > .wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: var(--nm-radius-media);
}

.nm-prose > .wp-block-image .nm-figure-caption {
	margin: var(--wp--preset--spacing--30) 0 0;
	text-align: left;
}

.nm-prose > .wp-block-quote {
	margin-inline: 0;
	padding: var(--wp--preset--spacing--10) 0 var(--wp--preset--spacing--10) var(--wp--preset--spacing--50);
	border-left: 3px solid var(--wp--preset--color--soft-brass);
	color: var(--wp--preset--color--deep-teal);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-4);
	font-weight: 600;
	line-height: 1.2;
}

.nm-prose > .wp-block-quote > * {
	margin: 0;
}

/* Tables (a download's version history): mono headings, rules between the rows. */
.nm-prose > .wp-block-table {
	margin-inline: 0;
	overflow-x: auto;
}

.nm-prose > .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.nm-prose > .wp-block-table :is(th, td) {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) 0;
	border: 0;
	border-bottom: 1px solid var(--nm-color-border);
	text-align: left;
	vertical-align: top;
}

.nm-prose > .wp-block-table th {
	background: none;
	color: var(--wp--preset--color--muted-text);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--technical-xs);
	font-weight: 500;
	letter-spacing: var(--nm-tracking-label);
	text-transform: uppercase;
}

.nm-prose > .wp-block-table thead {
	border-bottom: 0;
}

.nm-prose > .wp-block-table td:first-child {
	font-family: var(--wp--preset--font-family--mono);
	white-space: nowrap;
}

.nm-article-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--80);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--nm-color-border);
}

.nm-article-body > .nm-article-tags {
	margin-top: var(--wp--preset--spacing--80);
}

/* --------------------------------------------------------------------------
   3. DOWNLOAD: the header and text beside the sticky panel
   -------------------------------------------------------------------------- */

.nm-download-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	gap: clamp(var(--wp--preset--spacing--60), 5vw, var(--wp--preset--spacing--90));
	align-items: start;
	width: min(100% - 2 * var(--nm-page-gutter), var(--wp--style--global--wide-size));
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--60) var(--nm-section-space);
}

.nm-download-layout > *,
.nm-download-main > *,
.nm-download-header > * {
	margin-block: 0;
}

.nm-download-main > .nm-prose {
	margin-top: var(--wp--preset--spacing--80);
}

.nm-download-header .nm-breadcrumb {
	margin-bottom: var(--wp--preset--spacing--50);
}

.nm-download-header__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.nm-download-header__title {
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--heading-1);
}

.nm-download-header__from {
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted-text);
}

.nm-download-header .nm-lead {
	max-width: 60ch;
	margin-top: var(--wp--preset--spacing--40);
}

.nm-download-preview {
	position: relative;
	margin: var(--wp--preset--spacing--60) 0 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--nm-color-border);
	border-radius: var(--nm-radius-media);
	background: var(--wp--preset--color--subtle-surface);
}

.nm-download-preview img,
.nm-download-preview svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nm-download-panel-block {
	position: sticky;
	top: calc(var(--nm-header-height) + var(--wp--preset--spacing--50));
}

.nm-download-panel {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--nm-color-border);
	border-radius: var(--nm-radius-card);
	background: var(--wp--preset--color--white-surface);
	box-shadow: var(--nm-shadow-2);
}

.nm-download-panel > * {
	margin: 0;
}

.nm-download-panel__size {
	color: var(--wp--preset--color--muted-text);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--technical-xs);
	letter-spacing: var(--nm-tracking-label);
	text-align: center;
	text-transform: uppercase;
}

.nm-download-panel__unavailable {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: var(--nm-radius-button);
	background: var(--wp--preset--color--subtle-surface);
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.nm-download-panel dl {
	display: grid;
	border-top: 1px solid var(--nm-color-border);
}

.nm-download-panel dl > div {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) 0;
	border-bottom: 1px solid var(--nm-color-border);
	font-size: var(--wp--preset--font-size--small);
}

.nm-download-panel dt {
	color: var(--wp--preset--color--muted-text);
}

.nm-download-panel dd {
	margin: 0;
	color: var(--wp--preset--color--deep-teal);
	font-weight: 500;
	text-align: right;
}

.nm-download-panel__license {
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   4. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
	.nm-download-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.nm-download-panel-block {
		position: static;
	}
}

/* --------------------------------------------------------------------------
   4. LEGAL PAGES: the text beside the side rail (On this page, the legal documents)
   -------------------------------------------------------------------------- */

.nm-legal-main {
	margin-block-start: 0;
}

.nm-legal-main > * {
	margin-block: 0;
}

.nm-legal-body {
	display: grid;
	grid-template-columns: minmax(0, var(--wp--style--global--content-size)) minmax(0, 280px);
	justify-content: space-between;
	gap: var(--wp--preset--spacing--80);
	padding-block: var(--wp--preset--spacing--80) var(--nm-section-space);
}

.nm-legal-header .nm-page-header__title {
	max-width: 20ch;
}

.nm-legal-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--50) 0 0;
}

.nm-legal-aside {
	position: sticky;
	top: calc(var(--nm-header-height) + var(--wp--preset--spacing--50));
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-self: start;
}

.nm-legal-docs {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border: 1px solid var(--nm-color-border);
	border-radius: var(--nm-radius-card);
	background: var(--wp--preset--color--white-surface);
}

.nm-legal-docs a {
	padding: var(--wp--preset--spacing--10) 0;
	color: var(--wp--preset--color--prose-ink);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.nm-legal-docs a:hover,
.nm-legal-docs a[aria-current="page"] {
	color: var(--wp--preset--color--deep-teal);
	font-weight: 600;
}

.nm-legal-docs .nm-eyebrow {
	margin-bottom: var(--wp--preset--spacing--10);
}

@media (max-width: 960px) {
	.nm-legal-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.nm-legal-aside {
		position: static;
	}
}