.article-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-bottom: 60px; }
.article-card { background: #fff; border: 1px solid #eef2f7; border-radius: 8px; overflow: hidden; transition: all .3s; box-shadow: 0 2px 12px rgba(0,0,0,.06); display: flex; flex-direction: column; }
.article-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,.1); border-color: rgba(0,168,255,.25); }
.article-card .info { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.article-card .date { font-size: 12px; color: #999; }
.article-card h3 { font-size: 17px; color: #1a2a3a; margin: 8px 0; line-height: 1.5; }
.article-card p { font-size: 14px; color: #777; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.article-card .more { margin-top: 14px; color: #00a8ff; font-size: 14px; font-weight: 600; }
.article-body { max-width: 860px; margin: 0 auto; padding: 10px 15px 60px; }
.article-body h1 { font-size: 30px; color: #1a2a3a; line-height: 1.45; margin-bottom: 8px; }
.article-meta { color: #999; font-size: 13px; margin-bottom: 24px; border-bottom: 1px solid #eef2f7; padding-bottom: 16px; }
.article-body h2 { font-size: 24px; color: #1a2a3a; margin: 34px 0 14px; padding-left: 14px; border-left: 4px solid #00a8ff; }
.article-body h3 { font-size: 18px; color: #1a2a3a; margin: 22px 0 10px; }
.article-body p { font-size: 16px; color: #555; line-height: 1.95; margin-bottom: 14px; }
.article-body ul { margin: 0 0 16px 20px; }
.article-body li { font-size: 16px; color: #555; line-height: 1.9; margin-bottom: 6px; }
.article-figure { margin: 26px 0; }
.article-figure img { width: 100%; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.article-figure figcaption { font-size: 13px; color: #888; text-align: center; margin-top: 8px; }
.article-video { width: 100%; border-radius: 8px; margin: 6px 0 20px; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.article-tags { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0; }
.article-tags span { background: #f0f7ff; color: #00a8ff; padding: 5px 14px; border-radius: 14px; font-size: 13px; }
.article-cta { background: #f0f7ff; border: 1px solid #d8ecff; border-radius: 10px; padding: 26px 22px; text-align: center; margin: 30px 0; }
.article-cta p { margin: 0 0 14px; color: #444; font-size: 15px; }
.article-cta a { display: inline-block; padding: 11px 32px; background: #00a8ff; color: #fff; border-radius: 24px; font-size: 15px; }
@media (max-width: 1024px) { .article-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .article-list { grid-template-columns: 1fr; } .article-body p { font-size: 15px; } }