/* ============================================
   VYTRA AI 移动端响应式适配
   仅作用于屏幕宽度 ≤ 768px
   不覆盖PC端任何样式
   ============================================ */

@media (max-width: 768px) {
    
    /* ---------- 全局重置 ---------- */
    body {
        padding: 0 16px !important;
        margin: 0 auto !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        overflow-x: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    * {
        box-sizing: border-box !important;
    }
    
    /* ---------- 容器修复 ---------- */
    .container, 
    [class*="container"],
    [class*="wrapper"] {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* ---------- 1. 导航栏修复（flex换行） ---------- */
    nav, 
    .navbar,
    .nav-links,
    [class*="nav"] ul,
    [class*="menu"] {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    nav a,
    .navbar a,
    .nav-links a,
    [class*="nav"] li a {
        display: inline-block !important;
        padding: 8px 12px !important;
        white-space: nowrap !important;
    }
    
    /* ---------- 2. 知识库列表修复 ---------- */
    .knowledge-list article,
    .article-item,
    [class*="knowledge"] li,
    [class*="article"] {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        margin-bottom: 20px !important;
        padding: 8px 0 !important;
    }
    
    .knowledge-list h3,
    .article-item h3,
    [class*="knowledge"] .title {
        font-size: 18px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }
    
    /* 修复“点击阅读智者”重复问题（如果来自伪元素） */
    .knowledge-list [class*="read"],
    .article-item [class*="read"] {
        display: block !important;
    }
    
    /* 移除可能重复的伪元素 */
    .knowledge-list [class*="read"]::before,
    .article-item [class*="read"]::before {
        content: none !important;
    }
    
    /* ---------- 3. 课程列表修复（Grid自动折行） ---------- */
    .course-list,
    [class*="course"] > div,
    [class*="curriculum"] {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
        gap: 16px !important;
    }
    
    .course-card,
    [class*="course"] .card,
    [class*="course-item"] {
        margin: 0 !important;
        width: auto !important;
        display: block !important;
        padding: 12px !important;
    }
    
    .course-card h4,
    [class*="course"] .title {
        font-size: 16px !important;
        word-break: break-word !important;
    }
    
    /* 修复课程标题换行 */
    .course-card .subtitle,
    [class*="course"] .description {
        font-size: 14px !important;
        word-break: break-word !important;
    }
    
    /* ---------- 4. 表格响应式转换（核心：表格→卡片） ---------- */
    /* 适用于所有表格（命盘、八字、运势表等） */
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: hidden !important;
        border-collapse: collapse !important;
    }
    
    thead {
        display: none !important;  /* 隐藏原表头，用data-label替代 */
    }
    
    tbody {
        display: block !important;
        width: 100% !important;
    }
    
    tr {
        display: block !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        margin-bottom: 16px !important;
        padding: 12px !important;
        background: #fff !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    }
    
    td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #eee !important;
        font-size: 15px !important;
    }
    
    td:last-child {
        border-bottom: none !important;
    }
    
    /* data-label 显示 */
    td::before {
        content: attr(data-label) !important;
        font-weight: bold !important;
        width: 40% !important;
        min-width: 80px !important;
        color: #333 !important;
    }
    
    /* 特殊：命盘表格的宫位列保持突出 */
    td:first-child {
        font-weight: 600 !important;
        background-color: #f9f9f9 !important;
        margin: -12px -12px 0 -12px !important;
        padding: 12px !important;
        border-radius: 8px 8px 0 0 !important;
        border-bottom: 2px solid #ddd !important;
    }
    
    /* 八字四柱表格特殊处理 */
    .bazi-table tr,
    [class*="bazi"] tr {
        display: grid !important;
        grid-template-columns: 1fr 2fr !important;
    }
    
    .bazi-table td,
    [class*="bazi"] td {
        display: flex !important;
        justify-content: space-between !important;
    }
    
    /* ---------- 5. 长文本可读性修复 ---------- */
    .article-content,
    .palace-detail,
    .fortune-text,
    [class*="description"],
    [class*="analysis"],
    [class*="interpretation"],
    .命理玄解,
    .白话解读,
    .命运吉言,
    .大运赠言 {
        padding: 8px 0 !important;
        text-align: justify !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
    
    /* 段落间距 */
    p {
        margin-bottom: 16px !important;
    }
    
    /* 标题优化 */
    h1, h2, h3, h4 {
        word-break: break-word !important;
    }
    
    h2 {
        font-size: 24px !important;
        margin: 20px 0 12px 0 !important;
    }
    
    h3 {
        font-size: 20px !important;
        margin: 16px 0 10px 0 !important;
    }
    
    /* ---------- 6. 按钮/交互元素触摸优化 ---------- */
    button,
    a,
    [role="button"],
    .clickable {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 10px 16px !important;
        cursor: pointer !important;
    }
    
    /* ---------- 7. 多余重复条目标记（供调试） ---------- */
    /* 如果发现重复条目，此样式会显示边框提示 */
    .duplicate-warning {
        border: 2px solid orange !important;
    }
}