@use 'ui-design-system/src/styles/semantic/index' as *;

.ui-masonry {
  // Core Structure - CSS Columns for masonry effect
  display: block;
  position: relative;
  width: 100%;
  
  // Layout & Spacing
  column-gap: $semantic-spacing-grid-gap-md;
  padding: $semantic-spacing-component-md;
  
  // Visual Design
  background: $semantic-color-surface-primary;
  border-radius: $semantic-border-card-radius;
  
  // Prevent breaking items across columns
  & > * {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: $semantic-spacing-grid-gap-md;
    display: inline-block;
    width: 100%;
    
    // Remove margin from last item in each column
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  // Gap Variants
  &--gap-sm {
    column-gap: $semantic-spacing-grid-gap-sm;
    
    & > * {
      margin-bottom: $semantic-spacing-grid-gap-sm;
    }
  }
  
  &--gap-md {
    column-gap: $semantic-spacing-grid-gap-md;
    
    & > * {
      margin-bottom: $semantic-spacing-grid-gap-md;
    }
  }
  
  &--gap-lg {
    column-gap: $semantic-spacing-grid-gap-lg;
    
    & > * {
      margin-bottom: $semantic-spacing-grid-gap-lg;
    }
  }
  
  // Padding Variants
  &--padding-none {
    padding: 0;
  }
  
  &--padding-sm {
    padding: $semantic-spacing-component-sm;
  }
  
  &--padding-md {
    padding: $semantic-spacing-component-md;
  }
  
  &--padding-lg {
    padding: $semantic-spacing-component-lg;
  }
  
  // Column Variants - Fixed Column Count
  &--cols-2 {
    column-count: 2;
  }
  
  &--cols-3 {
    column-count: 3;
  }
  
  &--cols-4 {
    column-count: 4;
  }
  
  &--cols-5 {
    column-count: 5;
  }
  
  &--cols-6 {
    column-count: 6;
  }
  
  // Auto Column Variants - Responsive masonry
  &--auto-fit {
    column-count: auto;
    column-width: 250px;
    column-fill: balance;
  }
  
  &--auto-fill {
    column-count: auto;
    column-width: 200px;
    column-fill: auto;
  }
  
  // Alignment Options
  &--align-start {
    text-align: left;
  }
  
  &--align-center {
    text-align: center;
  }
  
  &--align-end {
    text-align: right;
  }
  
  // Responsive Behavior
  @media (max-width: 1024px) {
    &--cols-6 {
      column-count: 4;
    }
    
    &--cols-5 {
      column-count: 3;
    }
    
    &--cols-4 {
      column-count: 3;
    }
  }
  
  @media (max-width: 768px) {
    column-gap: $semantic-spacing-grid-gap-sm;
    padding: $semantic-spacing-component-sm;
    
    & > * {
      margin-bottom: $semantic-spacing-grid-gap-sm;
    }
    
    &--cols-6,
    &--cols-5,
    &--cols-4,
    &--cols-3 {
      column-count: 2;
    }
    
    &--auto-fit,
    &--auto-fill {
      column-width: 200px;
    }
  }
  
  @media (max-width: 480px) {
    column-gap: $semantic-spacing-component-xs;
    padding: $semantic-spacing-component-xs;
    
    & > * {
      margin-bottom: $semantic-spacing-component-xs;
    }
    
    &--cols-6,
    &--cols-5,
    &--cols-4,
    &--cols-3,
    &--cols-2 {
      column-count: 1;
    }
    
    &--auto-fit,
    &--auto-fill {
      column-count: 1;
    }
  }
}

// Masonry Item Utilities
.ui-masonry-item {
  // Prevent breaking
  break-inside: avoid;
  page-break-inside: avoid;
  
  // Spacing
  margin-bottom: $semantic-spacing-grid-gap-md;
  display: inline-block;
  width: 100%;
  
  // Visual Design
  background: $semantic-color-surface-secondary;
  border-radius: $semantic-border-card-radius;
  overflow: hidden;
  
  // Interactive States
  transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
  
  &:hover {
    box-shadow: $semantic-shadow-card-hover;
  }
  
  // Size Variants
  &--compact {
    padding: $semantic-spacing-component-sm;
  }
  
  &--comfortable {
    padding: $semantic-spacing-component-md;
  }
  
  &--spacious {
    padding: $semantic-spacing-component-lg;
  }
  
  // No spacing variant for full-bleed content
  &--flush {
    padding: 0;
  }
}