/* =============================================================================
   FREE COURSES: course pages and the /courses/ hub (loaded only there).
   Built pages come from build-courses.py; bump COURSE_ASSET_V there after editing this file.
   Everything else (fonts, colors, article text, cards, buttons) comes from /styles.css.
   ========================================================================== */

/* ---------- layout: article + sticky module list on wide screens ---------- */
.course-side{ display:none; }
@media (min-width:1180px){
  .course-layout{ display:grid; grid-template-columns:minmax(0,730px) 250px; gap:48px; justify-content:center; align-items:start; }
  .course-layout .article{ margin:0; }
  .course-side{ display:block; position:sticky; top:84px; }
  .course-toc-inline{ display:none; }
}

/* ---------- breadcrumb ---------- */
.crumbs{ font-size:14.5px; font-weight:600; color:var(--muted); margin-bottom:14px; }
.crumbs a{ color:var(--muted); }
.crumbs a:hover{ color:var(--primary); }
.crumbs .sep{ margin:0 7px; color:#a9b6c1; }

/* ---------- video (thumbnail first; the real player loads on click) ---------- */
.course-video{ margin:1.8em 0 0; scroll-margin-top:76px; }
.article-body a.course-player{ display:block; position:relative; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow); text-decoration:none; }
.course-player img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:0; transition:opacity .2s ease; }
a.course-player:hover img{ opacity:.88; }
.course-player .ep-play{ width:64px; height:64px; transition:transform .15s ease; }
a.course-player:hover .ep-play{ transform:translate(-50%,-50%) scale(1.06); }
.course-player .yt-label{ position:absolute; left:14px; bottom:12px; display:inline-flex; align-items:center; gap:6px; color:#fff;
  font-size:13.5px; font-weight:600; background:rgba(15,25,35,.62); padding:5px 11px; border-radius:999px; }
a.course-player:focus-visible{ outline:3px solid var(--primary); outline-offset:3px; }
div.course-player{ position:relative; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.course-player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.article-body .course-sub{ font-size:15px; color:var(--muted); margin:12px 0 0; }
.article-body .course-sub a{ font-weight:700; }

/* ---------- module list ---------- */
.course-toc{ background:var(--wash-soft); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px 10px; }
.course-toc-inline{ margin:1.8em 0 2em; }
.course-toc .toc-title{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--primary-dark); margin:0 0 6px; }
.course-toc ol{ list-style:none; margin:0; padding:0; counter-reset:m; }
.course-toc li{ display:flex; gap:10px; align-items:baseline; margin:0; padding:8px 0; border-top:1px solid var(--line); font-size:15.5px; line-height:1.35; }
.course-toc li:first-child{ border-top:0; }
.course-toc li::before{ counter-increment:m; content:counter(m); min-width:1.1em; font-weight:700; color:var(--muted-2); font-variant-numeric:tabular-nums; }
.course-toc a{ flex:1; color:var(--navy); text-decoration:none; }
.course-toc a:hover{ color:var(--primary); text-decoration:underline; }
.course-toc a.current{ color:var(--primary); font-weight:700; }
.course-toc .t{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.course-toc-side li{ font-size:14px; padding:7px 0; }

/* ---------- module headings + "Watch this part" ---------- */
.article-body h2, .article-body h3{ scroll-margin-top:80px; }
.article-body .course-jump-wrap{ margin:-.15em 0 1.1em; }
.article-body a.course-jump{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; line-height:1;
  color:var(--primary-dark); background:var(--wash-soft); border:1px solid var(--line); border-radius:999px; padding:7px 13px;
  text-decoration:none; transition:background .15s ease, border-color .15s ease; }
.article-body a.course-jump:hover{ background:var(--wash); border-color:#c7d6e2; }
.article-body a.course-jump svg{ color:var(--orange); }

/* ---------- components: takeaway / warning / note callouts ---------- */
.article-body .cc{ margin:1.4em 0 1.6em; padding:16px 20px 4px; border-radius:var(--radius-sm); border-left:4px solid; font-size:17px; line-height:1.65; }
.article-body .cc .cc-label{ margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.article-body .cc p{ margin:0 0 .8em; }
.article-body .cc ul, .article-body .cc ol{ margin:0 0 .9em; }
.article-body .cc-takeaway{ background:#e8f1f7; border-color:var(--primary); font-size:18px; }
.article-body .cc-takeaway .cc-label{ color:var(--primary-dark); }
.article-body .cc-takeaway p{ color:var(--navy); }
.article-body .cc-warning{ background:#fff6f0; border-color:var(--orange); }
.article-body .cc-warning .cc-label{ color:var(--orange-dark); }
.article-body .cc-note{ background:#f4f6f8; border-color:#c3ccd4; font-size:16.5px; }
.article-body .cc-note .cc-label{ color:var(--muted); }
.article-body .course-module + .course-jump-wrap + .cc-takeaway{ margin-top:.4em; }

/* ---------- components: big-number stats (side by side when stacked in the source) ---------- */
.article-body .cc-stats{ display:flex; flex-wrap:wrap; gap:14px; margin:1.4em 0 1.6em; }
.article-body .cc-stat{ display:flex; flex-direction:column; gap:6px; flex:0 1 auto; min-width:180px; max-width:100%; padding:16px 20px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); }
.article-body .cc-stat-label{ max-width:26ch; }
.article-body .cc-stat-num{ white-space:nowrap; font-family:var(--display); font-size:46px; font-weight:800; line-height:1; letter-spacing:-.02em; color:var(--primary); font-variant-numeric:tabular-nums; }
.article-body .cc-stat-label{ font-size:15px; font-weight:600; line-height:1.35; color:var(--navy); }

/* ---------- components: numbered steps inside a module become step cards ---------- */
.article-body ol.steps{ list-style:none; padding:0; margin:1.2em 0 1.6em; display:flex; flex-direction:column; gap:10px; }
.article-body ol.steps > li{ display:flex; gap:16px; align-items:flex-start; margin:0; padding:14px 18px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-sm); box-shadow:0 1px 2px rgba(31,58,77,.04); }
.article-body ol.steps .step-num{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--wash); color:var(--primary-dark);
  font-family:var(--display); font-weight:800; font-size:16px; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.article-body ol.steps .step-body{ flex:1; min-width:0; font-size:17px; line-height:1.6; }
.article-body ol.steps .step-body ul, .article-body ol.steps .step-body ol{ margin:.5em 0 0; }

/* ---------- components: collapsible extra detail ---------- */
.article-body details.cc-details{ margin:1.4em 0; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; }
.article-body details.cc-details summary{ cursor:pointer; list-style:none; padding:13px 18px; font-weight:700; color:var(--navy); display:flex; align-items:center; gap:10px; }
.article-body details.cc-details summary::-webkit-details-marker{ display:none; }
.article-body details.cc-details summary::before{ content:""; flex:none; width:7px; height:7px; border-right:2px solid var(--primary); border-bottom:2px solid var(--primary);
  transform:rotate(-45deg); transition:transform .15s ease; }
.article-body details.cc-details[open] summary::before{ transform:rotate(45deg); }
.article-body details.cc-details summary:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; border-radius:var(--radius-sm); }
.article-body .cc-details-body{ padding:0 18px 6px 35px; }

/* ---------- screenshots: portrait ones stay a readable size, centered ---------- */
.article-body figure.tall img{ display:block; width:100%; max-width:420px; margin:0 auto; }

/* ---------- components: diagrams (SVG pasted inline so they use the site font) ---------- */
.article-body figure.cc-figure{ margin:1.8em auto; max-width:720px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); }
.article-body figure.cc-figure svg{ display:block; width:100%; height:auto; }
.article-body figure.cc-figure svg text{ font-family:var(--sans); }
.article-body figure.cc-figure figcaption{ margin-top:10px; }

/* ---------- components: a second video ([!VIDEO] id | label), click to play ---------- */
.article-body figure.cc-video{ margin:1.6em 0 1.8em; max-width:560px; }
.article-body figure.cc-video .course-player .ep-play{ width:54px; height:54px; }
.article-body figure.cc-video figcaption{ text-align:left; color:var(--muted); font-size:15px; margin-top:10px; }

/* ---------- call to action (end of every course, and the hub) ---------- */
.course-cta{ margin:3em 0 0; padding:28px 28px 26px; background:var(--wash-soft); border:1px solid var(--line); border-radius:var(--radius); }
.course-cta h2{ font-size:26px; margin:0 0 8px; }
.course-cta p{ color:var(--muted); font-size:16.5px; line-height:1.6; margin:0 0 18px; max-width:60ch; }
.course-cta .btn svg{ flex:none; }
.course-cta .cta-alt{ margin:24px 0 12px; padding-top:20px; border-top:1px solid var(--line); font-size:15.5px; }
.course-hub-cta{ max-width:760px; margin:0 auto; }
.course-hub-cta .course-cta{ margin:0; }

/* ---------- hub: topic filter pills ---------- */
.course-filters{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
.course-filters[hidden]{ display:none; }
.cf-pill{ display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:999px; border:1px solid var(--line); background:#fff;
  font:inherit; font-size:14.5px; font-weight:600; color:var(--navy); cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease; }
.cf-pill:hover{ border-color:#c7d6e2; background:var(--wash-soft); }
.cf-pill[aria-pressed="true"]{ background:var(--navy); border-color:var(--navy); color:#fff; }
.cf-pill:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; }
.cf-count{ font-size:12.5px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.cf-pill[aria-pressed="true"] .cf-count{ color:#b9cbd8; }
.course-card[hidden]{ display:none; }

/* ---------- hub cards ---------- */
.course-card .cc-thumb{ position:relative; aspect-ratio:16/9; background:#0f1923; overflow:hidden; }
.course-card .cc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
a.course-card:hover .cc-thumb img{ transform:scale(1.03); }
.course-card .cc-runtime{ position:absolute; right:10px; bottom:10px; background:rgba(15,25,35,.78); color:#fff; font-size:12.5px; font-weight:700;
  padding:3px 8px; border-radius:6px; font-variant-numeric:tabular-nums; }
.course-card .cc-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }

@media (max-width:600px){
  .article-body .cc{ padding:14px 16px 2px; }
  .article-body .cc-stat-num{ font-size:40px; }
  .article-body ol.steps > li{ gap:12px; padding:12px 14px; }
  .article-body ol.steps .step-num{ width:30px; height:30px; font-size:15px; }
  .article-body figure.cc-figure{ padding:8px; margin-left:-4px; margin-right:-4px; }
  .course-cta{ padding:22px 20px; }
  .course-cta h2{ font-size:23px; }
  .course-player .ep-play{ width:56px; height:56px; }
}
@media (prefers-reduced-motion: reduce){
  .course-player img, .course-player .ep-play, .course-card .cc-thumb img, .article-body a.course-jump,
  .article-body details.cc-details summary::before, .cf-pill{ transition:none; }
  a.course-card:hover .cc-thumb img{ transform:none; }
}