// Стили для компонента Page

.page-container
  min-height: 60vh

.page-hero
  position: relative
  
  &::after
    content: ''
    position: absolute
    bottom: 0
    left: 0
    right: 0
    height: 100px
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.5))
    pointer-events: none

// Стили для markdown контента
.page-content
  // Кастомные классы через markdown теги
  .content-section
    margin: 2rem 0
    padding: 1.5rem
    border-radius: 8px
    
    &.bg-gray-50
      background-color: #f9fafb
    
    &.bg-blue-50  
      background-color: #eff6ff
    
    &.shadow-md
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1)
  
  // Стили для кастомных компонентов в контенте
  .custom-component
    margin: 2rem 0
    border: 1px solid #e5e7eb
    border-radius: 8px
    overflow: hidden
    
    &.interactive
      transition: all 0.3s ease
      
      &:hover
        transform: translateY(-2px)
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1)

// Адаптивные стили
@media (max-width: 768px)
  .page-hero
    h1
      font-size: 2.5rem !important
    
    p
      font-size: 1.1rem !important

// Анимации
.fade-enter-active,
.fade-leave-active
  transition: opacity 0.3s ease

.fade-enter-from,
.fade-leave-to
  opacity: 0

// Темная тема
@media (prefers-color-scheme: dark)
  .dark
    .page-content
      article
        @apply prose-invert
      
      .content-section
        &.bg-gray-50
          background-color: #374151
        
        &.bg-blue-50
          background-color: #1e3a8a