/* Learn section (hub + lessons). Uses the colors and fonts from /site.css. */

/* ---------- Learn home ---------- */
.learn-hero{ padding-top:48px; padding-bottom:12px; }
.learn-hero .lead{ max-width:720px; }
.learn-stats{ display:flex; flex-wrap:wrap; gap:10px 28px; margin:22px 0 0; padding:0; list-style:none; font-family:var(--mono); font-size:.85rem; color:var(--faint); }
.learn-stats strong{ color:var(--text); font-weight:600; }

.path{ list-style:none; margin:0; padding:0; counter-reset:lesson; position:relative; }
.path::before{ content:""; position:absolute; left:27px; top:28px; bottom:28px; width:2px; background:var(--line2); }
.path li{ counter-increment:lesson; position:relative; padding-left:76px; margin:0 0 14px; }
.path li::before{
  content:counter(lesson, decimal-leading-zero);
  position:absolute; left:0; top:18px; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; background:var(--bg); border:2px solid var(--gold-line);
  font-family:var(--mono); font-weight:600; color:var(--gold);
}
.path a.step{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 18px; align-items:center;
  padding:18px 22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); color:var(--text); text-decoration:none; transition:border-color .15s, background .15s; }
.path a.step:hover{ border-color:var(--gold-line); background:var(--panel2); text-decoration:none; }
.path a.step:hover + * , .path li:hover::before{ border-color:var(--gold); }
.path h2{ font-size:1.25rem; margin:0; }
.path p{ margin:0; font-size:.95rem; grid-column:1; }
.path .mins{ grid-row:1 / span 2; grid-column:2; font-family:var(--mono); font-size:.8rem; color:var(--faint); white-space:nowrap; }
.path .go{ color:var(--gold); }
@media (max-width:640px){
  .path::before{ left:19px; }
  .path li{ padding-left:52px; }
  .path li::before{ width:40px; height:40px; top:16px; font-size:.85rem; }
  .path a.step{ grid-template-columns:1fr; padding:16px; }
  .path .mins{ grid-row:auto; grid-column:1; }
}
.learn-why{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px,100%),1fr)); gap:16px; margin-top:8px; }
.learn-why div{ border-top:2px solid var(--gold-line); padding-top:14px; }
.learn-why h3{ font-size:1.05rem; margin-bottom:.3em; }
.learn-why p{ font-size:.95rem; margin:0; }

/* ---------- Lesson page ---------- */
.lesson{ padding-top:40px; }
.lesson h1{ font-size:clamp(1.9rem, 4vw, 2.8rem); }
.lesson h2{ font-size:1.5rem; margin-top:2em; }
.lesson h3{ font-size:1.15rem; margin-top:1.5em; }
.lesson p, .lesson li{ color:#C9D1DE; font-size:1.04rem; line-height:1.7; }
.lesson ul, .lesson ol{ padding-left:1.3em; }
.lesson li{ margin-bottom:.4em; }
.lesson strong{ color:var(--text); }
.crumbs{ font-family:var(--mono); font-size:.8rem; color:var(--faint); margin-bottom:14px; }
.crumbs a{ color:var(--gold); }
.inshort{ margin:24px 0 8px; padding:18px 22px; border:1px solid var(--gold-line); background:var(--gold-bg); border-radius:var(--radius); }
.inshort ul{ margin:0; }
.inshort li{ color:var(--text); }
.lesson table{ width:100%; border-collapse:collapse; margin:16px 0 20px; font-size:.95rem; }
.lesson th, .lesson td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; color:#C9D1DE; }
.lesson th{ color:var(--text); font-family:var(--display); font-weight:600; background:var(--panel); }
.table-scroll{ overflow-x:auto; }
.formula{ font-family:var(--mono); font-size:.92rem; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 16px; color:var(--text); overflow-x:auto; }
.tryit{ margin:28px 0; padding:18px 22px; border-left:3px solid var(--gold); background:var(--panel); border-radius:0 var(--radius) var(--radius) 0; }
.tryit h3{ margin-top:0; }
.tryit ol{ margin-bottom:0; }
.figure{ margin:22px 0; padding:16px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); }
.figure svg{ display:block; width:100%; height:auto; }
.figure figcaption{ font-size:.88rem; color:var(--faint); margin-top:10px; }
.pairs{ margin:40px 0 20px; padding:20px 22px; border:1px solid var(--line2); border-radius:var(--radius); background:var(--panel); }
.pairs p:not(.eyebrow){ color:var(--text); }
.lesson-nav{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0; }
.lesson-nav a{ display:block; padding:14px 16px; border:1px solid var(--line); border-radius:12px; color:var(--text); text-decoration:none; font-family:var(--display); font-weight:600; }
.lesson-nav a:hover{ border-color:var(--gold-line); text-decoration:none; }
.lesson-nav a span{ display:block; font-family:var(--mono); font-weight:400; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:4px; }
.lesson-nav a.next{ text-align:right; }
@media (max-width:640px){ .lesson-nav{ grid-template-columns:1fr; } .lesson-nav a.next{ text-align:left; } }
.edu-note{ font-size:.88rem !important; color:var(--faint) !important; margin-top:24px; }
.lesson .eyebrow{ color:var(--gold); }