/* ==========================================================
   ARTICLES.CSS
   Полезные статьи
   ========================================================== */

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

.articles-content{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:40px;
    align-items:start;
}

/* ==========================================================
   Меню статей
   ========================================================== */

.articles-menu{
    position:sticky;
    top:110px;
    padding:28px;
    background:#ffffff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
}

.articles-menu h3{
    margin-bottom:20px;
    font-size:1.2rem;
}

.articles-menu ul{
    margin:0;
}

.articles-menu li{
    margin-bottom:14px;
}

.articles-menu li:last-child{
    margin-bottom:0;
}

.articles-menu a{
    display:block;
    color:var(--color-text);
    transition:all var(--transition);
}

.articles-menu a:hover{
    color:var(--color-primary);
    padding-left:6px;
}

/* ==========================================================
   Карточки статей
   ========================================================== */

.articles-list{
    display:flex;
    flex-direction:column;
    gap:40px;
}

.article-card{
    margin-bottom:0;
    padding:40px;
    background:#ffffff;
    border:1px solid var(--color-border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-sm);
    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

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

.article-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
}

.article-card h2{
    margin-bottom:24px;
}

.article-card h3{
    margin-top:32px;
    margin-bottom:16px;
    font-size:1.35rem;
}

.article-card p{
    margin-bottom:18px;
    line-height:1.8;
}

.article-card ul{
    margin:24px 0;
}

.article-card li{
    position:relative;
    padding-left:28px;
    margin-bottom:14px;
    line-height:1.7;
}

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

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

/* ==========================================================
   Кнопка статьи
   ========================================================== */

.article-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:20px;
    padding:14px 28px;
    border-radius:var(--radius-md);
    background:var(--gradient-primary);
    color:#ffffff;
    font-weight:600;
    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.article-button:hover{
    color:#ffffff;
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}

/* ==========================================================
   Ссылки внутри текста
   ========================================================== */

.article-card a:not(.article-button){
    font-weight:600;
    color:var(--color-primary);
}

.article-card a:not(.article-button):hover{
    color:var(--color-primary-hover);
    text-decoration:underline;
}

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

.article-card{
    animation:articleFade .5s ease both;
}

@keyframes articleFade{

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

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

}

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

@media (max-width:992px){

    .articles-content{
        grid-template-columns:1fr;
    }

    .articles-menu{
        position:static;
    }

}

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

@media (max-width:768px){

    .article-card{
        padding:28px 24px;
    }

    .article-button{
        width:100%;
    }

}

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

@media (max-width:480px){

    .articles-menu{
        padding:20px;
    }

    .article-card{
        padding:20px;
        border-radius:var(--radius-lg);
    }

    .article-card h2{
        font-size:1.5rem;
    }

    .article-card h3{
        font-size:1.2rem;
    }

}