@use '../abstracts/variables' as *;
@use '../abstracts/color-functions' as *;
@use '../abstracts/mixins' as *;

// -----------------------------------------------------------------------------
// Container and section styles
// -----------------------------------------------------------------------------

// Main container
.container {
  max-width: $container-max-width;
  margin: 0 auto;
  padding: 0 26px;

  @include respond-to('sm') {
    padding: 0 $spacing-md;
  }

  // Container variations
  &-fluid {
    max-width: 100%;
    padding: 0 $spacing-lg;
  }

  &-narrow {
    max-width: 960px;
  }

  &-wide {
    max-width: 1440px;
  }
}

// Section spacing
.section {
  padding: $spacing-6xl 0;

  @include respond-to('sm') {
    padding: $spacing-4xl 0;
  }

  // Section variations
  &-sm {
    padding: $spacing-3xl 0;
  }

  &-lg {
    padding: $spacing-6xl * 1.5 0;
  }

  &-no-top {
    padding-top: 0;
  }

  &-no-bottom {
    padding-bottom: 0;
  }
}

// Section backgrounds
.section-bg {
  &-gray {
    background: $gray-bg;
  }

  &-light {
    background: $light-bg;
  }

  &-primary {
    color: $white;
  }

  &-dark {
    background: $text-dark;
    color: $white;
  }
}

// Section header
.section-header {
  text-align: center;
  margin-bottom: $spacing-4xl;

  @include respond-to('sm') {
    margin-bottom: $spacing-3xl;
  }

  .section-badge {
    display: inline-flex;
    align-items: center;
    gap: $spacing-xs;
    padding: $spacing-xs $spacing-md;
    background: $light-bg;
    color: $primary-blue;
    border-radius: $border-radius-full;
    font-size: $font-size-sm;
    font-weight: $font-weight-semibold;
    margin-bottom: $spacing-md;
  }

  .section-title {
    font-size: $font-size-3xl;
    font-weight: $font-weight-bold;
    margin-bottom: $spacing-md;
    color: $text-dark;

    @include respond-to('sm') {
      font-size: $font-size-2xl;
    }

    .title-highlight {
    }
  }

  .section-subtitle {
    font-size: $font-size-md;
    color: $text-gray;
    line-height: $line-height-normal;
    max-width: 600px;
    margin: 0 auto;

    @include respond-to('sm') {
      font-size: $font-size-base;
    }
  }
}

// Content wrapper
.content-wrapper {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  .main-content {
    flex: 1;
    padding-top: $header-height;
  }
}

// Page wrapper
.page-wrapper {
  position: relative;
  overflow: hidden;
}

// Inner content
.inner-content {
  position: relative;
  z-index: 1;
}