/*
 * Learn hub + guide pages (Mandate G). Builds on the shared design system (tokens/base/components) and
 * reuses the legal `.doc` measure for article body. Only the hub grid + a few article affordances live here.
 * No fixed heights (CLS-safe); no new colors outside the theme tokens.
 */

/* ── Learn hub ─────────────────────────────────────────────────────────────────────────────────────── */
.learn-hub {
  max-width: 1000px;
  margin-inline: auto;
  padding-block: var(--sp-48) var(--sp-96);
}

.learn-hub__lede {
  color: var(--ink-2);
  max-width: 60ch;
  margin-bottom: var(--sp-32);
}

.learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-16);
}

.learn-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  border: 1px solid var(--line);
  border-radius: var(--r-18);
  background: var(--surface);
  padding: var(--sp-24);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-fast, 120ms) ease, transform var(--dur-fast, 120ms) ease;
}

@media (prefers-reduced-motion: no-preference) {
  .learn-card:hover {
    border-color: var(--brand-600);
    transform: translateY(-2px);
  }
}

.learn-card__eyebrow {
  font-size: var(--fs-12);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand-600);
  font-weight: 650;
}

.learn-card__title {
  font-size: var(--fs-20);
  color: var(--ink);
}

.learn-card__desc {
  color: var(--ink-2);
  font-size: var(--fs-14);
  margin: 0;
}

/* ── Article affordances (reuses .doc from legal.css for the body measure) ──────────────────────────── */
.doc__breadcrumb {
  font-size: var(--fs-14);
  color: var(--faint);
  margin-bottom: var(--sp-16);
}

.doc__breadcrumb a {
  color: var(--brand-600);
}

.doc__lede {
  font-size: var(--fs-20);
  color: var(--ink-2);
  margin-bottom: var(--sp-32);
}

.faq {
  margin-block: var(--sp-24);
}

.faq details {
  border-bottom: 1px solid var(--line);
  padding-block: var(--sp-16);
}

.faq summary {
  cursor: pointer;
  font-weight: 650;
  color: var(--ink);
  font-size: var(--fs-16);
}

.faq details p {
  margin-top: var(--sp-12);
  margin-bottom: 0;
}

.doc__cta {
  margin-block: var(--sp-48) var(--sp-24);
  padding: var(--sp-24);
  border: 1px solid var(--line);
  border-radius: var(--r-18);
  background: var(--surface);
}

.doc__cta p {
  margin-top: 0;
}