/* 导航栏样式在navbar.css中定义 */

/* 用户头像样式在navbar.css中定义 */

/* 主要内容区域样式 */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 2rem;
    text-align: center;
}

.hero-content {
    max-width: 800px;
    margin-bottom: 2rem;
}

.hero h1 {
    font-size: 2.5rem;
    color: var(--heading-color); /* Use CSS variable */
    margin-bottom: 0.5rem;
}

.hero h2 {
    font-size: 2rem;
    color: var(--heading-color); /* Use CSS variable */
    margin-bottom: 1.5rem;
}

.hero p {
    font-size: 1.1rem;
    color: var(--text-color); /* Use CSS variable */
    line-height: 1.6;
    margin-bottom: 2rem;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.btn {
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.primary-btn {
    background-color: #4a90e2;
    color: white;
}

.primary-btn:hover {
    background-color: #3a7bc8;
}

.secondary-btn {
    background-color: var(--btn-secondary-bg); /* Use CSS variable */
    color: var(--btn-secondary-text); /* Use CSS variable */
}

.secondary-btn:hover {
    background-color: #e0e0e0;
}

/* 轮播图样式 */
.hero-slider {
    width: 100%;
    max-width: 1000px;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
    margin-top: 40px;
    height: 500px; /* 固定高度 */
    background-color: transparent;
    will-change: contents; /* 性能优化 */
}

.slider-container {
    position: relative;
    width: 100%;
    height: 100%;
    will-change: contents; /* 性能优化 */
}

/* 轮播项样式 */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
    pointer-events: none; /* 防止非活动幻灯片接收点击事件 */
    will-change: opacity, transform; /* 性能优化 */
    backface-visibility: hidden; /* 防止闪烁 */
    transform: translateZ(0); /* 强制GPU加速 */
}

.slide.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease;
    z-index: 1;
    pointer-events: auto; /* 允许活动幻灯片接收点击事件 */
}

/* 背景图和前景图样式 */
.slide-background, 
.slide-foreground {
    position: absolute;
    width: 65%; /* 图片宽度为容器的65% */
    height: 85%;
    overflow: hidden;
    border-radius: 6px;
    transition: transform 0.5s ease, opacity 0.5s ease;
    will-change: transform, opacity; /* 性能优化 */
    backface-visibility: hidden; /* 防止闪烁 */
}

.slide-background {
    top: 5%;
    left: 5%;
    z-index: 1;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.slide-foreground {
    bottom: 5%;
    right: 5%;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: opacity 0.3s ease;
}

.slide-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* 前景内容样式 */
.slide-content {
    width: 100%;
    padding: 30px;
    text-align: left;
    will-change: transform, opacity; /* 性能优化 */
    transform: translateZ(0); /* 强制GPU加速 */
    backface-visibility: hidden; /* 防止闪烁 */
}

.slide-headline {
    font-size: 2.2rem;
    font-weight: 700;
    color: #000; /* 直接改为黑色 */
    margin: 0 0 20px 0;
    line-height: 1.2;
    position: relative;
    padding-bottom: 15px;
}

.slide-headline:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background-color: #E74C3C;
}

/* 增加选择器特异性，确保不被hero p覆盖 */
.hero .slide-foreground .slide-description,
.slide-content .slide-description {
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
    color: #000 !important; /* 直接改为黑色 */
    margin-bottom: 30px !important;
    font-weight: 500 !important; /* 保持增加的字重 */
}

.slide-btn {
    display: inline-block;
    padding: 12px 25px;
    background-color: #E74C3C;
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    transition: background-color 0.3s, transform 0.2s;
}

.slide-btn:hover {
    background-color: #C0392B;
    transform: translateY(-2px);
}

/* 前景内容动画效果 */
.slide.active .slide-content {
    animation: fadeInUp 0.8s forwards;
    animation-delay: 0.3s; /* 延迟进入，等前一个退出 */
    opacity: 0; /* 初始状态设为不可见 */
    transform: translateY(30px); /* 初始位置 */
}

.slide:not(.active) .slide-content {
    opacity: 0; /* 确保非活动状态下内容不可见 */
    transform: translateY(30px); /* 初始位置与动画起始一致 */
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 退出动画效果 - 使用强制GPU加速提高性能 */
.slide.slide-out-left .slide-foreground .slide-content,
.slide.slide-out-right .slide-foreground .slide-content {
    animation: fadeOutDown 0.5s forwards;
    animation-fill-mode: forwards; /* 确保动画结束后保持状态 */
    transform: translateZ(0); /* 强制GPU加速 */
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(30px);
    }
}

/* 背景图进入动画 - 根据方向不同 */
/* 默认初始状态 - 不可见 */
.slide:not(.active) .slide-background {
    opacity: 0;
}

/* 从右侧进入的动画 (next按钮) */
.slide.slide-in-right .slide-background {
    transform: translateX(100%); /* 初始位置在右侧 */
    opacity: 0;
}

.slide.slide-in-right.active .slide-background {
    transform: translateX(0); /* 移动到正常位置 */
    opacity: 1;
    transition: transform 0.8s ease, opacity 0.8s ease;
    transition-delay: 0.2s; /* 等待前一个退出 */
}

/* 从左侧进入的动画 (prev按钮) */
.slide.slide-in-left .slide-background {
    transform: translateX(-100%); /* 初始位置在左侧 */
    opacity: 0;
}

.slide.slide-in-left.active .slide-background {
    transform: translateX(0); /* 移动到正常位置 */
    opacity: 1;
    transition: transform 0.8s ease, opacity 0.8s ease;
    transition-delay: 0.2s; /* 等待前一个退出 */
}

/* 背景图退出动画效果 */
.slide.slide-out-left .slide-background {
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
    transition-delay: 0s; /* 立即开始退出 */
}

.slide.slide-out-right .slide-background {
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
    transition-delay: 0s; /* 立即开始退出 */
}

/* 清除静态样式，使用动画代替 */
.slide.slide-out-left .slide-content,
.slide.slide-out-right .slide-content {
    /* 已被动画替代 */
}

/* 确保foreground层在滑动过程中保持过渡平滑 */
.slide:not(.active) .slide-foreground {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.slide.active .slide-foreground {
    opacity: 1;
    transition: opacity 0.5s ease;
    transition-delay: 0.2s; /* 略微延迟显示前景层 */
}

/* 加强前景层的过渡效果 */
.slide-out-left .slide-foreground,
.slide-out-right .slide-foreground {
    opacity: 0 !important; /* 强制退出时前景不可见 */
    transition: opacity 0.4s ease !important;
}

/* 方向控制按钮 */
.slider-controls {
    position: absolute;
    top: 50%;
    left: -10px;
    right: -10px;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 10;
    width: calc(100% + 20px);
    padding: 0;
}

.slider-controls .prev-btn {
    margin-left: 0;
}

.slider-controls .next-btn {
    margin-right: 0;
}

.slider-controls button {
    background-color: transparent;
    border: none;
    width: 50px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.slider-controls button i {
    font-size: 2rem;
    color: rgba(77, 77, 77, 0.8);
    transition: color 0.3s;
}

.slider-controls button:hover {
    transform: scale(1.1);
}

.slider-controls button:hover i {
    color: rgb(125, 125, 125);
}

.slider-controls button:focus {
    outline: none;
}

/* 分页指示器 */
.slider-pagination {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 10;
}

.pagination-dot {
    width: 30px;
    height: 8px;
    border-radius: 4px;
    background-color: transparent;
    border: 1px solid rgba(255,255,255,0.8);
    cursor: pointer;
    transition: background-color 0.3s;
}

.pagination-dot.active {
    background-color: rgba(255,255,255,0.8);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .hero-slider {
        height: 600px; /* 增加高度以适应垂直堆叠 */
    }

    .slide-background, 
    .slide-foreground {
        width: 90%;
        height: 45%; /* 减小高度以垂直堆叠 */
    }

    .slide-background {
        top: 5%;
        left: 5%;
    }

    .slide-foreground {
        top: 52%; /* 放在背景图下方 */
        left: 5%;
        right: auto;
    }

    .slide-content {
        padding: 15px;
    }

    .slide-headline {
        font-size: 1.8rem;
        margin-bottom: 15px;
        padding-bottom: 10px;
    }

    .slide-description {
        font-size: 0.95rem;
        margin-bottom: 20px;
    }

    .slide-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    .slider-controls {
        top: auto;
        bottom: 5%;
        transform: none;
    }

    .slider-pagination {
        bottom: 15px;
    }
}

@media (max-width: 480px) {
    .slide-headline {
        font-size: 1.5rem;
    }
    
    .slide-description {
        font-size: 0.85rem;
    }
    
    .slide-btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
}

/* 页脚样式 */

/* 新增：问答展示部分样式 */
.features-section {
    background-color: var(--features-bg, #ffffff);
    color: var(--features-text, #333);
    padding: 5rem 0;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-top: none;
    border-bottom: none;
    margin: 0;
}

.dark .features-section {
    background-color: #1a1a1a;
    color: #fff;
    border-color: transparent;
}

.high-contrast .features-section {
    background-color: #000;
    color: #fff;
    border-color: transparent;
}

.features-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.features-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--features-title, #2c3e50);
    margin-bottom: 3rem;
    text-align: center;
    transition: color 0.3s ease;
}

.dark .features-title,
.high-contrast .features-title {
    color: #fff;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.feature-item {
    display: flex;
    text-align: left;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    padding: 1.5rem;
    border-radius: 8px;
    background-color: var(--feature-item-bg, #f8f9fa);
    box-shadow: var(--feature-item-shadow, 0 2px 10px rgba(0,0,0,0.05));
    margin-bottom: 0.5rem;
}

.dark .feature-item {
    background-color: rgba(30, 41, 59, 0.3);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.high-contrast .feature-item {
    background-color: #111;
    border: 1px solid #fff;
    box-shadow: none;
}

.feature-item:hover {
    transform: translateY(-5px);
    background-color: var(--feature-item-hover-bg, #f8f9fa);
    box-shadow: var(--feature-item-hover-shadow, 0 5px 15px rgba(0,0,0,0.08));
}

.dark .feature-item:hover {
    background-color: rgba(30, 41, 59, 0.5);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.high-contrast .feature-item:hover {
    background-color: #222;
    border-color: #0f0;
}

.feature-icon {
    flex: 0 0 60px;
    margin-right: 1.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.feature-content {
    flex: 1;
}

.feature-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--feature-title, #2c3e50);
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.dark .feature-title,
.high-contrast .feature-title {
    color: #fff;
}

.feature-description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--feature-desc, #555);
    transition: color 0.3s ease;
}

.dark .feature-description {
    color: rgba(255, 255, 255, 0.8);
}

.high-contrast .feature-description {
    color: #fff;
}

/* 纯CSS图标 - 浅色主题 */
/* 互动学习图标 - 三个重叠的圆圈 */
.icon-interactive-learning {
    position: relative;
    width: 40px;
    height: 40px;
}

.icon-interactive-learning::before,
.icon-interactive-learning::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid var(--icon-interactive, #4a90e2);
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.icon-interactive-learning::before {
    top: 0;
    left: 0;
}

.icon-interactive-learning::after {
    bottom: 0;
    right: 0;
    background-color: var(--icon-interactive-bg, rgba(74, 144, 226, 0.2));
}

/* 实战测试图标 - 目标和对勾 */
.icon-practice-test {
    position: relative;
    width: 40px;
    height: 40px;
}

.icon-practice-test::before {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--icon-test, #e74c3c);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: border-color 0.3s ease;
}

.icon-practice-test::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 7px;
    border-left: 2px solid var(--icon-test, #e74c3c);
    border-bottom: 2px solid var(--icon-test, #e74c3c);
    transform: translate(-50%, -70%) rotate(-45deg);
    top: 50%;
    left: 50%;
    transition: border-color 0.3s ease;
}

/* 游戏化体验图标 - 游戏手柄 */
.icon-gamification {
    position: relative;
    width: 40px;
    height: 30px;
}

.icon-gamification::before {
    content: '';
    position: absolute;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background-color: transparent;
    border: 2px solid var(--icon-game, #9b59b6);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: border-color 0.3s ease;
}

.icon-gamification::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--icon-game, #9b59b6);
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);
    box-shadow: -20px 0 0 var(--icon-game, #9b59b6);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 知识深化图标 - 抛物线和坐标点 */
.icon-knowledge-exploration {
    position: relative;
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.icon-knowledge-exploration::before {
    content: '';
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 0 36px 0 0;
    border-top: 2px solid var(--icon-knowledge, #f1c40f);
    border-right: 2px solid var(--icon-knowledge, #f1c40f);
    top: 2px;
    left: 2px;
    transition: border-color 0.3s ease;
}

.icon-knowledge-exploration::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--icon-knowledge, #f1c40f);
    top: 10px;
    left: 24px;
    box-shadow: -10px 15px 0 var(--icon-knowledge, #f1c40f);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 学习社区图标 - 人物图标组 */
.icon-learning-community {
    position: relative;
    width: 40px;
    height: 40px;
}

.icon-learning-community::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--icon-community, #2ecc71);
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: -15px 18px 0 var(--icon-community, #2ecc71), 15px 18px 0 var(--icon-community, #2ecc71);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.icon-learning-community::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 13px;
    border-radius: 5px 5px 0 0;
    background-color: var(--icon-community, #2ecc71);
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: -15px 0 0 var(--icon-community, #2ecc71), 15px 0 0 var(--icon-community, #2ecc71);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 学习追踪图标 - 进度条和图表 */
.icon-learning-tracking {
    position: relative;
    width: 40px;
    height: 40px;
}

.icon-learning-tracking::before {
    content: '';
    position: absolute;
    width: 36px;
    height: 20px;
    border: 2px solid var(--icon-tracking, #3498db);
    border-radius: 2px;
    top: 10px;
    left: 2px;
    transition: border-color 0.3s ease;
}

.icon-learning-tracking::after {
    content: '';
    position: absolute;
    height: 10px;
    width: 6px;
    background-color: var(--icon-tracking, #3498db);
    bottom: 12px;
    left: 7px;
    box-shadow: 8px -4px 0 var(--icon-tracking, #3498db), 16px -8px 0 var(--icon-tracking, #3498db), 24px -2px 0 var(--icon-tracking, #3498db);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 响应式设计 */
@media (max-width: 992px) {
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .features-title {
        font-size: 2.4rem;
    }
}

@media (max-width: 768px) {
    .features-section {
        padding: 3rem 0;
    }
    
    .features-container {
        padding: 0 1.5rem;
    }
    
    .feature-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.25rem;
    }
    
    .feature-icon {
        margin-right: 0;
        margin-bottom: 1rem;
    }
    
    .features-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    
    .feature-title {
        font-size: 1.4rem;
    }
}

.contact-section-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    gap: 2rem;
}

.contact-info, .map-container {
    flex: 1;
    min-width: calc(50% - 1rem); /* 各占一半宽度减去间距 */
    box-sizing: border-box;
}

.contact-info h3, .map-container h4 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--heading-color); /* Use CSS variable */
    border-bottom: 2px solid var(--link-color); /* Use CSS variable */
    padding-bottom: 0.5rem;
    display: inline-block;
}

.contact-info p, .map-container p {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.contact-info i, .map-container i {
    margin-right: 0.8rem;
    color: var(--link-color);
    width: 20px;
    text-align: center;
}

.contact-form {
    flex: 1;
    min-width: 300px;
    margin-left: 2rem;
}

.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 0.8rem;
    margin-bottom: 1rem;
    border: 1px solid var(--input-border); /* Use CSS variable */
    border-radius: 4px;
    background-color: var(--input-bg); /* Use CSS variable */
    color: var(--input-text); /* Use CSS variable */
}

.contact-form textarea {
    height: 120px;
    resize: vertical;
}

.contact-form button {
    background-color: #4a90e2;
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s;
}

.contact-form button:hover {
    background-color: #3a7bc8;
}

.map-container {
    margin-top: 0; /* 移除原来的上边距 */
    text-align: left; /* 与contact-info对齐 */
    padding: 1.5rem;
}

.map-container h4 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--heading-color);
    border-bottom: 2px solid var(--link-color);
    padding-bottom: 0.5rem;
    display: inline-block;
}

.map {
    width: 100%;
    max-width: 800px;
    height: 300px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
}

.map img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 响应式设计 */
@media (max-width: 768px) {
    /* Removing navbar-specific styles as they should be in navbar.css */
    
    .hero {
        padding: 2rem 1rem;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero h2 {
        font-size: 1.5rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin: 0 auto 2rem;
    }
    
    .contact-section-content {
        flex-direction: column;
    }
    
    .contact-form {
        margin-left: 0;
        margin-top: 2rem;
    }
    
    /* 新增：使contact-info和map-container在移动设备上左对齐 */
    .contact-info, .map-container {
        min-width: 100%;
        text-align: left;
        padding-left: 0;
        margin-left: 0;
    }
    
    .contact-section .contact-section-content {
        padding: 0 1rem;
        align-items: flex-start;
    }
}

.contact-info, .map-container {
    background-color: var(--section-bg);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 新增：评论区域样式 */
.testimonials-section {
    padding: 5rem 0;
    background-color: var(--features-bg, #f8f9fa);
    color: var(--features-text, #333);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dark .testimonials-section {
    background-color: #1a1a1a;
    color: #fff;
}

.high-contrast .testimonials-section {
    background-color: #000;
    color: #fff;
}

.testimonials-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.testimonials-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--features-title, #2c3e50);
    margin-bottom: 3rem;
    text-align: center;
    transition: color 0.3s ease;
}

.dark .testimonials-title,
.high-contrast .testimonials-title {
    color: #fff;
}

/* 使用CSS Grid实现瀑布流布局 */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    align-items: start; /* 确保卡片从顶部对齐，高度可不一致 */
}

/* 评论卡片样式 */
.testimonial-card {
    background-color: var(--card-bg, #ffffff);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    margin-top: 0; /* 重置所有卡片的上边距 */
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.dark .testimonial-card {
    background-color: #2a2a2a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.high-contrast .testimonial-card {
    background-color: #111;
    border: 1px solid #fff;
    box-shadow: none;
}

/* 用户信息区样式 */
.user-info {
    display: flex;
    align-items: center;
    margin-bottom: 1.2rem;
}

/* 头像容器样式 */
.user-avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    margin-right: 1rem;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--avatar-border, #e8f0fe);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.dark .user-avatar {
    border-color: #3a3a3a;
}

.high-contrast .user-avatar {
    border-color: #fff;
    box-shadow: 0 0 0 1px #fff;
}

/* 头像图片样式 */
.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.testimonial-card:hover .avatar-img {
    transform: scale(1.05);
}

/* 用户详细信息样式 */
.user-details {
    flex: 1;
}

.user-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--user-name, #2c3e50);
    margin: 0 0 0.3rem 0;
}

.dark .user-name,
.high-contrast .user-name {
    color: #fff;
}

.user-title {
    font-size: 0.85rem;
    color: var(--user-title, #666);
    display: block;
}

.dark .user-title {
    color: #aaa;
}

.high-contrast .user-title {
    color: #ddd;
}

/* 评论内容样式 */
.testimonial-content {
    position: relative;
    padding-left: 0.5rem;
}

.testimonial-content::before {
    content: '"';
    position: absolute;
    top: -2rem;
    left: -0.5rem;
    font-size: 4rem;
    color: var(--quote-color, rgba(92, 124, 250, 0.1));
    font-family: serif;
    line-height: 1;
}

.dark .testimonial-content::before {
    color: rgba(108, 142, 255, 0.1);
}

.high-contrast .testimonial-content::before {
    color: rgba(255, 255, 255, 0.2);
}

.testimonial-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--testimonial-text, #333);
    position: relative;
    z-index: 1;
}

.dark .testimonial-content p {
    color: #eee;
}

.high-contrast .testimonial-content p {
    color: #fff;
}

/* 让某些卡片高度不同，增加瀑布流效果 */
.testimonial-card:nth-child(odd),
.testimonial-card:nth-child(3n+1),
.testimonial-card:nth-child(5) {
    margin-top: 0;
}

/* 响应式设计 */
@media (max-width: 992px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .testimonial-card:nth-child(odd),
    .testimonial-card:nth-child(3n+1),
    .testimonial-card:nth-child(5) {
        margin-top: 0; /* 在较小屏幕上移除偏移 */
    }
    
    .testimonials-title {
        font-size: 2.4rem;
    }
}

@media (max-width: 768px) {
    .testimonials-section {
        padding: 3rem 0;
    }
    
    .testimonials-container {
        padding: 0 1.5rem;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .testimonials-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    
    .user-name {
        font-size: 1rem;
    }
}

/* 资源部分样式 */
.resources-section {
    background-color: #f7f7f7; /* 浅灰色背景，与主内容形成对比 */
    padding: 4rem 0; /* 上下增加空间，与其他部分分隔 */
    border-top: 1px solid #e5e5e5; /* 顶部边框，增强分隔感 */
}

/* 深色模式样式 */
.dark .resources-section {
    background-color: #1a1a1a; /* 深色背景 */
    color: #fff; /* 文字为白色 */
    border-top: 1px solid #333; /* 深色边框 */
}

/* 高对比度模式样式 */
.high-contrast .resources-section {
    background-color: #000; /* 纯黑背景 */
    color: #fff; /* 白色文字 */
    border-top: 1px solid #fff; /* 白色边框 */
}

.resources-container {
    max-width: 1200px; /* 内容容器最大宽度 */
    margin: 0 auto; /* 水平居中 */
    padding: 0 2rem; /* 左右内边距 */
}

.resources-title {
    font-size: 1.8rem; /* 标题大小 */
    font-weight: 600; /* 标题加粗 */
    text-align: center; /* 标题居中 */
    margin-bottom: 2.5rem; /* 标题下方间距 */
    color: #333; /* 标题颜色 */
}

/* 深色和高对比度模式下的标题颜色 */
.dark .resources-title,
.high-contrast .resources-title {
    color: #fff;
}

.resources-list-container {
    display: flex;
    justify-content: center; /* 列表内容居中 */
}

.resources-list {
    list-style-type: none; /* 移除默认列表样式 */
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 响应式多列布局 */
    gap: 1.5rem 2.5rem; /* 行间距和列间距 */
    width: 100%;
}

.resource-item {
    line-height: 1.6; /* 行高 */
    padding: 0.5rem 0; /* 上下内边距 */
}

.resource-link {
    font-size: 1rem; /* 链接文字大小 */
    color: #0066cc; /* 链接颜色 */
    text-decoration: none; /* 移除下划线 */
    display: inline-block; /* 允许转换为块元素 */
    position: relative; /* 为悬停效果准备 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 深色和高对比度模式下的链接颜色 */
.dark .resource-link {
    color: #4a90e2; /* 深色模式下链接颜色更亮 */
}

.high-contrast .resource-link {
    color: #00ccff; /* 高对比度模式下链接颜色 */
}

.resource-link:hover {
    color: #004080; /* 悬停时的颜色变深 */
    transform: translateX(5px); /* 悬停时微小位移效果 */
}

/* 深色和高对比度模式下悬停颜色 */
.dark .resource-link:hover {
    color: #66a5e3; /* 深色模式下悬停颜色 */
}

.high-contrast .resource-link:hover {
    color: #33ddff; /* 高对比度模式下悬停颜色 */
}

.resource-link::after {
    content: '→'; /* 添加箭头 */
    opacity: 0; /* 初始不可见 */
    margin-left: 0.3rem;
    transition: opacity 0.3s ease, margin-left 0.3s ease; /* 平滑过渡 */
}

.resource-link:hover::after {
    opacity: 1; /* 悬停时箭头可见 */
    margin-left: 0.5rem; /* 悬停时箭头位置调整 */
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
    .resources-list {
        grid-template-columns: 1fr; /* 小屏幕改为单列 */
    }
    
    .resources-title {
        font-size: 1.5rem; /* 小屏幕上标题略小 */
    }
    
    .resources-section {
        padding: 3rem 0; /* 小屏幕上上下内边距减少 */
    }
}