@import "https://assets.elements.dev/assets/app/shared/styles/page.98db1d1b345dbefc.css";
/* Borrow .post-body, .post-title, .chapters-block from posts/show so
   the body anatomy + chapter list look identical to a standalone post. */
@import "https://assets.elements.dev/assets/app/pages/posts/show/style.c23616ff7fb4d275.css";

.courses-lesson-page { background: var(--bg); color: var(--ink); }
/* Chrome top padding is handled by PageChrome via fullwidth=true on
   video lessons (theater flush) and the canonical 64px on article
   lessons. The earlier `.page-chrome-main { padding-top: 0 }`
   override killed the canonical padding even on article lessons,
   leaving the title flush against the topbar — removed. */

/* Theater chrome (.post-theater-*) is inherited from posts/show
   via the @import above — same full-bleed black wrapper, 16:9
   surface, placeholder + big-play overlay, duration pill. Lesson
   pages use the SAME video player as posts so authors get one
   consistent experience and we maintain one set of CSS. */

/* Chapter rows are buttons (clickable to jump the video). Reset
   button-default chrome and let the inherited .chapter-row grid +
   padding from posts/show carry the layout. */
.courses-lesson-page .chapter-row.is-clickable {
  width: 100%;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  color: inherit;
}
.courses-lesson-page .chapter-row.is-clickable:hover { background: var(--bg-soft); }
.courses-lesson-page .chapter-row.is-clickable:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: -2px;
}

/* ─── Body ──────────────────────────────────────────────────────── */

.courses-lesson-body {
  background: var(--bg);
}
/* Same marketing-shell width + padding ladder as .feed-page-shell /
   .courses-show-shell. Top padding is from .page-chrome-main (64px)
   + canonical h1 margin (2rem). */
.courses-lesson-inner {
  max-width: var(--container-marketing);
  margin: 0 auto;
  padding: 0 var(--space-8) 4rem;
}
@media (max-width: 700px) { .courses-lesson-inner { padding: 0 var(--space-5) 4rem; } }
@media (max-width: 640px) { .courses-lesson-inner { padding: 0 var(--space-4) 4rem; } }
/* Tighter inset for content-reader pages on phones. */
@media (max-width: 480px) { .courses-lesson-inner { padding: 0 var(--space-3) 4rem; } }

/* Content-show title — smaller than the top-level page h1 so the
   title anchors the page without dominating the content. Matches
   .post-title / .courses-show-title. */
.courses-lesson-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 2rem 0 var(--space-4);
}
@media (max-width: 640px) {
  .courses-lesson-title { margin-top: 1.5rem; }
}

/* Lesson byline now uses the shared single-row .post-meta block
   (rules in posts/show/style.css imported above). The custom
   .courses-lesson-byline-* classes were dropped when the multi-row
   layout collapsed to one row. */

/* The ActionRow under the lesson meta needs explicit bottom margin
   before the chapters block / article body. Without this the
   action row's `font-size: 12px; line-height: 1` makes it sit
   directly on top of the body. Matches the post-detail spacing
   (.post-body-wrap > .action-row { margin: 0 0 1.75rem; }). */
.courses-lesson-inner > .action-row {
  margin: 0 0 1.75rem;
}

/* Footer prev / course / next chrome lives in
   app/shared/templates/nav-icons/style.css under `.nav-footer-row`. The
   lesson template uses those classes directly. */

/* Encoding error banner — full bleed above the theater. */
.video-error-banner {
  width: 100%;
  background: #fee2e2;
  color: #991b1b;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid #fca5a5;
}
.video-error-banner-msg {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  opacity: 0.85;
}