/**
 * 页面布局修复样式
 * 专门解决垂直滚动条和内容显示不全的问题
 */

/* 1. 修复页面加载时的垂直滚动条问题 */
html, body {
    /* 移除可能导致高度计算问题的设置 */
    /* min-height: 100vh; */
    /* 让页面自然计算高度 */
    height: auto;
    /* 防止水平滚动 */
    overflow-x: hidden;
}

/* 2. 容器样式已移至main.css */
/* .container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    overflow-x: hidden;
} */

/* 3. 关于我们部分样式已移至main.css */
/* .about-showcase {
    width: 100%;
    overflow-x: hidden;
    padding: 80px 0;
}

.about-showcase .container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    overflow-x: hidden;
}

.about-content {
    width: 100%;
    overflow-x: hidden;
}

.about-text {
    max-width: 800px;
    margin: 0 auto 50px;
    overflow-x: hidden;
}

.about-highlights {
    width: 100%;
    overflow-x: hidden;
} */

/* 4. 页脚样式已移至main.css */
/* .footer {
    width: 100%;
    overflow-x: hidden;
}

.footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    overflow-x: hidden;
} */

/* 5. 优势展示区样式已移至main.css */
/* .advantages-section {
    width: 100%;
    overflow-x: hidden;
}

.advantages-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    overflow-x: hidden;
} */

/* 6. 媒体区域样式已移至main.css */
/* .media-section {
    width: 100%;
    overflow-x: hidden;
}

.media-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    overflow-x: hidden;
} */

/* 7. 服务概览区样式已移至main.css */
/* .services-overview {
    width: 100%;
    overflow-x: hidden;
}

.services-overview .container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    overflow-x: hidden;
} */

/* 8. 响应式修复 */
@media (max-width: 768px) {
    .container {
        /* 移动端容器优化 */
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* 各区域容器样式已移至main.css */
    /* .about-showcase .container,
    .advantages-section .container,
    .media-section .container,
    .services-overview .container,
    .footer .container {
        padding-left: 15px;
        padding-right: 15px;
    } */
}

@media (max-width: 480px) {
    .container {
        /* 小屏幕容器优化 */
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* 各区域容器样式已移至main.css */
    /* .about-showcase .container,
    .advantages-section .container,
    .media-section .container,
    .services-overview .container,
    .footer .container {
        padding-left: 10px;
        padding-right: 10px;
    } */
}

/* 9. 防止页面加载时的布局跳动 */
/* 确保CSS加载完成后页面布局稳定 */
html, body {
    /* 防止页面加载时的布局跳动 */
    overflow-x: hidden;
    /* 不设置固定高度，让内容自然撑开 */
    height: auto;
}

/* 10. 优化页面整体协调性 */
/* 确保所有内容区域都能完整显示 */
section {
    /* 确保所有section都能完整显示 */
    width: 100%;
    overflow-x: hidden;
}

/* section容器样式已移至main.css */
/* section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    overflow-x: hidden;
} */