/* Blog templates — single post, blog index, archives.
   Relies on tokens.css and base.css being loaded first. */

/* ── SCROLL PROGRESS BAR ─────────────────────────────── */

.ms-read-progress {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 3px;
	background: var(--ms-accent);
	transform-origin: left center;
	transform: scaleX(0);
	z-index: 200;
	pointer-events: none;
}

@supports (animation-timeline: scroll()) {
	@keyframes ms-progress-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
	.ms-read-progress {
		animation: ms-progress-bar linear both;
		animation-timeline: scroll(root block);
	}
}

/* ── BREADCRUMB ──────────────────────────────────────── */

.ms-breadcrumb {
	padding: 20px var(--ms-pad-x);
	border-bottom: 1px solid var(--ms-line);
	background: var(--ms-surface);
}

.ms-breadcrumb ol {
	list-style: none;
	padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; gap: 6px;
	font-size: 13px; color: var(--ms-muted);
	font-family: var(--ms-font-mono);
}

.ms-breadcrumb li + li::before { content: '/'; margin-right: 6px; opacity: .45; }

.ms-breadcrumb a { color: var(--ms-muted); text-decoration: none; }
.ms-breadcrumb a:hover { color: var(--ms-accent); }
.ms-breadcrumb [aria-current="page"] { color: var(--ms-ink); }

/* ── ARTICLE HEADER ──────────────────────────────────── */

.ms-article-header {
	padding: 56px var(--ms-pad-x) 40px;
	background: var(--ms-surface);
	border-bottom: 1px solid var(--ms-line);
	max-width: var(--ms-container);
	margin: 0 auto;
}

.ms-post-cat-pill {
	display: inline-block;
	font-family: var(--ms-font-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ms-accent);
	background: rgba(176,84,42,.1);
	padding: 5px 10px;
	text-decoration: none;
	margin-bottom: 20px;
}

.ms-post-cat-pill:hover { background: rgba(176,84,42,.18); }

.ms-article-title {
	font-size: clamp(2rem, 5vw, 3.5rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-weight: 800;
	max-width: 820px;
	margin: 0 0 20px;
}

.ms-post-meta {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	font-size: 13px; color: var(--ms-muted);
	font-family: var(--ms-font-mono);
}

.ms-meta-sep { opacity: .4; }

/* ── FEATURED IMAGE ──────────────────────────────────── */

.ms-article-img {
	max-width: var(--ms-container);
	margin: 0 auto;
	padding: 0 var(--ms-pad-x);
}

.ms-article-thumb {
	width: 100%;
	max-height: 520px;
	object-fit: cover;
	display: block;
	margin-top: 40px;
}

/* ── ARTICLE LAYOUT ──────────────────────────────────────
   No TOC: centered narrow prose, wrap collapses to 1 col so prose
   fills available width up to its own max-width.
   With TOC (≥3 headings): two-col grid — wide prose left,
   right rail stacks sticky TOC on top of audit CTA + more-in-cat.
   Centering: fixed max-width + margin auto + fixed px padding
   avoids the var(--ms-pad-x) double-centering bug on wide screens. */

.ms-article-wrap {
	max-width: 1260px;
	margin: 0 auto;
	padding: 48px 48px 64px;
}

.ms-article-wrap--toc {
	display: grid;
	grid-template-columns: 1fr;
}

/* ── RIGHT SIDEBAR ───────────────────────────────────────── */

.ms-blog-sidebar { display: none; }

/* ── PROSE (article body typography) ─────────────────── */

.ms-prose {
	min-width: 0;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.ms-prose p {
	font-size: 18px;
	line-height: 1.75;
	margin: 0 0 1.25em;
	color: var(--ms-ink);
}

.ms-prose h2 {
	font-size: 1.875rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: 2em 0 0.5em;
	color: var(--ms-ink);
	scroll-margin-top: 80px;
}

.ms-prose h3 {
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: 1.75em 0 0.4em;
	color: var(--ms-ink);
	scroll-margin-top: 80px;
}

.ms-prose h4 {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 1.5em 0 0.35em;
	color: var(--ms-ink);
	scroll-margin-top: 80px;
}

.ms-prose a { color: var(--ms-accent); text-decoration: underline; text-underline-offset: 3px; }
.ms-prose a:hover { color: var(--ms-accent-soft); }

.ms-prose ul,
.ms-prose ol {
	padding-left: 1.6em;
	margin: 0 0 1.25em;
	font-size: 18px;
	line-height: 1.75;
}

.ms-prose li { margin-bottom: .35em; }

.ms-prose blockquote {
	font-family: var(--ms-font-serif);
	font-style: italic;
	font-size: 1.4rem;
	line-height: 1.45;
	border-left: 3px solid var(--ms-accent);
	margin: 2em 0;
	padding: 0 0 0 24px;
	color: var(--ms-ink-2);
}

.ms-prose code {
	font-family: var(--ms-font-mono);
	font-size: .875em;
	background: var(--ms-bg);
	border: 1px solid var(--ms-line);
	padding: 2px 6px;
	border-radius: 3px;
	white-space: nowrap;
}

.ms-prose pre {
	background: var(--ms-ink);
	color: var(--ms-text-on-dark);
	padding: 20px 24px;
	overflow-x: auto;
	margin: 1.5em 0;
	font-size: .875rem;
	line-height: 1.65;
}

.ms-prose pre code {
	background: none;
	border: none;
	padding: 0;
	white-space: pre;
	font-size: inherit;
}

.ms-prose img {
	width: 100%;
	height: auto;
	display: block;
	margin: 1.5em 0;
}

.ms-prose figure { margin: 1.5em 0; }
.ms-prose figcaption {
	font-size: 13px;
	color: var(--ms-muted);
	font-family: var(--ms-font-mono);
	margin-top: 8px;
	text-align: center;
}

.ms-prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 1.5em 0; }
.ms-prose th, .ms-prose td { border: 1px solid var(--ms-line); padding: 10px 14px; text-align: left; }
.ms-prose th { background: var(--ms-bg); font-weight: 700; font-size: 13px; font-family: var(--ms-font-mono); }
.ms-prose tr:nth-child(even) td { background: var(--ms-surface); }

/* ── TABLE OF CONTENTS ───────────────────────────────── */

.ms-toc-sidebar { display: none; }

.ms-toc-mobile {
	background: var(--ms-bg);
	border: 1px solid var(--ms-line);
	padding: 16px 20px;
	margin-bottom: 40px;
	font-size: 14px;
}

.ms-toc-mobile > summary {
	font-weight: 700;
	font-size: 13px;
	font-family: var(--ms-font-mono);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	cursor: pointer;
	list-style: none;
	display: flex; align-items: center; justify-content: space-between;
}

.ms-toc-mobile > summary::after { content: '+'; font-size: 16px; color: var(--ms-muted); }
.ms-toc-mobile[open] > summary::after { content: '−'; }

.ms-toc-nav ol { list-style: none; padding: 0; margin: 12px 0 0; }
.ms-toc-nav li { margin: 0; }
.ms-toc-item--h3 { padding-left: 16px; }
.ms-toc-nav a {
	display: block;
	padding: 5px 0;
	color: var(--ms-muted);
	text-decoration: none;
	font-size: 13px;
	line-height: 1.4;
	border-left: 2px solid transparent;
	padding-left: 10px;
	transition: color .15s, border-color .15s;
}
.ms-toc-nav a:hover,
.ms-toc-nav a:focus { color: var(--ms-accent); border-left-color: var(--ms-accent); }

/* ── POST TAGS ───────────────────────────────────────── */

.ms-post-tags {
	display: flex; flex-wrap: wrap; gap: 8px;
	padding: 0 var(--ms-pad-x) 40px;
	max-width: var(--ms-container);
	margin: 0 auto;
}

.ms-tag-pill {
	font-family: var(--ms-font-mono);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 5px 12px;
	border: 1px solid var(--ms-line);
	background: var(--ms-surface);
	color: var(--ms-muted);
	text-decoration: none;
}

.ms-tag-pill:hover { border-color: var(--ms-accent); color: var(--ms-accent); }

/* ── AUTHOR BIO ──────────────────────────────────────── */

.ms-author-bio {
	display: flex; align-items: flex-start; gap: 20px;
	padding: 32px var(--ms-pad-x);
	border-top: 1px solid var(--ms-line);
	border-bottom: 1px solid var(--ms-line);
	background: var(--ms-surface);
	max-width: var(--ms-container);
	margin: 0 auto;
}

.ms-author-avatar-wrap { flex-shrink: 0; }
.ms-author-avatar { width: 64px; height: 64px; border-radius: 50%; display: block; }
.ms-author-label { font-size: 11px; font-family: var(--ms-font-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ms-muted); margin-bottom: 4px; }
.ms-author-name { font-size: 18px; font-weight: 700; color: var(--ms-ink); text-decoration: none; display: block; margin-bottom: 8px; }
.ms-author-name:hover { color: var(--ms-accent); }
.ms-author-desc { font-size: 15px; line-height: 1.6; color: var(--ms-muted); margin: 0; }

/* ── RELATED POSTS ───────────────────────────────────── */

.ms-related {
	padding: 64px var(--ms-pad-x);
	border-top: 1px solid var(--ms-line);
	max-width: var(--ms-container);
	margin: 0 auto;
}

.ms-related-title {
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	margin: 0 0 40px;
}

/* ── POST CARDS GRID ─────────────────────────────────── */

.ms-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 32px;
}

.ms-card {
	background: var(--ms-surface);
	border: 1px solid var(--ms-line);
	display: flex; flex-direction: column;
	transition: border-color .15s;
}

.ms-card:hover { border-color: var(--ms-accent); }

.ms-card-img-wrap { display: block; overflow: hidden; aspect-ratio: 16/9; }
.ms-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ms-card:hover .ms-card-img { transform: scale(1.03); }

.ms-card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.ms-card-cat { margin-bottom: 12px; }

.ms-card-title {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.35;
	margin: 0 0 10px;
}

.ms-card-title a { text-decoration: none; color: var(--ms-ink); }
.ms-card-title a:hover { color: var(--ms-accent); }

.ms-card-excerpt { font-size: 14px; color: var(--ms-muted); line-height: 1.6; margin: 0 0 16px; flex: 1; }

.ms-card-meta {
	display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
	font-size: 12px; color: var(--ms-muted); font-family: var(--ms-font-mono);
	margin-top: auto;
}

/* ── PREV / NEXT NAV ─────────────────────────────────── */

.ms-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--ms-line);
	border-top: 1px solid var(--ms-line);
}

.ms-post-nav-item {
	background: var(--ms-surface);
	padding: 28px var(--ms-pad-x);
	text-decoration: none;
	color: var(--ms-ink);
	display: flex; flex-direction: column; gap: 6px;
	transition: background .15s;
}

.ms-post-nav-item:hover { background: var(--ms-bg); }
.ms-post-nav-next { text-align: right; }

.ms-post-nav-dir {
	font-family: var(--ms-font-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ms-accent);
	font-weight: 700;
}

.ms-post-nav-title { font-size: 15px; font-weight: 600; line-height: 1.4; }

/* ── BLOG / ARCHIVE HEADER ───────────────────────────── */

.ms-blog-header {
	padding: 72px var(--ms-pad-x) 56px;
	background: var(--ms-surface);
	border-bottom: 1px solid var(--ms-line);
}

.ms-blog-title {
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	margin: 12px 0 16px;
	max-width: 800px;
}

.ms-blog-sub { font-size: 18px; color: var(--ms-muted); max-width: 560px; line-height: 1.55; margin: 0; }

.ms-blog-wrap {
	padding: 56px var(--ms-pad-x) 80px;
	max-width: var(--ms-container);
	margin: 0 auto;
}

.ms-blog-empty { color: var(--ms-muted); font-size: 15px; }

/* ── PAGINATION ──────────────────────────────────────── */

.wp-pagenavi,
.nav-links {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
	margin-top: 56px;
	font-family: var(--ms-font-mono);
	font-size: 13px;
}

.nav-links .page-numbers,
.nav-links a {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 10px;
	border: 1px solid var(--ms-line);
	color: var(--ms-muted);
	text-decoration: none;
	background: var(--ms-surface);
}

.nav-links .page-numbers.current,
.nav-links a:hover {
	background: var(--ms-accent);
	border-color: var(--ms-accent);
	color: var(--ms-text-on-dark);
}

/* ── BLOG SIDEBAR (right col) ────────────────────────── */

.ms-sidebar-cta {
	background: var(--ms-accent);
	color: var(--ms-text-on-dark);
	padding: 28px 24px;
	margin-bottom: 32px;
}

.ms-sidebar-cta-title {
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: 0 0 10px;
}

.ms-sidebar-cta-body {
	font-size: 13px;
	line-height: 1.6;
	opacity: .85;
	margin: 0 0 20px;
}

.ms-sidebar-cta-btn {
	display: block;
	text-align: center;
	background: var(--ms-text-on-dark);
	color: var(--ms-accent);
	font-weight: 800;
	font-size: 13px;
	padding: 11px 16px;
	text-decoration: none;
	letter-spacing: .3px;
}

.ms-sidebar-cta-btn:hover { background: var(--ms-bg); }

.ms-sidebar-more {
	background: var(--ms-surface);
	border: 1px solid var(--ms-line);
	padding: 24px;
}

.ms-sidebar-more-label {
	font-family: var(--ms-font-mono);
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ms-muted);
	font-weight: 700;
	margin-bottom: 16px;
}

.ms-sidebar-more-list {
	list-style: none;
	padding: 0; margin: 0;
}

.ms-sidebar-more-list li {
	border-top: 1px solid var(--ms-line);
	padding: 10px 0;
}

.ms-sidebar-more-list li:first-child { border-top: none; padding-top: 0; }

.ms-sidebar-more-list a {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ms-ink);
	text-decoration: none;
}

.ms-sidebar-more-list a:hover { color: var(--ms-accent); }

/* ── RESPONSIVE ──────────────────────────────────────── */

@media (min-width: 1024px) {
	/* 2-col: wide prose left | right rail (TOC + sidebar stacked) */
	.ms-article-wrap--toc {
		grid-template-columns: minmax(0, 1fr) 280px;
		grid-template-areas:
			"prose toc"
			"prose sidebar"
			"prose .";
		column-gap: 56px;
		row-gap: 32px;
		align-items: start;
	}

	.ms-article-wrap--toc .ms-prose {
		grid-area: prose;
		max-width: 760px;
		justify-self: start;
		margin-left: 0;
		margin-right: 0;
	}

	.ms-article-wrap--toc .ms-toc-sidebar { grid-area: toc; display: block; }
	.ms-article-wrap--toc .ms-blog-sidebar { grid-area: sidebar; display: block; }
	.ms-toc-mobile  { display: none; }

	.ms-toc-inner {
		position: sticky;
		top: 88px;
		max-height: calc(100vh - 100px);
		overflow-y: auto;
	}

	.ms-toc-label {
		font-family: var(--ms-font-mono);
		font-size: 11px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--ms-muted);
		font-weight: 700;
		margin-bottom: 12px;
	}
}

@media (max-width: 1023px) {
	.ms-blog-sidebar { display: none; }
}

@media (max-width: 767px) {
	.ms-article-header { padding: 36px 24px 28px; }
	.ms-article-wrap   { padding: 32px 24px 48px; }
	.ms-article-img    { padding: 0 24px; }
	.ms-post-tags,
	.ms-author-bio,
	.ms-related,
	.ms-blog-wrap,
	.ms-blog-header    { padding-left: 24px; padding-right: 24px; }
	.ms-blog-header    { padding-top: 48px; padding-bottom: 36px; }
	.ms-post-nav       { grid-template-columns: 1fr; }
	.ms-post-nav-next  { text-align: left; }
	.ms-cards-grid     { grid-template-columns: 1fr; }
	.ms-prose p, .ms-prose ul, .ms-prose ol { font-size: 17px; }
}