@import "../../../../../ui-design-system/src/styles/semantic";

.carousel-demo {
  padding: $semantic-spacing-layout-lg;
  
  .demo-section {
    margin-bottom: $semantic-spacing-section-md;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .section-title {
    font-size: $semantic-typography-font-size-xl;
    font-weight: $semantic-typography-font-weight-semibold;
    line-height: $semantic-typography-line-height-normal;
    color: $semantic-color-text-primary;
    margin-bottom: $semantic-spacing-content-paragraph;
  }
  
  .section-description {
    font-size: $semantic-typography-font-size-md;
    font-weight: $semantic-typography-font-weight-normal;
    line-height: $semantic-typography-line-height-relaxed;
    color: $semantic-color-text-secondary;
    margin-bottom: $semantic-spacing-content-paragraph;
  }
  
  .carousel-container {
    margin-bottom: $semantic-spacing-layout-lg;
  }
  
  .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: $semantic-spacing-content-paragraph;
    margin-top: $semantic-spacing-layout-lg;
  }
  
  .feature-card {
    background: $semantic-color-surface-container;
    border-radius: 12px;
    padding: $semantic-spacing-content-paragraph;
    border: 1px solid $semantic-color-border-primary;
    
    .feature-title {
      font-size: $semantic-typography-font-size-md;
      font-weight: $semantic-typography-font-weight-semibold;
      line-height: $semantic-typography-line-height-normal;
      color: $semantic-color-text-primary;
      margin-bottom: $semantic-spacing-component-sm;
    }
    
    .feature-description {
      font-size: $semantic-typography-font-size-sm;
      font-weight: $semantic-typography-font-weight-normal;
      line-height: $semantic-typography-line-height-normal;
      color: $semantic-color-text-secondary;
      margin-bottom: $semantic-spacing-component-md;
    }
    
    .feature-example {
      background: $semantic-color-surface-variant;
      border-radius: 8px;
      padding: $semantic-spacing-component-md;
      border: 1px solid $semantic-color-border-secondary;
      
      .example-label {
        font-size: $semantic-typography-font-size-xs;
        font-weight: $semantic-typography-font-weight-normal;
        line-height: $semantic-typography-line-height-normal;
        color: $semantic-color-text-tertiary;
        margin-bottom: $semantic-spacing-component-xs;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      
      .example-content {
        font-size: $semantic-typography-font-size-sm;
      font-weight: $semantic-typography-font-weight-normal;
      line-height: $semantic-typography-line-height-normal;
        color: $semantic-color-text-secondary;
      }
    }
  }
  
  .code-snippet {
    background: $semantic-color-surface-container;
    border: 1px solid $semantic-color-border-primary;
    border-radius: 8px;
    padding: $semantic-spacing-content-paragraph;
    margin-top: $semantic-spacing-content-paragraph;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.4;
    color: $semantic-color-text-primary;
    overflow-x: auto;
  }
}