/* Guides (/guides/): pages built by scripts/build-guides.py. The article
   body reuses .docs-content from docs.css; this file adds the guide's own
   header, breadcrumbs, related links, call to action and the Guides index. */

.guide-shell { padding-top: 32px; padding-bottom: 72px; }
.guide, .guides-index { max-width: 760px; margin: 0 auto; }

.breadcrumbs { font-size: 13px; color: var(--muted); margin-bottom: 24px; }
.breadcrumbs a { color: var(--muted-strong); }
.breadcrumbs a:hover { color: var(--primary); }
.breadcrumbs [aria-current] { color: var(--muted); }

.guide-header { padding-bottom: 24px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.guide-title {
  margin-top: 10px;
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
@media (min-width: 640px) { .guide-title { font-size: 2.375rem; } }
.guide-header .lead { margin-top: 12px; max-width: 40rem; }
.guide-meta { margin-top: 12px; font-size: 13px; color: var(--muted); }

/* Article body: wider than the docs column. Tables fill the column and, on
   phones, scroll inside their wrapper (added by build-guides.py) instead of
   squeezing. */
.guide-content { max-width: none; padding-top: 16px; font-size: 16px; }
.guide-content h2 { scroll-margin-top: calc(var(--header-h) + 16px); }
.guide-content .table-scroll { overflow-x: auto; margin: 8px 0 20px; }
.guide-content .table-scroll table { margin: 0; }
.guide-content td:first-child { width: auto; }
.guide-content td, .guide-content th { white-space: nowrap; }
.guide-content td:first-child, .guide-content th:first-child { white-space: normal; min-width: 9rem; }

.guide-related {
  margin-top: 40px;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.guide-related h2 { font-size: 15px; font-weight: 600; color: var(--ink); }
.guide-related ul { margin: 10px 0 0; padding-left: 20px; }
.guide-related li { margin-bottom: 6px; }
.guide-related a { color: var(--primary); }

.guide-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding: 24px;
  border-radius: var(--radius-md);
  background: var(--primary-8);
}
.guide-cta p { color: var(--ink); }

/* Guides index */
.guides-cluster { margin-top: 36px; }
.guides-cluster h2 { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.guide-cards { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.guide-card a {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
}
.guide-card a:hover { border-color: var(--primary-30); background: var(--primary-4); }
.guide-card.is-pillar a { border-color: var(--primary-30); }
.guide-card-title { display: block; font-weight: 600; color: var(--ink); }
.guide-card-text { display: block; margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--muted-strong); }