/**
 * Blog post body typography — prod parity (red h2s inside post_content).
 *
 * Opt-in: keyed ONLY on the .saf-post-body class set on the post_content
 * jet-listing-dynamic-field widget in JTC single-post template 4358
 * (Advanced -> CSS Classes, admin-visible). Conditionally enqueued from
 * soberafe-child/functions.php on is_singular('post') only.
 * Rule 3 option 3 of .claude/rules/elementor-patterns.md.
 */

.saf-post-body h2 {
	color: #bd2727;
	font-family: Outfit, sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.15;
	margin: 1.6em 0 0.5em;
}

.saf-post-body h3 {
	color: #024163;
	font-family: Outfit, sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.2;
	margin: 1.4em 0 0.5em;
}

.saf-post-body a {
	color: #bd2727;
	text-decoration: underline;
}

.saf-post-body blockquote {
	border-left: 3px solid #ebad2e;
	margin: 1.5em 0;
	padding: 0.25em 0 0.25em 1.25em;
	font-style: italic;
}

@media (max-width: 767px) {
	.saf-post-body h2 {
		font-size: 26px;
	}

	.saf-post-body h3 {
		font-size: 21px;
	}
}

/* --------------------------------------------------------------------------
 * Blog related-grid card clamp ("More Perspectives", JetEngine listing 4224,
 * rendered on post singles under the related section of JTC template 4358).
 *
 * The listing shows the 3 LATEST posts (orderby date DESC). With equal-column
 * heights ON, every card is stretched to the TALLEST card — so a long title or
 * excerpt on any one of the 3 posts makes the whole related block (and thus the
 * page) taller. As the "latest 3" set changes (a new post publishes), the
 * tallest card changes and the page HEIGHT drifts, which trips saf-visual-diff's
 * page-height (size) gate BEFORE any pixel compare (same failure mode the samhsa
 * resource related-block had — see resources.css). Clamping the title to 2 lines
 * and the excerpt to 3 lines (with matching min-height so short cards reserve the
 * same space) makes every card a fixed natural height → the block height is
 * deterministic regardless of which 3 posts show.
 *
 * Scoped to the seeded card classes on listing 4224; enqueued on is_singular(
 * 'post') only (functions.php). Title 25px/1.3em, excerpt 16px/1.55em per
 * scripts/seed/tier-d/56-blog-card-prod.php. -------------------------------- */
/* The clamp MUST target the inner .jet-listing-dynamic-field__content that
 * directly wraps the text — the .saf-blog-card__* class sits on the OUTER
 * jet-listing-dynamic-field widget wrapper, which contains that content div as
 * a child, so -webkit-line-clamp on the wrapper would not clip the child's
 * text (verified: Astray's excerpt overflowed to 4 lines with the clamp on the
 * wrapper). min-height goes on the content element too so short cards reserve
 * the same space. */
.saf-blog-card__title .jet-listing-dynamic-field__content {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* 2 lines * 1.3em line-height — reserve the space even for a 1-line title. */
	min-height: calc(1.3em * 2);
}

.saf-blog-card__excerpt .jet-listing-dynamic-field__content {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* 3 lines * 1.55em line-height — short excerpts match tall ones exactly. */
	min-height: calc(1.55em * 3);
}