/* ═══════════════════════════════════════════════
   Direction D refinements | Learn hub + path indexes + modules
   Applies the same warm-card / soft-shadow / mono-numerics
   treatment to the Learn surface area. Loaded on every page
   under /learn/ via patch-design-d-learn.js.
   ═══════════════════════════════════════════════ */

/* ── Hub page hero ── */
.lh-hero {
  background: var(--rcd-card) !important;
  border: 1px solid var(--rcd-rule) !important;
  border-radius: var(--rcd-r-xl) !important;
  box-shadow: var(--rcd-sh-2) !important;
  padding: 44px 36px !important;
}
.lh-eyebrow,
.path-eyebrow,
.module-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  background: var(--rcd-bg-alt) !important;
  border: 1px solid var(--rcd-rule) !important;
  border-radius: var(--rcd-r-pill) !important;
  font-family: var(--rcd-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--rcd-text-2) !important;
}

/* ── Path cards on hub ── */
.path-card,
.lh-path-card,
.path-row {
  background: var(--rcd-card) !important;
  border: 1px solid var(--rcd-rule) !important;
  border-radius: var(--rcd-r-lg) !important;
  box-shadow: var(--rcd-sh-1) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
.path-card:hover,
.lh-path-card:hover,
.path-row:hover {
  transform: translateY(-3px);
  box-shadow: var(--rcd-sh-3) !important;
  border-color: var(--rcd-rule-strong) !important;
}

/* ── Module cards inside a path ── */
.module-card,
.module-row,
.lh-module-card {
  background: var(--rcd-card) !important;
  border: 1px solid var(--rcd-rule) !important;
  border-radius: var(--rcd-r-md) !important;
  box-shadow: var(--rcd-sh-1) !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease !important;
}
.module-card:hover,
.module-row:hover,
.lh-module-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--rcd-sh-2) !important;
}

/* ── Path index progress bar ── */
.lh-progress-bar,
.path-progress-bar {
  background: var(--rcd-bg-alt) !important;
  border-radius: var(--rcd-r-pill) !important;
  overflow: hidden;
}
.lh-progress-fill,
.path-progress-fill {
  background: var(--rcd-text) !important;
  border-radius: var(--rcd-r-pill);
}

/* ── Mini-quiz card inside a module ── */
.mini-quiz,
.module-quiz-card {
  background: var(--rcd-card) !important;
  border: 1px solid var(--rcd-rule) !important;
  border-radius: var(--rcd-r-lg) !important;
  box-shadow: var(--rcd-sh-1) !important;
  padding: 22px 24px !important;
}
.mini-quiz-question {
  font-weight: 600 !important;
  color: var(--rcd-text);
  letter-spacing: -0.01em;
}
.mini-quiz-option {
  border-radius: var(--rcd-r-md) !important;
  border: 1px solid var(--rcd-rule) !important;
  background: var(--rcd-card) !important;
  transition: border-color 0.18s ease, background 0.18s ease !important;
}
.mini-quiz-option:hover {
  border-color: var(--rcd-rule-strong) !important;
  background: var(--rcd-bg-alt) !important;
}

/* ── Glossary tooltip ── */
.glossary-term {
  border-bottom-color: var(--rcd-rule-strong) !important;
}

/* ── In-module callout cards ── */
.tk-callout,
.callout-card,
.module-callout {
  background: var(--rcd-bg-alt) !important;
  border: 1px solid var(--rcd-rule) !important;
  border-left: 3px solid var(--rcd-text) !important;
  border-radius: var(--rcd-r-md) !important;
  padding: 18px 22px !important;
}

/* ── Calculator card ── */
.embedded-calculator,
.calc-card {
  background: var(--rcd-card) !important;
  border: 1px solid var(--rcd-rule) !important;
  border-radius: var(--rcd-r-lg) !important;
  box-shadow: var(--rcd-sh-1) !important;
  padding: 24px !important;
}
.calc-result {
  font-family: var(--rcd-mono) !important;
  font-variant-numeric: tabular-nums;
}

/* ── Path nav | next / prev module ── */
.module-prev-next {
  display: grid !important;
  gap: 12px !important;
}
.module-prev-next a {
  background: var(--rcd-card) !important;
  border: 1px solid var(--rcd-rule) !important;
  border-radius: var(--rcd-r-md) !important;
  box-shadow: var(--rcd-sh-1) !important;
  padding: 14px 18px !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.module-prev-next a:hover {
  transform: translateY(-1px);
  box-shadow: var(--rcd-sh-2) !important;
}

/* ── Numeric stat row inside infographics ── */
.stat-row .stat-number,
.li-stat-num {
  font-family: var(--rcd-mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
}

/* ── Search result card on /learn/ search ── */
.lh-search-result,
.learn-search-hit {
  background: var(--rcd-card) !important;
  border: 1px solid var(--rcd-rule) !important;
  border-radius: var(--rcd-r-md) !important;
  box-shadow: var(--rcd-sh-1) !important;
}
.lh-search-result:hover,
.learn-search-hit:hover {
  transform: translateY(-1px);
  box-shadow: var(--rcd-sh-2) !important;
}