/* ============================================================
 * /guides  —  guides hub (pillar / listing page)
 *
 * Chrome (.container, .breadcrumb, .cta-section, type utilities, buttons)
 * lives in brand.css / site-chrome.css. Individual guide pages use
 * pages/guide.css; the glossary uses pages/glossary.css. This file styles
 * the hub's hero and the grouped guide-card grid.
 * ============================================================ */

.breadcrumb + .guides-hero { padding-top: var(--space-24); }

.guides-hero {
  padding-top: var(--space-section-standard);
  padding-bottom: var(--space-section-tight);
}
.guides-hero .descriptor {
  max-width: 62ch;
  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);
}

/* BLOCKS  —  "How-to guides" and "Reference", each a labelled group */
.guides-block + .guides-block { margin-top: var(--space-64); }
.guides-block-head { margin-bottom: var(--space-24); }
.guides-block-head .label-s { display: block; margin-bottom: var(--space-8); }

/* CARD GRID  —  whole card is the link; two per row from sm up */
.guides-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}
@media (min-width: 640px) {
  .guides-grid { grid-template-columns: repeat(2, 1fr); }
}

.guide-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-32);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
  text-decoration: none;
  background: var(--color-paper);
  transition: border-color var(--duration-instant) var(--ease-standard),
              box-shadow var(--duration-instant) var(--ease-standard);
}
.guide-card:hover,
.guide-card:focus-visible {
  border-color: var(--color-royal);
  box-shadow: var(--shadow-card-elevated);
}
.guide-card-kicker { display: block; margin-bottom: var(--space-12); }
.guide-card-title { color: var(--color-midnight); margin-bottom: var(--space-8); }
.guide-card-desc { color: var(--color-stone-60); margin-bottom: var(--space-16); }
.guide-card-more {
  margin-top: auto;
  color: var(--color-royal);
  font-weight: 500;
  font-size: var(--type-body-s);
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}
.guide-card-more::after {
  content: "→";
  transition: transform var(--duration-instant) var(--ease-standard);
}
.guide-card:hover .guide-card-more::after,
.guide-card:focus-visible .guide-card-more::after { transform: translateX(2px); }

/* END CTA  —  centered, with generous vertical breathing room
   (matches the .cta-section treatment on the homepage and pricing). */
.cta-section { text-align: center; padding-block: var(--space-section-generous); }
.cta-section h2 { max-inline-size: 22ch; margin-inline: auto; }
.cta-section .cta-lede { margin-top: var(--space-20); }