/* ===== Article List — page-article-list.css ===== */

.article_grid { display: flex; flex-direction: column; gap: 20px; }

.modern_article_card { background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid #eee; transition: 0.4s; display: flex; align-items: start; gap: 25px; padding: 25px; box-shadow: var(--shadow-card); }
.modern_article_card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); border-color: rgba(2, 160, 225, 0.2); }

.art_img_box { position: relative; width: 200px; height: 140px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #fdfdfd; display: flex; align-items: center; justify-content: center; border: 1px solid #f0f0f0; }
.art_img_box img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.art_img_box img.is_logo { width: 80%; height: 80%; object-fit: contain; padding: 10px; }

.art_info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.art_info h3 { font-size: 19px; font-weight: 700; color: var(--text-dark); line-height: 1.4; margin-bottom: 12px; }
.art_info h3 a { text-decoration: none; color: inherit; transition: 0.3s; }
.art_info h3 a:hover { color: var(--primary-blue); }
.art_meta { display: flex; align-items: center; gap: 15px; font-size: 13px; color: #999; margin-bottom: 12px; }
.cat_tag { background: rgba(2, 160, 225, 0.08); color: var(--primary-blue); padding: 4px 10px; border-radius: 20px; font-weight: 600; font-size: 12px; }
.art_excerpt { font-size: 14px; color: #777; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 991px) {
  .modern_article_card { flex-direction: column; padding: 15px; gap: 15px; }
  .art_img_box { width: 100%; height: 200px; }
  .modern_article_card:hover { transform: none; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
}