// Showcase page styles
.demo-header {
  background: linear-gradient(135deg, $primary-color, lighten($primary-color, 10%));
  color: white;
  padding: $spacing-3xl 0 $spacing-2xl;
  
  h1 {
    font-size: $font-size-4xl;
    font-weight: $font-weight-bold;
    margin-bottom: $spacing-base;
  }
  
  p {
    font-size: $font-size-xl;
    opacity: 0.9;
    max-width: 60rem;
  }
}

.showcase-section {
  padding: $spacing-3xl 0;
  border-bottom: 0.1rem solid $border-light;
  
  &:last-child {
    border-bottom: none;
  }
  
  h2 {
    font-size: $font-size-3xl;
    font-weight: $font-weight-bold;
    margin-bottom: $spacing-base;
    color: $text-color;
  }
  
  > .container > p {
    font-size: $font-size-lg;
    color: $text-muted;
    margin-bottom: $spacing-2xl;
    max-width: 70rem;
  }
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: $spacing-lg;
  margin-bottom: $spacing-2xl;
  
  @include media-down('sm') {
    grid-template-columns: 1fr;
    gap: $spacing-base;
  }
}

.demo-code {
  background: $bg-tertiary;
  border-radius: $border-radius-md;
  padding: $spacing-lg;
  margin-top: $spacing-xl;
  border: 0.1rem solid $border-light;
  
  pre {
    margin: 0;
    overflow-x: auto;
    
    code {
      font-family: $font-family-mono;
      font-size: $font-size-sm;
      line-height: $line-height-relaxed;
      color: $text-color;
      white-space: pre;
      display: block;
      padding: 0;
      background: none;
      border: none;
    }
  }
}

// Demo specific styles
.tabs {
  margin-bottom: $spacing-xl;
}

.accordion {
  margin-bottom: $spacing-xl;
  max-width: 70rem;
}

// Responsive showcase navigation
.showcase-nav {
  position: fixed;
  top: 8rem;
  right: 2rem;
  background: white;
  border-radius: $border-radius-md;
  box-shadow: $shadow-lg;
  padding: $spacing-lg;
  z-index: $z-fixed;
  max-width: 20rem;
  
  @include media-down('lg') {
    display: none;
  }
  
  h4 {
    margin: 0 0 $spacing-md 0;
    font-size: $font-size-sm;
    font-weight: $font-weight-semibold;
    color: $text-color;
  }
  
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    
    li {
      margin-bottom: $spacing-sm;
      
      a {
        display: block;
        padding: $spacing-xs $spacing-sm;
        color: $text-muted;
        text-decoration: none;
        border-radius: $border-radius-sm;
        font-size: $font-size-xs;
        transition: $transition-base;
        
        &:hover,
        &.active {
          background: $primary-color;
          color: white;
        }
      }
    }
  }
}

// Code highlighting
.demo-code {
  position: relative;
  
  .code-copy-btn {
    position: absolute;
    top: $spacing-sm;
    right: $spacing-sm;
    background: rgba(255, 255, 255, 0.9);
    border: 0.1rem solid $border-color;
    border-radius: $border-radius-sm;
    padding: $spacing-xs $spacing-sm;
    font-size: $font-size-xs;
    cursor: pointer;
    transition: $transition-base;
    z-index: 10;
    
    &:hover {
      background: white;
      border-color: $primary-color;
    }
  }
}