/* ==========================================================================
   tmj-blog.css — blog layout for tmj-anchor
   --------------------------------------------------------------------------
   REWORKED 2026-08-18 (client): "retire that layout — the green background with
   the white wrapper. Simplify it and just use the same layout as the rest of
   the pages." The single post and the /blog/ archive now render

       hero (.s.s-hero.s--dark)  ->  trust bar (.s--dark2)  ->  body (.s--light)

   exactly like the rebuilt condition/service pages. The dark-green frame, the
   30px-radius floating card and the 25px-radius inset content card are gone
   from both. What is left here is:

     1. .ac-post-layout — the plain two-column white body (article + sidebar)
     2. the post-body typography, UNCHANGED, still addressing bare
        <p>/<h2>/<h3>/<ul> by descendant selector so post_content keeps its
        no-class contract
     3. the archive card-grid fixes
     4. the contact sidebar styling (shared by both templates)

   The .ac-card-* scaffold that used to live here is gone; see the note near the
   bottom of this file for why that is safe.

   Card + card-body typography for the archive grid (.blog-list .et_pb_post ...)
   lives in tmj-base.css.
   ========================================================================== */

/* --- hero photo from post data -------------------------------------------- */
/* single.php / template-blog.php / template-symptom.php write ONLY the URL, as
   an inline `--hero-photo` on .s-hero__bg -- the featured image is per-post data
   and cannot live in a `body.page-id-N` rule the way the built pages' heroes do.
   That is the same switch every other hero uses, so there is nothing to declare
   here: the layer stack in tmj-sections.css reads --hero-photo wherever it comes
   from, and drops the side fade under 900px for these heroes exactly as it does
   for the rest. This block used to hold a fourth copy of that stack (desktop and
   mobile) under a .s-hero__bg--data modifier, purely so the URL had somewhere to
   go; both are gone, and so is the modifier.
   Writing a finished `background-image` inline instead of the URL would still be
   wrong for the same reason it always was -- it outranks the mobile rule and
   leaves a gradient no other page has under 900px. */

/* --- body layout: article + contact sidebar, flat on white ---------------- */
/* Replaces the .ac-card-section/.ac-card-row card. No background, no radius,
   no green — the section it sits in (.s.s--light) supplies the white ground and
   .s-container supplies the same gutters the header and every other page use.
   The article column is capped so long-form body copy keeps a readable measure
   instead of running the full 1296px container. */
.ac-post-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 72px;
	align-items: start;
}
.ac-post-main { min-width: 0; max-width: 880px; }
.ac-post-aside { min-width: 0; }
/* The archive grid is two cards per row and wants the whole column. */
.ac-post-layout--archive .ac-post-main { max-width: none; }

/* Hero: post/page titles are prose, not two-word page names. The shared
   .hero-title clamp tops out at 4.5rem, which sets a 93-character blog title in
   five 72px lines. Scale it for the blog only and let the text block run wider
   than the 650px page default. */
.ac-post-hero-text { max-width: 820px; }
.ac-post-hero-text .hero-title { font-size: clamp(2.1rem, 3.4vw, 3.1rem); }
.ac-post-hero-text .hero-desc { max-width: 680px !important; }

/* --- single-post body ------------------------------------------------------ */
.single-post .et_pb_post_content { color: #1a2e2b; }
/* Exact px rhythm from the live Divi single (h2 lh 26 / p lh 25.6 / p pad-btm 16)
   to keep the article vertically aligned end-to-end. */
.single-post .et_pb_post_content h2,
.single-post .et_pb_post_content h3 {
	font-family: "Gilda Display", Georgia, "Times New Roman", serif;
	line-height: 26px;
}
.single-post .et_pb_post_content h2 { font-size: 26px; }
.single-post .et_pb_post_content p {
	font-size: 16px;
	line-height: 25.6px;
	font-weight: 300;
	color: #1a2e2b;
	margin: 0;
	padding: 0 0 16px;
}
.single-post .et_pb_post_content ul,
.single-post .et_pb_post_content ol { margin: 0; padding: 0 0 16px 20px; }
.single-post .et_pb_post_content ul li,
.single-post .et_pb_post_content ol li { line-height: 25.6px; margin: 0; }
/* Post bodies carry inline images with no classes. Without this they overflow
   the (now narrower) article column on mobile. Square corners, per the site's
   hard-corner rule. */
.single-post .et_pb_post_content img {
	max-width: 100%;
	height: auto;
	border-radius: 0;
}

/* --- archive card grid ----------------------------------------------------- */
/* Card title: match live (Cormorant 500, no underline) — the theme's default
   heavier/underlined link style makes titles wrap; base.css only sets the font. */
body .blog-list .et_pb_post .entry-title a {
	font-weight: 500;
	text-decoration: none;
	color: #333;
}
/* Cards are styled by base.css with calc(50% - 15px) + a 1px border. Divi gives
   them border-box via `.et_pb_section *`, but this grid is not inside a Divi
   section, so force it here — otherwise the border overflows and cards drop to
   1/row. */
.blog-list .et_pb_ajax_pagination_container,
.blog-list .et_pb_post,
.blog-list .et_pb_post * { box-sizing: border-box; }

/* Equalise the two cards in each grid row (live uses pa-blog-equal-height). */
.blog-list .et_pb_ajax_pagination_container { align-items: stretch; }
.blog-list .et_pb_post .post-content { flex: 1 0 auto; }
.ac-post-main .blog-list { width: 100%; }

/* --- contact sidebar (single + archive) ----------------------------------- */
.ac-sb-logo { margin: 0 0 18px; }
.ac-sb-logo img { display: block; width: 100%; max-width: 281px; height: auto; }

.ac-sb-divider {
	height: 1px;
	background: #dce3e3;
	margin: 18px 0 20px;
}

.footer-links.sidebar { padding: 0 !important; }
.footer-links.sidebar h3 {
	font-family: "Gilda Display", Georgia, "Times New Roman", serif;
	font-size: 22px;
	font-weight: 700;
	color: #333;
	margin: 0 0 4px;
}
.footer-links.sidebar a {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px !important;
	line-height: 1.3 !important;
	color: #153b37;
	text-decoration: none;
	margin: 16px 0;
	word-break: break-word;
}
.footer-links.sidebar a i {
	width: 16px;
	font-size: 16px;
	color: #153b37;
	flex-shrink: 0;
	text-align: center;
}
.footer-links.sidebar a:hover { color: #3a8780; }
.footer-links.sidebar.ac-sb-find { margin-top: 10px; }
.ac-sb-form { margin: 12px 0 18px; }

/* NOTE on the old .ac-card-* scaffold: it used to live here as well as in
   tmj-cards.css. The blog no longer emits that markup, and tmj-cards.css (which
   loads on every page, unlike this file) is the copy the three ported pages that
   still embed .ac-card-row in their post_content — tinnitus #10, tmj-pain #8766,
   technology #8844 — actually resolve against. The duplicate here was removed
   rather than kept: it only shadowed tmj-cards.css on blog and home. Those three
   pages still carry the 30px/25px radii from tmj-cards.css and are outside this
   pass; converting them is the remaining hard-corner debt. */

/* --- responsive ------------------------------------------------------------ */
@media (max-width: 1100px) {
	.ac-post-layout { gap: 48px; grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 980px) {
	.ac-post-layout,
	.ac-post-layout--archive {
		grid-template-columns: 1fr;
		gap: 44px;
	}
	.ac-post-main { max-width: none; }
}

/* ------------------------------------------------------------
   Classes that survive in converted post bodies but had no CSS.
   HANDOFF §13 listed these as "unstyled but harmless" after the 76-post
   conversion. They are harmless only in the sense that the text is readable —
   .float-right does not float, and the TL;DR callout renders as plain prose
   indistinguishable from the article around it. Cheap to fix while the blog
   layout is being reworked, and in scope because both only occur in post bodies.
   Hard corners throughout: the square echoes the logo diamond.
   ------------------------------------------------------------ */

.ac-post-main .float-right {
	float: right;
	max-width: 45%;
	margin: 0.35rem 0 1.25rem 1.75rem;
	height: auto;
}

.ac-post-main .tldr {
	background: #f1f6f5;
	border-left: 4px solid var(--accent);
	padding: 1.25rem 1.5rem;
	margin: 0 0 1.5rem;
}

.ac-post-main .tldr > :last-child { margin-bottom: 0; }

@media (max-width: 640px) {
	/* A 45% float in a phone-width column leaves a two-word text gutter. */
	.ac-post-main .float-right {
		float: none;
		max-width: 100%;
		margin: 0 0 1.25rem;
	}
}