@layer components {
  /* The lesson page: a crumb back to the course, the lesson body, and prev/next.
     A locked lesson (awaiting enrollment) shows only a teaser panel in place of
     the body. */

  /* Let the lesson article fill the page (:has scopes this to lesson pages only)
     so its foot nav can sit at the very bottom, not just under short content.
     inline-size: 100% keeps the 50rem reading column (from .wrapper > article)
     from collapsing once the article becomes a flex item. */
  .wrapper:has(> .lesson) { display: flex; flex-direction: column; }
  .lesson {
    display: flex;
    flex-direction: column;
    flex: 1;
    inline-size: 100%;
  }

  /* A lesson leads with a breadcrumb and reads like a chapter page — a calmer title
     than the article-hero display size posts/pages use. */
  .lesson > h1 { font-size: var(--text-xx-large); }

  .lesson__body { margin-block-end: var(--block-space-double); }

  .lesson__locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--block-space);
    padding: var(--block-space-double);
    text-align: center;
    background: var(--color-surface-raised);
    border: var(--border);
    border-radius: var(--radius-large);
  }
  .lesson__locked-text {
    margin-block: 0;
    color: var(--color-muted);
    max-inline-size: 40ch;
  }

  /* Prev/next between lessons — space-between so a lone "next" sits at the end;
     flex reverses under RTL, keeping previous toward the reading start. */
  .lesson-nav {
    display: flex;
    gap: var(--block-space);
    margin-block-start: auto; /* pushed to the foot of the filled article */
    padding-block-start: var(--block-space);
    border-block-start: var(--border);
  }
  .lesson-nav__link {
    display: flex;
    flex-direction: column;
    gap: var(--inline-space-half);
    max-inline-size: 20rem;
  }
  .lesson-nav__link--next { margin-inline-start: auto; text-align: end; }
  .lesson-nav__dir {
    color: var(--color-muted);
    font-size: var(--text-small);
    letter-spacing: 0.02em;
  }
  .lesson-nav__title {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
  }
}