/* ============================================================================
   SucsessMaperrs — Guides (blog)
   Builds on tokens.css + editorial.css. Only adds what those don't already
   cover: breadcrumb, article header/meta, index cards, in-article callout,
   and the end-of-guide CTA. Everything else reuses .prose / .card / .btn /
   .pill / .data-table / .faq-list from editorial.css.
   ============================================================================ */

/* ---------- Breadcrumb ---------- */
.breadcrumb { margin-bottom: var(--space-xl); }
.breadcrumb ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-sm); margin: 0; padding: 0;
  font-family: var(--font-mono); font-size: var(--type-eyebrow);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-3);
}
.breadcrumb li { display: flex; align-items: center; gap: var(--space-sm); }
.breadcrumb li + li::before { content: "/"; color: var(--rule); }
.breadcrumb a { color: var(--gold-deep); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink-3); }

/* ---------- Article header ---------- */
.article-header { max-width: 760px; margin-bottom: var(--space-3xl); }
.article-header .h1 { margin-top: var(--space-md); }
.article-header .lede { margin-top: var(--space-lg); }
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md);
  margin-top: var(--space-xl);
  font-family: var(--font-mono); font-size: var(--type-eyebrow);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-3);
}
.article-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); opacity: .5; }

/* ---------- In-article "key takeaways" callout ---------- */
.callout {
  background: var(--gold-tint); border: var(--border-hairline) solid var(--gold-soft);
  border-radius: var(--radius-lg); padding: var(--space-xl); margin-top: var(--space-xl);
}
.callout__label {
  font-family: var(--font-mono); font-size: var(--type-eyebrow);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 var(--space-sm);
}
.callout ul { margin: 0; padding-left: 1.25rem; }
.callout li { color: var(--ink-2); line-height: 1.6; margin-top: var(--space-sm); }
.callout li:first-child { margin-top: 0; }

/* ---------- Myth / Reality cards ---------- */
.myth-list { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }
.myth {
  border-left: 2px solid var(--gold); background: var(--paper-2);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-lg) var(--space-xl);
}
/* .prose prefix so these beat .prose p's color/margin without !important */
.prose .myth__claim {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 1.1875rem; line-height: 1.35; color: var(--ink); margin: 0 0 var(--space-sm);
}
.prose .myth__reality { color: var(--ink-2); line-height: 1.6; font-size: var(--type-small); margin: 0; }
.myth__label {
  font-family: var(--font-mono); font-weight: 600; font-size: var(--type-eyebrow);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--gold-deep); margin-right: var(--space-sm);
}

/* ---------- "Keep reading" related cards ---------- */
.related-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-top: var(--space-xl); }
@media (max-width: 640px) { .related-list { grid-template-columns: 1fr; } }
.related-card {
  display: block; text-decoration: none; color: inherit;
  border: var(--border-hairline) solid var(--rule); border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl); background: var(--card);
  transition: border-color .15s ease, transform .15s ease;
}
.related-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.related-card:focus-visible { outline: var(--border-focus) solid var(--gold-deep); outline-offset: 3px; }
.related-card__title {
  display: block; font-family: var(--font-serif); font-weight: 600; font-size: 1.0625rem;
  line-height: 1.3; color: var(--ink); margin-bottom: 6px;
}
.related-card:hover .related-card__title { color: var(--gold-deep); }
.related-card__arrow { color: var(--gold-deep); font-weight: 600; }
.related-card:hover .related-card__arrow { color: var(--gold); }
.related-card__desc { display: block; font-size: var(--type-small); color: var(--ink-2); line-height: 1.5; }

/* ---------- End-of-guide CTA ---------- */
.guide-cta { margin-top: var(--space-3xl); }
.guide-cta__title { font-family: var(--font-serif); font-weight: 600; font-size: 1.375rem; color: var(--ink); margin: 0 0 var(--space-sm); }
.guide-cta__body { color: var(--ink-2); font-size: var(--type-small); line-height: 1.6; margin: 0 0 var(--space-lg); max-width: 52ch; }
.guide-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* ---------- Guides audience filter ---------- */
/* Hidden by default so no-JS users just see every card (no dead control). */
.guide-filter { display: none; }
.js .guide-filter {
  display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-2xl);
}
.guide-filter__btn {
  font-family: var(--font-mono); font-weight: 600; font-size: 0.8125rem;
  text-transform: uppercase; letter-spacing: var(--track-mono);
  padding: 13px 26px; border-radius: var(--radius-pill);
  border: var(--border-hairline) solid var(--rule); background: transparent;
  color: var(--ink-2); cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.guide-filter__btn:hover { border-color: var(--gold); color: var(--ink); }
.guide-filter__btn:focus-visible { outline: var(--border-focus) solid var(--gold-deep); outline-offset: 2px; }
.guide-filter__btn[aria-pressed="true"] { background: var(--gold-deep); color: var(--paper); border-color: var(--gold-deep); }

/* ---------- Guides index cards ---------- */
.guide-list {
  display: grid; gap: var(--space-xl);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.guide-card { display: block; text-decoration: none; color: inherit; height: 100%; }
/* filter hides cards via [hidden]; this beats .guide-card's display:block (0,2,0 > 0,1,0) */
.guide-card[hidden] { display: none; }
.guide-card .card {
  height: 100%; display: flex; flex-direction: column;
  transition: border-color .15s ease, transform .15s ease;
}
.guide-card:hover .card { border-color: var(--gold); transform: translateY(-2px); }
.guide-card:focus-visible { outline: var(--border-focus) solid var(--gold-deep); outline-offset: 3px; border-radius: var(--radius-xl); }
.guide-card__title {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.375rem;
  line-height: 1.2; color: var(--ink); margin: var(--space-md) 0 var(--space-sm);
}
.guide-card__excerpt { color: var(--ink-2); font-size: var(--type-small); line-height: 1.6; margin: 0; flex: 1; }
.guide-card__meta {
  margin-top: var(--space-lg); font-family: var(--font-mono); font-size: var(--type-eyebrow);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
}
.guide-card__arrow { color: var(--gold-deep); font-weight: 600; }
.guide-card:hover .guide-card__arrow { color: var(--gold); }

/* ---------- Reduced motion: kill blog hover transforms/transitions ---------- */
@media (prefers-reduced-motion: reduce) {
  .guide-card .card, .related-card, .guide-filter__btn { transition: none; }
  .guide-card:hover .card, .related-card:hover { transform: none; }
}

/* ---------- Phase 4: gentle block reveals + anchor offset ---------- */
.js .reveal-init { opacity: 0; transform: translateY(12px); }
.js .reveal-in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal-init { opacity: 1; transform: none; }
  .js .reveal-in { transition: none; }
}
/* keep anchor jumps clear of the sticky header */
[id] { scroll-margin-top: 90px; }