/* =========================================================
   Scale Web Pro — blog.css
   (standalone blog / article post layout: hero image, byline,
   share row, callouts, term lists, inline CTA)
   Depends on tokens + base classes from main.css
   (--serif, --sans, --ink, --muted, --line, --soft, --surface,
   --accent, --accent-2, --radius, --radius-sm, --shadow, --bg)
   ========================================================= */

/* ---------- Hero variant: media on the left (page-scoped, does not affect other service-hero-grid pages) ---------- */
/* order:-1 keeps the image first in the grid at every width: on desktop
   that's the left column, and once the grid collapses to a single column
   on mobile, "first" means the image sits at the very top of the stack —
   so no separate mobile override is needed here. */
.service-hero-grid.hero-media-left .service-hero-media{order:-1}

/* ---------- Post hero ---------- */
.post-hero{padding:170px 0 0}
.post-hero-inner{max-width:840px;margin:0 auto}
.post-kicker{display:flex;align-items:center;gap:12px}
.post-title{font-family:var(--serif);font-weight:600;font-size:clamp(38px,5.2vw,60px);line-height:1.05;letter-spacing:-.03em;margin-top:18px}
.post-lede{font-family:var(--serif);font-size:19px;line-height:1.5;color:var(--muted);margin-top:18px;max-width:720px}

/* byline row: avatar, author, date, topic, share */
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:30px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.post-meta--plain{border:0;padding:24px 0 0;margin-top:24px}
.post-author{display:flex;align-items:center;gap:12px}
.post-avatar{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-family:var(--serif);font-size:15px;font-weight:700}
.post-author-copy{display:flex;flex-direction:column;line-height:1.35}
.post-author-copy small{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.post-author-copy strong{font-size:12px}
.post-divider{width:1px;height:28px;background:var(--line)}
.post-date,.post-topic{display:flex;flex-direction:column;line-height:1.35}
.post-date small,.post-topic small{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.post-date strong,.post-topic strong{font-size:12px;font-weight:600}
.post-topic strong{color:var(--accent)}

.post-share{display:flex;align-items:center;gap:8px;margin-left:auto}
.post-share-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.post-share-btn{appearance:none;-webkit-appearance:none;font:inherit;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);display:grid;place-items:center;font-size:13px;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
.post-share-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}
.post-share-btn.copy-link{font-size:11px}
.post-share-btn.is-copied{background:#38A169;border-color:#38A169;color:#fff}

.post-hero-media{width:100%;aspect-ratio:16/8;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin-top:36px;box-shadow:0 18px 55px rgba(20,16,12,.06)}
.post-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.85) contrast(.98)}
html[data-theme="dark"] .post-hero-media img{filter:saturate(.7) brightness(.75) contrast(1.02)}

/* ---------- Post body ---------- */
.post-body{max-width:760px;margin:56px auto 0}
.post-body h2{font-family:var(--serif);font-size:clamp(26px,3.2vw,34px);font-weight:600;letter-spacing:-.02em;margin-top:50px;margin-bottom:16px}
.post-body h2:first-child{margin-top:0}
.post-body p{color:var(--muted);font-size:15px;line-height:1.9;margin-top:14px}
.post-body ul{margin-top:16px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.post-body ul li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--muted);line-height:1.7}
.post-body ul li:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);margin-top:9px;flex:0 0 5px}
.post-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.post-body a:hover{color:var(--accent-2)}

/* bold mini-heading + paragraph pattern (e.g. "Physical Fatigue" / description) */
.post-term-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.post-term{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:20px}
.post-term strong{display:block;font-family:var(--serif);font-size:17px;color:var(--ink);margin-bottom:8px}
.post-term p{margin:0;font-size:12px;color:var(--muted);line-height:1.7}

/* callout / "did you know" box */
.post-callout{margin-top:26px;padding:22px 24px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius-sm);background:var(--soft)}
.post-callout strong{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.post-callout h3{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink);margin-bottom:6px}
.post-callout p{margin:0;font-size:13px;color:var(--ink);line-height:1.75}

/* inline in-article CTA */
.post-cta{margin-top:46px;padding:34px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-align:center;box-shadow:0 12px 40px rgba(20,16,12,.035)}
.post-cta h3{font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:-.01em}
.post-cta p{color:var(--muted);font-size:13px;margin:10px auto 0;max-width:460px}
.post-cta .btn{margin-top:18px}

/* topics / tags footer row */
.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.post-tags a{border:1px solid var(--line);border-radius:20px;padding:7px 14px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .2s,border-color .2s}
.post-tags a:hover{color:var(--accent);border-color:var(--accent)}

/* related posts (reuses build-card visuals from services.css) */
.post-related{margin-top:70px;padding-top:50px;border-top:1px solid var(--line)}

@media(max-width:820px){
  .post-hero{padding:150px 0 0}
  .post-term-list{grid-template-columns:1fr 1fr}
}

@media(max-width:600px){
  .post-hero{padding:150px 0 0}
  .post-lede{font-size:16px}
  .post-meta{gap:12px}
  .post-divider{display:none}
  .post-share{margin-left:0;width:100%;order:99;justify-content:flex-start}
  .post-hero-media{aspect-ratio:4/3;margin-top:26px}
  .post-body{margin-top:38px}
  .post-term-list{grid-template-columns:1fr}
  .post-cta{padding:26px 20px}
}