// Home page specific styles
.home-page
  container()
  padding-top: $spacing-8
  padding-bottom: $spacing-12
  flex-col()
  gap: $spacing-12

// Hero section
.home-hero
  text-align: center
  padding: $spacing-16 0
  background: linear-gradient(135deg, $white 0%, $gray-50 100%)
  border-radius: $radius-2xl
  margin: -$spacing-8 0
  position: relative
  overflow: hidden

  .dark &
    background: linear-gradient(135deg, $gray-800 0%, $gray-900 100%)

  &::before
    content: ''
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
    opacity: 0.3

.home-hero__content
  position: relative
  z-index: 2
  max-width: 48rem
  margin: 0 auto
  padding: 0 $spacing-6

.home-hero__title
  font-size: $font-size-5xl
  font-weight: $font-weight-extrabold
  line-height: 1.1
  color: $gray-900
  margin-bottom: $spacing-6
  letter-spacing: $letter-spacing-tight

  .dark &
    color: $white

  @media (max-width: $breakpoint-sm)
    font-size: $font-size-4xl

.home-hero__subtitle
  font-size: $font-size-xl
  font-weight: $font-weight-normal
  line-height: $line-height-relaxed
  color: $gray-600
  margin-bottom: $spacing-8
  max-width: 36rem
  margin-left: auto
  margin-right: auto

  .dark &
    color: $gray-400

.home-hero__actions
  display: flex
  gap: $spacing-4
  justify-content: center
  flex-wrap: wrap

// Features section
.home-features
  padding: $spacing-12 0

.home-features__header
  text-align: center
  margin-bottom: $spacing-12

.home-features__title
  font-size: $font-size-4xl
  font-weight: $font-weight-extrabold
  color: $gray-900
  margin-bottom: $spacing-4
  letter-spacing: $letter-spacing-tight

  .dark &
    color: $white

.home-features__description
  font-size: $font-size-lg
  color: $gray-600
  max-width: 36rem
  margin: 0 auto
  line-height: $line-height-relaxed

  .dark &
    color: $gray-400

.home-features__grid
  display: grid
  grid-template-columns: 1fr
  gap: $spacing-8

  @media (min-width: $breakpoint-md)
    grid-template-columns: repeat(2, 1fr)

  @media (min-width: $breakpoint-lg)
    grid-template-columns: repeat(3, 1fr)

.home-feature
  background: $white
  padding: $spacing-8
  border-radius: $radius-xl
  box-shadow: $shadow-base
  border: 1px solid $gray-200
  text-align: center
  transition: all 0.3s ease-in-out
  position: relative
  overflow: hidden

  .dark &
    background: $gray-800
    border-color: $gray-700

  &:hover
    transform: translateY(-4px)
    box-shadow: $shadow-xl

    .home-feature__icon
      transform: scale(1.1)

.home-feature__icon
  width: 4rem
  height: 4rem
  margin: 0 auto $spacing-4
  background: linear-gradient(135deg, $primary-500, $accent-500)
  border-radius: $radius-lg
  flex-center()
  transition: transform 0.3s ease-in-out

  svg
    width: 2rem
    height: 2rem
    color: $white

.home-feature__title
  font-size: $font-size-xl
  font-weight: $font-weight-semibold
  color: $gray-900
  margin-bottom: $spacing-3
  line-height: $line-height-tight

  .dark &
    color: $white

.home-feature__description
  font-size: $font-size-base
  color: $gray-600
  line-height: $line-height-relaxed

  .dark &
    color: $gray-400

// Categories section
.home-categories
  padding: $spacing-12 0

.home-categories__header
  text-align: center
  margin-bottom: $spacing-8

.home-categories__title
  font-size: $font-size-4xl
  font-weight: $font-weight-extrabold
  color: $gray-900
  margin-bottom: $spacing-4
  letter-spacing: $letter-spacing-tight

  .dark &
    color: $white

.home-categories__description
  font-size: $font-size-lg
  color: $gray-600
  max-width: 36rem
  margin: 0 auto

  .dark &
    color: $gray-400

.home-categories__grid
  display: grid
  grid-template-columns: 1fr
  gap: $spacing-6

  @media (min-width: $breakpoint-sm)
    grid-template-columns: repeat(2, 1fr)

  @media (min-width: $breakpoint-lg)
    grid-template-columns: repeat(4, 1fr)

.home-category
  background: $white
  border-radius: $radius-xl
  overflow: hidden
  box-shadow: $shadow-base
  border: 1px solid $gray-200
  transition: all 0.3s ease-in-out
  position: relative

  .dark &
    background: $gray-800
    border-color: $gray-700

  &:hover
    transform: translateY(-3px)
    box-shadow: $shadow-lg

    .home-category__image
      transform: scale(1.05)

.home-category__image-container
  width: 100%
  height: 12rem
  overflow: hidden
  position: relative

.home-category__image
  width: 100%
  height: 100%
  object-fit: cover
  transition: transform 0.3s ease-in-out

.home-category__content
  padding: $spacing-6

.home-category__name
  font-size: $font-size-lg
  font-weight: $font-weight-semibold
  color: $gray-900
  margin-bottom: $spacing-2
  line-height: $line-height-tight

  .dark &
    color: $white

.home-category__count
  font-size: $font-size-sm
  color: $gray-500
  font-weight: $font-weight-medium

  .dark &
    color: $gray-400

// CTA section
.home-cta
  background: linear-gradient(135deg, $primary-600, $accent-600)
  color: $white
  padding: $spacing-16 $spacing-6
  text-align: center
  border-radius: $radius-2xl
  position: relative
  overflow: hidden

  &::before
    content: ''
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M0 0h20L0 20z'/%3E%3C/g%3E%3C/svg%3E")

.home-cta__content
  position: relative
  z-index: 2
  max-width: 48rem
  margin: 0 auto

.home-cta__title
  font-size: $font-size-4xl
  font-weight: $font-weight-extrabold
  line-height: 1.1
  margin-bottom: $spacing-4
  letter-spacing: $letter-spacing-tight

  @media (max-width: $breakpoint-sm)
    font-size: $font-size-3xl

.home-cta__description
  font-size: $font-size-xl
  line-height: $line-height-relaxed
  margin-bottom: $spacing-8
  opacity: 0.9
  max-width: 36rem
  margin-left: auto
  margin-right: auto

.home-cta__button
  background-color: $white
  color: $primary-600
  padding: $spacing-4 $spacing-8
  border-radius: $radius-lg
  font-size: $font-size-lg
  font-weight: $font-weight-semibold
  text-decoration: none
  display: inline-block
  transition: all 0.3s ease-in-out
  box-shadow: $shadow-lg

  &:hover
    background-color: $gray-100
    transform: translateY(-2px)
    box-shadow: $shadow-xl

// Stats section
.home-stats
  padding: $spacing-12 0

.home-stats__grid
  display: grid
  grid-template-columns: repeat(2, 1fr)
  gap: $spacing-8

  @media (min-width: $breakpoint-md)
    grid-template-columns: repeat(4, 1fr)

.home-stat
  text-align: center
  padding: $spacing-6

.home-stat__number
  font-size: $font-size-4xl
  font-weight: $font-weight-extrabold
  color: $primary-600
  line-height: 1
  margin-bottom: $spacing-2

  .dark &
    color: $primary-400

.home-stat__label
  font-size: $font-size-sm
  font-weight: $font-weight-medium
  color: $gray-600
  text-transform: uppercase
  letter-spacing: $letter-spacing-wide

  .dark &
    color: $gray-400

// Responsive adjustments
@media (max-width: $breakpoint-md)
  .home-hero
    padding: $spacing-12 0
    margin: -$spacing-6 0

  .home-hero__title
    font-size: $font-size-4xl

  .home-hero__subtitle
    font-size: $font-size-lg

  .home-features,
  .home-categories,
  .home-stats
    padding: $spacing-8 0

  .home-features__title,
  .home-categories__title
    font-size: $font-size-3xl

  .home-cta
    padding: $spacing-12 $spacing-4

  .home-cta__title
    font-size: $font-size-3xl

  .home-cta__description
    font-size: $font-size-lg

@media (max-width: $breakpoint-sm)
  .home-hero__title
    font-size: $font-size-3xl

  .home-hero__actions
    flex-direction: column
    align-items: center

    .btn
      width: 100%
      max-width: 20rem

  .home-features__grid
    grid-template-columns: 1fr

  .home-categories__grid
    grid-template-columns: 1fr

  .home-stats__grid
    grid-template-columns: 1fr
    gap: $spacing-6