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

.ui-lp-saas-template {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  
  &__main {
    flex: 1;
    
    // Alternating background colors for sections
    > *:nth-child(odd) {
      background: $semantic-color-surface-primary;
    }
    
    > *:nth-child(even) {
      background: $semantic-color-surface-secondary;
    }
    
    // Override for hero to maintain gradient/special background
    > ui-lp-hero {
      background: unset;
    }
  }
  
  // Ensure proper spacing between sections
  section + section {
    border-top: 1px solid $semantic-color-border-subtle;
  }
  
  // Responsive adjustments
  @media (max-width: $semantic-breakpoint-sm - 1) {
    &__main {
      // Reduce alternating backgrounds on mobile for better readability
      > * {
        background: $semantic-color-surface-primary !important;
      }
      
      section + section {
        border-top: none;
        margin-top: $semantic-spacing-layout-section-sm;
      }
    }
  }
}