/* Styles for Lesson component */
@layer components {
  .lesson-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    /* ─── HERO HEADER ─── */
    & .lesson-page__hero {
      position: relative;
      min-height: 38vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
      background: radial-gradient(ellipse at 50% 30%, #1d2235 0%, #0b0d17 70%);
      color: #ffffff;
      padding: var(--space-2xl) var(--space-m) var(--space-xl);
    }

    & .lesson-page__hero-decoration {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      z-index: 0;
    }

    & .lesson-page__strings-svg {
      width: 100%;
      height: 100%;
      max-width: 900px;
      opacity: 0.5;
    }

    & .lesson-page__hero-content {
      position: relative;
      z-index: 1;
      max-width: 700px;
      margin-inline: auto;
      animation: lessonFadeUp 0.6s ease-out both;
    }

    & .lesson-page__breadcrumb {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-xs);
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #909090;
      margin-bottom: var(--space-m);

      & a {
        color: var(--color-primary);
        text-decoration: none;
        opacity: 0.8;
        transition: opacity 0.2s ease;

        &:hover {
          opacity: 1;
        }
      }
    }

    & .lesson-page__hero-icon {
      font-size: 2.5rem;
      margin: 0 0 var(--space-s);
      line-height: 1;
    }

    & .lesson-page__title {
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 4.5vw, 3rem);
      line-height: 1.15;
      color: var(--color-primary);
      text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
      margin: 0 0 var(--space-m);
    }

    & .lesson-page__meta {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: var(--space-s);
    }

    & .lesson-page__meta-item {
      display: flex;
      align-items: center;
      gap: var(--space-2xs);
      font-size: 0.8rem;
      color: #b0b0b0;
      padding: var(--space-2xs) var(--space-s);
      background: color-mix(in oklab, white 6%, transparent);
      border: 1px solid color-mix(in oklab, white 12%, transparent);
      border-radius: var(--radius-pill);

      & svg {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
      }
    }

    & .lesson-page__tag {
      font-size: 0.72rem;
      color: color-mix(in oklab, var(--color-primary) 85%, white);
      padding: var(--space-2xs) var(--space-s);
      background: color-mix(in oklab, var(--color-primary) 12%, transparent);
      border: 1px solid color-mix(in oklab, var(--color-primary) 25%, transparent);
      border-radius: var(--radius-pill);
      white-space: nowrap;
    }

    /* ─── NAVIGATION BAR ─── */
    & .lesson-nav {
      background: var(--color-surface-variant);
      border-bottom: 1px solid color-mix(in oklab, var(--color-primary) 12%, transparent);
    }

    & .lesson-nav__inner {
      max-width: var(--max-content);
      margin-inline: auto;
      padding-inline: var(--space-m);
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      min-height: 52px;
      gap: var(--space-m);
    }

    & .lesson-nav__side {
      display: flex;
    }

    & .lesson-nav__prev {
      justify-content: flex-start;
    }

    & .lesson-nav__next {
      justify-content: flex-end;
    }

    & .lesson-nav__center {
      display: flex;
      justify-content: center;
    }

    & .lesson-nav__link {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      color: var(--color-text);
      text-decoration: none;
      font-size: 0.875rem;
      padding: var(--space-xs) var(--space-s);
      border-radius: var(--radius-s);
      transition: all 0.2s ease;
      max-width: 220px;

      & .lesson-nav__text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      & svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        color: var(--color-primary);
        transition: transform 0.2s ease;
      }

      &:hover {
        color: var(--color-primary);
        background: color-mix(in oklab, var(--color-primary) 6%, transparent);

        & svg {
          transform: translateX(-3px);
        }
      }

      &.lesson-nav__link--next:hover svg {
        transform: translateX(3px);
      }
    }

    & .lesson-nav__back {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      color: var(--color-text);
      text-decoration: none;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: var(--space-xs) var(--space-m);
      border: 1px solid color-mix(in oklab, var(--color-primary) 20%, transparent);
      border-radius: var(--radius-pill);
      transition: all 0.2s ease;
      opacity: 0.7;

      & svg {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
      }

      &:hover {
        opacity: 1;
        border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
        color: var(--color-primary);
        background: color-mix(in oklab, var(--color-primary) 6%, transparent);
      }
    }

    @media (max-width: 540px) {
      & .lesson-nav__text {
        display: none;
      }

      & .lesson-nav__link {
        max-width: none;
      }
    }

    /* ─── MAIN BODY ─── */
    & .lesson-page__body {
      flex: 1;
      background: var(--color-surface);
      padding-block: var(--space-2xl);
    }

    & .lesson-article {
      max-width: 75ch;
      margin-inline: auto;
      padding-inline: var(--space-m);
    }

    /* ─── FOOTER ─── */
    & .lesson-page__footer {
      border-top: 1px solid color-mix(in oklab, var(--color-primary) 12%, transparent);
      background: var(--color-surface-variant);

      & .lesson-nav {
        border-bottom: none;
      }
    }

    /* ─────────────────────────────────────────────
       RENDERED LESSON CONTENT
    ───────────────────────────────────────────── */

    & .lesson-h1 {
      font-family: var(--font-serif);
      font-size: var(--size-step-3);
      color: var(--color-primary);
      line-height: 1.2;
      margin-block: var(--space-2xl) var(--space-l);
      padding-bottom: var(--space-s);
      border-bottom: 2px solid color-mix(in oklab, var(--color-primary) 20%, transparent);

      &:first-child {
        margin-top: 0;
      }
    }

    & .lesson-h2 {
      font-family: var(--font-serif);
      font-size: var(--size-step-2);
      color: var(--color-text);
      line-height: 1.25;
      margin-block: var(--space-xl) var(--space-m);
      padding-left: var(--space-m);
      border-left: 3px solid var(--color-primary);
    }

    & .lesson-h3 {
      font-family: var(--font-serif);
      font-size: var(--size-step-1);
      color: var(--color-text);
      line-height: 1.3;
      margin-block: var(--space-l) var(--space-s);
    }

    & .lesson-h4 {
      font-family: var(--font-sans);
      font-size: var(--size-step-0);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--color-primary);
      opacity: 0.85;
      margin-block: var(--space-m) var(--space-xs);
    }

    & .lesson-paragraph {
      font-size: var(--size-step-0);
      line-height: 1.8;
      color: var(--color-text);
      margin-bottom: var(--space-m);
    }

    & .lesson-quote {
      margin-block: var(--space-l);
      margin-inline: 0;
      padding: var(--space-m) var(--space-l);
      border-left: 4px solid var(--color-primary);
      background: color-mix(in oklab, var(--color-primary) 5%, var(--color-surface));
      border-radius: 0 var(--radius-s) var(--radius-s) 0;
      font-family: var(--font-serif);
      font-style: italic;
      font-size: var(--size-step-1);
      color: var(--color-text);
      opacity: 0.9;

      & p {
        margin: 0;
      }
    }

    & .lesson-list {
      padding-left: var(--space-l);
      margin-bottom: var(--space-m);
      list-style: none;

      &.lesson-list--ordered {
        counter-reset: lesson-ol-counter;
      }
    }

    & .lesson-list__item {
      position: relative;
      padding-left: var(--space-m);
      margin-bottom: var(--space-xs);
      line-height: 1.7;
      color: var(--color-text);

      .lesson-list:not(.lesson-list--ordered) &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.65em;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--color-primary);
        opacity: 0.8;
      }

      .lesson-list--ordered &::before {
        counter-increment: lesson-ol-counter;
        content: counter(lesson-ol-counter) ".";
        position: absolute;
        left: 0;
        color: var(--color-primary);
        font-family: var(--font-serif);
        font-weight: 700;
        font-size: 0.9em;
        top: 0.05em;
      }
    }

    & .lesson-table-scroll {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-block: var(--space-l);
      border: 1px solid color-mix(in oklab, var(--color-primary) 15%, transparent);
      border-radius: var(--radius-s);

      & > .lesson-table {
        border: none;
        border-radius: 0;
        overflow: visible;
        margin-block: 0;
      }
    }

    & .lesson-table {
      width: 100%;
      border-collapse: collapse;
      margin-block: var(--space-l);
      font-size: 0.9rem;
      border: 1px solid color-mix(in oklab, var(--color-primary) 15%, transparent);
      border-radius: var(--radius-s);
      overflow: hidden;
    }

    & .lesson-table__head {
      background: color-mix(in oklab, var(--color-primary) 10%, var(--color-surface));
    }

    & .lesson-table__body {
      & tr:nth-child(even) {
        background: color-mix(in oklab, var(--color-primary) 4%, var(--color-surface));
      }

      & tr:hover {
        background: color-mix(in oklab, var(--color-primary) 7%, var(--color-surface));
      }
    }

    & .lesson-table__header-cell {
      padding: var(--space-s) var(--space-m);
      text-align: left;
      font-family: var(--font-sans);
      font-size: 0.72rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-primary);
      border-bottom: 2px solid color-mix(in oklab, var(--color-primary) 25%, transparent);
      white-space: nowrap;
    }

    & .lesson-table__cell {
      padding: var(--space-s) var(--space-m);
      color: var(--color-text);
      border-bottom: 1px solid color-mix(in oklab, var(--color-text) 8%, transparent);
      vertical-align: top;
      line-height: 1.55;
    }

    & .lesson-code-block {
      background: #12151f;
      color: #dce6f0;
      border-radius: var(--radius-s);
      padding: var(--space-l);
      margin-block: var(--space-m);
      overflow-x: auto;
      font-family: ui-monospace, SFMono-Regular, 'Cascadia Code', Consolas, monospace;
      font-size: 0.875rem;
      line-height: 1.65;
      border: 1px solid color-mix(in oklab, var(--color-primary) 15%, transparent);

      & .lesson-code-inline {
        background: none;
        padding: 0;
        font-size: inherit;
        color: inherit;
        border: none;
      }
    }

    & .lesson-diagram {
      font-family: 'Courier New', 'DejaVu Sans Mono', 'Noto Sans Mono', monospace;
      font-size: 0.9rem;
      line-height: 1.2;
      background: color-mix(in oklab, var(--color-surface) 80%, var(--color-primary) 20%);
      color: var(--color-text);
      border-radius: var(--radius-s);
      padding: var(--space-l);
      margin-block: var(--space-m);
      overflow-x: auto;
      border: 1px solid color-mix(in oklab, var(--color-primary) 20%, transparent);
      white-space: pre;
    }

    & .lesson-code-inline {
      background: color-mix(in oklab, var(--color-primary) 8%, var(--color-surface));
      color: var(--color-primary);
      padding: 0.1em 0.4em;
      border-radius: var(--radius-s);
      font-size: 0.875em;
      font-family: ui-monospace, SFMono-Regular, 'Cascadia Code', Consolas, monospace;
      border: 1px solid color-mix(in oklab, var(--color-primary) 15%, transparent);
    }

    & .lesson-link {
      color: var(--color-primary);
      text-decoration: underline;
      text-decoration-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
      text-underline-offset: 3px;
      transition: text-decoration-color 0.2s ease;

      &:hover {
        text-decoration-color: var(--color-primary);
      }
    }

    & .lesson-image {
      max-width: 100%;
      height: auto;
      border-radius: var(--radius-m);
      display: block;
      margin-block: var(--space-l);
      box-shadow: var(--shadow-m);
    }

    & .lesson-divider {
      border: none;
      height: 1px;
      background: linear-gradient(
        to right,
        transparent,
        color-mix(in oklab, var(--color-primary) 40%, transparent),
        transparent
      );
      margin-block: var(--space-xl);
    }

    /* ─── NOT FOUND ─── */
    & .lesson-not-found {
      text-align: center;
      padding: var(--space-2xl);
      max-width: 600px;
      margin-inline: auto;

      & h1 {
        font-family: var(--font-serif);
        color: var(--color-error);
      }

      & a {
        color: var(--color-primary);
      }
    }
  }
}

@keyframes lessonFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}