/* =============================================================
   Peak Body Coach · single.css
   Single blog post styles. Depends on main.css.
   ============================================================= */


/* =============================================================
   TYPE — blog-specific roles
   ============================================================= */
.type-lead {
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	font-size: clamp(20px, 1.8vw, 24px);
	line-height: 1.5;
}
.type-mono-label--red { color: var(--color-red); }


/* =============================================================
   HERO — full-bleed featured image
   ============================================================= */
.art-hero {
	width: 100%;
	background: var(--color-ink);
	overflow: hidden;
}
.art-hero-img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 1200 / 630;
	object-fit: cover;
	object-position: center;
}
@media (min-width: 1200px) {
	.art-hero     { max-height: 720px; }
	.art-hero-img { max-height: 720px; }
}

/* Title when no featured image */
.art-title {
	font-size: clamp(56px, 8vw, 96px);
	margin-top: var(--space-3);
	margin-bottom: var(--space-7);
}


/* =============================================================
   ARTICLE SHELL — body + sticky sidebar grid
   ============================================================= */
.article-shell {
	width: 100%;
	max-width: var(--measure-content);
	margin: 0 auto;
	padding: 0 var(--gutter-edge-mobile);
}
@media (min-width: 640px) {
	.article-shell { padding: 0 var(--gutter-edge-tablet); }
}
@media (min-width: 1024px) {
	.article-shell {
		display: grid;
		grid-template-columns: var(--measure-read) 1fr;
		gap: var(--space-11);
		align-items: start;
	}
}
.article-main { min-width: 0; }


/* =============================================================
   ARTICLE INTRO
   ============================================================= */
.article-intro { padding: var(--space-11) 0 var(--space-9); }
.meta-line {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	align-items: center;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: var(--weight-medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(23, 23, 23, 0.6);
	margin-bottom: var(--space-7);
}
.meta-line > span + span::before {
	content: "·";
	margin: 0 12px;
	color: #E2DBC9;
}
.article-intro .type-lead { margin-top: var(--space-3); }


/* =============================================================
   ARTICLE BODY
   ============================================================= */
.article-body { padding: var(--space-9) 0; }
.article-body p + p         { margin-top: var(--rhythm-paragraph); }
.article-body strong        { font-weight: var(--weight-bold); }
.article-body em            { font-style: italic; }
.article-body a {
	font-weight: var(--weight-medium);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.article-body a:hover { text-decoration-thickness: 2px; }

/* Chapter opener — numbered section break */
.chapter-opener {
	border-top: var(--mark-rule-top) solid var(--color-ink);
	padding-top: var(--space-7);
	margin-top: var(--space-11);
	margin-bottom: var(--space-7);
}
.chapter-opener .type-h2 { margin-top: var(--space-3); }

/* Sub-section h3 */
.subsection { margin: var(--space-9) 0 var(--space-5); }

/* Standard callout — ink side rule */
.callout {
	border-left: var(--mark-rule-side) solid var(--color-ink);
	padding: var(--space-5) 0 var(--space-5) var(--space-6);
	margin: var(--space-8) 0;
}
.callout-label {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: var(--weight-medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-ink);
	margin: 0 0 var(--space-2);
}
.callout-text {
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
}

/* Evidence callout — slate surface */
.callout-evidence {
	background: var(--color-slate);
	color: var(--color-cream);
	border-left: var(--mark-rule-side) solid var(--color-teal);
	padding: var(--space-7);
	margin: var(--space-8) 0;
}
.callout-evidence .callout-label      { color: var(--color-teal); margin-bottom: var(--space-3); }
.callout-evidence .callout-text       { color: var(--color-cream); }
.callout-evidence a                   { color: var(--color-cream); text-decoration-color: rgba(236,230,215,0.5); }
.callout-evidence-cite {
	margin-top: var(--space-4);
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: var(--weight-medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(236, 230, 215, 0.55);
}

/* Pull quote */
.pullquote {
	border-left: var(--mark-rule-side) solid var(--color-red);
	padding: var(--space-2) 0 var(--space-2) var(--space-7);
	margin: var(--space-9) 0;
}
.pullquote-text {
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	font-size: 28px;
	line-height: 1.3;
	margin: 0;
}
.pullquote-attrib {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: var(--weight-medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(23, 23, 23, 0.6);
	margin: var(--space-4) 0 0;
}

/* Infographic / figures */
.infographic      { margin: var(--space-10) 0; }
.infographic-img  { width: 100%; height: auto; display: block; }
.infographic-cap  {
	margin: var(--space-4) 0 0;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: var(--weight-medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(23, 23, 23, 0.6);
	line-height: 1.5;
}
.quote-figure     { margin: var(--space-10) 0; }
.quote-figure-img { width: 100%; height: auto; display: block; }

@media (max-width: 640px) {
	.pullquote-text { font-size: 22px; }
	.article-intro  { padding: var(--space-10) 0 var(--space-8); }
	.infographic,
	.quote-figure   { margin: var(--space-9) 0; }
}


/* =============================================================
   SIDEBAR — sticky on desktop
   ============================================================= */
.sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-9);
	padding: var(--space-11) 0 var(--space-9);
}
@media (min-width: 1024px) {
	.sidebar {
		padding: var(--space-11) 0 0;
		position: sticky;
		top: var(--space-11);
		align-self: start;
		max-height: calc(100vh - var(--space-11));
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: #E2DBC9 transparent;
	}
	.sidebar::-webkit-scrollbar       { width: 4px; }
	.sidebar::-webkit-scrollbar-thumb { background: #E2DBC9; border-radius: 0; }
	.sidebar::-webkit-scrollbar-track { background: transparent; }
}

.sidebar-block {
	padding-top: var(--space-7);
	border-top: 1px solid #E2DBC9;
}
.sidebar-block:first-child { padding-top: 0; border-top: none; }

.sidebar-label {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: var(--weight-medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(23, 23, 23, 0.6);
	margin: 0 0 var(--space-5);
}

/* TOC — desktop only */
.toc { display: none; }
@media (min-width: 1024px) { .toc { display: block; } }

.toc-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.toc-list li + li { border-top: 1px solid #E2DBC9; }
.toc-list a {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-3);
	align-items: baseline;
	padding: var(--space-4) 0;
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	font-size: 14px;
	line-height: 1.4;
	color: var(--color-ink);
	text-decoration: none;
	transition: color 0.15s;
}
.toc-list a:hover { color: var(--color-red); }
.toc-num {
	font-family: var(--font-mono);
	font-weight: var(--weight-medium);
	font-size: 10px;
	letter-spacing: 0.08em;
	color: var(--color-red);
}

/* Tags */
.sidebar-tags-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* Sidebar CTA — desktop only */
.sidebar-cta { display: none; }
@media (min-width: 1024px) { .sidebar-cta { display: block; } }
.sidebar-cta-text {
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	font-size: 14px;
	line-height: 1.55;
	color: var(--color-ink);
	margin: 0 0 var(--space-4);
}
.sidebar-cta-link {
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	font-size: 14px;
	color: var(--color-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.sidebar-cta-link:hover { text-decoration-thickness: 2px; }

/* Author block */
.sidebar-author-img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	object-position: center 18%;
	margin-bottom: var(--space-4);
}
.sidebar-author-name {
	font-family: var(--font-body);
	font-weight: var(--weight-bold);
	font-size: 15px;
	line-height: 1.3;
	margin: 0 0 var(--space-2);
}
.sidebar-author-bio {
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	font-size: 14px;
	line-height: 1.55;
	color: rgba(23, 23, 23, 0.6);
	margin: 0 0 var(--space-4);
}
.sidebar-author-link {
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	font-size: 14px;
	color: var(--color-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* =============================================================
   INK INTERLUDE — coaching CTA below article
   ============================================================= */
.section-ink {
	background: var(--color-ink);
	color: var(--color-cream);
	padding: var(--space-12) 0;
}
.section-ink-inner {
	max-width: var(--measure-read);
}
.section-ink .type-mono-label { color: var(--color-cream); opacity: 0.85; }
.section-ink .type-h2 {
	color: var(--color-cream);
	margin-top: var(--rhythm-eyebrow-h1);
}
.section-ink .type-subhead {
	color: var(--color-cream);
	opacity: 0.85;
	margin-top: var(--space-7);
	max-width: 50ch;
}
.interlude-pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-9);
	padding-top: var(--space-7);
	border-top: var(--mark-rule-top) solid var(--color-rule-on-dark-quiet);
}
.interlude-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-9);
}
@media (max-width: 640px) { .section-ink { padding: var(--space-10) 0; } }


/* =============================================================
   ACCESSIBILITY
   ============================================================= */
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}