/* ==========================================================
   SERVICES.CSS
   Блок "Наши направления помощи"
   ========================================================== */

.services{
    background:var(--color-surface);
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
    align-items:stretch;
}

.service-card{
    display:flex;
    flex-direction:column;
    padding:32px;
    background:#fff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-sm);
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.service-card:hover{
    transform:translateY(-8px);
    border-color:var(--color-primary);
    box-shadow:var(--shadow-lg);
}

.service-icon{
    width:72px;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:24px;
    font-size:2rem;
    border-radius:50%;
    background:#eff6ff;
}

.service-card h3{
    margin-bottom:18px;
}

.service-card p{
    margin-bottom:24px;
    line-height:1.7;
}

.service-card ul{
    flex:1;
    margin-bottom:28px;
}

.service-card li{
    position:relative;
    padding-left:26px;
    margin-bottom:14px;
    line-height:1.6;
}

.service-card li:last-child{
    margin-bottom:0;
}

.service-card li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:var(--color-success);
    font-weight:700;
}

.service-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    color:var(--color-primary);
    transition:all var(--transition);
}

.service-link::after{
    content:"→";
    transition:transform var(--transition);
}

.service-link:hover{
    color:var(--color-primary-hover);
}

.service-link:hover::after{
    transform:translateX(6px);
}


/* ==========================================================
   Выделение карточек
   ========================================================== */

#bankruptcy{
    border-top:4px solid #2563eb;
}

#restructuring{
    border-top:4px solid #16a34a;
}

#financial-relief{
    border-top:4px solid #f59e0b;
}


/* ==========================================================
   Анимация появления
   ========================================================== */

.service-card{
    animation:serviceFade .6s ease both;
}

.service-card:nth-child(2){
    animation-delay:.1s;
}

.service-card:nth-child(3){
    animation-delay:.2s;
}

@keyframes serviceFade{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* ==========================================================
   Планшеты
   ========================================================== */

@media (max-width:992px){

    .services-grid{
        grid-template-columns:1fr;
        gap:24px;
    }

    .service-card{
        padding:28px;
    }

}


/* ==========================================================
   Телефоны
   ========================================================== */

@media (max-width:768px){

    .service-icon{
        width:64px;
        height:64px;
        font-size:1.75rem;
    }

    .service-card{
        padding:24px;
    }

}


/* ==========================================================
   Маленькие экраны
   ========================================================== */

@media (max-width:480px){

    .service-card{
        padding:20px;
    }

    .service-card h3{
        font-size:1.35rem;
    }

}