/**
 * Course Metadata block styles for both front-end and editor
 */

// Universal list styles that apply to all metadata blocks
.wp-block-lithecourse-course-metadata {
  ul {
    margin: 0;
    padding-left: 20px;
  }

  &.list-style-none ul {
    list-style: none;
    padding-left: 0;
  }

  &.list-style-disc ul {
    list-style-type: disc;
  }

  &.list-style-circle ul {
    list-style-type: circle;
  }

  &.list-style-square ul {
    list-style-type: square;
  }

  &.list-style-decimal ul {
    list-style-type: decimal;
  }

  &.list-style-decimal-leading-zero ul {
    list-style-type: decimal-leading-zero;
  }

  &.list-style-lower-alpha ul {
    list-style-type: lower-alpha;
  }

  &.list-style-lower-roman ul {
    list-style-type: lower-roman;
  }

  &.list-style-upper-alpha ul {
    list-style-type: upper-alpha;
  }

  &.list-style-upper-roman ul {
    list-style-type: upper-roman;
  }

  .no-items {
    font-style: italic;
    color: #666;
  }

  // Two column layout (for learnings)
  &.two-columns ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;

    @media (max-width: 768px) {
      grid-template-columns: 1fr;
    }
  }
}