/* app/assets/stylesheets/components/_lessons.css */

.prose .ms-brightcove-video {
  @apply w-full overflow-hidden;
}

/* --- Layout Structure (Replicating lesson.less .lesson-right) --- */
.lessons_show_page {
  h4 {
    /* Mobile: 18px, Desktop: 20px */
    @apply text-[18px] sm:text-[20px];
    @apply my-5;
  }

  .lesson_body {
    /* Mobile: 20px top/bottom, 5px left/right (Old line 22) */
    @apply px-3.5 py-[20px];

    /* Desktop: 32px top, 35px sides/bottom (Old line 23) */
    @apply sm:pt-[32px] sm:px-[35px] sm:pb-[35px];

    /* Text defaults */
    @apply text-sm sm:text-base;
  }

  /* --- Typography & Content --- */

  .lesson-body-content {
    @apply prose max-w-none text-sm sm:text-base;

    /* H2 + P Border Logic (Old lines 31) */

    & h2:first-child + p {
      border-top: 1px solid var(--color-light-gray);
      border-bottom: 1px solid var(--color-light-gray);
      padding-top: 0.75em;
      padding-bottom: 0.75em;
    }

    p {
      @apply mt-0 mb-[10.5px] ml-0 leading-6;
    }

    /* HEADINGS (Mapped from lesson.less lines 10-15 & 32-35) */

    h2, h3, h4, h5 {
      @apply font-bold leading-[1.1] text-black;
    }

    h2 {
      /* Mobile: 20px, Desktop: 28px */
      @apply text-[20px] sm:text-[28px];
      @apply mt-1.5 mb-2.5 p-0;
    }

    h3 {
      /* Mobile: 18px, Desktop: 24px */
      @apply text-[18px] sm:text-[24px];
    }

    h4 {
      /* Mobile: 18px, Desktop: 20px */
      @apply text-[18px] sm:text-[20px];
      @apply my-5;
    }

    h5 {
      /* Mobile: 16px, Desktop: 16px */
      @apply text-[16px];
    }

    a {
      @apply text-black font-bold underline hover:no-underline;
    }

    img {
      @apply w-full rounded-none my-0;
    }

    ul, ol {
      & li::marker { color: var(--color-mastered-black) }

      @apply pl-10
    }

    /* --- Next Lesson Divider Logic (Replicating lesson.less line 63) --- */

    .next-lesson-link-holder {
      @apply pb-8;
      /* Old padding-bottom: 2em */

      /* The dividers */

      & hr {
        @apply border-0 border-t border-[var(--color-light-gray)];
        @apply mt-0 mb-[6px] pb-0;
        /* Match padding-bottom: 6px */
      }

      /* The "Next lesson:" label */

      & span {
        @apply text-black block mb-0;
      }

      /* The Link itself (Old line 64) */

      & a {
        @apply text-[16px] font-bold no-underline block mt-0 mb-[8px];

        &:hover { @apply underline; }
      }
    }

    table {
      td:first-child {
        @apply !w-[80px] align-top md:align-middle pt-1 md:pt-0 md:pr-7;

        img {
          @apply max-w-[80px] md:max-w-[150px] !mr-2;
        }

        + td {
          @apply pr-1 sm:px-2
        }
      }
    }

  }

}