/* =========================================================================
   RTTC 移动端响应式适配层
   作用于全部三种渲染路径（原生模板镜像页 / Wix 抓取页 / Bootstrap 回退页），
   与 rttc_override.css 配合：桌面端视觉保持 1:1 不变，≤1023px 时启用。

   背景：抓取的 Wix 页面是桌面静态 DOM——
   - 菜单 #comp-jhivn1sm 固定 1013px 宽（pinnedTopRight），手机上溢出；
   - .site-root 有 min-width:var(--site-width)=980px，页面整体横向滚动；
   - 内容组件按桌面网格 + 像素边距布局，不会自动折叠成单列。
   Wix 原站的移动端由运行时 JS 生成，静态抓取后缺失，此文件补齐该层。

   断点 1023px：菜单总宽 1013px + 右边距 20px，低于此宽度必溢出。
   ========================================================================= */

/* --------------------------------------------------------------------------
   1. 汉堡菜单（配合 rttc_mobile.js 注入的 .rttc-burger / .rttc-mobile-menu）
   -------------------------------------------------------------------------- */
.rttc-burger {
    display: none;
    position: fixed;
    top: 9px;
    right: 10px;
    z-index: 10002; /* 页头 pinned 层 z=56，SITE_HEADER z=49，统一页头 z=1000 */
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}
.rttc-burger-box {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
.rttc-burger-inner,
.rttc-burger-inner::before,
.rttc-burger-inner::after {
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    border-radius: 1px;
    background: #ffffff;
    transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.rttc-burger-inner { top: 50%; margin-top: -1px; }
.rttc-burger-inner::before,
.rttc-burger-inner::after {
    content: "";
    display: block;
}
.rttc-burger-inner::before { top: -8px; }
.rttc-burger-inner::after { top: 8px; }

/* 展开态：三条线变 X */
.rttc-burger.is-open .rttc-burger-inner { background: transparent; }
.rttc-burger.is-open .rttc-burger-inner::before { top: 0; transform: rotate(45deg); }
.rttc-burger.is-open .rttc-burger-inner::after { top: 0; transform: rotate(-45deg); }

/* 下拉菜单面板：固定在红色页头下方，整宽红底白字 */
.rttc-mobile-menu {
    display: none;
    position: fixed;
    top: 62px;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 62px);
    overflow-y: auto;
    z-index: 10001;
    background: #C71212;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    margin: 0;
    padding: 6px 0 12px;
    list-style: none;
}
.rttc-mobile-menu.is-open { display: block; }
.rttc-mobile-menu a {
    display: block;
    padding: 13px 22px;
    color: #ffffff;
    font: 600 16px/1.3 Arial, Helvetica, sans-serif;
    letter-spacing: 0.02em;
    text-decoration: none;
}
.rttc-mobile-menu a:active,
.rttc-mobile-menu a:hover { background: rgba(255, 255, 255, 0.12); }
.rttc-mobile-menu li { margin: 0; }
.rttc-mobile-menu li.is-active > a { color: #FFC314; } /* 选中项用站点强调黄 */
.rttc-mobile-menu .rttc-mobile-sub {
    list-style: none;
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.14);
}
.rttc-mobile-menu .rttc-mobile-sub a {
    padding-left: 38px;
    font-weight: 400;
    font-size: 15px;
}
/* 打开菜单时锁定页面滚动 */
html.rttc-menu-open,
html.rttc-menu-open body { overflow: hidden !important; }

/* --------------------------------------------------------------------------
   2. ≤1023px：隐藏桌面横向菜单，显示汉堡按钮
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    #comp-jhivn1sm,
    #rttc-wix-header #comp-jhivn1sm { display: none !important; }
    .rttc-burger { display: block; }

    /* 红条上的 logo 稍缩，避免与汉堡按钮重叠 */
    #comp-jhiq1m5r img { max-width: calc(100vw - 78px) !important; }
}

/* --------------------------------------------------------------------------
   3. ≤1023px：内容单列折叠（Wix DOM 页面）
   思路：Wix mesh 是单列网格（grid-template-columns:100%），子项靠
   width+margin-left 做水平定位。收窄视口时把这些约束放开，让子项
   逐行占满整宽，即得移动端单列布局。
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    html, body { min-width: 0 !important; overflow-x: clip; }
    #SITE_CONTAINER, #main_MF, #site-root, .site-root, #masterPage,
    #PAGES_CONTAINER, #SITE_PAGES {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* 网格容器与其直接子项：宽度流体化、边距清零。
       注意 inlineContent 包装层（data-mesh-id$="inlineContent"）与
       gridContainer（...-gridContainer）是两层，个别容器（如联系表单
       comp-jt8dz7m2/p1）的包装层被页面 CSS 钉死 970px，两层都要放开 */
    [data-mesh-id$="inlineContent"],
    [data-mesh-id$="inlineContent-gridContainer"] {
        width: 100% !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        /* 桌面行高按 980px 宽的内容量算死（px/1fr），窄屏文字折行后
           装不下会被裁切/与相邻行重叠，改为随内容自动伸缩 */
        grid-template-rows: none !important;
        /* 个别容器（如联系表单 comp-jt8dz7p1）的列是显式 970px 固定宽，
           不重置会把整块内容横向撑出屏幕右侧被裁 */
        grid-template-columns: 100% !important;
    }
    [data-mesh-id$="inlineContent-gridContainer"] > * {
        /* width:100% 而非 auto：桌面端居中定位的区块（justify-self:center）
           在 auto 下会收缩成内容宽（如 WHY 板块只剩 316px），100% 强制占满整行 */
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        /* 桌面端多个组件通过显式 grid-area 共享同一行（并排布局），
           折叠成整宽后互相重叠，改为自动逐行排布 */
        grid-area: auto !important;
    }
    /* 逐行排布后补一点垂直节奏，避免行高盒子互相贴死显得文字挤压 */
    [data-mesh-id$="inlineContent-gridContainer"] > * + * {
        margin-top: 6px !important;
    }

    /* 嵌套在分组/列内部的组件（非网格直接子项）同样限宽，
       避免 970px 等桌面固定宽在窄屏下撑破或重叠 */
    #SITE_PAGES [id^="comp-"],
    #SITE_FOOTER [id^="comp-"],
    #SITE_HEADER [id^="comp-"] { max-width: 100% !important; }

    /* 首页主视觉区（固定高度 + 背景填充）：高度随内容撑开，
       否则折行后的标题会被 1fr 行裁掉 14px 左右 */
    #comp-lr1l6z1n {
        height: auto !important;
        min-height: 105vw !important;
    }

    /* 联系表单板块：桌面网格的 -70px 底部负边距是配合固定高度的补偿值，
       移动端表单折行变高后会把 Send Message 按钮顶出板块被下一板块盖住。
       （hero 的 -2072px 负边距配合隐形楔子另有用途，不可全局清零） */
    [data-mesh-id="comp-ldqwyw2s3inlineContent-gridContainer"],
    [data-mesh-id="comp-ldqwyw2s3inlineContent"] { margin-bottom: 0 !important; }
    /* 表单区的两条装饰横带（comp-jjcirtng 白条 / comp-jjcirtly 透明层）：
       桌面端与表单同网格行叠在其下方做背景，移动端被拆成独立行，
       连同桌面定位用的 172px margin-top 在表单上方挤出 500px+ 空白 */
    #comp-jjcirtng,
    #comp-jjcirtly { display: none !important; }

    /* ---- 3a. 文本组件高度自适应：桌面固定高度在窄屏下装不下折行后的
       文字，导致文字被裁切/与相邻组件挤压，改为随内容撑开 ---- */
    [data-testid="richTextElement"] {
        height: auto !important;
        min-height: 0 !important;
    }

    /* ---- 3b. Wix 多列条带（wixui-column-strip，桌面 flex 行布局）竖排堆叠：
       列占满整宽、取消 flex 收缩（否则列会被压成窄条，图片裁切变形） ---- */
    .wixui-column-strip .Ak0vpt { display: block !important; }
    .wixui-column-strip__column {
        width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        /* 列高随内容；带背景图的列给最小可视高度，避免背景塌陷成一条线 */
        height: auto !important;
        min-height: 90vw !important;
    }

    /* ---- 3c. 表单输入组件（Q1MQrw 文本输入皮肤）：整宽堆叠，
       避免并排字段在窄屏互相重叠 ---- */
    .Q1MQrw {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
    }

    /* ---- 3e. Wix FluidColumnsRepeater 文本列表（如首页 "WHY CTTC STANDS OUT"
         的 4 条编号要点）：抓取时条目按桌面四列绝对定位（同一 top、不同 left），
         钉死的 wrapper/repeater 高度也是桌面值。移动端改为文档流竖排、
         高度随内容撑开，否则四列互相叠压、超出部分被裁 ---- */
    fluid-columns-repeater,
    [id$="_wrapper"]:has(> fluid-columns-repeater),
    fluid-columns-repeater > * {
        height: auto !important;
        min-height: 0 !important;
    }
    /* wrapper 的 -50px 上边距是桌面四列布局的补偿值，竖排后会把
       底部最后一条顶出容器被裁，移动端清零 */
    [id$="_wrapper"]:has(> fluid-columns-repeater) { margin-top: 0 !important; }
    fluid-columns-repeater > * {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        margin: 0 0 10px 0 !important;
    }

    /* ---- 3d. 首页课程卡片画廊（#comp-lznmr3fi，Wix grid gallery）：
         内部条目是抓取时 JS 算好的像素定位，无法流体化。保持桌面
         981px 几何，外层横向滚动滑动浏览（移动端画廊通用模式）。
         选择器带 #SITE_PAGES 以压过上面的嵌套组件 max-width 限宽 ---- */
    #SITE_PAGES #comp-lqvuzk4x {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #SITE_PAGES #comp-lznmr3fi {
        width: 981px !important;
        max-width: none !important;
        height: 421px !important;
    }
    /* 页面区块（section 容器）的 980px 最小宽约束解除 */
    [id^="comp-"][data-testid*="container"],
    section[id^="comp-"],
    #SITE_PAGES [id^="comp-"] { min-width: 0 !important; }

    /* 图片随容器收缩（保留 object-fit 填充型图片的高度） */
    img { max-width: 100% !important; }
    [data-testid="image"] img,
    wow-image img { width: 100% !important; height: 100% !important; }

    /* 富文本段落允许折行，避免固定宽度被裁切 */
    [data-testid="richTextElement"] {
        max-width: 100% !important;
        overflow-wrap: break-word;
    }

    /* 页脚订阅表单：输入框与按钮整宽堆叠 */
    #SITE_FOOTER [data-mesh-id$="inlineContent-gridContainer"] > *,
    #SITE_FOOTER form [data-mesh-id$="inlineContent-gridContainer"] > * {
        width: 100% !important;
    }

    /* 统一页头（Bootstrap 回退页注入的 #rttc-wix-header）下正文不再留 62px 之外的偏移 */
    body { padding-left: 0 !important; padding-right: 0 !important; }
}

/* 小屏进一步收紧字号与留白（保持品牌字体，仅缩放） */
@media (max-width: 480px) {
    [data-testid="richTextElement"] h1 { font-size: 34px !important; }
    [data-testid="richTextElement"] h2 { font-size: 27px !important; }
}

/* --------------------------------------------------------------------------
   4. Bootstrap 回退页（rttc/index.html 等）自有内容本就是栅格布局，
      仅需保证注入的 Wix 页头不破坏流式宽度；上面第 2 节已隐藏其菜单。
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    #rttc-wix-header { width: 100% !important; }
    .rttc-main .container { width: 100%; padding-left: 15px; padding-right: 15px; }
}