/* ==========================================================================
   Course Detail Page — premium education layout
   Uses the brand tokens from style.css / site.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* Intro block CTA (button styling lives with the banner in site.css) */
.cd-intro-cta { margin-top: 26px; }
.cd-intro-highlight { color: var(--primary); }

/* --------------------------------------------------------------------------
   Body shell
   -------------------------------------------------------------------------- */
.cd-body {
  position: relative;
  padding: 90px 0 100px;
  background:
    radial-gradient(circle at 96% 6%, rgba(245, 166, 35, 0.1), transparent 30%),
    url('../images/edu-doodles.svg') repeat,
    var(--theme-light-bg);
  background-size: auto, 360px 360px, auto;
}

.cd-block { margin-bottom: 72px; }
.cd-block:last-of-type { margin-bottom: 56px; }

.cd-h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  font-weight: 900;
  line-height: 1.2;
  color: var(--ink);
  margin: 10px 0 18px;
}
.cd-block > .cd-h2:first-child { margin-top: 0; }
.cd-h2 em {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  color: var(--primary);
}
.cd-text-last { margin-bottom: 0; }
.cd-text {
  font-size: 1.02rem;
  line-height: 1.9;
  color: #5b5257;
  margin-bottom: 26px;
}

/* --------------------------------------------------------------------------
   Learning modules
   -------------------------------------------------------------------------- */
.cd-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}
.cd-module {
  position: relative;
  padding: 26px 24px 24px;
  background: var(--theme-light-card);
  border: 1px solid var(--theme-light-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 44px -34px rgba(23, 7, 10, 0.6);
  overflow: hidden;
  transition: var(--transition);
}
.cd-module::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary), var(--accent-gold));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s ease;
}
.cd-module:hover {
  transform: translateY(-5px);
  border-color: rgba(211, 24, 38, 0.26);
  box-shadow: 0 30px 54px -32px rgba(211, 24, 38, 0.45);
}
.cd-module:hover::before { transform: scaleY(1); }

.cd-module-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px dashed rgba(211, 24, 38, 0.18);
}
.cd-module-ico {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #FFFFFF;
  font-size: 1.05rem;
  box-shadow: 0 12px 24px -14px var(--primary-glow);
}
.cd-module-no {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.8rem;
  color: var(--accent-gold-dark);
  line-height: 1;
  margin-bottom: 5px;
}
.cd-module-title {
  font-family: var(--font-edu);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}

/* Chevron: only used by the mobile accordion below */
.cd-module-chev { display: none; }

.cd-module-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.cd-module-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.94rem;
  line-height: 1.55;
  color: #574e52;
}
.cd-module-list i {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 2px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 166, 35, 0.18);
  color: var(--accent-gold-dark);
  font-size: 0.6rem;
}

/* Fallback numbered list for courses without grouped content */
.cd-steps {
  list-style: none;
  counter-reset: cdstep;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.cd-steps li {
  counter-increment: cdstep;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--theme-light-card);
  border: 1px solid var(--theme-light-border);
  border-radius: var(--radius-md);
  font-family: var(--font-edu);
  font-weight: 700;
  color: var(--ink);
  transition: var(--transition);
}
.cd-steps li::before {
  content: counter(cdstep, decimal-leading-zero);
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 900;
}
.cd-steps li:hover { transform: translateX(5px); border-color: rgba(211, 24, 38, 0.3); }
.cd-steps-two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cd-steps-two-columns li:last-child {
  grid-column: 1 / -1;
  width: calc((100% - 12px) / 2);
  justify-self: center;
}
.cd-steps-three-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.cd-steps-three-columns li {
  gap: 10px;
  padding: 13px 14px;
  font-size: 0.9rem;
}
.cd-steps-three-columns li::before {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  font-size: 0.78rem;
}

/* --------------------------------------------------------------------------
   Tools strip
   -------------------------------------------------------------------------- */
.cd-tools {
  margin-top: 26px;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(211, 24, 38, 0.05), rgba(245, 166, 35, 0.09));
  border: 1px dashed rgba(211, 24, 38, 0.22);
}
.cd-tools-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  font-family: var(--font-edu);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}
.cd-tools-list { display: flex; flex-wrap: wrap; gap: 9px; }
.cd-tool {
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  background: #FFFFFF;
  border: 1px solid rgba(211, 24, 38, 0.14);
  font-family: var(--font-edu);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
  transition: var(--transition);
}
.cd-tool:hover { background: var(--primary); color: #FFFFFF; border-color: var(--primary); }

/* --------------------------------------------------------------------------
   Careers
   -------------------------------------------------------------------------- */
.cd-roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.cd-role {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--theme-light-card);
  border: 1px solid var(--theme-light-border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  font-family: var(--font-edu);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ink);
  box-shadow: 0 14px 30px -28px rgba(23, 7, 10, 0.6);
  transition: var(--transition);
}
.cd-role i { color: #16A34A; font-size: 0.95rem; }
.cd-role:hover {
  transform: translateY(-3px);
  border-left-color: var(--accent-gold);
  box-shadow: 0 22px 38px -26px rgba(211, 24, 38, 0.45);
}

/* --------------------------------------------------------------------------
   Who can join
   -------------------------------------------------------------------------- */
.cd-audience {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.cd-aud {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 16px;
  text-align: center;
  background: var(--theme-light-card);
  border: 1px solid var(--theme-light-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 38px -32px rgba(23, 7, 10, 0.6);
  transition: var(--transition);
}
.cd-aud-ico {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-subtle);
  color: var(--primary);
  font-size: 1.2rem;
  transition: var(--transition);
}
.cd-aud-label {
  font-family: var(--font-edu);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.4;
}
.cd-aud:hover {
  transform: translateY(-5px);
  border-color: rgba(211, 24, 38, 0.28);
}
.cd-aud:hover .cd-aud-ico {
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 14px 26px -12px var(--primary-glow);
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */
.cd-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 44px 36px 48px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--theme-light-border);
  background:
    radial-gradient(ellipse at 0% 100%, rgba(211, 24, 38, 0.19), transparent 52%),
    radial-gradient(ellipse at 100% 0%, rgba(245, 166, 35, 0.28), transparent 52%),
    linear-gradient(115deg, #FFF0ED 0%, #FFF8E9 52%, #FFF0D5 100%);
  box-shadow: var(--shadow-md);
  text-align: center;
}

/* Low-contrast education icons decorate opposite corners of the CTA */
.cd-final-doodle {
  position: absolute;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  width: 116px;
  height: 100px;
  color: rgba(211, 24, 38, 0.13);
}
.cd-final-doodle i { font-size: 3.5rem; }
.cd-final-doodle-l {
  top: 0;
  left: 0;
  transform: rotate(-14deg);
}
.cd-final-doodle-r {
  right: 0;
  bottom: 0;
  color: rgba(184, 119, 17, 0.16);
  transform: rotate(10deg);
}

.cd-final-copy {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}
.cd-final-copy h2 {
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--text-heading);
  margin: 0 0 10px;
}
.cd-final-copy p {
  max-width: 470px;
  margin: 0 auto;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.cd-final-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 11px 26px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #FFFFFF;
  font-family: var(--font-edu);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: var(--shadow-brand);
  transition: var(--transition);
}
.cd-final-btn i { font-size: 0.78rem; transition: var(--transition); }
.cd-final-btn:hover {
  background: var(--primary-hover);
  transform: translateY(-3px);
}
.cd-final-btn:hover i { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .cd-body { padding: 70px 0 80px; }
  .cd-block { margin-bottom: 56px; }
  .cd-final { padding: 38px 28px 42px; }
  .cd-steps-three-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
  .cd-module { padding: 22px 20px; }
  .cd-final { padding: 30px 20px 34px; }
  .cd-final-copy h2 { font-size: 1.4rem; }
  .cd-final-copy p { font-size: 0.84rem; }
  .cd-final-btn { width: 100%; justify-content: center; margin-top: 16px; }
  .cd-final-doodle { width: 76px; height: 70px; }
  .cd-final-doodle i { font-size: 2.4rem; }
}

/* --------------------------------------------------------------------------
   Learn-group cards collapse into an accordion on phones: only the heading
   stays visible and the list opens on tap (JS adds .is-accordion/.is-open).
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .cd-modules.is-accordion { gap: 12px; }
  .cd-modules.is-accordion .cd-module { padding: 0; }
  .cd-modules.is-accordion .cd-module:hover { transform: none; box-shadow: 0 20px 44px -34px rgba(23, 7, 10, 0.6); }
  .cd-modules.is-accordion .cd-module.is-open { border-color: rgba(211, 24, 38, 0.26); }
  .cd-modules.is-accordion .cd-module.is-open::before { transform: scaleY(1); }

  .cd-modules.is-accordion .cd-module-head {
    align-items: center;
    gap: 10px;
    padding: 15px 16px;
    margin: 0;
    border-bottom: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .cd-modules.is-accordion .cd-module-head:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -3px;
    border-radius: var(--radius-lg);
  }
  .cd-modules.is-accordion .cd-module-ico { display: none; }
  .cd-modules.is-accordion .cd-module-heading {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
  }
  .cd-modules.is-accordion .cd-module-no { margin-bottom: 0; font-size: 0.85rem; font-weight: 700; }
  .cd-modules.is-accordion .cd-module-title { font-size: 0.95rem; }

  .cd-modules.is-accordion .cd-module-chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(211, 24, 38, 0.08);
    color: var(--primary);
    font-size: 0.72rem;
    transition: transform 0.35s ease, background 0.3s ease, color 0.3s ease;
  }
  .cd-modules.is-accordion .cd-module.is-open .cd-module-chev {
    transform: rotate(180deg);
    background: var(--primary);
    color: #FFFFFF;
  }

  .cd-modules.is-accordion .cd-module-list {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 16px;
    transition: max-height 0.45s ease, opacity 0.3s ease, padding 0.45s ease;
  }
  .cd-modules.is-accordion .cd-module.is-open .cd-module-list {
    max-height: 640px;
    opacity: 1;
    padding: 14px 16px 18px;
  }
  .cd-modules.is-accordion .cd-module.is-open .cd-module-head {
    border-bottom: 1px dashed rgba(211, 24, 38, 0.18);
  }
}

/* --------------------------------------------------------------------------
   Phones: every content section on the course pages reads centre-aligned
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .cd-body .cd-block { text-align: center; }
  .cd-body .section-kicker { justify-content: center; }
  .cd-intro-title,
  .cd-h2 { text-align: center; }
  .cd-text,
  .cd-intro-text {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }
  .cd-intro-cta { display: flex; justify-content: center; }

  /* Plain curriculum list */
  .cd-steps li {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 18px 16px;
  }
  .cd-steps li:hover { transform: none; }
  /* One card per row on phones - the odd last item gets the same full-width
     white card as the rest instead of a half-width one */
  .cd-steps-two-columns,
  .cd-steps-three-columns { grid-template-columns: minmax(0, 1fr); }
  .cd-steps-two-columns li:last-child {
    grid-column: auto;
    width: auto;
    justify-self: stretch;
  }

  /* Tools & platforms strip */
  .cd-tools { text-align: center; }
  .cd-tools-label { justify-content: center; }
  .cd-tools-list { justify-content: center; }

  /* Career roles */
  /* Tick pinned to a fixed left position so all the ticks line up in one
     column, while the role name stays centred in the chip */
  .cd-role {
    position: relative;
    justify-content: center;
    text-align: center;
    padding-left: 60px;
    padding-right: 60px;
    border-left: 1px solid var(--theme-light-border);
    border-top: 3px solid var(--primary);
  }
  .cd-role i {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
  }
  .cd-role:hover { border-left-color: var(--theme-light-border); border-top-color: var(--accent-gold); }

  /* Learn-group accordion: title centred, chevron parked on the right */
  .cd-modules.is-accordion .cd-module-head {
    position: relative;
    justify-content: center;
    padding-left: 48px;
    padding-right: 48px;
  }
  /* "01" sits inline right before the title so the whole line centres as one
     block instead of the number drifting to the far left */
  .cd-modules.is-accordion .cd-module-heading {
    display: block;
    flex: 1 1 auto;
    text-align: center;
  }
  .cd-modules.is-accordion .cd-module-no {
    display: inline;
    margin: 0 6px 0 0;
    vertical-align: baseline;
  }
  .cd-modules.is-accordion .cd-module-title { display: inline; }
  .cd-modules.is-accordion .cd-module-chev {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }
  .cd-modules.is-accordion .cd-module.is-open .cd-module-chev {
    transform: translateY(-50%) rotate(180deg);
  }
  /* Same idea inside the accordion: ticks in one column, labels centred */
  .cd-module-list li {
    position: relative;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-left: 30px;
    padding-right: 30px;
  }
  .cd-module-list i {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: 0;
    transform: translateY(-50%);
  }

  /* Sticky enquiry card: headings centred, fields stay left for usability */
  .cd-body .sticky-top > h4,
  .cd-body .sticky-top > p { text-align: center; }
}