// vue/app/shared/EventDetailModal/index.styl
// Стили исключительно для модального окна деталей мероприятия

.event-detail
  .event-stats
    .stat
      transition: all 0.3s ease
      border: 1px solid transparent
      
      &:hover
        border-color: #d69e2e
        transform: translateY(-2px)
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)

  .info-item
    transition: all 0.3s ease
    
    &:hover
      .icon
        transform: scale(1.1)

  .action-buttons
    button
      transition: all 0.3s ease
      position: relative
      overflow: hidden
      
      &::before
        content: ''
        position: absolute
        top: 50%
        left: 50%
        width: 0
        height: 0
        background: rgba(255, 255, 255, 0.2)
        border-radius: 50%
        transform: translate(-50%, -50%)
        transition: width 0.6s, height 0.6s
        
      &:hover::before
        width: 300px
        height: 300px
        
      &:active
        transform: scale(0.98)

// Анимации для модального контента
.modal-content
  .event-visual
    img
      transition: transform 0.5s ease
      
    &:hover img
      transform: scale(1.02)

// Адаптивность
@media (max-width: 1024px)
  .event-detail
    .grid
      grid-template-columns: 1fr !important
      
    .action-buttons
      flex-direction: column

@media (max-width: 640px)
  .event-detail
    .event-stats
      grid-template-columns: 1fr
      gap: 0.5rem