/* ============================================================
   Pure News Info - 页面样式: 文章详情/搜索/404/评论
   ============================================================ */

/* Article Detail */
.article-detail { background: var(--card-bg); border-radius: var(--radius-lg); border: 1px solid var(--border-color); overflow: hidden; }
.article-detail .article-header { padding: var(--gap-xl) var(--gap-xl) var(--gap-md); }
.article-detail .article-category { display: inline-block; padding: 4px 12px; background: var(--accent-color); color: #fff; font-size: var(--font-xs); font-weight: 600; border-radius: var(--radius-sm); margin-bottom: var(--gap-md); }
.article-detail .article-title { font-size: var(--font-3xl); font-weight: 700; line-height: 1.3; color: var(--primary-color); margin-bottom: var(--gap-md); }
.article-detail .article-meta { display: flex; align-items: center; gap: var(--gap-md); flex-wrap: wrap; font-size: var(--font-sm); color: var(--text-secondary); padding-bottom: var(--gap-md); border-bottom: 1px solid var(--border-color); }
.article-detail .article-meta span { display: flex; align-items: center; gap: 4px; }

.article-cover { width: 100%; overflow: hidden; }
.article-cover img { width: 100%; height: auto; max-height: 500px; object-fit: cover; }
.article-cover .cover-caption { text-align: center; font-size: var(--font-xs); color: var(--text-secondary); padding: 8px var(--gap-xl); background: var(--bg-color); }

.article-content { padding: var(--gap-xl); font-size: var(--font-base); line-height: 1.9; color: var(--text-color); }
.article-content p { margin-bottom: 1.2em; }
.article-content h2 { font-size: var(--font-2xl); font-weight: 700; color: var(--primary-color); margin: 1.5em 0 0.8em; padding-left: 14px; border-left: 4px solid var(--accent-color); }
.article-content h3 { font-size: var(--font-xl); font-weight: 600; margin: 1.3em 0 0.6em; color: var(--primary-color); }
.article-content ul, .article-content ol { padding-left: 1.5em; margin-bottom: 1.2em; }
.article-content ul li { list-style: disc; margin-bottom: 0.4em; }
.article-content ol li { list-style: decimal; margin-bottom: 0.4em; }
.article-content blockquote { border-left: 3px solid var(--accent-color); padding: 12px 18px; margin: 1.2em 0; background: var(--bg-color); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-style: italic; color: var(--text-secondary); }
.article-content table { margin: 1.2em 0; border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; }
.article-content table th, .article-content table td { padding: 10px 14px; border: 1px solid var(--border-color); font-size: var(--font-sm); }
.article-content table th { background: var(--bg-color); font-weight: 600; }
.article-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 1.2em auto; }
.article-content a { color: var(--accent-color); text-decoration: underline; text-underline-offset: 3px; }
.article-content a:hover { opacity: 0.8; }
.article-content .image-caption { text-align: center; font-size: var(--font-xs); color: var(--text-secondary); margin-top: -0.8em; margin-bottom: 1.2em; }
.article-content iframe, .article-content video { max-width: 100%; border-radius: var(--radius-md); margin: 1.2em 0; }

.article-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: var(--gap-md) var(--gap-xl); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.article-tags .tags-label { font-size: var(--font-sm); font-weight: 600; color: var(--primary-color); }
.article-tags a { display: inline-block; padding: 4px 12px; background: var(--bg-color); border-radius: var(--radius-full); font-size: var(--font-xs); color: var(--text-secondary); transition: all var(--transition-fast); }
.article-tags a:hover { background: var(--accent-color); color: #fff; }

.article-nav { display: flex; justify-content: space-between; gap: var(--gap-md); padding: var(--gap-md) var(--gap-xl); }
.article-nav a { flex: 1; min-width: 0; font-size: var(--font-sm); color: var(--text-secondary); transition: color var(--transition-fast); }
.article-nav a:hover { color: var(--accent-color); }
.article-nav .nav-label { font-size: var(--font-xs); color: var(--text-secondary); margin-bottom: 4px; }
.article-nav .nav-title { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

.related-articles { padding: var(--gap-xl); border-top: 1px solid var(--border-color); }
.related-articles .related-title { font-size: var(--font-lg); font-weight: 700; color: var(--primary-color); margin-bottom: var(--gap-md); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-md); }
.related-grid .related-item { border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition-fast); }
.related-grid .related-item:hover { border-color: var(--accent-color); }
.related-grid .related-item img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.related-grid .related-item .related-item-title { padding: 10px 12px; font-size: var(--font-sm); font-weight: 500; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.related-grid .related-item .related-item-meta { padding: 0 12px 10px; font-size: var(--font-xs); color: var(--text-secondary); }

/* Comments */
.comments-section { padding: var(--gap-xl); border-top: 1px solid var(--border-color); }
.comments-section .comments-title { font-size: var(--font-lg); font-weight: 700; color: var(--primary-color); margin-bottom: var(--gap-lg); }

.comment-item { display: flex; gap: var(--gap-md); padding: var(--gap-md) 0; border-bottom: 1px solid var(--border-color); }
.comment-item .comment-avatar { width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--bg-color); flex-shrink: 0; overflow: hidden; }
.comment-item .comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment-item .comment-body { flex: 1; min-width: 0; }
.comment-item .comment-author { font-size: var(--font-sm); font-weight: 600; margin-bottom: 4px; }
.comment-item .comment-text { font-size: var(--font-sm); line-height: 1.6; color: var(--text-secondary); }
.comment-item .comment-time { font-size: var(--font-xs); color: var(--text-secondary); margin-top: 6px; }
.comment-item .comment-reply { font-size: var(--font-xs); color: var(--accent-color); cursor: pointer; margin-top: 4px; }

.comment-form { margin-top: var(--gap-lg); }
.comment-form textarea { width: 100%; min-height: 100px; padding: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: var(--font-sm); font-family: inherit; resize: vertical; outline: none; transition: border-color var(--transition-fast); }
.comment-form textarea:focus { border-color: var(--accent-color); }
.comment-form .form-actions { display: flex; gap: var(--gap-sm); margin-top: var(--gap-sm); }
.comment-form input[type="text"], .comment-form input[type="email"] { flex: 1; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: var(--font-sm); outline: none; transition: border-color var(--transition-fast); }
.comment-form input:focus { border-color: var(--accent-color); }
.comment-form button[type="submit"] { padding: 10px 24px; background: var(--accent-color); color: #fff; border-radius: var(--radius-md); font-size: var(--font-sm); font-weight: 600; white-space: nowrap; transition: opacity var(--transition-fast); }
.comment-form button[type="submit"]:hover { opacity: 0.85; }

/* 404 Page */
.error-page { text-align: center; padding: var(--gap-2xl) var(--gap-lg); min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.error-page .error-code { font-size: 120px; font-weight: 900; color: var(--primary-color); line-height: 1; margin-bottom: var(--gap-md); letter-spacing: -4px; }
.error-page .error-title { font-size: var(--font-2xl); font-weight: 600; color: var(--text-color); margin-bottom: var(--gap-md); }
.error-page .error-desc { font-size: var(--font-base); color: var(--text-secondary); margin-bottom: var(--gap-xl); max-width: 480px; }
.error-page .error-actions { display: flex; gap: var(--gap-md); flex-wrap: wrap; justify-content: center; margin-bottom: var(--gap-2xl); }
.error-page .error-actions a { padding: 12px 28px; border-radius: var(--radius-md); font-size: var(--font-sm); font-weight: 600; white-space: nowrap; }
.error-page .error-actions .btn-primary { background: var(--accent-color); color: #fff; }
.error-page .error-actions .btn-primary:hover { opacity: 0.85; color: #fff; }
.error-page .error-actions .btn-outline { border: 1px solid var(--border-color); color: var(--text-color); }
.error-page .error-actions .btn-outline:hover { border-color: var(--accent-color); color: var(--accent-color); }

.error-page .error-search { width: 100%; max-width: 480px; margin-bottom: var(--gap-xl); }
.error-page .error-search form { display: flex; gap: var(--gap-sm); }
.error-page .error-search input { flex: 1; padding: 12px 16px; border: 2px solid var(--border-color); border-radius: var(--radius-md); font-size: var(--font-base); outline: none; }
.error-page .error-search input:focus { border-color: var(--accent-color); }
.error-page .error-search button { padding: 12px 24px; background: var(--accent-color); color: #fff; border-radius: var(--radius-md); font-size: var(--font-sm); font-weight: 600; }

.error-page .error-recent { text-align: left; width: 100%; max-width: 640px; }
.error-page .error-recent h3 { font-size: var(--font-lg); font-weight: 600; color: var(--primary-color); margin-bottom: var(--gap-md); }