/* Blog pages, built by tools/render/blog.mjs. Uses the design's tokens (boost-site.css):
   --navy, --orange, --grey, --sky, --body, .wrap, .sec, .card, .kicker, .btn, .small, .pic */

.post-sec { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px 56px; align-items: start; }
@media (max-width: 900px) { .post-sec { grid-template-columns: 1fr; } }

.post { max-width: 68ch; color: var(--black); font-size: 17px; line-height: 1.65; }
.post .post-meta { color: var(--muted, #5b6b7f); margin: 0 0 22px; }
.post p { margin: 0 0 18px; }
.post h2 { font: 600 clamp(22px, 2.2vw, 28px)/1.25 var(--body); color: var(--navy); margin: 36px 0 12px; letter-spacing: -0.01em; }
.post h3 { font: 600 18px/1.35 var(--body); color: var(--navy); margin: 26px 0 8px; }
.post ul, .post ol { margin: 0 0 18px; padding-left: 22px; }
.post li { margin: 0 0 8px; }
.post li::marker { color: var(--orange, #ff9046); }
.post strong { color: var(--navy); font-weight: 600; }
.post a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--orange, #ff9046); text-underline-offset: 3px; }
.post a:hover { color: var(--orange-t, #d9722f); }
.post table { border-collapse: collapse; width: 100%; margin: 0 0 20px; font-size: 15px; }
.post th, .post td { border: 1px solid #d9e7f7; padding: 8px 10px; text-align: left; vertical-align: top; }
.post th { background: var(--sky, #eef4fb); color: var(--navy); font-weight: 600; }
.post blockquote { margin: 0 0 18px; padding: 12px 18px; border-left: 3px solid var(--orange, #ff9046); background: var(--sky, #eef4fb); border-radius: 6px; }
.post > p:last-child { padding: 18px 20px; background: var(--sky, #eef4fb); border-radius: 10px; color: var(--navy); }

.post-aside { display: grid; gap: 16px; position: sticky; top: 92px; }
.post-aside .card { padding: 22px; }
.post-aside ul { list-style: none; margin: 10px 0 0; padding: 0; }
.post-aside li { padding: 8px 0; border-top: 1px solid #d9e7f7; }
.post-aside li:first-child { border-top: 0; }
.post-aside a { color: var(--navy); text-decoration: none; font-weight: 500; }
.post-aside a:hover { color: var(--orange-t, #d9722f); }
.post-aside .btn { display: inline-flex; }
@media (max-width: 900px) { .post-aside { position: static; } }

/* listing */
.post-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.post-cats .chip { text-decoration: none; }
.post-cats .chip span { opacity: .6; margin-left: 4px; }
.post-cat-h { margin: 34px 0 14px; font-size: clamp(22px, 2.4vw, 30px); }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1000px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }
.post-card { display: block; text-decoration: none; color: inherit; overflow: hidden; }
.post-card .pic img { filter: none; }
.post-card-body { padding: 18px 20px 20px; display: grid; gap: 6px; }
.post-card h3 { margin: 4px 0 0; font: 600 18px/1.3 var(--body); color: var(--navy); }
.post-card:hover h3 { color: var(--orange-t, #d9722f); }
.post-card .small { margin: 0; }
.post-card .post-date { color: var(--muted, #5b6b7f); }

/* post navigation, category pages, listing extras */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 40px 0 0; padding-top: 20px; border-top: 1px solid #d9e7f7; }
.post-nav a { text-decoration: none; color: var(--navy); font-weight: 600; display: grid; gap: 2px; }
.post-nav a .small { color: var(--muted, #5b6b7f); font-weight: 500; }
.post-nav a.next { text-align: right; }
.post-canon { padding: 10px 14px; background: var(--sky, #eef4fb); border-radius: 8px; margin: 0 0 18px; }
.post-count { margin: 0 0 14px; color: var(--muted, #5b6b7f); }
.post-seeall { font-weight: 500; margin-left: 12px; text-decoration: none; color: var(--orange-t, #d9722f); }
.post-cat-intro { margin: -6px 0 14px; max-width: 70ch; color: var(--muted, #5b6b7f); }
.post-meta a { color: inherit; }

.post-disclosure { margin: 28px 0 0; color: var(--muted, #5b6b7f); }

.post-pager { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 0; }
.post-pager a, .post-pager span { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid #d9e7f7; text-decoration: none; color: var(--navy); font-weight: 600; }
.post-pager a:hover { border-color: var(--orange, #ff9046); color: var(--orange-t, #d9722f); }
.post-pager .on { background: var(--navy); border-color: var(--navy); color: #fff; }
/* 2026-10-03 phone review: the aside link colour turned the navy "Schedule service" button navy-on-navy (no visible label) */
.post-aside .btn.b-n, .post-aside .btn.b-n:hover{color:#fff}
.post-aside .btn.b-o{color:var(--black,#122a48)}
.post-aside .btn.b-o:hover{color:#fff}

/* 2026-10-04 (sweep WS14): diagrams are shown whole on cards and heroes, never cropped to "e Stage Furnace" */
img[src*="single-stage-and-two-stage-furnaces"],img[src*="ac_airflow-cycle"],img[src*="heat-pump-and-air-conditioner"],img[src*="basics-of-air-handler"]{object-fit:contain!important;background:#fff}