/* 容器与主内容 */
.container {max-width: 1200px;margin: 0 auto;padding: 0 15px;}
.main-content {padding-top: 15px;}

/* 首页：轮播与右侧列表 */
.hero-section {display: flex;gap: 20px;margin-bottom: 20px;align-items: flex-start;}
.hero-banner {overflow: hidden;width: 800px;height: 312px;position: relative;flex-shrink: 0;}

/* Banner加载状态 */
.banner-loading {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);display: flex;flex-direction: column;align-items: center;justify-content: center;z-index: 5;}
.loading-spinner {width: 40px;height: 40px;border: 4px solid #f3f3f3;border-top: 4px solid #0060af;border-radius: 50%;animation: spin 1s linear infinite;margin-bottom: 15px;}
.banner-loading p {color: #666;font-size: 14px;margin: 0;}

@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
.banner-slider {position: relative;width: 100%;height: 100%;}
.banner-slide {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;pointer-events: none;transition: opacity 0.5s ease-in-out;}
.banner-slide.active {opacity: 1;pointer-events: auto;}

/* Banner标题样式 */
.banner-title {position: absolute;bottom: 15px;left: 15px;color: white;font-size: 18px;max-width: 250px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;z-index: 10;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);transition: all 0.3s ease;}
.banner-title:hover {transform: translateY(-2px);text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);}
.banner-image {width: 100%;height: 100%;object-fit: cover;}
.banner-dots {position: absolute;bottom: 15px;left: 50%;transform: translateX(-50%);display: flex;gap: 8px;z-index: 10;}
.dot {width: 12px;height: 12px;border-radius: 50%;background-color: rgba(255, 255, 255, 0.5);cursor: pointer;transition: background-color 0.3s ease;}
.dot.active {background-color: white;}
.dot:hover {background-color: rgba(255, 255, 255, 0.8);}
.banner-nav {position: absolute;top: 50%;left: 0;right: 0;transform: translateY(-50%);display: flex;justify-content: space-between;padding: 0 5px;z-index: 10;opacity: 0;transition: opacity 0.3s ease;}
.hero-banner:hover .banner-nav {opacity: 1;}
.banner-btn {width: 50px;height: 50px;border: none;background-color: rgba(0, 0, 0, 0.5);color: white;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;backdrop-filter: blur(10px);}
.banner-btn:hover {background-color: rgba(0, 0, 0, 0.7);transform: scale(1.1);}
.banner-btn:active {transform: scale(0.95);}
.banner-btn svg {width: 24px;height: 24px;}
.hero-articles {background-color: white;padding: 12px 15px;border-radius: 8px;flex: 1;min-width: 0;}
.hero-articles h3 {font-size: 18px;margin-bottom: 15px;color: #2c3e50;border-bottom: 2px solid #0060af;padding-bottom: 10px;}
.latest-articles li {margin-bottom: 8px;padding-bottom: 8px;border-bottom: 1px dotted #ccc;}
.latest-articles li:last-child {border-bottom: none;margin-bottom: 0;padding-bottom: 0;}
.latest-articles a {display: flex;justify-content: space-between;align-items: center;gap: 10px;}
.latest-articles .article-title {font-size: 15px;line-height: 1.5;color: #333;flex: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-bottom: 4px;}
.latest-articles .article-title:hover {color: #0060af;}
.latest-articles .article-date {font-size: 11px;color: #999;flex-shrink: 0;white-space: nowrap;}

/* 分类内容区域 */
.category-sections {display: flex;flex-direction: column;gap: 20px;}
.category-section {background-color: white;border-radius: 8px;overflow: hidden;}
.section-header {display: flex;justify-content: space-between;align-items: center;padding: 15px;border-bottom: 1px solid #f0f0f0;}
.section-header h2 {font-size: 20px;color: #2c3e50;margin: 0;}
.more-link {color: #0060af;font-size: 14px;transition: color 0.3s;}
.more-link:hover {color: #093e62;}
.section-content {padding: 20px;}

/* 文章卡片 */
.article-cards {display: grid;grid-template-columns: repeat(5, 1fr);gap: 12px;margin-bottom: 20px;}
.article-card {border-radius: 6px;overflow: hidden;background-color: #f8f9fa;transition: transform 0.3s, box-shadow 0.3s;}
.article-card:hover {transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0,0,0,0.1);}
.article-card a {display: block;}
.card-image {width: 100%;aspect-ratio: 605 / 375;height: auto;display: flex;align-items: center;justify-content: center;position: relative;overflow: hidden;}
.card-image img {width: 100%;height: 100%;object-fit: cover;}
.card-content {padding: 6px 2px;}
.card-content h3 {font-size: 15px;font-weight: normal;line-height: 24px;color: #333;margin: 0;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.card-content h3:hover {color: #0060af;}

/* 文本列表：一行显示3个 */
.text_list {display: grid;grid-template-columns: repeat(3, 1fr);column-gap: 30px;row-gap: 8px;list-style: none;margin: 0;padding: 0;}
.text_list li {line-height: 28px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.text_list li::before {content: '';display: inline-block;width: 4px;height: 4px;margin-right: 6px;border-radius: 50%;background-color: #bbb;vertical-align: middle;}
.text_list li a {color: #333;font-size: 14px;transition: color 0.2s ease;}
.text_list li a:hover {color: #0060af;}

/* 热门区域 */
.hot-sections {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;}
.hot-section {background-color: white;border-radius: 8px;overflow: hidden;}
.hot-articles {padding: 20px;}
.hot-item {margin-bottom: 15px;padding-bottom: 15px;border-bottom: 1px solid #f0f0f0;}
.hot-item:last-child {border-bottom: none;margin-bottom: 0;padding-bottom: 0;}
.hot-item a {display: flex;gap: 12px;}
.hot-content {display: flex;flex-direction: column;min-height: 90px;flex: 1;min-width: 0;}
.hot-thumb {width: 150px;height: 90px;border-radius: 4px;overflow: hidden;flex-shrink: 0;}
.hot-thumb img {width: 100%;height: 100%;object-fit: cover;}
.hot-content h4 {font-size: 18px;line-height: 26px;height: 26px;margin-bottom: 5px;color: #333;font-weight: normal;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.hot-content h4:hover {color: #0060af;}
.hot-meta {font-size: 12px;color: #999;display: flex;gap: 10px;margin-top: auto;align-items: center;justify-content: flex-start;}

/* 热门列表：时间与浏览数小图标 */
.hot-meta .date::before {content: '';display: inline-block;width: 14px;height: 14px;margin-right: 4px;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") no-repeat center/contain;vertical-align: -2px;}
.hot-meta .views::before {content: '';display: inline-block;width: 14px;height: 14px;margin-right: 4px;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center/contain;vertical-align: -2px;}

/* 热门列表描述 */
.hot-desc {font-size: 14px;color: #666;line-height: 22px;height: 44px;overflow: hidden;}
.index-links h4 {font-size: 20px;font-weight: normal;margin-bottom: 15px;color: #0060af;border-bottom: 2px solid #0060af;display: inline-block;padding-bottom: 4px;}
.index-links {text-align: left;margin-top: 30px;}
.index-links ul {display: flex;gap: 12px;justify-content: flex-start;flex-wrap: wrap;}
.index-links a {color: #373737;font-size: 14px;margin-right: 10px;}
.index-links a:hover {color: #373737;text-decoration: none;}

/* ====== 响应式设计 ====== */

/* 桌面端隐藏card-meta */
.card-meta {display: none;}

@media (max-width: 1400px) {
.article-cards {grid-template-columns: repeat(5, 1fr);}
}

@media (max-width: 1200px) {
.article-cards {grid-template-columns: repeat(4, 1fr);}
}

@media (max-width: 1024px) {
.article-cards {grid-template-columns: repeat(3, 1fr);}
.article-list {grid-template-columns: 1fr;}
.hot-sections {grid-template-columns: 1fr;}
}

@media (max-width: 768px) {
.content-wrapper {grid-template-columns: 1fr;gap: 20px;}
.search-input {width: 150px;}
.recommended-articles {grid-template-columns: 1fr;}
.footer-content {flex-direction: column;gap: 20px;text-align: center;}
.footer-info {text-align: center;}

/* 移动端隐藏友情链接版块 */
.index-links {display: none;}

/* 移动端隐藏网站描述信息 */
.footer-info p:first-child {display: none;}

/* 移动端返回顶部按钮样式调整 */
.scroll-top-btn {width: 45px !important;height: 45px !important;bottom: 15px !important;right: 15px !important;}
.scroll-top-btn .icon-arrow-up {width: 20px !important;height: 20px !important;}

/* 首页响应式 */
.hero-section {flex-direction: column;margin-bottom: 0px;}

/* 移动端隐藏hero-articles区域 */
.hero-articles {display: none;}

/* 移动端隐藏text_list区域 */
.text_list {display: none;}

/* 移动端隐藏hot-sections版块 */
.hot-sections {display: none;}
.article-cards {grid-template-columns: 1fr;gap: 15px;}

/* 移动端文章卡片样式 - 参考热门问答 */
.article-card {display: flex;background: white;border-radius: 0;overflow: hidden;box-shadow: 0 2px 8px rgba(0,0,0,0.1);transition: transform 0.3s, box-shadow 0.3s;}
.article-card:hover {transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0,0,0,0.15);}
.article-card a {display: flex;width: 100%;text-decoration: none;}
.card-image {width: 120px;height: 80px;flex-shrink: 0;overflow: hidden;}
.card-image img {width: 100%;height: 100%;object-fit: cover;}
.card-content {flex: 1;padding: 12px 15px;display: flex;flex-direction: column;justify-content: space-between;}
.card-content h3 {font-size: 16px;line-height: 22px;color: #333;margin: 0 0 8px 0;font-weight: normal;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.card-content h3:hover {color: #0060af;}

/* 移动端显示card-meta */
.card-meta {font-size: 12px;color: #999;display: flex;gap: 10px;margin-top: auto;align-items: center;}
.card-meta .publish-date::before {content: '';display: inline-block;width: 14px;height: 14px;margin-right: 4px;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") no-repeat center/contain;vertical-align: -2px;}
.card-meta .views::before {content: '';display: inline-block;width: 14px;height: 14px;margin-right: 4px;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center/contain;vertical-align: -2px;}
.section-header {flex-direction: row;align-items: center;justify-content: space-between;gap: 10px;}
.hero-banner {width: 100%;height: 200px;}

/* 移动端banner标题样式 */
.banner-title {font-size: 16px;max-width: 180px;bottom: 10px;left: 10px;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);}

/* 移动端隐藏banner导航按钮 */
.banner-nav {display: none;}

/* 列表页响应式 */
.list-articles + .sidebar {display: none;}

/* 移动端：左图右文布局，参考首页移动端卡片 */
.list-article-item {display: flex;background: white;border-radius: 0;overflow: hidden;box-shadow: 0 2px 8px rgba(0,0,0,0.1);transition: transform 0.3s, box-shadow 0.3s;margin-bottom: 15px;padding: 0;border-bottom: none;}
.list-article-item:hover {transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0,0,0,0.15);}
.list-article-item a {display: flex;width: 100%;text-decoration: none;gap: 12px;}
.list-articles .list-article-thumbnail {width: 120px;height: 80px;border-radius: 0;overflow: hidden;flex-shrink: 0;}
.list-articles .list-article-thumbnail img {width: 100%;height: 100%;object-fit: cover;}
.list-article-content {flex: 1;padding: 5px 0px;display: flex;flex-direction: column;justify-content: space-between;}
.list-article-title {font-size: 16px;line-height: 22px;color: #333;margin: 0 0 8px 0;font-weight: normal;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.list-article-title:hover {color: #0060af;}
.list-article-excerpt {display: none;}
.list-article-meta {font-size: 12px;color: #999;display: flex;gap: 10px;margin-top: auto;align-items: center;}
.category-header {padding: 20px 15px;}
.category-header h1 {font-size: 24px;}
.articles-list {padding: 15px;}

/* 详情页响应式 - 确保侧边栏显示 */
.article-detail + .sidebar {display: block !important;}

/* 默认隐藏侧边栏下所有模块 */
.sidebar .sidebar-widget {display: none;}

/* 仅显示 推荐文章 模块 */
.sidebar .sidebar-widget.recommended-widget {display: block;}

/* 推荐文章：左图右文横排 */
.recommended-articles .recommended-item a {display: flex;gap: 12px;}
.recommended-articles .rec-thumb {width: 120px;height: 80px;flex-shrink: 0;overflow: hidden;border-radius: 0;}
.recommended-articles .rec-thumb img {width: 100%;height: 100%;object-fit: cover;}
.recommended-articles .rec-content {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding: 0;}
.recommended-articles .rec-content h4 {font-size: 16px;line-height: 22px;margin: 0 0 8px 0;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.recommended-articles .rec-content h4 {line-clamp: 2;}
.article-detail {padding: 20px;}
.article-title {font-size: 24px;}

/* 移动端：发布时间靠左，浏览数靠右 */
.article-meta {flex-direction: row;align-items: center;justify-content: space-between;gap: 10px;width: 100%;}
.article-meta .views {margin-left: auto;text-align: right;}
.article-actions {flex-direction: column;align-items: stretch;}
.action-btn {justify-content: center;}
.related-list, .related-list-grid {grid-template-columns: 1fr;}

/* 相关文章前三项：左图右文横向布局（与首页移动端一致） */
.related-item a {display: flex;align-items: stretch;gap: 12px;}
.related-thumb {width: 120px;height: 80px;border-radius: 0;overflow: hidden;flex-shrink: 0;}
.related-thumb img {width: 100%;height: 100%;object-fit: cover;}
.related-content {flex: 1;padding: 0;display: flex;flex-direction: column;justify-content: space-between;}
.related-content h4 {font-size: 16px;line-height: 22px;height: auto;margin: 0 0 8px 0;line-clamp: 2;-webkit-line-clamp: 2;}
.related-meta {margin-top: auto;gap: 10px;}
.article-navigation {grid-template-columns: 1fr;}
.next-article a {flex-direction: row;}
}

/* 展开态 */

@media (max-width: 480px) {
.container {padding: 0 10px;}
.header-content {flex-direction: row;justify-content: space-between;align-items: center;gap: 10px;}
.search-box {justify-content: center;}
.search-input {width: 120px;}
.article-cards {grid-template-columns: 1fr;}
.section-content {padding: 15px 15px 0px;}
.hero-articles {padding: 15px;}
.hero-banner {width: 100%;height: 150px;}

/* 小屏幕banner标题样式 */
.banner-title {font-size: 14px;max-width: 150px;bottom: 16px;left: 8px;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);}
.banner-nav {padding: 0 2px;}
.banner-btn {width: 40px;height: 40px;}
.banner-btn svg {width: 20px;height: 20px;}
.article-title {font-size: 16px;}
.article-excerpt {font-size: 14px;}
.article-meta {font-size: 12px;}
.article-detail {padding: 15px;}
.article-title {font-size: 20px;}
.article-content {font-size: 16px;line-height: 30px;}
}