/* ════════════════════════════════════════════════════════════════════════
   Public course page — what the course teaches and contains.
   templates/training/course_detail.html and training/_syllabus.html; the
   content comes from apps/training/syllabus.py. Same palette as the home page
   and the course form: white cards with a hairline border, Inter, the site's
   blue for accents and its green for ticks. Every class is `cd-`.
   ════════════════════════════════════════════════════════════════════════ */
.cd-page {
  --cd-surface: #ffffff;
  --cd-border: #e3e8ef;
  --cd-ink: #0f172a;
  --cd-text: #334155;
  --cd-muted: #5c6b7f;
  --cd-accent: #1568a8;
  --cd-accent-soft: #e6f1fa;
  --cd-green: #1e7b45;
  --cd-tint: #f6f9fb;
}

/* ── In the header: the course at a glance ──────────────────────────────── */
.cd-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 16px 0 22px;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.88);
}
.cd-stats li { display: inline-flex; align-items: center; gap: 8px; }
.cd-stats i { color: #4fc74a; font-size: 0.9rem; }

/* ── Cards ───────────────────────────────────────────────────────────── */
.cd-h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--cd-ink);
}
.cd-card {
  margin-bottom: 28px;
  padding: 22px 24px;
  border: 1px solid var(--cd-border);
  border-radius: 12px;
  background: var(--cd-surface);
}

.cd-learn__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.cd-learn__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--cd-text);
}
.cd-learn__list i { flex: 0 0 auto; margin-top: 4px; font-size: 0.85rem; color: var(--cd-green); }

/* ── Course content ──────────────────────────────────────────────────── */
/* `padding: 0` because the site gives every <section> 4rem top and bottom
   (styles.css), which left this one 64px below the right column's top. */
.cd-syllabus { margin-bottom: 28px; padding: 0; }
.cd-syllabus__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.cd-toggle-all {
  flex: 0 0 auto;
  padding: 6px 2px;
  border: 0;
  background: none;
  font: 600 0.9rem/1.2 "Inter", system-ui, sans-serif;
  color: var(--cd-accent);
  cursor: pointer;
}
.cd-toggle-all:hover { text-decoration: underline; }
.cd-toggle-all[hidden] { display: none; }

.cd-modules {
  border: 1px solid var(--cd-border);
  border-radius: 12px;
  background: var(--cd-surface);
  overflow: hidden;
}
.cd-module + .cd-module { border-top: 1px solid var(--cd-border); }
.cd-module__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "num   chev"
    "title chev"
    "meta  chev";
  align-items: center;
  column-gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}
.cd-module__head::-webkit-details-marker { display: none; }
.cd-module__head:hover { background: var(--cd-tint); }
.cd-module__head:focus-visible { outline: 3px solid rgba(21, 104, 168, 0.35); outline-offset: -3px; }
.cd-module__num {
  grid-area: num;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cd-accent);
}
.cd-module__title {
  grid-area: title;
  margin-top: 2px;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--cd-ink);
}
.cd-module__meta { grid-area: meta; margin-top: 4px; font-size: 0.84rem; color: var(--cd-muted); }
.cd-module__chev {
  grid-area: chev;
  font-size: 0.85rem;
  color: var(--cd-muted);
  transition: transform 0.2s ease;
}
.cd-module[open] > .cd-module__head .cd-module__chev { transform: rotate(180deg); }
.cd-module[open] > .cd-module__head { background: var(--cd-tint); }

.cd-module__body { padding: 4px 20px 16px; }
.cd-module__summary { margin: 10px 0 12px; font-size: 0.93rem; line-height: 1.6; color: var(--cd-text); }
.cd-module__empty { margin: 10px 0 4px; font-size: 0.9rem; color: var(--cd-muted); font-style: italic; }

.cd-lessons { margin: 0; padding: 0; list-style: none; }
.cd-lesson {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 10px;
  padding: 9px 0;
  border-top: 1px solid #eef2f6;
  font-size: 0.93rem;
}
.cd-lesson:first-child { border-top: 0; }
.cd-lesson__icon { color: var(--cd-muted); font-size: 0.85rem; text-align: center; }
.cd-lesson__title { color: var(--cd-ink); line-height: 1.45; }
.cd-lesson__meta { font-size: 0.82rem; color: var(--cd-muted); white-space: nowrap; }

/* ── Instructor ──────────────────────────────────────────────────────── */
.cd-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: var(--cd-accent-soft);
  color: var(--cd-accent);
  font-weight: 700;
}
.cd-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-avatar--sm { width: 28px; height: 28px; font-size: 0.72rem; }
.cd-avatar--lg { width: 76px; height: 76px; font-size: 1.5rem; }

/* In the header, under the stats. */
.cd-byline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -8px 0 22px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.8);
}
.cd-byline .cd-avatar { border: 1.5px solid rgba(255, 255, 255, 0.5); }
.cd-byline a { color: #ffffff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cd-byline a:hover { color: #4fc74a; }

.cd-instructor__top { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.cd-instructor__who { min-width: 0; }
.cd-instructor__name { margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.3; color: var(--cd-ink); }
.cd-instructor__name a { color: var(--cd-accent); text-decoration: none; }
.cd-instructor__name a:hover { text-decoration: underline; }
.cd-instructor__role { margin: 2px 0 0; font-size: 0.92rem; color: var(--cd-text); }
.cd-instructor__rating { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 0.9rem; color: var(--cd-ink); }
.cd-stars { color: #d97706; font-size: 0.82rem; letter-spacing: 1px; }
.cd-muted { color: var(--cd-muted); }

.cd-instructor__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 16px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid #eef2f6;
  list-style: none;
  font-size: 0.9rem;
  color: var(--cd-text);
}
.cd-instructor__facts li { display: inline-flex; align-items: center; gap: 8px; }
.cd-instructor__facts i { color: var(--cd-accent); font-size: 0.85rem; }
.cd-instructor__bio { margin: 14px 0 0; font-size: 0.95rem; line-height: 1.65; color: var(--cd-text); }

.cd-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.cd-tags li {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cd-accent-soft);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cd-accent);
}
.cd-instructor__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--cd-accent);
  text-decoration: none;
}
.cd-instructor__more:hover { text-decoration: underline; }

/* ── Right column: the instructor, then the fee card ─────────────────── */
.cd-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.cd-side .cd-card { margin-bottom: 0; }
.cd-side .cd-h2 { font-size: 1.15rem; }

.cd-price__label,
.cd-includes__title {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4fc74a;
}
.cd-price__now {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 8px 0 0;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.cd-price__now--soon { font-size: 1.3rem; }
.cd-price__was { font-size: 1.05rem; font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, 0.6); }
.cd-price__off {
  align-self: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #4fc74a;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  color: #0e2e55;
}
.cd-price__gst { position: relative; z-index: 2; margin: 6px 0 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.78); }
.cd-includes__title { margin-top: 1.6rem; }
.enroll__side-list.cd-includes { margin-top: 0.4rem; }

/* ── End of the page: enrol, or go back to the catalogue ─────────────── */
.cd-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 36px;
  /* Its own padding: the site gives every <section> 4rem. */
  padding: 22px 26px;
  border: 1px solid var(--cd-border);
  border-radius: 12px;
  background: var(--cd-surface);
}
.cd-end__text { min-width: 0; }
.cd-end__title { margin: 0; font-size: 1.2rem; font-weight: 800; line-height: 1.3; color: var(--cd-ink); }
.cd-end__sub { margin: 4px 0 0; font-size: 0.92rem; color: var(--cd-muted); }
.cd-end__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cd-end__actions form { margin: 0; }

@media (max-width: 575.98px) {
  .cd-end { padding: 18px; }
  .cd-end__actions { width: 100%; flex-direction: column-reverse; align-items: stretch; }
  .cd-end__actions .btn-cm,
  .cd-end__actions form,
  .cd-end__actions form .btn-cm { width: 100%; justify-content: center; }
}

/* One column (below 992px, styles.css): the right column follows the course
   content, instructor then fee, as on a wide screen. */

@media (max-width: 767.98px) {
  .cd-learn__list { grid-template-columns: minmax(0, 1fr); }
  .cd-card { padding: 18px; }
  .cd-module__head { padding: 14px 16px; }
  .cd-module__body { padding: 2px 16px 14px; }
  .cd-lesson { grid-template-columns: 24px minmax(0, 1fr); }
  .cd-lesson__meta { grid-column: 2; white-space: normal; }
  .cd-syllabus__head { align-items: flex-start; flex-direction: column; gap: 8px; }
}