/**
 * 移动端横向滚动修复
 * 只针对移动端生效，不影响桌面端的 sticky 定位
 */

/* ==========================================
   全局移动端修复 - 只在移动端生效
   ========================================== */

@media (max-width: 768px) {
    /* 防止 body 和 html 横向滚动 */
    html {
        overflow-x: clip; /* 使用 clip 而不是 hidden，不影响 sticky */
        max-width: 100vw;
    }
    
    body {
        overflow-x: clip;
        max-width: 100vw;
        position: relative;
    }
    
    /* 确保所有主要容器不超出视口 */
    .container,
    .header-container,
    .footer-container,
    .vm-hero .container,
    .vc-post-container,
    .vc-category-hero-container,
    .vc-category-container {
        max-width: 100%;
        overflow-x: clip;
    }
    
    /* 修复可能超出的网格布局 */
    .vm-hero-content,
    .vm-stats-grid,
    .vm-categories-grid,
    .vm-products-grid,
    .vm-features-grid,
    .vm-news-grid,
    .vc-post-layout,
    .vc-category-container {
        max-width: 100%;
        overflow-x: clip;
    }
    
    /* 确保图片不超出容器 */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* 修复搜索框可能超出的问题 */
    .search-input-wrapper {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .vm-search-input {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* 修复绝对定位元素可能超出的问题 */
    .hero-badge,
    .product-badge,
    .news-date,
    .vc-category-card-badge {
        max-width: calc(100% - 32px);
        box-sizing: border-box;
    }
    
    /* 修复表格横向滚动 */
    .vc-post-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-left: 0 !important;
        margin-right: 0 !important;
        /* 确保表格有适当的边距，不贴边 */
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
    
    /* 表格容器添加内边距，防止内容贴边 */
    .vc-post-content table thead th:first-child,
    .vc-post-content table tbody td:first-child {
        padding-left: 15px !important;
    }
    
    .vc-post-content table thead th:last-child,
    .vc-post-content table tbody td:last-child {
        padding-right: 15px !important;
    }
    
    /* 修复代码块横向滚动 */
    .vc-post-content pre {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* 修复长文本不换行的问题 */
    .vc-post-content,
    .vc-post-title,
    .vm-hero-title,
    .section-title {
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    
    /* 修复固定定位元素 */
    .site-header {
        max-width: 100vw;
        overflow-x: clip;
    }
    
    /* 修复移动端菜单 */
    .header-nav.active {
        max-width: 100vw;
        overflow-x: clip;
    }
    
    /* 修复 Hero 区域 */
    .vm-hero {
        max-width: 100vw;
        overflow-x: clip;
    }
    
    .vm-hero-bg {
        max-width: 100vw;
    }
    
    /* 修复卡片布局 */
    .category-card,
    .product-card,
    .news-card,
    .feature-card,
    .vc-category-card {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* 修复文章内容区域 */
    .vc-post-main {
        max-width: 100%;
        overflow-x: clip;
    }
    
    .vc-post-content {
        max-width: 100%;
        overflow-x: clip;
    }
    
    /* 修复 FAQ 区块 */
    .vc-faq-section {
        max-width: 100%;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* 修复专家引用 */
    .vc-expert-quote {
        max-width: 100%;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* 修复相关资源 */
    .vc-related-resources {
        max-width: 100%;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* 修复 CTA 区块 */
    .vc-post-cta {
        max-width: 100%;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* 修复相关文章 */
    .vc-related-articles {
        max-width: 100%;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* 修复作者卡片 */
    .vc-author-card {
        max-width: 100%;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* 修复文章导航 */
    .vc-post-navigation {
        max-width: 100%;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* 修复底部 */
    .site-footer {
        max-width: 100vw;
        overflow-x: clip;
    }
    
    .footer-content {
        max-width: 100%;
        overflow-x: clip;
    }
}

/* ==========================================
   更小屏幕的额外修复 (480px 以下)
   ========================================== */

@media (max-width: 480px) {
    /* 确保容器有足够的内边距 */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* 修复搜索框在小屏幕上的布局 */
    .search-input-wrapper {
        flex-direction: column;
        gap: 10px;
    }
    
    .vm-search-input,
    .vm-search-btn {
        width: 100%;
        box-sizing: border-box;
    }
    
    /* 修复标签列表 */
    .vm-hero-tags {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding-bottom: 5px;
    }
    
    .hero-tag {
        flex-shrink: 0;
    }
    
    /* 修复文章内容的内边距 */
    .vc-post-content {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* 修复所有带边距的区块 */
    .vc-faq-section,
    .vc-expert-quote,
    .vc-related-resources,
    .vc-post-cta,
    .vc-author-card,
    .vc-post-navigation,
    .vc-related-articles {
        margin-left: 0;
        margin-right: 0;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ==========================================
   特殊元素修复
   ========================================== */

@media (max-width: 768px) {
    /* 修复可能导致横向滚动的动画元素 */
    .vm-hero::before,
    .vm-hero::after,
    .vc-category-hero::before,
    .vc-category-hero::after {
        max-width: 100vw;
        overflow: hidden;
    }
    
    /* 修复浮动元素 */
    .hero-badge {
        right: 15px;
        bottom: 15px;
        max-width: calc(100% - 30px);
    }
    
    /* 修复移动端 TOC 按钮 */
    .vc-toc-mobile-trigger {
        right: 15px;
        bottom: 70px;
    }
    
    /* 修复移动端抽屉 */
    .vc-toc-mobile-drawer {
        max-width: 100vw;
    }
    
    .vc-toc-mobile-content {
        max-width: 100vw;
        box-sizing: border-box;
    }
    
    /* 修复分享按钮 */
    .vc-share-buttons {
        flex-wrap: wrap;
        max-width: 100%;
    }
    
    /* 修复标签列表 */
    .vc-tags-list {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* 修复文章元数据 */
    .vc-post-meta {
        max-width: 100%;
        overflow-x: clip;
    }
    
    /* 修复作者信息 */
    .vc-author-info {
        max-width: 100%;
        overflow-x: clip;
    }
}

/* ==========================================
   确保 sticky 定位在桌面端正常工作
   ========================================== */

@media (min-width: 769px) {
    /* 桌面端不应用任何 overflow 限制 */
    html,
    body {
        overflow-x: visible;
    }
    
    /* 确保 sticky 元素正常工作 */
    .site-header,
    .vc-toc-sidebar,
    .vc-category-sidebar,
    .vc-author-sidebar {
        position: sticky;
    }
}