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

.ui-lp-agency-template {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  
  &__main {
    flex: 1;
    
    // Agency-focused styling with professional appearance
    > *:nth-child(odd) {
      background: $semantic-color-surface-primary;
    }
    
    > *:nth-child(even) {
      background: $semantic-color-surface-secondary;
    }
    
    // Special treatment for hero section
    > ui-lp-hero-split {
      background: unset;
    }
    
    // Team section gets special emphasis
    > ui-lp-team-grid {
      background: $semantic-color-surface-elevated;
      border: 1px solid $semantic-color-border-subtle;
    }
    
    // Timeline section styling
    > ui-lp-timeline {
      position: relative;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(
          to right,
          transparent,
          $semantic-color-border-subtle,
          transparent
        );
      }
    }
  }
  
  // Enhanced section spacing for agency layout
  section {
    padding: $semantic-spacing-layout-section-xl 0;
  }
  
  // Professional section dividers
  section + section {
    border-top: 1px solid $semantic-color-border-subtle;
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: -1px;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 1px;
      background: $semantic-color-primary;
    }
  }
  
  // Responsive adjustments for agency layout
  @media (max-width: $semantic-breakpoint-lg - 1) {
    section {
      padding: $semantic-spacing-layout-section-lg 0;
    }
  }
  
  @media (max-width: $semantic-breakpoint-md - 1) {
    &__main {
      > ui-lp-team-grid {
        border: none;
      }
    }
    
    section {
      padding: $semantic-spacing-layout-section-md 0;
    }
    
    section + section::before {
      width: 50px;
    }
  }
  
  @media (max-width: $semantic-breakpoint-sm - 1) {
    &__main {
      > * {
        background: $semantic-color-surface-primary !important;
      }
    }
    
    section {
      padding: $semantic-spacing-layout-section-sm 0;
    }
    
    section + section {
      border-top: none;
      margin-top: $semantic-spacing-layout-section-sm;
      
      &::before {
        display: none;
      }
    }
  }
}