/* Standalone lesson page: /courses/{course}/{module}/{lesson}.
   Shares the hero, cards and prose styles with course.css (loaded first). */

.lesson-hero { padding-bottom: 0; }
.lesson-hero h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.5rem); max-width: 26ch; margin-top: 12px; }
.lesson-trail { flex-wrap: wrap; row-gap: 4px; }
.lesson-trail::after { display: none; }
.lesson-trail a:hover { color: var(--white); }
.lesson-trail span { color: var(--slate-light); }
.lesson-hero .course-facts { margin-bottom: 30px; }
.lesson-progress { height: 4px; background: rgba(255,255,255,0.1); margin: 0 -24px; }
.lesson-progress span { display: block; height: 100%; background: #5EEAD4; border-radius: 0 99px 99px 0; }

.lesson-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr) 280px; gap: 32px; align-items: start; padding-top: 32px; padding-bottom: 72px; }

/* Contents card: shares the course reader styles (.toc-col in course.css). */
.lesson-toc .toc-lesson { text-decoration: none; }

/* Main */
.lesson-main { min-width: 0; }
.lesson-main .lesson-card { padding-top: 28px; }
.lesson-main .geo-summary { margin: 0 32px 4px; }
.lesson-main .lesson-prose { padding-bottom: 28px; }
.lesson-main .lesson-prose pre { overflow-x: auto; }

/* Prev / next */
.lesson-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.lesson-nav a {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; min-height: 76px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.lesson-nav a:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.lesson-nav span { font-size: 0.74rem; font-weight: 700; color: var(--primary-ink); text-transform: uppercase; letter-spacing: 0.06em; }
.lesson-nav strong { font-size: 0.95rem; color: var(--ink); line-height: 1.35; }
.lesson-nav-next { text-align: right; }

/* Aside */
.lesson-aside { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--header-h) + 20px); }
.lesson-course-link { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.lesson-course-link:hover strong { color: var(--primary-ink); }
.hint-small { font-size: 0.76rem; color: var(--slate); margin-top: 10px; text-align: center; }

@media (max-width: 1180px) {
  .lesson-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .lesson-aside { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 1024px) {
  .lesson-layout { grid-template-columns: minmax(0, 1fr); padding-top: 22px; }
  /* Contents moves below the lesson on small screens: the lesson comes first. */
  /* On the lesson page the contents stay an in-page card below the lesson,
     not the course reader's slide-out drawer. */
  .lesson-toc.toc-col {
    position: static; order: 3; display: block; width: auto; height: auto; max-height: none; z-index: auto;
    transform: none; visibility: visible; transition: none;
    border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); padding: 0 0 10px;
  }
  .lesson-toc .toc-summary-title { display: block; }
  .lesson-toc .toc-summary-top { justify-content: space-between; }
  .lesson-toc #tocList { padding: 8px 8px 0; overflow: visible; }
  .lesson-main { order: 1; }
  .lesson-aside { order: 2; }
}
@media (max-width: 640px) {
  .lesson-progress { margin: 0 -16px; }
  .lesson-main .lesson-card { padding-top: 20px; }
  .lesson-main .geo-summary { margin: 0 18px 4px; }
  .lesson-nav { grid-template-columns: 1fr; }
  .lesson-nav-next { text-align: left; }
  .lesson-aside { grid-template-columns: 1fr; }
}