/*
 * post.css — the body of a single blog post.
 *
 * The listing that links to these lives in blog.css: index.php renders the
 * front page's own post cards, so both share that stylesheet. Only the
 * article body is here.
 *
 * No Figma frame exists for the blog yet, so this is deliberately restrained:
 * the type scale, colours and radii are the theme's own tokens, and nothing
 * here invents a treatment the artboards have not established. Replace it when
 * the blog design lands.
 *
 * Unlike every other stylesheet here this one uses descendant selectors. Post
 * bodies are editor HTML — headings, lists and tables arrive without classes
 * and cannot be given any — so .postBody is the one namespace and everything
 * inside it is addressed by element.
 */

/* ------------------------------------------------------- The post body */

.postLead {
	width: 100%;
	max-width: 72ch;
	height: auto;
	margin-bottom: 32px;
	border-radius: 24px;
}

.postBody {
	max-width: 72ch;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.75;
	color: var(--text-muted);
}

.postBody > * + * {
	margin-top: 22px;
}

.postBody h2,
.postBody h3,
.postBody h4 {
	font-family: var(--font);
	font-weight: 400;
	line-height: 1.3;
	color: var(--text);
}

/* A heading owes more space above it than the paragraph it follows owes
   below, so the section it opens reads as a new block. */
.postBody > h2 {
	margin-top: 48px;
	font-size: 30px;
}

.postBody > h3 {
	margin-top: 36px;
	font-size: 23px;
}

.postBody > h4 {
	margin-top: 28px;
	font-size: 19px;
}

.postBody strong,
.postBody b {
	font-weight: 700;
	color: var(--text);
}

.postBody a {
	color: var(--accent-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.postBody a:hover,
.postBody a:focus-visible {
	color: var(--accent-hover);
}

/* base.css strips list markers site-wide for the nav and card lists; running
   copy is the one place they carry meaning, so they come back here. */
.postBody ul,
.postBody ol {
	margin-left: 24px;
	list-style: disc;
}

.postBody ol {
	list-style: decimal;
}

.postBody li + li {
	margin-top: 8px;
}

.postBody li > ul,
.postBody li > ol {
	margin-top: 8px;
}

.postBody img {
	width: 100%;
	height: auto;
	margin-block: 32px;
	border-radius: 24px;
}

.postBody blockquote {
	margin-left: 0;
	padding-left: 20px;
	border-left: 3px solid var(--accent);
	font-size: 19px;
	color: var(--text);
}

.postBody table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.postBody th,
.postBody td {
	padding: 12px 16px;
	border: 1px solid var(--surface-frame);
	text-align: left;
	vertical-align: top;
}

.postBody th {
	background: var(--surface-light);
	font-weight: 700;
	color: var(--text);
}

.postMeta {
	margin-bottom: 28px;
	font-family: var(--font-body);
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* ---------------------------------------------------------- The sidebar */

/*
 * The article beside a sticky "Addiction Treatments" card — same two-column
 * shape as a city page's own article-and-sidebar (service-area.css), and the
 * card itself reuses that file's classes rather than duplicating them (see
 * template-parts/post-sidebar.php). Only the grid that puts the two side by
 * side belongs here: .postBody's own 72ch measure keeps the article read
 * width in check regardless of how wide this column is.
 */
@media (min-width: 1001px) {
	.postLayout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 380px;
		column-gap: clamp(32px, 6.6vw, 96px);
		/* .serviceAreaSide's own sticky rule (service-area.css) needs a
		   grid item free to move within — a stretched one has nowhere to go. */
		align-items: start;
	}
}

/* Below the grid, the card just follows the article in normal flow — it
   only needs the gap between them stated explicitly. */
@media (max-width: 1000px) {
	.postLayout .serviceAreaSide {
		margin-top: clamp(40px, 5vw, 64px);
	}
}

/* --------------------------------------------------------------- Small */

@media (max-width: 640px) {
	.postBody {
		font-size: 16px;
	}

	.postBody > h2 {
		margin-top: 36px;
		font-size: 25px;
	}

	.postBody > h3 {
		font-size: 20px;
	}
}