/* ==========================================
   FAQ 模块样式 - 瀑布流布局与间距一致修正版
   架构更新：已追加 .mx-matrix-wrapper 前缀，强制封锁外部主题干扰
   ========================================== */

/* =========================================
   🛡️ 第一步：MX Matrix 终极防御盾 (FAQ 模块)
   ========================================= */

/* 1. 外部绝对清零：彻底击穿干掉 WordPress 主题默认的 20px 留白 */
body .inside-article:has(.mx-faq-expanded-container),
body .entry-content:has(.mx-faq-expanded-container) {
    padding: 0 !important; 
}

/* 2. 电脑端 (≥769px)：容器接管，上下左右绝对 30px */
@media (min-width: 769px) {
    .mx-matrix-wrapper:has(.mx-faq-expanded-container) .mx-container {
        padding: 30px !important; 
        max-width: 1640px; 
        margin: 0 auto;    
    }
}

/* 3. 手机端 (≤768px)：容器接管，上下 30px，左右 10px */
@media (max-width: 768px) {
    .mx-matrix-wrapper:has(.mx-faq-expanded-container) .mx-container {
        padding: 30px 10px !important; 
    }
}

/* 1. 容器限制与留白调整 */
.mx-matrix-wrapper .mx-faq-expanded-container {
    max-width: 1440px !important; 
    margin: 0 auto !important;
    padding: 0 !important; /* 👈 核心修改：干掉原来的 20px 20px 60px 20px，消除四周红框留白 */
    font-family: inherit;
    border: none !important; 
    background: transparent !important;
}

/* 2. 强力清除左上角的神秘蓝条（防御主题的伪元素干涉） */
.mx-matrix-wrapper .mx-faq-expanded-container::before,
.mx-matrix-wrapper .mx-faq-expanded-container::after,
.mx-matrix-wrapper .mx-faq-header-wrapper::before,
.mx-matrix-wrapper .mx-faq-header-wrapper::after,
.mx-matrix-wrapper .mx-faq-expanded-container h2.mx-faq-expanded-header::before,
.mx-matrix-wrapper .mx-faq-expanded-container h2.mx-faq-expanded-header::after {
    display: none !important;
    content: none !important;
}

/* 顶部标题包装器 - 居中对齐 */
.mx-matrix-wrapper .mx-faq-header-wrapper {
    text-align: center;
    margin-bottom: 50px;
    border: none !important;
}

/* 强制覆盖主题的 H2 样式 */
.mx-matrix-wrapper .mx-faq-expanded-container h2.mx-faq-expanded-header {
    font-size: 32px !important;
    color: #111827 !important;
    margin: 0 0 10px 0 !important;
    font-weight: 700 !important;
    border: none !important; 
    padding: 0 !important;
    background: transparent !important;
}

/* 标题下方的分隔线与圆点装饰 (更新为指定颜色 #023c5b) */
.mx-matrix-wrapper .mx-faq-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 15px auto 20px auto;
}

.mx-matrix-wrapper .mx-faq-separator::before,
.mx-matrix-wrapper .mx-faq-separator::after {
    content: "";
    width: 30px;
    height: 2px;
    background-color: #023c5b !important; 
}

.mx-matrix-wrapper .mx-faq-separator span {
    width: 5px;
    height: 5px;
    background-color: #023c5b !important; 
    border-radius: 50%;
}

.mx-matrix-wrapper .mx-faq-expanded-container p.mx-faq-expanded-subtitle {
    color: #666666 !important;
    font-size: 16px !important;
    margin: 0 !important;
}

/* ==========================================
   核心修复区：双列瀑布流布局 (Masonry)
   ========================================== */
.mx-matrix-wrapper .mx-faq-expanded-grid {
    display: block !important; 
    column-count: 2 !important; 
    column-gap: 30px !important; 
}

/* 卡片整体容器 */
.mx-matrix-wrapper .mx-faq-expanded-card {
    background-color: #ffffff;
    border: 1px solid #023c5b !important; 
    display: flex;
    flex-direction: column;
    box-shadow: none !important;
    
    break-inside: avoid-column !important; 
    margin-bottom: 30px !important; 
}

/* 移除最后一个卡片的底部外边距 */
.mx-matrix-wrapper .mx-faq-expanded-grid article.mx-faq-expanded-card:last-child {
    margin-bottom: 0 !important;
}

/* ==========================================
   问题深色区块
   ========================================== */
.mx-matrix-wrapper .mx-faq-expanded-container h3.mx-faq-expanded-question {
    background-color: #023c5b !important; 
    color: #ffffff !important; 
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 !important; 
    padding: 25px 30px !important; 
    display: flex !important;
    align-items: center !important;
    line-height: 1.4 !important;
    border: none !important; 
}

/* 问题左侧的标识 (更新为指定颜色 #EA6000) */
.mx-matrix-wrapper .mx-faq-expanded-container h3.mx-faq-expanded-question::before {
    content: "" !important;
    display: inline-block !important;
    width: 4px !important;
    height: 24px !important;
    background-color: #EA6000 !important; 
    margin-right: 15px !important;
    margin-left: 0 !important;
    flex-shrink: 0;
    border: none !important;
}

/* 回答区域 (纯白背景块) */
.mx-matrix-wrapper .mx-faq-expanded-answer {
    color: #222222;
    font-size: 16px;
    line-height: 1.8;
    padding: 30px;
    background-color: #ffffff !important;
    border: none !important;
}

.mx-matrix-wrapper .mx-faq-expanded-answer p {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
}

/* ==========================================
   响应式：在平板和手机端变为单列，并强力精简各项留白
   ========================================== */
@media (max-width: 1024px) {
    .mx-matrix-wrapper .mx-faq-expanded-grid {
        column-count: 1 !important; 
        column-gap: 0 !important; 
    }
    
    .mx-matrix-wrapper .mx-faq-expanded-container {
        padding: 0 !important; /* 👈 核心修改：干掉原来的 10px 10px 40px 10px */
    }

    .mx-matrix-wrapper .mx-faq-header-wrapper {
        margin-bottom: 20px !important; 
    }
    
    .mx-matrix-wrapper .mx-faq-expanded-container h3.mx-faq-expanded-question {
        padding: 16px 15px !important; 
        font-size: 17px !important;
    }
    
    .mx-matrix-wrapper .mx-faq-expanded-answer {
        padding: 15px 15px !important; 
    }
    
    .mx-matrix-wrapper .mx-faq-expanded-card {
        margin-bottom: 20px !important; 
    }
    
    .mx-matrix-wrapper .mx-faq-expanded-grid article.mx-faq-expanded-card:last-child {
        margin-bottom: 0 !important; 
    }
}