/* ==========================================================================
   Lessons — path overview (/cybersecurity-lessons) and lesson page (/<slug>)
   ========================================================================== */

/* ---- Progress panel ---- */
.path-progress {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-04);
  max-width: 42rem;
  margin-top: var(--cds-spacing-07);
}

.path-progress__bar {
  height: 0.5rem;
  background: var(--cds-layer-accent);
  overflow: hidden;
}

.path-progress__fill {
  width: 0;
  height: 100%;
  background: var(--cds-interactive);
  transition: width 600ms var(--cds-ease-expressive);
}

.path-progress__text {
  color: var(--cds-text-secondary);
}

.path-progress__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-spacing-03);
}

.path-progress__done {
  font-weight: 600;
  color: var(--cds-support-success);
}

/* ---- Level navigation ---- */
.level-nav {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--cds-spacing-09);
  background: var(--cds-border-subtle);
  border: 1px solid var(--cds-border-subtle);
}

.level-nav__link {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-02);
  padding: var(--cds-spacing-05);
  color: var(--cds-text-primary);
  background: var(--cds-layer);
}

.level-nav__link:hover {
  color: var(--cds-text-primary);
  text-decoration: none;
  background: var(--cds-layer-hover);
}

.level-nav__num {
  color: var(--cds-interactive);
}

/* ---- Levels and modules ---- */
.level + .level {
  margin-top: var(--cds-spacing-11);
}

.level__header {
  max-width: 46rem;
  padding-bottom: var(--cds-spacing-05);
  margin-bottom: var(--cds-spacing-07);
  border-bottom: 1px solid var(--cds-border-strong);
}

.level__eyebrow,
.module__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-spacing-03);
  margin-bottom: var(--cds-spacing-03);
  color: var(--cds-text-secondary);
}

/* The level (Beginner/Intermediate/Advanced) now rides as a small badge on each module,
   because modules are grouped by track (Python, Java, …) rather than by level. */
.module__level {
  text-transform: none;
  letter-spacing: 0;
}

.level__title {
  margin-bottom: var(--cds-spacing-03);
}

.level__summary,
.module__summary {
  color: var(--cds-text-secondary);
}

.level__modules {
  display: grid;
  gap: var(--cds-spacing-08);
}

.module__title {
  margin-bottom: var(--cds-spacing-02);
}

.module__summary {
  max-width: 46rem;
  margin-bottom: var(--cds-spacing-05);
}

/* ---- Lesson rows ---- */
.lesson-rows {
  border-top: 1px solid var(--cds-border-subtle);
}

.lesson-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--cds-spacing-02) var(--cds-spacing-05);
  align-items: start;
  padding: var(--cds-spacing-05);
  color: var(--cds-text-primary);
  background: var(--cds-layer);
  border-bottom: 1px solid var(--cds-border-subtle);
}

.lesson-row:hover {
  color: var(--cds-text-primary);
  text-decoration: none;
  background: var(--cds-layer-hover);
}

.lesson-row__index {
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--cds-interactive);
}

.lesson-row--done .lesson-row__index {
  color: var(--cds-support-success);
}

.lesson-row__text {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-02);
}

.lesson-row__title {
  font-size: 1.125rem;
  line-height: 1.625rem;
  font-weight: 600;
}

.lesson-row:hover .lesson-row__title {
  text-decoration: underline;
}

/* The lesson badge chip (.lesson-badge) is styled in components/tag.css, which every page
   loads — the same chip also marks topics on the home page and hub. */

.lesson-row__summary {
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--cds-text-secondary);
}

.lesson-row__minutes {
  grid-column: 2;
  color: var(--cds-text-helper);
}

@media (min-width: 42rem) {
  .lesson-row {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  }

  .lesson-row__minutes {
    grid-column: 3;
    padding-top: var(--cds-spacing-02);
    white-space: nowrap;
  }
}

@media (max-width: 41.99rem) {
  .level-nav {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Lesson page ---- */
.lesson-header {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-04);
  max-width: 46rem;
  margin-bottom: var(--cds-spacing-08);
}

.lesson-header__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-spacing-03);
}

.lesson-header__title {
  overflow-wrap: break-word;
}

.lesson-header__lead {
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--cds-text-secondary);
}

.lesson-header__meta {
  color: var(--cds-text-helper);
}

.lesson-layout {
  display: grid;
  gap: var(--cds-spacing-07);
  grid-template-columns: minmax(0, 1fr);
}

.lesson-toc {
  padding: var(--cds-spacing-05);
  background: var(--cds-layer);
  border-left: 3px solid var(--cds-interactive);
}

.lesson-toc__title {
  margin-bottom: var(--cds-spacing-03);
  color: var(--cds-text-secondary);
}

.lesson-toc ol {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-03);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.lesson-toc a {
  color: var(--cds-text-primary);
}

.lesson-toc a:hover {
  color: var(--cds-link-primary);
}

.lesson-main {
  max-width: 46rem;
}

.lesson-main > .prose {
  margin-top: var(--cds-spacing-08);
}

.lesson-objectives {
  padding: var(--cds-spacing-05) var(--cds-spacing-06);
  background: var(--cds-layer);
  border: 1px solid var(--cds-border-subtle);
}

.lesson-objectives ul {
  margin-top: var(--cds-spacing-04);
  padding-left: var(--cds-spacing-05);
  list-style: square;
}

.lesson-objectives li + li {
  margin-top: var(--cds-spacing-03);
}

.lesson-objectives li::marker {
  color: var(--cds-support-success);
}

.lesson-section {
  margin-top: var(--cds-spacing-09);
}

.lesson-section__title {
  margin-bottom: var(--cds-spacing-05);
}

.key-terms {
  display: grid;
  gap: 1px;
  background: var(--cds-border-subtle);
  border: 1px solid var(--cds-border-subtle);
}

.key-terms dt {
  padding: var(--cds-spacing-04) var(--cds-spacing-05) 0;
  font-weight: 600;
  background: var(--cds-layer);
}

.key-terms dd {
  padding: var(--cds-spacing-02) var(--cds-spacing-05) var(--cds-spacing-04);
  margin-top: -1px;
  color: var(--cds-text-secondary);
  background: var(--cds-layer);
}

.lesson-exercise {
  padding: var(--cds-spacing-05) var(--cds-spacing-06);
  background: var(--cds-layer);
  border-left: 3px solid var(--cds-support-success);
  line-height: 1.75rem;
}

/* Quiz */
.quiz__question + .quiz__question {
  margin-top: var(--cds-spacing-07);
}

.quiz__prompt {
  margin-bottom: var(--cds-spacing-04);
  font-weight: 600;
}

.quiz__options {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-03);
}

.quiz__option {
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  text-align: left;
  color: var(--cds-text-primary);
  background: var(--cds-layer);
  border: 1px solid var(--cds-border-strong);
  transition: background var(--cds-duration-fast) var(--cds-ease-productive);
}

.quiz__option:hover:not(:disabled) {
  background: var(--cds-layer-hover);
}

.quiz__option:disabled {
  cursor: default;
}

.quiz__option--correct {
  border-color: var(--cds-support-success);
  box-shadow: inset 4px 0 0 var(--cds-support-success);
}

.quiz__option--wrong {
  border-color: var(--cds-support-error);
  box-shadow: inset 4px 0 0 var(--cds-support-error);
}

.quiz__feedback {
  margin-top: var(--cds-spacing-04);
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  background: var(--cds-layer);
  border-left: 3px solid var(--cds-border-strong);
}

.quiz__feedback--correct {
  border-left-color: var(--cds-support-success);
}

.quiz__feedback--wrong {
  border-left-color: var(--cds-support-error);
}

.lesson-complete {
  margin-top: var(--cds-spacing-09);
  padding-top: var(--cds-spacing-06);
  border-top: 1px solid var(--cds-border-subtle);
}

/* Previous / next */
.pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-top: var(--cds-spacing-07);
  background: var(--cds-border-subtle);
  border: 1px solid var(--cds-border-subtle);
}

.pager__link {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-02);
  padding: var(--cds-spacing-05);
  color: var(--cds-text-primary);
  background: var(--cds-layer);
}

.pager__link:hover {
  color: var(--cds-text-primary);
  text-decoration: none;
  background: var(--cds-layer-hover);
}

.pager__link--next {
  text-align: right;
}

.pager__label {
  color: var(--cds-link-primary);
}

@media (min-width: 42rem) {
  .pager {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 66rem) {
  .lesson-layout {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--cds-spacing-09);
    align-items: start;
  }

  .lesson-toc {
    position: sticky;
    /* Clear the sticky LATEST banner, plus a small gap. */
    top: calc(var(--banner-h) + var(--topbar-h) + var(--cds-spacing-05));
    max-height: calc(100vh - var(--banner-h) - var(--topbar-h) - var(--cds-spacing-07));
    overflow: auto;
  }
}

/* ==========================================================================
   Learning-path landing: a card per track. Each opens its own track page,
   so the lessons never pile up into one endless scroll.
   ========================================================================== */
.track-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--cds-spacing-05);
  margin-top: var(--cds-spacing-07);
  align-items: stretch; /* cards in a row share the same height */
}
.track-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--cds-spacing-05);
  padding: var(--cds-spacing-06);
  background: var(--cds-layer, #fff);
  border-left: 3px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.track-card:hover { border-left-color: var(--cds-link-primary, #0f62fe); background: var(--cds-layer-hover, #e8e8e8); }
.track-card:focus-visible { outline: 2px solid var(--cds-focus, #0f62fe); outline-offset: -2px; }
.track-card__num { font-size: 1.25rem; color: var(--cds-text-secondary, #525252); line-height: 1.2; }
.track-card__body { display: flex; flex-direction: column; gap: var(--cds-spacing-03); min-width: 0; }
.track-card__title { margin: 0; }
/* Clamp the summary so cards keep the same shape no matter how long the text is. */
.track-card__summary {
  color: var(--cds-text-secondary, #525252);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.track-card__meta { color: var(--cds-text-secondary, #525252); }
/* Push the progress bar + footer to the bottom so Start/progress line up across cards. */
.track-card__bar { display: block; height: 4px; margin-top: auto; background: var(--cds-border-subtle, #e0e0e0); overflow: hidden; }
.track-card__fill { display: block; height: 100%; width: 0; background: var(--cds-interactive, #198038); transition: width 0.5s ease; }
.track-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--cds-spacing-04); }
.track-card__progress { color: var(--cds-text-secondary, #525252); }
.track-card__action { display: inline-flex; align-items: center; gap: var(--cds-spacing-02); font-weight: 600; color: var(--cds-link-primary, #0f62fe); }
.track-card__arrow { transition: transform 0.15s; }
.track-card:hover .track-card__arrow { transform: translateX(3px); }

/* Track page: modules stacked, then pagination. */
.track-modules { display: grid; gap: var(--cds-spacing-08); }

.pager-nav { margin-top: var(--cds-spacing-09); }
.pager-nav:empty { display: none; }
.pager-nav { display: flex; align-items: center; justify-content: center; gap: var(--cds-spacing-03); flex-wrap: wrap; }
.pager__pages { display: inline-flex; gap: var(--cds-spacing-02); flex-wrap: wrap; }
.pager__btn {
  min-width: 2.5rem; min-height: 2.5rem; padding: 0 var(--cds-spacing-04);
  border: 1px solid var(--cds-border-subtle, #e0e0e0); background: var(--cds-layer, #fff);
  color: var(--cds-text-primary, #161616); font: inherit; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pager__btn:hover:not(:disabled) { background: var(--cds-layer-hover, #e8e8e8); }
.pager__btn:disabled { color: var(--cds-text-disabled, #c6c6c6); cursor: default; }
.pager__btn.is-current { background: var(--cds-interactive, #198038); border-color: var(--cds-interactive, #198038); color: #fff; font-weight: 600; }
.pager__btn:focus-visible { outline: 2px solid var(--cds-focus, #0f62fe); outline-offset: 1px; }

@media (max-width: 42rem) {
  .track-card { padding: var(--cds-spacing-05); }
  .track-cards { grid-template-columns: 1fr; }
}

/* Jump-to-module index on a track page: reach any module in one click. */
.track-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-spacing-03);
  margin-bottom: var(--cds-spacing-07);
  padding-bottom: var(--cds-spacing-05);
  border-bottom: 1px solid var(--cds-border-subtle, #e0e0e0);
}
.track-jump:empty { display: none; }
.track-jump__label { color: var(--cds-text-secondary, #525252); margin-right: var(--cds-spacing-02); }
.track-jump__list { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-03); list-style: none; margin: 0; padding: 0; }
.track-jump__btn {
  display: inline-flex; align-items: center; gap: var(--cds-spacing-02);
  padding: 0.375rem var(--cds-spacing-04);
  border: 1px solid var(--cds-border-subtle, #e0e0e0);
  background: var(--cds-layer, #fff); color: var(--cds-text-primary, #161616);
  font: inherit; font-size: 0.8125rem; cursor: pointer; max-width: 20rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
}
.track-jump__btn:hover { border-color: var(--cds-link-primary, #0f62fe); background: var(--cds-layer-hover, #e8e8e8); }
.track-jump__btn:focus-visible { outline: 2px solid var(--cds-focus, #0f62fe); outline-offset: 1px; }
.track-jump__btn.is-page { border-color: var(--cds-border-strong, #8d8d8d); font-weight: 600; }
.track-jump__btn.is-done .track-jump__num { color: var(--cds-interactive, #198038); }
.track-jump__num { color: var(--cds-text-secondary, #525252); }