/* ============================================================
   course.css — course-specific bits only.
   Shared components (btn, chip, card, grid, reel, faq, form,
   stat-sticker, section-*) live in site.css. Mobile-first.
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-small);
}
.breadcrumb .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
  color: var(--c-ink-2);
}
.breadcrumb a { color: var(--c-ink-2); text-decoration: none; font-weight: var(--fw-semi); }
.breadcrumb a:hover { color: var(--c-accent); }
.breadcrumb span[aria-hidden] { color: var(--c-line-strong); }
.breadcrumb [aria-current="page"] { color: var(--c-ink); font-weight: var(--fw-semi); }

/* ---------- Hero ---------- */
.course-hero { padding-block: clamp(36px, 6vw, 64px); }
.course-hero-in {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}
.course-hero-copy h1 { margin-bottom: var(--sp-4); }
.course-hero-copy .lead { margin-bottom: var(--sp-5); }
.course-hero-cta { gap: var(--sp-3); }

.course-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
@media (min-width: 900px) {
  .course-hero-in { grid-template-columns: 1.4fr 1fr; gap: var(--sp-7); }
  .course-hero-stats { gap: var(--sp-5); }
}

/* ---------- Reading column ---------- */
.lead-body p { color: var(--c-ink-2); font-size: var(--fs-lead); }

/* ---------- Who it's for ---------- */
.who-for { margin-top: var(--sp-6); }
.who-for-head {
  font-size: var(--fs-small);
  font-weight: var(--fw-heavy);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink-2);
  margin-bottom: var(--sp-3);
}

/* ---------- Programme structure cards ---------- */
.struct-card { display: grid; gap: var(--sp-2); align-content: start; }
.struct-card h3 { margin: 0; font-size: var(--fs-h4); }
.struct-meta {
  display: inline-block;
  align-self: start;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-heavy);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-accent);
}

/* ---------- Highlights checklist ---------- */
.highlight-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 720px) { .highlight-list { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-6); } }
.highlight-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-weight: var(--fw-semi);
}
.hl-tick {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-wa-bg);
  color: var(--c-wa-ink);
  margin-top: 1px;
}

/* ---------- Programme overview cards (classroom-programs) ---------- */
.prog-card { display: flex; flex-direction: column; gap: var(--sp-2); text-decoration: none; color: inherit; }
.prog-card .prog-tag {
  font-size: var(--fs-tiny);
  font-weight: var(--fw-heavy);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.prog-card h3 {
  margin: 0;
  font-size: var(--fs-h4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.prog-card .prog-arrow { flex: 0 0 auto; color: var(--c-accent); transition: transform var(--speed) var(--ease); }
.prog-card:hover .prog-arrow { transform: translateX(3px); }
.prog-card p { margin: 0; color: var(--c-ink-2); }

.prog-group + .prog-group { margin-top: var(--sp-8); }
.prog-group-head { margin-bottom: var(--sp-5); }
.prog-group-head h2 { margin-bottom: var(--sp-2); }

/* ---------- Demo CTA band ---------- */
.course-cta-in {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}
.course-cta-copy .lead { color: var(--c-dark-muted); }
.course-cta-form { background: var(--ground); color: var(--c-ink); }
.course-cta-form .form-note { color: var(--c-ink-2); }
@media (min-width: 900px) {
  .course-cta-in { grid-template-columns: 1fr 1.05fr; gap: var(--sp-8); }
}