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

/* ---------- 0. Local fix for [hidden] ----------------------------
   Several shared components set an explicit `display`, which beats the
   browser's [hidden] rule, so a hidden panel still paints. Scoped to this
   page until the shared sheet gets a global rule. See sharedRequests. */
[hidden]{display:none !important}

/* ---------- 1. Reading progress ----------------------------------- */
.read-bar{
  position:fixed;left:0;right:0;top:0;height:3px;z-index:var(--z-sticky);
  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}
.post-head .badge{margin-bottom:var(--sp-4)}
.post-head h1{margin:var(--sp-3) 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-subtle)}

/* ---------- 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-subtle);
  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}
.table-wrap table{margin:0;min-width:480px}
.post-body td svg{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
.td-yes svg{color:var(--forest-500)}
.td-no svg{color:var(--danger-fg)}

/* 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-subtle);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}
.author-box h2{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-subtle);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-subtle);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-subtle)}
.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. */
.cta-band__ridge{position:absolute;left:0;right:0;bottom:0;width:100%;height:var(--ridge-h);z-index:-1;display:block}
.cta-band__figs{
  position:absolute;left:50%;translate:-50% 0;
  bottom:calc(var(--ridge-h) * var(--crest));
  width:clamp(158px,23vw,300px);height:auto;z-index:-1;display:block;
}