/* ============================================================
   MAGNA · AP COURSE PAGES  (shared, all courses render through this)
   Scoped under .course so its generic component classes can't collide
   with main.css or the other migrated pages. Colours are decided ONLY in
   the theme classes (.t-light | .t-dark | .t-brand); every component reads
   the semantic tokens (--surface/--text/--accent/...), so flipping a
   section's theme is a one-class edit. Ported from the approved design mock
   (base.css). Fonts (Inter + Source Serif 4) and the site header/footer come
   from the theme; this file styles only what lives inside .course.
   ============================================================ */

/* --- Brand constants + base (scoped to the page wrapper) --------- */
.course{
  --blue-500:#3543D0;  --blue-600:#2C37B0;  --blue-300:#8C97E6;
  --lime-500:#89D992;  --lime-600:#6DD87B;

  --font-head:'Source Serif 4',Georgia,serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --rail:1120px;        /* every section shares this content rail  */
  --measure:720px;      /* readable line length for body copy      */
  --measure-narrow:640px;

  --pad-y:96px;  --pad-x:24px;
  --r-lg:16px;  --r-md:12px;  --r-sm:8px;

  --ease:cubic-bezier(.2,.8,.2,1);
  --dur:.45s;

  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
.course *{box-sizing:border-box}
.course img{max-width:100%;height:auto}
.course svg{max-width:100%}

/* --- Themes: the ONLY place colours are decided ----------------- */
.course .t-light{
  --surface:#FFFFFF;  --surface-2:#F7F8FA;  --surface-3:#EEF0FB;
  --card:#FFFFFF;     --card-2:#F7F8FA;     --card-3:#EEF0FB;
  --text:#11141A;     --text-2:#353B47;     --text-3:#4B5260;  --text-muted:#6B7280;
  --border:#DDE1E7;   --border-2:#B7BFF0;   --faint:#C3C9D2;
  --accent:var(--blue-500);
  --pos:#1E7A2E;  --pos-bg:#E8F5EA;  --pos-bd:#B7E0BF;
  --neg:#B03024;  --neg-bg:#FDECEA;  --neg-bd:#F3C0B9;
  --btn-fill:var(--blue-500); --btn-fill-hover:var(--blue-600); --btn-ink:#fff;
}
.course .t-light.alt{ --surface:var(--surface-2); --card:#FFFFFF; }

.course .t-dark{
  --surface:#0B0F1E;  --surface-2:#111730;  --surface-3:#1A2142;
  --card:#111730;     --card-2:#1A2142;     --card-3:#0E132A;
  --text:#F2F4FB;     --text-2:#DDE3F2;     --text-3:#A9B1C6;  --text-muted:#8891AA;
  --border:#2A3358;   --border-2:#3543D0;   --faint:#3d477e;
  --accent:var(--blue-300);
  --pos:var(--lime-600);  --pos-bg:#0F2A18;  --pos-bd:#1f5232;
  --neg:#FF7A6B;          --neg-bg:#2A1512;  --neg-bd:#6b2a22;
  --btn-fill:var(--blue-500); --btn-fill-hover:var(--blue-600); --btn-ink:#fff;
}

.course .t-brand{
  --surface:var(--blue-500);
  --card:rgba(255,255,255,.10);
  --text:#FFFFFF;  --text-2:#E6E9FB;  --text-3:#D8DCF7;  --text-muted:#C3C9F0;
  --border:rgba(255,255,255,.28);  --faint:rgba(255,255,255,.4);
  --accent:#C9CEF5;
  --btn-fill:#FFFFFF; --btn-fill-hover:#EEF0FB; --btn-ink:var(--blue-500);
}

/* --- Layout ---------------------------------------------------- */
.course .sec{background:var(--surface);color:var(--text-3);padding:var(--pad-y) var(--pad-x)}
.course .rail{max-width:var(--rail);margin:0 auto}

.course .grid{display:grid;gap:16px}
.course .g-2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.course .g-3{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.course .g-4{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.course .stack{display:flex;flex-direction:column}
.course .row{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.course .hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:48px;align-items:center}

/* --- Type ------------------------------------------------------ */
/* .course .h1/.h2 beat main.css's bare h1/h2 (Roboto Slab) on specificity,
   and every heading sets colour explicitly from a token (CLAUDE.md rule 24). */
.course .eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);margin:0 0 14px}

.course .h1{font-family:var(--font-head);font-optical-sizing:auto;font-variation-settings:'opsz' 48;
  font-weight:500;letter-spacing:-.015em;line-height:1.06;color:var(--text);
  font-size:clamp(34px,5vw,60px);margin:0 0 22px}
.course .h2{font-family:var(--font-head);font-optical-sizing:auto;font-variation-settings:'opsz' 40;
  font-weight:500;letter-spacing:-.01em;line-height:1.12;color:var(--text);
  font-size:clamp(30px,3.4vw,44px);margin:0 0 20px}
.course .h3{font-family:var(--font-body);font-weight:600;font-size:17px;line-height:1.3;
  color:var(--text);margin:0 0 10px}

.course .lede{font-size:17px;line-height:1.65;color:var(--text-3);max-width:var(--measure);margin:0 0 40px}
.course .prose{font-size:17px;line-height:1.7;color:var(--text-3);max-width:var(--measure);margin:0}
.course .prose p{margin:0 0 20px}
.course .prose p:last-child{margin:0}
.course .prose strong{color:var(--text);font-weight:600}   /* emphasis is automatic, never hand-coloured */
.course .small{font-size:13.5px;line-height:1.55;color:var(--text-muted);max-width:var(--measure)}
.course .note{font-size:13px;line-height:1.6;color:var(--text-muted);max-width:var(--measure)}
.course .accent{color:var(--accent)}

/* --- Components ------------------------------------------------ */
.course .card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px 24px}
.course .card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--text-3)}
.course .card p strong{color:var(--text)}

.course .icon{width:44px;height:44px;border-radius:var(--r-md);background:var(--card-2);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--accent)}
/* "Three steps" cards: large gradient numeral + larger title */
.course .step-num{font-family:var(--font-head);font-optical-sizing:auto;font-variation-settings:'opsz' 40;
  font-weight:600;font-size:clamp(40px,3.6vw,54px);line-height:1;font-variant-numeric:tabular-nums;
  margin-bottom:10px;color:var(--blue-600)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .course .step-num{background:linear-gradient(135deg,var(--blue-600) 0%,var(--blue-500) 55%,var(--blue-300) 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
.course .step-card .h3{font-size:21px;line-height:1.25}

.course .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);
  font-size:16px;font-weight:600;border-radius:var(--r-sm);text-decoration:none;cursor:pointer;
  border:0;padding:15px 26px;transition:background .2s var(--ease),transform .2s var(--ease)}
.course .btn-primary{background:var(--btn-fill);color:var(--btn-ink)}
.course .btn-primary:hover{background:var(--btn-fill-hover)}
.course .btn-ghost{color:var(--accent);padding:14px 8px;background:none}
.course .btn-ghost:hover{text-decoration:underline;text-underline-offset:3px}
.course .btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.course .stat{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:26px 24px}
.course .stat-n{font-size:clamp(30px,4vw,42px);font-weight:700;color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1}
.course .stat-n.pos{color:var(--pos)}
.course .stat-from{font-size:.62em;color:var(--text-muted)}
.course .stat-l{font-size:14px;line-height:1.45;color:var(--text-3);margin-top:10px}

.course .chip{background:var(--card-2);color:var(--text-3);font-size:12.5px;
  border-radius:6px;padding:6px 10px;display:inline-block}

.course .pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
  background:var(--card-2);border:1px solid var(--border);border-radius:999px;padding:7px 14px}
.course .pill .dot{width:6px;height:6px;border-radius:50%;background:var(--lime-500)}

/* Accordion (native <details>): one definition, used by units AND faq */
.course .acc{display:flex;flex-direction:column;gap:10px}
.course .acc-item{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--card)}
.course .acc-item summary{list-style:none;width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  cursor:pointer;padding:18px 22px;font-family:var(--font-body);font-size:16px;font-weight:600;color:var(--text)}
.course .acc-item summary::-webkit-details-marker{display:none}
.course .acc-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-md)}
.course .acc-num{flex:none;width:30px;height:30px;border-radius:var(--r-sm);background:var(--card-2);
  color:var(--accent);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.course .acc-label{flex:1}
.course .acc-meta{display:block;font-size:12.5px;font-weight:500;color:var(--text-muted);margin-top:2px}
.course .acc-chev{flex:none;color:var(--text-muted);transition:transform .25s var(--ease)}
.course .acc-item[open] .acc-chev{transform:rotate(180deg)}
.course .acc-body{padding:0 22px 20px;display:flex;flex-wrap:wrap;gap:8px}
.course .acc-body p{margin:0;font-size:15px;line-height:1.65;color:var(--text-3);flex:1 1 100%}

/* Comparison table */
.course .cmp{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
.course .cmp-row{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;align-items:center}
.course .cmp-row + .cmp-row{border-top:1px solid var(--border)}
.course .cmp-c{padding:15px 18px;font-size:14px;color:var(--text-3);display:flex;align-items:center;gap:8px;justify-content:center}
.course .cmp-c:first-child{justify-content:flex-start;font-weight:600;color:var(--text)}
.course .cmp-head .cmp-c{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.course .cmp-head{background:var(--card-2)}
.course .cmp-magna{background:var(--surface-3);color:var(--accent);font-weight:700}
.course .cmp-head .cmp-magna{color:var(--accent)}
.course .yes{color:var(--pos);font-weight:600}
.course .no{color:var(--text-muted)}

/* Feedback mock */
.course .mock{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.course .mock-bar{display:flex;align-items:center;gap:8px;padding:14px 16px;
  border-bottom:1px solid var(--border);background:var(--card-3);
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.course .mock-body{padding:20px}
.course .mock-label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.course .mock-answer{margin:0 0 16px;font-size:13.5px;line-height:1.55;color:var(--text-2);
  background:var(--card-3);border:1px solid var(--border);border-radius:9px;padding:12px 14px}
.course .mock-score{font-size:14px;font-weight:700;color:var(--pos)}
.course .rubric{display:flex;gap:10px;align-items:flex-start;border-radius:9px;padding:9px 11px;
  font-size:12.5px;line-height:1.45;margin-bottom:8px}
.course .rubric:last-child{margin-bottom:0}
.course .rubric.ok{background:var(--pos-bg);border:1px solid var(--pos-bd);color:var(--pos)}
.course .rubric.miss{background:var(--neg-bg);border:1px solid var(--neg-bd);color:var(--neg)}

/* Video */
.course .video{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);background:var(--card-2)}
.course .video video{display:block;width:100%;height:auto}
.course .video-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;
  border:0;cursor:pointer;background:var(--btn-fill);color:var(--btn-ink);display:flex;align-items:center;justify-content:center}
.course .video-play:focus-visible{outline:2px solid var(--btn-ink);outline-offset:3px}
.course .video-play.is-hidden{display:none}

/* Reasoning-chain step cards */
.course .step{background:var(--card-2);border:1px solid var(--border);border-radius:var(--r-md);padding:18px 20px}
.course .step-k{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.04em}
.course .step-t{font-size:15px;font-weight:600;color:var(--text);margin:6px 0 4px}
.course .step-d{font-size:13px;color:var(--text-muted);line-height:1.45}

/* Skill Builder sub-steps */
.course .sb-block{background:var(--card-2);border:1px solid var(--border);border-radius:var(--r-md);padding:11px 14px;font-size:12.5px;line-height:1.5;color:var(--text)}
.course .sb-block .k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--accent);text-transform:uppercase;margin-bottom:5px}
.course .sb-step{display:flex;gap:10px;align-items:flex-start;background:var(--card-3);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 11px}
.course .sb-n{flex:none;width:18px;height:18px;border-radius:50%;background:var(--surface-3);
  color:var(--accent);font-size:10px;font-weight:700;display:inline-flex;
  align-items:center;justify-content:center;margin-top:1px}
.course .sb-t{font-size:12px;line-height:1.45;color:var(--text-3)}
.course .sb-tag{color:var(--pos);white-space:nowrap}
.course .sb-solve{background:var(--surface-3);border:1px solid var(--border-2);border-radius:var(--r-md);
  padding:11px 14px;text-align:center;font-size:13px;font-weight:600;color:var(--text)}

/* Ask Magna chat bubbles */
.course .bubble{max-width:88%;font-size:13px;line-height:1.5;padding:10px 13px;border-radius:14px}
.course .bubble.you{align-self:flex-end;background:var(--btn-fill);color:var(--btn-ink);border-bottom-right-radius:4px}
.course .bubble.ai{align-self:flex-start;background:var(--card-2);border:1px solid var(--border);
  color:var(--text-2);border-bottom-left-radius:4px}

.course .logos{display:flex;flex-wrap:wrap;gap:10px 22px;color:var(--text-3);font-size:14.5px;font-weight:600;align-items:center}
.course .sep{color:var(--faint)}

.course .divider{margin-top:56px;padding-top:28px;border-top:1px solid var(--surface-3)}

/* --- Ambience: subtle brand glows (matches the homepage hero treatment) ----
   Positioned pseudo-elements bleed a soft blue + lime halo from the corners to
   give dark bands a high-end feel. Clipped by overflow:hidden; content sits
   above via z-index. Faded out under reduced-transparency preferences. */
.course .has-glow{position:relative;overflow:hidden;isolation:isolate}
.course .has-glow > .rail{position:relative;z-index:1}
.course .has-glow::before,.course .has-glow::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.course .course-hero::before{width:760px;height:760px;right:-160px;top:-200px;
  background:radial-gradient(circle,rgba(53,67,208,.32) 0%,rgba(53,67,208,0) 65%)}
.course .course-hero::after{width:460px;height:460px;left:-140px;bottom:-260px;
  background:radial-gradient(circle,rgba(137,217,146,.12) 0%,rgba(137,217,146,0) 65%)}
.course .cta-glow::before{width:700px;height:700px;left:50%;top:-360px;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 62%)}
.course .cta-glow::after{content:none}
@media (prefers-reduced-transparency: reduce){
  .course .has-glow::before,.course .has-glow::after{display:none}
}

/* --- Utilities used by the template --------------------------- */
.course .m-0{margin:0}
.course .mt-14{margin-top:14px}
.course .mt-16{margin-top:16px}
.course .mt-36{margin-top:36px}
.course .mb-10{margin-bottom:10px}
.course .mb-16{margin-bottom:16px}
.course .mb-20{margin-bottom:20px}
.course .mb-24{margin-bottom:24px}
.course .mb-36{margin-bottom:36px}
.course .mb-44{margin-bottom:44px}
.course .my-10{margin:10px 0}
.course .note-gap{margin:10px 0 16px}
.course .gap-6{gap:6px}
.course .gap-10{gap:10px}
.course .row-between{justify-content:space-between}
.course .note-wide{max-width:900px;margin:0}
.course .eyebrow-muted{color:var(--text-muted)}
.course .measure-narrow{max-width:var(--measure-narrow)}

/* --- Scroll reveal (driven by the shared observer in main.js, which adds
   .is-visible; falls back to visible with no JS / reduced motion) ---------- */
.course [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.course [data-reveal].is-visible{opacity:1;transform:none}

/* --- Responsive: breakpoints defined once --------------------- */
@media (max-width:900px){
  .course .cmp-row{grid-template-columns:1fr}
  .course .cmp-head{display:none}
  .course .cmp-c{justify-content:space-between;padding:9px 18px}
  .course .cmp-c:first-child{padding:16px 18px 8px;font-size:15px}
  .course .cmp-c[data-label]::before{content:attr(data-label);color:var(--text-muted);font-weight:500;font-size:13px}
  .course .cmp-row + .cmp-row{border-top:8px solid var(--surface-2)}
}
@media (max-width:768px){
  .course{--pad-y:64px;--pad-x:20px}
}
@media (max-width:480px){
  .course{--pad-y:56px;--pad-x:18px}
}
@media (prefers-reduced-motion: reduce){
  .course .acc-chev{transition:none!important}
  .course [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
}