// Block and section primitives (v1 compatible)

/**
 * @section Block & Section
 */

/** @public Block container with gap and padding */
.block {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  padding: var(--spacing-6);
  border-radius: var(--radius-lg);
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
}

/** @public Section container with responsive padding */
.section {
  --section-padding: var(--spacing-8);
  --section-gap: var(--gap-lg);
  --section-margin: var(--spacing-8);
  
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  padding: var(--section-padding);
  margin-bottom: var(--section-margin);
  
  @media (max-width: 768px) {
    --section-padding: var(--spacing-4);
    --section-gap: var(--gap-md);
    --section-margin: var(--spacing-4);
  }
  
  @media (max-width: 480px) {
    --section-padding: var(--spacing-3);
    --section-gap: var(--gap-sm);
    --section-margin: var(--spacing-3);
  }
}

// Note: TOC is defined in toc.less as the canonical version
.toc {
  list-style: none;
  padding: 0;
  margin: 0;

  li {
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid hsl(var(--border));

    &:last-child {
      border-bottom: none;
    }

    a {
      color: hsl(var(--foreground));
      text-decoration: none;
      transition: color var(--transition-base);

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

  // Nested items
  ul {
    // list-style: none;
    padding-left: var(--spacing-4);
    margin-top: var(--spacing-2);
  }
}