/* =====================================================================
   blog-post.html only — the article template.
   Shared rules live in assets/css/styles.css. Tokens only.
   ===================================================================== */

/* ---------- 1. Reading progress ----------------------------------- */
/* Above the sticky header (--z-header 200), which is opaque enough to
   hide the bar at --z-sticky. Same precedent as privacy-policy.css. */
.read-bar{
  position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:3px;z-index:var(--z-fab);
  background:transparent;pointer-events:none;
}
.read-bar i{
  display:block;height:100%;width:0;background:var(--grad-ribbon-saffron);
  transform-origin:left;transition:width 80ms linear;
}
@media print{ .read-bar{display:none} }

/* ---------- 2. Article head --------------------------------------- */
.post-head{max-width:76ch}
/* The category now lives in the breadcrumb, so the h1 follows the trail
   directly and carries the space the badge used to. */
.post-head h1{margin:var(--sp-5) 0 var(--sp-4);font-size:clamp(1.875rem,1.4rem + 2.4vw,3rem)}
.post-head .lead{max-width:64ch}

.post-byline{
  display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between;
  margin-top:clamp(20px,2.4vw,32px);padding-top:var(--sp-5);border-top:1px solid var(--line-strong);
}
.post-who{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.post-who__name{font-size:var(--fs-sm);font-weight:600;color:var(--ink-800);margin:0;line-height:1.35}
.post-who__meta{font-size:var(--fs-xs);color:var(--text-muted);margin:0;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}

.post-share{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.post-share__label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}

/* ---------- 3. Cover --------------------------------------------- */
.post-cover{margin-top:clamp(24px,3vw,40px)}
.post-cover figure{margin:0}
.post-cover img{
  width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-xl);box-shadow:var(--sh-lg);
}
.post-cover figcaption{
  margin-top:var(--sp-3);font-size:var(--fs-xs);color:var(--text-muted);
  display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;
}

/* ---------- 4. Body ----------------------------------------------- */
.post-body{max-width:70ch}
.post-body>:first-child{margin-top:0}
.post-body h2{scroll-margin-top:calc(var(--header-h) + 28px)}
.post-body h2::before{
  content:"";display:block;width:34px;height:3px;border-radius:2px;
  background:var(--grad-ribbon-saffron);margin-bottom:var(--sp-4);
}
.post-body h3{scroll-margin-top:calc(var(--header-h) + 28px)}
.post-body .lede{font-size:17.5px;color:var(--ink-600)}

.table-wrap{overflow-x:auto;margin:var(--sp-6) 0;border-radius:var(--r-md)}
.table-wrap table{margin:0;min-width:480px}
.table-wrap th{width:50%}
.post-body td svg{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
.td-yes{background:var(--surface-2)}
.td-yes svg{color:var(--forest-500)}
.td-no{color:var(--text-muted)}
.td-no svg{color:var(--danger-fg)}
.table-note{font-size:var(--fs-sm);color:var(--text-muted);margin-top:0}

/* Below 700px the two column comparison stacks into one card per row, so
   nothing is hidden behind a sideways scroll on a phone. */
@media (max-width:700px){
  .table-wrap--compare{overflow:visible}
  .table-wrap--compare .compare-table{min-width:0;width:100%;border-collapse:separate;border-spacing:0}
  .compare-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .compare-table,.compare-table tbody,.compare-table tr,.compare-table td{display:block;width:auto}
  .compare-table tr{
    border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-bottom:var(--sp-3);
  }
  .compare-table td{border:0}
  .compare-table td+td{border-top:1px solid var(--line)}
  .compare-table td::before{
    content:"Most resumes say";display:block;margin-bottom:4px;
    font-size:var(--fs-2xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);
  }
  .compare-table td.td-yes::before{content:"The line that gets a call";color:var(--forest-700)}
}

/* Buttons inside .prose: `.prose a` is more specific than `.btn`, so the
   button modifiers need their colour and underline restored here. */
.post-body a.btn{text-decoration:none}
.post-body a.btn--primary{color:var(--ink-900)}
.post-body a.btn--outline{color:var(--forest-700)}
.post-body a.btn--whatsapp{color:var(--ink-900)}
.post-body .inline-cta a.btn--outline{color:#fff}
.post-body .callout a{color:var(--forest-700)}

/* Pull quote */
.pull-quote{
  position:relative;margin:clamp(28px,3.4vw,44px) 0;padding:var(--sp-6) 0 var(--sp-6) clamp(20px,3vw,34px);
  border-left:4px solid var(--saffron-500);
}
.pull-quote p{
  margin:0;font-family:var(--font-head);font-weight:600;line-height:1.35;color:var(--heading);
  font-size:clamp(1.125rem,1rem + .8vw,1.5rem);letter-spacing:var(--ls-head);text-wrap:pretty;
}
.pull-quote cite{
  display:block;margin-top:var(--sp-3);font-style:normal;font-size:var(--fs-sm);color:var(--text-muted);
}

/* Tips list */
.tips-list{list-style:none;margin:var(--sp-6) 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.tips-list li{
  display:flex;gap:12px;margin:0;padding:13px var(--sp-5) 13px var(--sp-4);
  background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-md);
  font-size:var(--fs-sm);line-height:1.6;color:var(--ink-700);
}
.tips-list svg{width:18px;height:18px;color:var(--forest-500);flex:none;margin-top:3px}
.tips-list b{color:var(--ink-800)}

/* Inline CTA card, halfway down the article */
.inline-cta{
  margin:clamp(32px,4vw,52px) 0;padding:clamp(22px,2.6vw,32px);border-radius:var(--r-xl);
  background:var(--grad-dark-band);color:var(--text-on-dark);position:relative;overflow:hidden;isolation:isolate;
}
.inline-cta::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--glow-saffron);
}
.inline-cta h3{color:#fff;font-size:var(--fs-h3);margin:0 0 var(--sp-2)}
.inline-cta p{color:var(--text-on-dark-muted);font-size:var(--fs-sm);margin:0 0 var(--sp-5);line-height:1.6;max-width:56ch}
.inline-cta__tag{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--sp-3);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--saffron-300);
}
.inline-cta__tag svg{width:15px;height:15px}
.inline-cta .cluster{gap:var(--sp-3)}
.inline-cta .btn--outline{border-color:rgba(255,255,255,.4);color:#fff}
.inline-cta .btn--outline:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
.inline-cta :focus-visible{outline-color:var(--focus-on-dark)}

/* ---------- 5. Article footer ------------------------------------- */
.post-foot{max-width:70ch;margin-top:clamp(32px,4vw,56px)}
.post-tags{
  display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;
  padding-top:var(--sp-6);border-top:1px solid var(--line);
}
.post-tags__label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-right:var(--sp-1)}

.post-share-row{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;justify-content:space-between;
  margin-top:var(--sp-6);padding:var(--sp-4) var(--sp-5);
  background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-lg);
}
.post-share-row p{margin:0;font-size:var(--fs-sm);color:var(--text-muted)}
.post-share-row b{color:var(--ink-800)}

.author-box{display:flex;gap:var(--sp-5);align-items:flex-start;margin-top:var(--sp-6);flex-wrap:wrap}
.author-box__body{flex:1;min-width:220px}
/* On a phone the avatar and the bio each get less than 230px side by side,
   so the block stacks and the bio keeps a readable measure. */
@media (max-width:560px){
  .author-box{gap:var(--sp-4)}
  .author-box__body{flex:1 1 100%;min-width:0}
}
.author-box h3{font-size:var(--fs-h4);margin:0 0 var(--sp-2)}
.author-box p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.65;margin:0 0 var(--sp-4)}

.post-correction{
  display:flex;gap:10px;align-items:flex-start;margin-top:var(--sp-6);
  font-size:var(--fs-xs);color:var(--text-muted);line-height:1.6;
}
.post-correction svg{width:16px;height:16px;color:var(--saffron-700);flex:none;margin-top:2px}

/* ---------- 6. TOC rail tweaks ------------------------------------ */
.toc{padding-right:var(--sp-2)}
.toc__note{font-size:var(--fs-xs);color:var(--text-muted);margin:var(--sp-4) 0 0;line-height:1.5}
.toc-select{margin-bottom:clamp(24px,3vw,36px)}
.toc-select .field__label{margin-bottom:6px;display:block}

/* ---------- 6b. Free resume review band (the page's dark section) --- */
.review-band{
  display:grid;gap:clamp(24px,3vw,48px);grid-template-columns:minmax(0,1fr);align-items:center;
}
@media (min-width:900px){ .review-band{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)} }
.review-band h2{margin-bottom:var(--sp-4)}
.review-band .lead{max-width:56ch;margin:0}
.review-band__actions{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
.review-band__actions .btn{width:100%;max-width:340px}
.review-band__actions .fineprint{margin:var(--sp-1) 0 0;color:var(--text-on-dark-muted)}
.review-band__actions .fineprint a{color:var(--saffron-300)}

/* ---------- 7. Related reading ------------------------------------ */
.related-grid{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){ .related-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .related-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* Shown only when ?slug= asks for a sample post other than this written one. */
.post-template-note{margin-bottom:clamp(20px,2.4vw,32px);margin-top:0}
.post-template-note[hidden]{display:none}
.post-template-note .callout__title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.post-template-note .callout__title svg{width:17px;height:17px;color:var(--saffron-700);flex:none}

/* ---------- 8. Small icon sizes in the article furniture ---------- */
.post-who__meta svg{width:14px;height:14px;vertical-align:-2px;color:var(--text-muted)}
.post-cover figcaption svg{width:15px;height:15px;color:var(--saffron-700);flex:none}
.post-body .callout__title svg{width:16px;height:16px;vertical-align:-3px;margin-right:6px}

/* ---------- 9. CTA band art ---------------------------------------
   Copied verbatim from assets/css/pages/home.css: the two positioning
   rules for the CTA band illustration are not in the shared sheet, so
   every page that uses the band has to repeat them. The ridges stretch
   horizontally, and the climbers sit in their own uniformly scaled SVG
   parked on the crest via --ridge-h and --crest (both set on .cta-band
   in styles.css), so there is no rectangular seam at 390px. */