/* Guides article components. Depends on the tokens defined in site.css
   (:root --olive, --terracotta, --alabaster, --ink, --line, --serif, --sans,
   etc.) — this file adds no new tokens, only new component classes, so it
   drops into any page that already loads site.css + templates.css. */

.guide-hero {
  background: var(--olive);
  color: var(--cream);
  padding: 3.5rem 3.5rem 3rem;
}
.guide-hero__eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 1rem;
}
.guide-hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.1;
  color: var(--cream);
  margin: 0;
  text-wrap: balance;
}
.guide-hero h1 i { font-style: italic; color: var(--terracotta); }
.guide-hero p.lede-sm {
  margin: 1rem 0 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--cream-muted);
  max-width: 56ch;
}

.guide-chips { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.6rem; }
.guide-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--sans); font-weight: 600; font-size: 0.78rem;
  padding: 0.45rem 0.85rem; border: 1px solid rgba(244,240,230,0.28); color: var(--cream-muted);
}
.guide-chip b { color: var(--cream); font-weight: 700; }

.guide-body { padding: 3rem 3.5rem 3.5rem; background: var(--alabaster); }
.guide-body > * + * { margin-top: 1.15em; }
.guide-body p { font-size: 1.03rem; line-height: 1.75; color: var(--ink-soft); max-width: 66ch; }
.guide-body p strong { color: var(--ink); font-weight: 600; }

.guide-step-h {
  font-family: var(--serif); font-weight: 500; font-size: 1.4rem;
  margin-top: 2.6em; display: flex; align-items: baseline; gap: 0.75rem;
}
.guide-step-h .step-no { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--terracotta); font-size: 1.1rem; }

.guide-toc { background: var(--alabaster-soft); border: 1px solid var(--line); padding: 1.6rem 1.75rem; margin-top: 2em; }
.guide-toc__label { font-family: var(--sans); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.9rem; display: block; }
.guide-toc__list { display: flex; flex-direction: column; gap: 0.75rem; }
.guide-toc__item { display: flex; align-items: baseline; gap: 0.75rem; text-decoration: none; color: inherit; }
.guide-toc__num { font-family: var(--serif); font-style: italic; color: var(--terracotta); font-size: 1rem; width: 22px; flex-shrink: 0; }
.guide-toc__item b { font-weight: 600; font-size: 0.94rem; }
.guide-toc__item span { color: var(--ink-faint); font-size: 0.86rem; margin-left: 0.4rem; }
.guide-toc--sources { border-style: dashed; }

.guide-method-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 1.4em; }
.guide-method-card { border: 1px solid var(--line); padding: 1.4rem; }
.guide-method-card__tag { font-family: var(--sans); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terracotta-deep); margin-bottom: 0.5rem; display: block; }
.guide-method-card h4 { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; margin: 0; }
.guide-method-card p { font-size: 0.88rem !important; color: var(--ink-faint) !important; margin-top: 0.5rem !important; }

.guide-code { margin-top: 1.4em; background: #22261B; border: 1px solid #3A3E2D; overflow: hidden; }
.guide-code__bar { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 1rem; border-bottom: 1px solid #3A3E2D; }
.guide-code__lang { font-family: var(--sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: #9A9D87; }
.guide-copy-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: 1px solid #3A3E2D;
  color: var(--cream-muted); font-family: var(--sans); font-weight: 600; font-size: 0.72rem;
  padding: 0.3rem 0.6rem; cursor: pointer; transition: border-color .15s, color .15s;
}
.guide-copy-btn:hover { border-color: var(--terracotta); color: var(--cream); }
.guide-copy-btn.is-copied { color: #9DBF7A; border-color: #5A7A3E; }
.guide-copy-btn svg { width: 12px; height: 12px; }
.guide-code pre { margin: 0; padding: 1.1rem 1.25rem; overflow-x: auto; }
.guide-code code { color: #EDEADD; font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace; font-size: 0.86rem; line-height: 1.65; white-space: pre; }
.guide-code .cm { color: #9A9D87; }
.guide-code .kw { color: #D6A05C; }
.guide-code .str { color: #9DBF7A; }

.guide-callout { margin-top: 1.4em; border-left: 3px solid var(--terracotta); background: var(--alabaster-soft); padding: 1.1rem 1.35rem; }
.guide-callout__label { font-family: var(--sans); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terracotta-deep); margin-bottom: 0.4rem; display: block; }
.guide-callout p { font-size: 0.95rem !important; margin-top: 0 !important; }

.guide-issues { margin-top: 1.2em; display: flex; flex-direction: column; }
.guide-issue-row { display: flex; gap: 0.9rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.guide-issue-row:first-child { border-top: 1px solid var(--line); }
.guide-issue-tag { flex-shrink: 0; font-family: var(--sans); font-weight: 700; font-size: 0.7rem; color: var(--terracotta-deep); background: var(--alabaster-soft); padding: 0.2rem 0.5rem; height: fit-content; }
.guide-issue-row p { font-size: 0.9rem !important; margin: 0 !important; }
.guide-issue-row p b { color: var(--ink); }

.guide-related { background: var(--alabaster-soft); border-top: 1px solid var(--line); padding: 2rem 3.5rem; }
.guide-related__label { font-family: var(--sans); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.75rem; display: block; }
.guide-related a { display: block; font-size: 0.96rem; color: var(--ink); text-decoration: none; margin-top: 0.4rem; }
.guide-related a:hover { color: var(--terracotta-deep); }

.guide-cta { background: var(--olive); color: var(--cream); padding: 2.75rem 3.5rem; }
.guide-cta h4 { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; color: var(--cream); max-width: 34ch; margin: 0; }
.guide-cta h4 i { font-style: italic; color: var(--terracotta); }
.guide-cta p { margin-top: 0.6rem; font-size: 0.92rem; color: var(--cream-muted); max-width: 48ch; }
.guide-cta__btn { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.1rem; background: var(--terracotta); color: var(--cream); font-family: var(--sans); font-weight: 600; font-size: 0.88rem; padding: 0.7rem 1.25rem; text-decoration: none; }

@media (max-width: 720px) {
  .guide-hero, .guide-body, .guide-related, .guide-cta { padding-left: 1.6rem; padding-right: 1.6rem; }
  .guide-method-split { grid-template-columns: 1fr; }
}