/* ==========================================================================
   Course detail page — builds on tokens.css + styles.css
   ========================================================================== */

[hidden] { display: none !important; }

/* --- Hero --------------------------------------------------------------- */
.chero { padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) var(--section-y); }
.crumbs { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-7); color: var(--text-3); text-transform: none; letter-spacing: 0; }
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--cyan); }
.crumbs [aria-current] { color: var(--text-1); }

.chero__grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 5rem); align-items: start;
}
.chero__title { font-size: var(--fs-hero); line-height: var(--lh-tight); margin-top: var(--sp-3); }
.chero__lede { margin-top: var(--sp-5); font-size: var(--fs-lg); color: var(--text-2); max-width: 36rem; }
.chero__buy { margin-top: var(--sp-6); }
.chero__price {
  display: flex; align-items: baseline; gap: 2px; color: var(--text-0);
  font-weight: 600; font-size: var(--fs-2xl); letter-spacing: var(--track-display); line-height: 1;
}
.chero__price .price__currency { font-size: var(--fs-lg); color: var(--text-2); }
.chero__price .price__per { margin-left: var(--sp-2); font-size: var(--fs-sm); font-weight: 400; color: var(--text-2); letter-spacing: 0; }
.chero__buy .hero__cta { margin-top: var(--sp-4); }
.chero__soon { color: var(--amber); font-size: var(--fs-xl); }
.chero__fine { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-3); }
.chero .hero__facts { gap: var(--sp-5) var(--sp-6); }

/* --- Exam weight map (signature) ---------------------------------------- */
.wmap {
  border: 1px solid var(--line-1); border-radius: var(--r-lg); background: var(--bg-1);
  padding: var(--sp-5); display: grid; gap: var(--sp-4);
}
.wmap__head { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; color: var(--text-2); }
.wmap__head .mono:first-child { color: var(--cyan); }
.wmap__total { color: var(--text-3); }
.wmap__bar { display: flex; gap: 3px; height: 44px; }
.wmap__seg {
  display: flex; align-items: flex-end; padding: 0 0 4px 6px; min-width: 0;
  border-radius: var(--r-xs); background: var(--bg-2); border: 1px solid var(--line-1);
  color: var(--text-3); text-decoration: none; overflow: hidden;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.wmap__seg .mono { font-size: 10px; }
.wmap__seg:hover, .wmap__seg:focus-visible, .wmap__seg.is-hot { background: var(--cyan-dim); border-color: var(--cyan-line); color: var(--cyan); }
.wmap__legend { list-style: none; padding: 0; display: grid; gap: 2px; }
.wmap__legend li {
  display: grid; grid-template-columns: 2.4rem 1fr auto auto; gap: var(--sp-3); align-items: baseline;
  padding: var(--sp-2) var(--sp-2); border-radius: var(--r-xs); font-size: var(--fs-sm);
  transition: background var(--dur-fast);
}
.wmap__legend li.is-hot { background: var(--bg-2); }
.wmap__num { color: var(--cyan); }
.wmap__name { color: var(--text-1); }
.wmap__name:hover { color: var(--cyan); }
.wmap__pct { color: var(--text-0); min-width: 3ch; text-align: right; }
.wmap__lessons { color: var(--text-3); min-width: 7ch; text-align: right; }
.wmap__note { color: var(--text-3); padding-top: var(--sp-3); border-top: 1px solid var(--line-0); }

/* --- Outcomes ----------------------------------------------------------- */
.section--outcomes { background: var(--bg-1); }
.outcomes {
  list-style: none; padding: 0; counter-reset: out;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4);
}
.outcomes li {
  counter-increment: out; display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line-1); border-radius: var(--r-md); background: var(--bg-0);
  color: var(--text-1);
}
.outcomes li::before { content: counter(out, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--cyan); padding-top: 4px; }

/* --- Curriculum --------------------------------------------------------- */
.modules { display: grid; gap: var(--sp-3); }
.module { border: 1px solid var(--line-1); border-radius: var(--r-md); background: var(--bg-1); overflow: hidden; }
.module[open] { border-color: var(--line-2); }
.module__head {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 3rem 1fr 8rem 1.5rem; gap: var(--sp-4); align-items: center;
  padding: var(--sp-4) var(--sp-5);
}
.module__head::-webkit-details-marker { display: none; }
.module__head:hover { background: var(--bg-2); }
.module__num { color: var(--cyan); font-size: var(--fs-md); }
.module__title { display: grid; gap: 3px; color: var(--text-0); font-weight: 500; font-size: var(--fs-lg); }
.module__meta { font-size: 10px; color: var(--text-3); font-weight: 400; }
.module__weight { height: 4px; border-radius: 2px; background: var(--bg-3); overflow: hidden; }
.module__weight span { display: block; height: 100%; background: var(--cyan); border-radius: 2px; }
.module__chev { width: 10px; height: 10px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg); justify-self: center; transition: transform var(--dur-fast); }
.module[open] .module__chev { transform: rotate(-135deg); border-color: var(--cyan); }
.module__body { padding: 0 var(--sp-5) var(--sp-5); display: grid; gap: var(--sp-5); border-top: 1px solid var(--line-0); }
.module__block { display: grid; gap: var(--sp-2); padding-top: var(--sp-4); }
.module__label { color: var(--text-3); font-size: 10px; }
.module__objs { color: var(--text-3); font-size: 10px; }
.module__pending { padding-top: var(--sp-4); color: var(--text-2); font-size: var(--fs-sm); }

.lessons { list-style: none; padding: 0; display: grid; gap: 1px; background: var(--line-0); border: 1px solid var(--line-0); border-radius: var(--r-sm); overflow: hidden; }
.lessons li {
  display: grid; grid-template-columns: 3rem 1fr auto 4.5rem; gap: var(--sp-3); align-items: baseline;
  padding: var(--sp-3) var(--sp-4); background: var(--bg-0); font-size: var(--fs-sm);
}
.lesson__num { color: var(--text-3); }
.lessons--labs .lesson__num { color: var(--green); }
.lesson__title { color: var(--text-1); display: grid; gap: 2px; }
.lesson__env { color: var(--text-3); font-size: 10px; }
.lesson__obj { color: var(--text-3); font-size: 10px; white-space: nowrap; }
.lesson__min { color: var(--text-2); text-align: right; }

.objmap { margin-top: var(--sp-5); border: 1px solid var(--line-1); border-radius: var(--r-md); background: var(--bg-1); }
.objmap summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5); color: var(--cyan);
}
.objmap summary::-webkit-details-marker { display: none; }
.objmap__hint { color: var(--text-2); font-size: var(--fs-sm); }
.objmap__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.objmap__table th, .objmap__table td { text-align: left; padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line-0); vertical-align: top; }
.objmap__table thead th { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-3); font-weight: 400; }
.objmap__table tbody th { color: var(--cyan); font-weight: 400; white-space: nowrap; }
.objmap__table td { color: var(--text-1); }
.objmap__table td.mono { color: var(--text-3); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.objmap__table tr.is-gap td.mono { color: var(--amber); }

.objmap__note { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border: 1px solid rgba(224, 179, 90, 0.35); border-left: 2px solid var(--amber); border-radius: var(--r-sm); background: var(--amber-dim); color: var(--text-1); text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); line-height: 1.5; }

/* --- Readiness ---------------------------------------------------------- */
.section--readiness { background: var(--bg-1); }
.ready { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.ready__card { padding: var(--sp-5); border: 1px solid var(--line-1); border-radius: var(--r-md); background: var(--bg-0); display: grid; gap: var(--sp-2); align-content: start; }
.ready__card h3 { font-size: var(--fs-lg); }
.ready__card p { color: var(--text-2); font-size: var(--fs-sm); }
.ready__checkpoint {
  margin-top: var(--sp-5); display: grid; gap: 2px; padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-1); border-left: 2px solid var(--green); border-radius: var(--r-sm);
  background: var(--bg-0); color: var(--text-1);
}
.ready__checkpoint .mono { color: var(--text-3); font-size: 10px; }

/* --- About the exam ----------------------------------------------------- */
.exam__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-8); align-items: start; }
.exam__facts { margin-top: var(--sp-6); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-6); }
.exam__facts dt { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-3); }
.exam__facts dd { margin-top: var(--sp-1); color: var(--text-1); font-size: var(--fs-sm); }
.exam__version {
  margin-top: var(--sp-6); display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5);
  border: 1px solid rgba(224, 179, 90, 0.35); border-left: 2px solid var(--amber); border-radius: var(--r-sm); background: var(--amber-dim);
}
.exam__version .mono { color: var(--amber); }
.exam__version p { color: var(--text-1); font-size: var(--fs-sm); }
.exam__how { padding: var(--sp-5); border: 1px solid var(--line-1); border-radius: var(--r-md); background: var(--bg-1); display: grid; gap: var(--sp-4); }
.exam__how > .mono { color: var(--text-3); }
.exam__steps { padding-left: 0; list-style: none; counter-reset: step; display: grid; gap: var(--sp-3); }
.exam__steps li { counter-increment: step; display: grid; grid-template-columns: 2rem 1fr; gap: var(--sp-3); color: var(--text-1); font-size: var(--fs-sm); }
.exam__steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--cyan); padding-top: 3px; }
.exam__fine { font-size: var(--fs-xs); color: var(--text-3); padding-top: var(--sp-3); border-top: 1px solid var(--line-0); }

/* --- Audience ----------------------------------------------------------- */
.section--audience { background: var(--bg-1); }
.audience__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: start; }
.audience__grid .section__head { margin-bottom: 0; }
.audience__cards { display: grid; gap: var(--sp-4); }
.audience__card { padding: var(--sp-5); border: 1px solid var(--line-1); border-radius: var(--r-md); background: var(--bg-0); display: grid; gap: var(--sp-2); }
.audience__card .mono { color: var(--text-3); }
.audience__card p { color: var(--text-1); font-size: var(--fs-sm); }
.audience__card a { color: var(--cyan); font-size: var(--fs-sm); font-weight: 500; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .chero__grid, .exam__grid, .audience__grid { grid-template-columns: 1fr; }
  .outcomes, .ready { grid-template-columns: 1fr; }
  .module__head { grid-template-columns: 2.5rem 1fr 1.5rem; }
  .module__weight { display: none; }
}
@media (max-width: 600px) {
  .lessons li { grid-template-columns: 2.5rem 1fr; }
  .lesson__obj { grid-column: 2; }
  .lesson__min { grid-column: 2; text-align: left; }
  .wmap__legend li { grid-template-columns: 2.4rem 1fr auto; }
  .wmap__lessons { display: none; }
  .exam__facts { grid-template-columns: 1fr; }
  .objmap__table td.mono { white-space: normal; }
}