// vue/app/pages/Contacts/index.styl
// Стили исключительно для страницы контактов

.contacts-section
    .contact-card
        transition: all 0.3s ease
        
        &:hover
            transform: translateY(-5px)
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)

    .working-hours
        .hour-item
            transition: all 0.3s ease
            border-bottom: 1px solid #e5e7eb
            
            .dark &
                border-bottom-color: #374151
            
            &:last-child
                border-bottom: none
            
            &:hover
                background-color: rgba(0, 0, 0, 0.02)
                
                .dark &
                    background-color: rgba(255, 255, 255, 0.02)

    .transport-list
        li
            position: relative
            padding-left: 1rem
            
            &::before
                content: '•'
                position: absolute
                left: 0
                color: #d69e2e

// Адаптивность для мобильных устройств
@media (max-width: 768px)
    .contacts-section
        .grid
            gap: 1rem
            
        .bg-white, .bg-gray-800
            padding: 1.5rem
            
        .text-4xl
            font-size: 2.25rem
            line-height: 2.5rem

// Анимации для контактных карточек
@keyframes contactCardAppear
    from
        opacity: 0
        transform: translateX(-50px)
    to
        opacity: 1
        transform: translateX(0)

.contact-card
    animation: contactCardAppear 0.6s ease forwards
    
    &:nth-child(1)
        animation-delay: 0.1s
    &:nth-child(2)
        animation-delay: 0.2s
    &:nth-child(3)
        animation-delay: 0.3s
    &:nth-child(4)
        animation-delay: 0.4s