/* ==========================================================
   !!! MX MATRIX CORE ARCHITECTURE !!!
   [CRITICAL]: 
   1. 必须在外层包裹 `.mx-matrix-wrapper` 防御盾，内容区使用 `.mx-container`。
   2. 所有自定义 Class 严格使用 `mx-` 前缀。
   ========================================================== */

/* MX Matrix Engine - 核心字典与全站精准防御盾 (Global Smart Baseline Shield) */

:root {
    /* 核心色彩与基础字典 */
    --mx-bg-white: #ffffff;
    --mx-text-dark: #111418;
    --mx-text-gray: #4b5563;
    --mx-accent-blue: #2b4c9b;
    --mx-accent-red: #E32D2D;
    --mx-border-light: #e5e7eb;
}

/* ==========================================================
   全 站 底 层 防 御 结 界 
   ========================================================== */

/* 🌟 核心升级：使用 clip 完美平替 hidden，既防止意外的物理溢出，又释放 sticky 悬浮封印 */
html, body {
    overflow-x: clip;
}

.mx-matrix-wrapper {
    width: 100%;
    overflow-x: clip; 
    background-color: var(--mx-bg-white);
    color: var(--mx-text-dark); 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
    
    /* 👇 新增防御：强制斩断超长连续字符 (多语言换行修复) */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* 2. 盒模型绝对结界：剥夺外部主题对宽度计算的干扰 */
.mx-matrix-wrapper *,
.mx-matrix-wrapper *::before,
.mx-matrix-wrapper *::after {
    box-sizing: border-box;
}

/* 3. 全局媒体安全阀：防止任何大图撑爆移动端屏幕 */
.mx-matrix-wrapper img, 
.mx-matrix-wrapper video {
    max-width: 100%; /* 核心防御：图片最宽只能和父容器一样宽，绝不越界 */
    height: auto;    /* 配合最大宽度，自动按比例缩放高度，防变形 */
    margin: 0;
    padding: 0;
    display: block;
}

/* SVG 小图标通常不需要响应式缩放，保留原来的释放设置，防止被主题干扰 */
.mx-matrix-wrapper svg {
    max-width: none;
    margin: 0;
    padding: 0;
    display: block;
}

/* 4. 排版留白拦截：清空主题默认的顶部外边距，防止模块和标题上方产生“神秘缝隙” */
.mx-matrix-wrapper h1, 
.mx-matrix-wrapper h2, 
.mx-matrix-wrapper h3, 
.mx-matrix-wrapper h4, 
.mx-matrix-wrapper p,
.mx-matrix-wrapper li { /* 👇 增加了 li 标签，因为产品参数属于列表内容 */
    margin-top: 0;
    
    /* 👇 极致防御：确保翻译后的无空格标准号强制换行，彻底消除移动端 X 轴溢出 */
    word-break: break-word;
}

/* 5. 列表去格式化：清除主题的 ul/li 默认圆点和缩进，方便我们自定义数据网格 */
.mx-matrix-wrapper ul, 
.mx-matrix-wrapper ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ==========================================================
   全 站 内 容 定 宽 容 器 (新增)
   ========================================================== */

/* 6. 标准化容器：确立全局统一内容边界 */
.mx-matrix-wrapper .mx-container {
    width: 100%;
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px; /* 移动端安全内边距 */
    padding-right: 20px;
}

/* ==========================================================
   模块滚动按需加载 (Scroll Reveal) 动画引擎 (新增)
   ========================================================== */

/* 初始状态：透明且稍微下移，准备执行入场动画 */
.mx-matrix-wrapper .mx-scroll-reveal-module {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    /* 给个基础高度防止加载瞬间产生严重的布局偏移 (CLS) */
    min-height: 200px; 
}

/* JS 触发后的最终状态：无缝平滑浮现 */
.mx-matrix-wrapper .mx-scroll-reveal-module.is-visible {
    opacity: 1;
    transform: translateY(0);
    min-height: auto; /* 必须加这行，释放多余的留白 */
}