/* 内容布局 */
.article-detail-content {margin-top: 15px;}
.content-layout {display: grid;grid-template-columns: 1fr 300px;gap: 30px;align-items: start;}

/* 左侧文章主体 */
.article-main {background: white;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);overflow: hidden;}

/* 面包屑导航 */
.breadcrumb {display: flex;align-items: center;gap: 8px;padding: 20px 30px 0;font-size: 14px;color: #666;}
.breadcrumb-item {color: #666;text-decoration: none;transition: color 0.3s ease;}
.breadcrumb-item:hover {color: #0060af;}
.breadcrumb-item.current {color: #333;font-weight: 500;}
.breadcrumb i {font-size: 12px;color: #999;}

/* 文章标题 */
.article-title {font-size: 1.75rem;font-weight: 700;color: #333;margin: 20px 30px 0;line-height: 1.4;}

/* 文章元信息 */
.article-meta {display: flex;justify-content: space-between;align-items: center;padding: 20px 30px;border-bottom: 1px solid #f0f0f0;}
.author-info {display: flex;align-items: center;gap: 12px;}
.author-avatar {width: 40px;height: 40px;border-radius: 50%;object-fit: cover;border: 2px solid #f0f0f0;}
.author-name {font-weight: 600;color: #333;font-size: 16px;}
.article-stats {display: flex;align-items: center;gap: 20px;font-size: 14px;color: #666;}
.publish-time, .view-count {display: flex;align-items: center;gap: 5px;}
.publish-time i, .view-count i {color: #0060af;}

/* 文章介绍 */
.article-intro {padding: 20px 30px;background: #f8f9fa;border-bottom: 1px solid #e8eaec;}
.article-intro p {margin: 0;color: #666;font-size: 16px;line-height: 1.6;}

/* 文章横幅图 */
.article-banner {position: relative;height: 300px;overflow: hidden;margin: 0;}
.article-banner img {width: 100%;height: 100%;object-fit: cover;}
.banner-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));display: flex;align-items: center;justify-content: center;padding: 20px;}
.banner-title {color: white;font-size: 2.5rem;font-weight: 700;text-align: center;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);line-height: 1.3;margin: 0;}

/* 文章正文 */
.article-body {padding: 30px;}
.article-content {font-size: 16px;line-height: 1.8;color: #333;}
.article-content p {margin-bottom: 10px;}
.article-content h1, .article-content h2, .article-content h3, .article-content h4, .article-content h5, .article-content h6 {color: #333;margin: 30px 0 15px 0;font-weight: 600;}
.article-content ul, .article-content ol {margin: 20px 0;padding-left: 30px;}
.article-content li {margin-bottom: 10px;line-height: 1.6;}
.article-content img {max-width: 100%;height: auto;border-radius: 8px;margin: 5px 0;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
.article-content blockquote {border-left: 4px solid #0060af;margin: 20px 0;background: #f8f9fa;padding: 15px 20px;border-radius: 0 8px 8px 0;font-style: italic;color: #666;}
.article-content iframe, .article-content video, .article-content object, .article-content embed {max-width: 100%;height: auto;}

/* 文章标签 */
.article-tags {display: flex;align-items: center;gap: 15px;padding: 20px 30px;border-top: 1px solid #f0f0f0;background: #f8f9fa;}
.tags-label {font-weight: 600;color: #333;font-size: 16px;}
.tags-list {display: flex;flex-wrap: wrap;gap: 10px;}
.tag {background: #e3f2fd;color: #1976d2;padding: 6px 12px;border-radius: 15px;font-size: 14px;text-decoration: none;transition: all 0.3s ease;}
.tag:hover {background: #0060af;color: white;transform: translateY(-1px);}

/* 相关文章 */
.related-articles {padding: 30px;border-top: 1px solid #f0f0f0;}
.section-title {font-size: 1.5rem;font-weight: 600;color: #333;margin: 0 0 20px 0;padding-bottom: 10px;border-bottom: 2px solid #0060af;display: inline-block;}
.related-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;}
.related-item {background: white;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);transition: all 0.3s ease;}
.related-item:hover {transform: translateY(-5px);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);}
.related-thumb {position: relative;height: 120px;overflow: hidden;}
.related-thumb img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;}
.related-item:hover .related-thumb img {transform: scale(1.05);}
.thumb-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));display: flex;align-items: center;justify-content: center;padding: 10px;}
.thumb-title {color: white;font-size: 14px;font-weight: 600;text-align: center;line-height: 1.3;margin: 0;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);}
.related-info {padding: 15px;}
.related-title {margin: 0 0 10px 0;font-size: 14px;line-height: 1.4;}
.related-title a {color: #333;text-decoration: none;transition: color 0.3s ease;}
.related-title a:hover {color: #0060af;}
.related-meta {display: flex;justify-content: space-between;align-items: center;font-size: 12px;color: #999;}
.related-views {color: #0060af;font-weight: 500;}

/* 热门文章排行 */
.hot-articles-rank {padding: 30px;border-top: 1px solid #f0f0f0;background: #f8f9fa;}
.rank-list {display: flex;flex-direction: column;gap: 15px;}
.rank-item {display: flex;align-items: center;gap: 15px;padding: 15px;background: white;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);transition: all 0.3s ease;}
.rank-item:hover {transform: translateX(5px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);}
.rank-number {flex-shrink: 0;width: 30px;height: 30px;line-height: 30px;text-align: center;background: #0060af;color: white;border-radius: 50%;font-weight: 600;font-size: 14px;}
.rank-content {flex: 1;min-width: 0;}
.rank-title {margin: 0 0 8px 0;font-size: 14px;line-height: 1.4;}
.rank-title a {color: #333;text-decoration: none;transition: color 0.3s ease;}
.rank-title a:hover {color: #0060af;}
.rank-views {font-size: 12px;color: #999;font-weight: 500;}

/* 侧边栏样式 - 复用文章列表页的样式 */
.sidebar {display: flex;flex-direction: column;gap: 20px;}
.sidebar-widget {background: white;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);overflow: hidden;}
.widget-title {display: flex;align-items: center;gap: 8px;padding: 15px 20px;margin: 0;background: linear-gradient(135deg, #0060af, #1976d2);color: white;font-size: 16px;font-weight: 600;}
.widget-title i {font-size: 14px;}

/* 置顶文章 */
.top-articles {padding: 0;}
.top-article-item {display: flex;gap: 12px;padding: 15px 20px;border-bottom: 1px solid #f0f0f0;transition: background 0.3s ease;position: relative;}
.top-article-item:hover {background: #f8f9fa;}
.top-article-item:last-child {border-bottom: none;}
.top-article-item::before {content: none;}
.top-article-thumb {flex-shrink: 0;width: 85px;height: 60px;border-radius: 4px;overflow: hidden;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.top-article-thumb img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;}
.top-article-item:hover .top-article-thumb img {transform: scale(1.05);}
.top-article-content {flex: 1;min-width: 0;}
.top-article-title {margin: 0 0 8px 0;font-size: 14px;line-height: 1.4;font-weight: 600;}
.top-article-title a {color: #333;text-decoration: none;transition: color 0.3s ease;}
.top-article-title a:hover {color: #0060af;}
.top-article-meta {display: flex;justify-content: space-between;align-items: center;font-size: 12px;color: #999;}
.top-article-views {display: flex;align-items: center;gap: 3px;}

/* 热门文章 */
.hot-articles {padding: 0;}
.hot-article-item {display: flex;align-items: flex-start;gap: 12px;padding: 15px 20px;border-bottom: 1px solid #f0f0f0;transition: background 0.3s ease;}
.hot-article-item:hover {background: #f8f9fa;}
.hot-article-item:last-child {border-bottom: none;}
.hot-article-rank {flex-shrink: 0;width: 24px;height: 24px;line-height: 24px;text-align: center;background: #0060af;color: white;border-radius: 50%;font-size: 12px;font-weight: 600;}
.hot-article-rank:nth-child(1) {background: #ff6b6b;}
.hot-article-rank:nth-child(2) {background: #ffa726;}
.hot-article-rank:nth-child(3) {background: #66bb6a;}
.hot-article-content {flex: 1;min-width: 0;}
.hot-article-title {margin: 0 0 8px 0;font-size: 14px;line-height: 1.4;}
.hot-article-title a {color: #333;text-decoration: none;transition: color 0.3s ease;}
.hot-article-title a:hover {color: #0060af;}
.hot-article-meta {display: flex;justify-content: space-between;align-items: center;font-size: 12px;color: #999;}
.hot-article-views {display: flex;align-items: center;gap: 3px;}

/* 推荐阅读 */
.recommended-articles {padding: 0;}
.recommended-article-item {display: flex;gap: 12px;padding: 15px 20px;border-bottom: 1px solid #f0f0f0;transition: background 0.3s ease;}
.recommended-article-item:hover {background: #f8f9fa;}
.recommended-article-item:last-child {border-bottom: none;}
.rec-article-thumb {flex-shrink: 0;width: 85px;height: 60px;border-radius: 4px;overflow: hidden;}
.rec-article-thumb img {width: 100%;height: 100%;object-fit: cover;}
.rec-article-content {flex: 1;min-width: 0;}
.rec-article-title {margin: 0 0 8px 0;font-size: 14px;line-height: 1.4;}
.rec-article-title a {color: #333;text-decoration: none;transition: color 0.3s ease;}
.rec-article-title a:hover {color: #0060af;}
.rec-article-meta {display: flex;justify-content: space-between;align-items: center;font-size: 12px;color: #999;}
.rec-article-category {background: #e3f2fd;color: #1976d2;padding: 2px 8px;border-radius: 10px;font-size: 11px;}
.rec-article-views {display: flex;align-items: center;gap: 3px;}

/* 响应式设计 */

@media (max-width: 768px) {
.content-layout {grid-template-columns: 1fr;gap: 20px;}
.article-title {font-size: 1.5rem;margin: 15px 20px 0;}
.article-meta {flex-direction: column;gap: 15px;align-items: flex-start;padding: 15px 20px;}
.article-stats {gap: 15px;}
.article-intro {padding: 15px 20px;}
.banner-title {font-size: 1.8rem;}
.article-body {padding: 20px;}
.article-tags {padding: 15px 20px;flex-direction: column;align-items: flex-start;gap: 10px;}
.related-articles, .hot-articles-rank {padding: 20px;}
.related-grid {grid-template-columns: 1fr;gap: 15px;}
.breadcrumb {padding: 15px 20px 0;font-size: 13px;}
}

@media (max-width: 480px) {
.article-title {font-size: 1.3rem;}
.banner-title {font-size: 1.5rem;}
.article-content {font-size: 15px;}

/* .article-content p {
        text-indent: 1em;
    } */
.article-content img {width: 100%;height: auto;border-radius: 6px;margin: 10px 0;}
.related-thumb {height: 100px;}
.thumb-title {font-size: 13px;}
}