/* ==========================================================
   PROCESS.CSS
   Блок "Как проходит работа"
   ========================================================== */

.process{
    background:var(--color-background);
}

/* ==========================================================
   Этапы работы
   ========================================================== */

.process-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:24px;
    margin-bottom:80px;
}

.process-item{
    position:relative;
    padding:28px 24px;
    background:#ffffff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    text-align:center;
    box-shadow:var(--shadow-sm);
    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.process-item:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
}

.process-number{
    width:56px;
    height:56px;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--gradient-primary);
    color:#ffffff;
    font-size:1.35rem;
    font-weight:700;
}

.process-item h3{
    margin-bottom:14px;
}

.process-item p{
    margin:0;
    line-height:1.7;
}

/* ==========================================================
   Блок предварительной оценки
   ========================================================== */

.assessment{
    padding:48px;
    background:#ffffff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-md);
}

.assessment-content{
    max-width:760px;
    margin:0 auto;
}

.assessment-content h2{
    text-align:center;
    margin-bottom:20px;
}

.assessment-content > p{
    text-align:center;
    margin-bottom:40px;
}

.assessment-form{
    display:grid;
    gap:24px;
}

.assessment-question{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.assessment-question label{
    font-weight:600;
    color:var(--color-secondary);
}

.assessment-question select{
    width:100%;
    min-height:52px;
    padding:14px 16px;
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    background:#ffffff;
    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.assessment-question select:focus{
    border-color:var(--color-primary);
    box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

#assessmentButton{
    margin-top:8px;
}

.assessment-result{
    margin-top:24px;
    padding:28px;
    background:#eff6ff;
    border:1px solid rgba(37,99,235,.2);
    border-radius:var(--radius-lg);
    text-align:center;
}

.assessment-result p{
    margin-bottom:24px;
}

/* ==========================================================
   Анимация
   ========================================================== */

.process-item{
    animation:processFade .6s ease both;
}

.process-item:nth-child(2){
    animation-delay:.08s;
}

.process-item:nth-child(3){
    animation-delay:.16s;
}

.process-item:nth-child(4){
    animation-delay:.24s;
}

.process-item:nth-child(5){
    animation-delay:.32s;
}

@keyframes processFade{

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

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

}

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

@media (max-width:1200px){

    .process-grid{
        grid-template-columns:repeat(3,1fr);
    }

}

@media (max-width:992px){

    .assessment{
        padding:36px;
    }

}

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

@media (max-width:768px){

    .process-grid{
        grid-template-columns:1fr;
        gap:20px;
        margin-bottom:56px;
    }

    .assessment{
        padding:28px 24px;
    }

    .assessment-result{
        padding:24px;
    }

}

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

@media (max-width:480px){

    .process-item{
        padding:24px 20px;
    }

    .process-number{
        width:48px;
        height:48px;
        font-size:1.15rem;
    }

    .assessment{
        padding:20px;
    }

}