/* ==========================================================
   Artigos — equipamentos-linha-montagem
   (depende de style.css e pages.css)
   ========================================================== */
.articles { background: #fff; padding: 120px 60px; }
.articles-grid {
  display: flex; flex-wrap: wrap; gap: 40px 24px;
  max-width: 1140px; margin: 20px auto 0;
}
.article-card, .article-filler { flex: 1 0 30%; min-width: 0; }
.article-card {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding: 20px; background: #fff; border-radius: 15px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .17);
  transition: transform .3s, box-shadow .3s;
}
.article-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.article-body { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.article-body img { display: block; width: 100%; border-radius: 10px; }
.article-title {
  font-family: "Inter", sans-serif; font-size: 20px; font-weight: 600;
  line-height: 1.4; letter-spacing: -0.03em; color: #0A0A0A;
}

@media (max-width: 1024px) {
  .articles { padding: 80px 0; }
  .articles-grid { max-width: 85%; gap: 32px 20px; margin-top: 16px; }
  .article-card, .article-filler { flex-basis: 45%; }
}

@media (max-width: 767px) {
  .articles { padding: 60px 0; }
  .articles-grid { max-width: 90%; gap: 24px 16px; margin-top: 12px; }
  .article-card { flex-basis: 100%; }
  .article-title { font-size: 18px; }
}