/* /learn education portal - lesson layout.
   Loaded via headExtra ONLY on /learn pages (services/seo/learn.js).
   Reuses .hub-shell / .lede / .hub-faq from the shared pageShell. Adds the
   card grid, the two-column body+TOC, and the element-callout rows. */

/* Index card grid */
.learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin: 8px 0 24px;
}
.learn-card {
  display: block;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 8px);
  background: var(--bg-card);
  background-image: var(--grad-card);
  text-decoration: none;
  color: var(--text-hi);
  transition: border-color .15s ease, transform .15s ease;
}
.learn-card:hover { border-color: var(--accent-2, #a98bff); transform: translateY(-2px); }
.learn-card-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.learn-card-desc { color: var(--text-md); font-size: 12px; line-height: 1.55; }

/* Lesson body + sticky TOC */
.learn-body-wrap { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start; }
.learn-toc { position: sticky; top: 16px; font-size: 12px; }
.learn-toc-h { text-transform: uppercase; letter-spacing: .6px; font-size: 10px; font-weight: 700; color: var(--text-md); margin-bottom: 8px; }
.learn-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.learn-toc a { color: var(--text-md); text-decoration: none; }
.learn-toc a:hover { color: var(--text-hi); }

.learn-section { margin: 0 0 26px; scroll-margin-top: 16px; }
.learn-section h2 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.learn-anchor { color: var(--text-hi); text-decoration: none; }
.learn-anchor:hover { text-decoration: underline; }
.learn-body p { color: var(--text-md); font-size: 13px; line-height: 1.65; margin: 0 0 10px; }
.learn-body a { color: var(--accent-2, #a98bff); text-decoration: none; }
.learn-body a:hover { text-decoration: underline; }

/* Element-callout rows: colour chip + label + meaning */
.learn-els { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.learn-el { display: grid; grid-template-columns: 14px 130px 1fr; gap: 10px; align-items: baseline; font-size: 12px; }
.learn-chip { width: 12px; height: 12px; border-radius: 3px; align-self: center; box-shadow: inset 0 0 0 1px var(--hairline); }
.learn-chip-none { background: var(--bg-input); }
.learn-el-label { font-weight: 700; color: var(--text-hi); font-family: var(--mono); font-size: 11px; }
.learn-el-meaning { color: var(--text-md); line-height: 1.55; }

.learn-back { margin-top: 24px; font-size: 13px; }
.learn-back a { color: var(--accent-2, #a98bff); text-decoration: none; }

@media (max-width: 720px) {
  .learn-body-wrap { grid-template-columns: 1fr; }
  .learn-toc { position: static; margin-bottom: 18px; }
  .learn-el { grid-template-columns: 14px 1fr; }
  .learn-el-meaning { grid-column: 1 / -1; }
}