/* ============================================================
 * /guides  —  guides hub (listing page)
 *
 * Chrome (.container, .cta-section, type utilities, buttons) lives in
 * brand.css. Individual guide pages use pages/guide.css; this styles the
 * hub's hero + guide-card list.
 * ============================================================ */

.guides-hero {
  padding-top: var(--space-section-standard);
  padding-bottom: var(--space-section-tight);
}
.guides-hero .descriptor {
  max-width: 60ch;
  margin-top: var(--space-16);
  color: var(--color-stone-60);
}

.guides-list-section {
  padding-top: var(--space-section-tight);
  padding-bottom: var(--space-section-standard);
}

/* GUIDE CARDS  —  whole card is the link */
.guides-grid {
  display: grid;
  gap: var(--space-24);
  max-width: 760px;
}
.guide-card {
  display: block;
  padding: var(--space-24);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
  text-decoration: none;
  background: var(--color-paper);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.guide-card:hover,
.guide-card:focus-visible {
  border-color: var(--color-royal);
  box-shadow: 0 2px 12px rgba(0, 30, 69, 0.06);
}
.guide-card-title { color: var(--color-midnight); margin-bottom: var(--space-8); }
.guide-card-desc { color: var(--color-stone-60); margin-bottom: var(--space-12); max-width: 62ch; }
.guide-card-more { color: var(--color-royal); font-weight: 500; }

/* SEE ALSO */
.guides-seealso {
  max-width: 760px;
  margin-top: var(--space-48);
  padding-top: var(--space-32);
  border-top: 1px solid var(--color-stone-20);
}
.seealso-list {
  list-style: none;
  margin-top: var(--space-16);
  color: var(--color-stone-60);
}
.seealso-list li + li { margin-top: var(--space-8); }
.seealso-list a {
  color: var(--color-royal);
  text-decoration: underline;
  text-underline-offset: 2px;
}