/* Rod Inspects: blog post layout + /blog/ index. Howard, 2026-10-09 (Week 3).
   Linked AFTER /assets/site.css on blog posts (generated by _partials/build-blog.mjs) and /blog/ only.
   Uses site.css tokens only; no new colours. Contrast (measured against site.css tokens):
   byline white .92 on teal >= 5.2 · .post-cta white on teal 6.14, red button label white 5.50 (site.css .btn, 2026-11-04)
   · .post-kind --amber-ink on white 7.78 · card text --body on white 14.35. */

/* In-page anchors land below the sticky header */
main [id]{scroll-margin-top:96px}

/* ── Byline in the hero: author, licence, date */
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:-6px 0 24px;font-size:16px;color:rgba(255,255,255,.92)}
.byline a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.byline a:hover{color:var(--amber-on-dark)}
.byline .sep{opacity:.6}
.byline time{font-weight:600}
/* (.ph-date draft placeholder removed 2026-10-09 evening: every post now carries its WordPress/launch date.) */

/* ── Post body: one comfortable reading column */
.post-sec{padding-top:56px}
.post-body{max-width:760px;margin:0 auto}
.post-body>h2{font-size:clamp(25px,2.8vw,32px);margin:1.7em 0 .55em;line-height:1.2}
.post-body>h2:first-child{margin-top:0}
.post-body>h3{margin:1.4em 0 .4em}
.post-body p,.post-body li{font-size:18px;line-height:1.7}
.post-body a:not(.btn){color:var(--link);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.post-body a:not(.btn):hover{color:var(--navy-2)}
.post-body .ph-photo{margin:28px 0;min-height:240px}
.post-body .reviews{grid-template-columns:minmax(0,1fr);margin:28px 0}
.post-table{width:100%;border-collapse:collapse;margin:0 0 1.2em;font-size:16.5px}
.post-table th,.post-table td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.post-table th{background:var(--off);color:var(--navy);font-weight:700}
.table-scroll{overflow-x:auto;margin:0 0 1.2em}

/* ── In-post CTA (teal panel inside the article) */
.post-cta{background:var(--navy);color:#fff;border-radius:var(--radius);padding:28px 30px;margin:36px 0;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.post-cta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--river)}
.post-body .post-cta p{color:rgba(255,255,255,.94);font-size:17px;margin:0 0 18px}
.post-body .post-cta .post-cta-title{font:800 clamp(22px,2.4vw,26px)/1.25 var(--display);color:#fff;margin:0 0 8px}
.post-cta .btn-row{margin:0}
.post-body .post-cta a:not(.btn){color:var(--link-on-navy)}

/* ── Related services/guides + more posts */
.related-group+.related-group{margin-top:40px}
.related-group h3{font-size:20px;margin:0 0 16px;color:var(--navy)}
.cards.cards-related{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cards-related .card{padding:22px 22px}
.cards-related .card h4{font:700 18px/1.35 var(--display);margin:0 0 8px;color:var(--navy)}
.cards-related .card h4 a{color:inherit;text-decoration:none}
.cards-related .card h4 a:hover{color:var(--link);text-decoration:underline}
.cards-related .card p{font-size:15.5px;margin:0 0 12px}

/* ── /blog/ index */
.post-kind{display:block;font:700 12.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--amber-ink);margin:0 0 12px}
.post-feature{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;background:#fff;border:1px solid var(--line);border-top:5px solid var(--river);border-radius:var(--radius);padding:32px 34px;box-shadow:var(--shadow-lg);max-width:980px;margin:0 auto}
.post-feature h2{font-size:clamp(26px,3vw,36px);margin:0 0 10px}
.post-feature h2 a{color:var(--navy);text-decoration:none}
.post-feature h2 a:hover{text-decoration:underline}
.post-feature p{font-size:18px;color:var(--body);margin:0 0 16px}
.post-grid .card h3{font-size:20px}
.post-grid .card p{font-size:16px}
.post-grid-empty{max-width:780px;margin:0 auto;text-align:center;color:var(--muted)}

@media (max-width:900px){
  .cards.cards-related{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .cards.cards-related{grid-template-columns:minmax(0,1fr)}
  .post-cta{padding:24px 22px 24px 26px}
  .post-feature{padding:26px 22px}
  .post-body p,.post-body li{font-size:17px}
}

/* Checklist boxes (copy's ☐ items render as a styled box, not the glyph; same look as wave-e.css .boxes) */
.post-body .boxes{list-style:none;padding:0;margin:0 0 1.2em;display:grid;gap:12px}
.post-body .boxes li{position:relative;padding-left:38px;margin:0}
.post-body .boxes li::before{content:"";position:absolute;left:0;top:4px;width:22px;height:22px;border:2.5px solid var(--navy);border-radius:5px;background:#fff}
.post-sec+.sec .geo-photo,.geo-photo{max-width:920px;margin:24px 0 0;min-height:220px}
.final-cta .cta-small{font-size:15.5px;margin:26px auto 0;color:rgba(255,255,255,.94)}
.final-cta .cta-small span{font-weight:700;color:#fff;margin-right:4px}
.final-cta .cta-small a{color:var(--link-on-navy);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.final-cta .cta-small a:hover{color:#fff}

/* /blog/ topic groups (blog-index.md: H3 groups with anchors) + card photo placeholders */
.post-group{margin-top:48px}
.post-group:first-of-type{margin-top:32px}
.post-group>h3{font-size:clamp(22px,2.4vw,27px);margin:0 0 6px;color:var(--navy)}
.post-group>.lead{font-size:17px;margin:0 0 20px;max-width:760px}
.center-lead{max-width:760px;margin:0 auto;text-align:center}
.post-grid .card h4{font:700 19px/1.3 var(--display);margin:0 0 8px;color:var(--navy)}
.post-grid .card h4 a{color:inherit;text-decoration:none}
.post-grid .card h4 a:hover{color:var(--link);text-decoration:underline}
.post-grid .card p{font-size:15.5px;margin:0 0 14px}
.card-photo{min-height:150px;margin:0 0 16px;font-size:13px}
.post-feature .card-photo{min-height:200px}
.post-feature h3{font-size:clamp(24px,2.8vw,32px);margin:0 0 10px}
.post-feature h3 a{color:var(--navy);text-decoration:none}
.post-feature h3 a:hover{text-decoration:underline}
.post-feature .btn{justify-self:start;margin-top:4px}
/* Text links inside the teal final CTA (copy sometimes links "schedule online" there): light link colour, 5.20:1 on teal */
.final-cta a:not(.btn){color:var(--link-on-navy);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.final-cta a:not(.btn):hover{color:#fff}

/* ── Real images + video (Howard, 2026-10-12: monthly HI Blog posts carry Jewel's images + the YouTube video,
   SOP resources/procedure-html-pnl-publish-with-monday-assets.md). Images keep their 4:3 ratio (width/height attrs). */
.post-figure{margin:28px 0}
.post-figure img{display:block;width:100%;height:auto;border-radius:var(--radius)}
.post-body .post-video{margin:32px 0}
.card-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);margin:0 0 16px}