/* ====================================================================
   96IDCtx 前台主题 · 移动端布局
   文件：i9-mobile.css
   --------------------------------------------------------------------
   署名：96IDCtx 主题（自定义配置见 common/config.php）
   --------------------------------------------------------------------
   本表在最后加载，集中覆盖移动端布局，对桌面端零影响。

   布局思路（对标主流云厂商移动端的排版手法）：
     · 双列卡片网格 —— 快捷入口/价格卡在手机上保持两列，不塌成单列长条
     · 全宽列表项   —— 每个列表项右侧露出 › 箭头，可点区域一眼可见
     · 区块头部居中 —— 小标题+描述居中，形成清晰的段落节奏
     · 白底靠分隔线分层，不用大面积灰底
   ==================================================================== */

/* ====================================================================
   首屏精简（第 1 段）：桌面端隐藏「移动端专用」元素
   ==================================================================== */
.i9-banner__msearch,
.i9-banner__mart { display: none; }

@media (max-width: 768px) {

  /* ---------------- 0. 首屏精简 ----------------
     移动端首屏只保留四层：插画 → 标题 → 副标题 → 搜索行。
     隐藏桌面端的大检索条 / 双按钮 / 标签云 / 右侧插画；
     搜索行同时承担「选产品」与「主行动」两个职责
     （点搜索即进产品列表，不再需要单独的「立即选购」按钮）。
     实测首屏占比：改前 80% → 现在约 50%。 */
  .i9-banner { padding-block: 12px 14px; }
  .i9-banner__inner { gap: 12px; }

  /* 移动端首屏插画：置于标题上方，填补首屏顶部空旷 */
  .i9-banner__mart {
    display: block;
    margin-bottom: 4px;
  }
  /* 320px 宽 ≈ 223px 高（hero-1 比例 460:320）。
     目标：让「插画 → 标题 → 副标题 → 搜索行」这段约占视口 60%。
     实测占比：640px 屏 70%、700px 64%、760px 59%、820px 55%。 */
  .i9-banner__mart img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
  }

  .i9-banner__title { font-size: 24px; line-height: 1.28; letter-spacing: -.2px; }
  .i9-banner__sub {
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.55;
    /* 副标题只留一行：多出的信息由下方标签/检索承担，首屏要留白 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 桌面端首屏元素在移动端下线 */
  .i9-banner__finder,
  .i9-banner__actions,
  .i9-banner__tags { display: none; }

  /* 移动端专用元素上线 */
  .i9-banner__msearch {
    display: flex;
    gap: 8px;
    margin-top: 11px;
  }
  .i9-msearch__box {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid var(--i9-border);
    border-radius: var(--i9-radius-md);
  }
  .i9-msearch__box .i9-ico { flex: none; color: var(--i9-text-4); }
  .i9-msearch__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    font-size: 13.5px;
    color: var(--i9-text-2);
    background: none;
    border: 0;
    outline: none;
  }
  .i9-msearch__input::placeholder { color: var(--i9-text-5); }
  .i9-msearch__box:focus-within {
    border-color: var(--i9-brand);
    box-shadow: 0 0 0 3px var(--i9-brand-ring);
  }
  /* 搜索按钮是搜索行的**平级**子元素（不再嵌在输入框里）。
     嵌在输入框内时用 align-self:stretch + 负边距会被挤出容器右边界，
     导致右侧内容被截断 —— 这是用户截图里看到的问题。 */
  .i9-msearch__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 44px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--i9-fw-medium);
    color: #fff;
    background: var(--i9-brand);
    border: 0;
    border-radius: var(--i9-radius-md);
    cursor: pointer;
  }
  .i9-msearch__btn .i9-ico { color: #fff; }
  .i9-msearch__btn:active { background: var(--i9-brand-hover); }


  /* 首屏插画在移动端下线：它占约 96px，属于「装饰」，留给信息区更划算 */
  .i9-banner__art { display: none; }
}

/* ====================================================================
   首屏精简（第 2 段）：≤480px 再收一档
   ==================================================================== */
@media (max-width: 480px) {
  .i9-banner { padding-block: 10px 12px; }
  .i9-banner__mart img { max-width: 280px; }
  .i9-banner__title { font-size: 23px; }
  .i9-banner__sub { font-size: 12.5px; margin-top: 6px; }
  .i9-banner__msearch { margin-top: 9px; gap: 7px; }
  /* 搜索行的输入框与按钮统一降到 40px */
  .i9-msearch__box,
  .i9-msearch__btn { height: 40px; }
  .i9-msearch__btn { padding: 0 12px; font-size: 13.5px; }
}

/* ====================================================================
   横向溢出兜底
   --------------------------------------------------------------------
   移动端最怕「某个定宽元素顶出容器右边界」—— 表现为右侧内容看不见。
   上面已按元素逐个修好，这里再加一道兜底：阻止页面横向滚动，
   并在必要时允许长单词/长串折行。
   ==================================================================== */
@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .i9-container { max-width: 100%; }
  img, svg, video, table, pre { max-width: 100%; }
  /* 搜索行：按钮定宽不压缩，输入框可压缩 —— 两者之和不会超出容器 */
  .i9-msearch__btn { flex-shrink: 0; }
}

@media (max-width: 768px) {

  /* ---------------- 1. 全局节奏 ---------------- */
  .i9-section { padding-block: 24px; }
  .i9-section--tight { padding-block: 20px; }
  .i9-container { padding-inline: 14px; }

  /* 区块头居中；右侧「更多」下沉为一行，避免挤在同一行 */
  .i9-sec-head {
    align-items: center;
    text-align: center;
    gap: 6px;
    margin-bottom: 16px;
  }
  .i9-sec-head__desc { font-size: 13px; }
  .i9-sec-head__more { margin-top: 2px; }

  /* ---------------- 2. 快捷入口：保持两列 ---------------- */
  /* 基础规则里 .i9-grid--4 在 768px 会塌成单列（4 张卡变竖排长条），
     这里改回两列 —— 这是移动端首屏显得空的主因。 */
  .i9-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .i9-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  .i9-feat {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
    border-radius: 10px;
  }
  .i9-feat__ico { width: 34px; height: 34px; }
  .i9-feat__title { font-size: 14px; }
  .i9-feat__desc {
    font-size: 12px;
    line-height: 1.55;
    /* 手机上最多两行，避免卡片高度参差 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ---------------- 3. 活动/试用/产品动态：全宽列表项 ---------------- */
  .i9-banners { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .i9-banners__side { gap: 0; }

  .i9-banner-card,
  .i9-banner-card--main,
  .i9-banner-card--side {
    min-height: 0;
    padding: 14px 2px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--i9-border-soft);
    border-radius: 0;
    box-shadow: none;
  }
  .i9-banner-card:last-child { border-bottom: 0; }
  .i9-banner-card__art { display: none; }
  .i9-banner-card__title { font-size: 15px; }
  .i9-banner-card__desc {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--i9-text-4);
  }
  .i9-banner-card__btn { margin-top: 0; }
  /* 箭头始终可见（触屏没有 hover），并靠右 */
  .i9-banner-card__arrow { opacity: 1; margin-left: auto; }

  /* ---------------- 4. 价格卡：两列 ---------------- */
  .i9-pricecard { padding: 13px 12px; }
  .i9-pricecard__name { font-size: 14px; }
  .i9-pricecard__desc { font-size: 12px; }
  .i9-pricecard__price { font-size: 19px; }

  /* ---------------- 5. 试用区：竖排且内容优先 ---------------- */
  .i9-trial__art {
    order: 2;
    width: 100%;
    height: 88px;
    margin-top: 4px;
  }
  .i9-trial__desc { font-size: 13px; }
  .i9-trial__actions { width: 100%; }
  .i9-trial__actions .i9-btn { flex: 1 1 auto; justify-content: center; }

  /* ---------------- 6. 解决方案：单列、留出可读行高 ---------------- */
  .i9-sol { padding: 14px; }
  .i9-sol__title { font-size: 15px; }
  .i9-sol__desc { font-size: 12.5px; line-height: 1.6; }

  /* ---------------- 7. 节点覆盖 + 数据：两列 ---------------- */
  .i9-regions { gap: 6px; }
  .i9-region { font-size: 12px; }

  /* 数据条在 480px 会被压成一列（4 行太高），这里保持两列 */
  .i9-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .i9-stats__item { padding: 14px 10px; }
  .i9-stats__num { font-size: 23px; }
  .i9-stats__label { font-size: 12px; }

  /* ---------------- 8. 行动号召 ---------------- */
  .i9-cta { padding: 20px 0; }
  .i9-cta__actions .i9-btn { flex: 1 1 0; justify-content: center; }
}

@media (max-width: 480px) {
  .i9-section { padding-block: 22px; }
  .i9-container { padding-inline: 12px; }

  /* 极窄屏仍保持两列，只是更紧凑 */
  .i9-grid--4, .i9-grid--3 { gap: 8px; }
  .i9-feat { padding: 11px; }
  .i9-feat__title { font-size: 13.5px; }
  .i9-feat__desc { font-size: 11.5px; }

  .i9-pricecard { padding: 12px 10px; }
  .i9-pricecard__name { font-size: 13.5px; }
  .i9-pricecard__price { font-size: 18px; }

  .i9-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .i9-stats__num { font-size: 21px; }
  .i9-stats__label { font-size: 11.5px; }

  .i9-trial__art { height: 78px; }
}


/* ====================================================================
   内页首屏 .i9-phero（产品类型页 / 解决方案页 / 内容页，共 31 页）
   --------------------------------------------------------------------
   桌面端是「左文案 + 右插画」两栏。手机上改为**上下结构：插画在上、文案在下**。

   为什么必须在这里覆盖：
     i9-layout.css 里 .i9-phero__inner 的单列规则写在 @media(max-width:992px)，
     但**基础的两栏规则排在它后面**（权重相同 → 后者胜），
     所以仅靠 i9-layout.css 的单列规则在手机上不生效 —— 必须由最后加载的本表覆盖。
   ==================================================================== */
@media (max-width: 768px) {
  .i9-phero { padding-block: 20px 22px; }

  /* 单列：插画在上、文案在下 */
  .i9-phero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  /* 插画置顶并居中（原本靠 order:-1 挤到上方右侧，现在独立成行） */
  .i9-phero__art {
    order: -1;
    display: flex;
    justify-content: center;
  }
  .i9-phero__art img {
    width: 100%;
    max-width: 240px;      /* 高约 153px（比例 440:280） */
    margin-inline: auto;
  }

  /* 文案区：拿回整行宽度，字号与间距收紧 */
  .i9-phero__eyebrow {
    margin-bottom: 10px;
    font-size: 11.5px;
  }
  .i9-phero__title {
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -.2px;
  }
  .i9-phero__sub {
    margin-top: 8px;
    font-size: 13.5px;
  }
  .i9-phero__desc {
    margin-top: 10px;
    max-width: none;
    font-size: 13.5px;
    line-height: 1.7;
  }
  .i9-phero__actions {
    margin-top: 16px;
    gap: 10px;
  }
  .i9-phero__actions .i9-btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
  }
  .i9-phero__points {
    margin-top: 14px;
    gap: 6px 14px;
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  .i9-phero { padding-block: 16px 18px; }
  .i9-phero__art img { max-width: 210px; }
  .i9-phero__title { font-size: 22px; }
  .i9-phero__sub,
  .i9-phero__desc { font-size: 13px; }
  .i9-phero__eyebrow { font-size: 11px; margin-bottom: 8px; }
  .i9-phero__actions { margin-top: 14px; }
  .i9-phero__points { margin-top: 12px; font-size: 12px; }
}


/* ====================================================================
   窄屏彻底隐藏头部搜索框
   --------------------------------------------------------------------
   背景：≤1240px 时桌面搜索框会折叠成 32px 的纯图标；点开后是
        position:absolute 的覆盖层（width: min(340px, 60vw)），
        会把品牌 Logo 与汉堡菜单盖住。
   处理：在「会折叠成图标」的整个区间内直接不显示它。
        · 桌面端（>1240px）不受影响
        · 移动端导航抽屉内的搜索表单保留，搜索功能不丢
   注意：必须用 !important 并覆盖状态类 —— 折叠/展开由 JS 加
        .is-collapsed / .is-open 切换，只写基础选择器挡不住。
   ==================================================================== */
@media (max-width: 1240px) {
  .i9-header__actions > .i9-searchbox,
  .i9-header__actions .i9-searchbox,
  .i9-header__actions > .i9-searchbox.is-collapsed,
  .i9-header__actions > .i9-searchbox.is-open {
    display: none !important;
  }
  /* 万一该位置还挂着下拉容器，一并隐掉，避免只剩空壳按钮 */
  .i9-header__actions > .dropdown-menu,
  .i9-header__actions > .i9-dropdown { display: none !important; }
}


/* ====================================================================
   移动端抽屉：产品条目的「名称 + 描述」两段式
   --------------------------------------------------------------------
   抽屉里的产品菜单与桌面超级菜单同一份数据，条目形如
       <a><b>香港 CN2＋BGP A区</b><span>2核2G 起 · 15Mbps 不限流量</span></a>
   名称与描述分两行，长描述不再和名称挤在一起。
   ==================================================================== */
.i9-mnav__panel ul:not(.i9-mnav__acc-list) a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 10px;
  line-height: 1.5;
}
.i9-mnav__panel ul:not(.i9-mnav__acc-list) a b {
  font-size: var(--i9-fs-body);
  font-weight: var(--i9-fw-medium);
  color: var(--i9-text-2);
}
.i9-mnav__panel ul:not(.i9-mnav__acc-list) a span {
  font-size: var(--i9-fs-xs);
  font-weight: var(--i9-fw-regular);
  color: var(--i9-text-4);
  white-space: normal;
}
.i9-mnav__panel ul:not(.i9-mnav__acc-list) a:hover b { color: var(--i9-brand); }
/* 二级小节的标题与上面的条目留一点间距，避免粘在一起 */
.i9-mnav__panel .i9-mnav__sub + ul { margin-bottom: 8px; }

/* ====================================================================
   移动端抽屉：产品分类「二级折叠」
   --------------------------------------------------------------------
   一级分类作为可点开的标题，展开后是该分类的二级产品。
   避免一次铺开几十条，手机上更好点。
   ==================================================================== */
.i9-mnav__acc + .i9-mnav__acc { border-top: 1px solid var(--i9-border-soft); }
.i9-mnav__acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 13px 4px;
  font-size: var(--i9-fs-body);
  font-weight: var(--i9-fw-medium);
  color: var(--i9-text-1);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.i9-mnav__acc-head .i9-ico {
  color: var(--i9-text-4);
  transition: transform var(--i9-dur-fast) var(--i9-ease);
}
.i9-mnav__acc-head[aria-expanded="true"] .i9-ico { transform: rotate(180deg); }
.i9-mnav__acc-head[aria-expanded="true"] { color: var(--i9-brand); }

/* 展开态用 class 控制（不单靠 hidden 属性），避免个别环境 [hidden] 被覆盖 */
.i9-mnav__acc-body { padding: 0 0 10px; display: none; }
/* 用 !important 压过 i9-base.css 的 `[hidden] { display: none !important }`：
   只要 .is-open 加上就能显示，即使 hidden 属性还没被移除也不影响 */
.i9-mnav__acc-body.is-open { display: block !important; }
.i9-mnav__acc-more {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 10px;
  padding: 4px 2px;
  font-size: var(--i9-fs-sm);
  color: var(--i9-brand);
}


/* ====================================================================
   移动端抽屉：产品卡片（与桌面端同一套 pcard 结构）
   --------------------------------------------------------------------
   结构与桌面完全一致：
     .i9-pcard__link > .i9-pcard__ico + .i9-pcard__body
                       .i9-pcard__name（名称 + 国旗）
                       .i9-pcard__foot（标签 + 「查看」）
   这里只做**屏幕适配**：尺寸略小、触控反馈、去掉桌面才需要的 hover 隐藏。
   视觉风格（圆角/边框/阴影/渐变图标底/橙色标签）与桌面保持一致。
   ==================================================================== */

.i9-mnav__acc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;                       /* 卡片间距 */
}
.i9-mnav__acc-list li { margin: 0; }

/* 卡片本体（与桌面同风格，尺寸按移动端收敛） */
.i9-mnav__acc-list .i9-pcard__link {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-lg);
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
  overflow: hidden;
  transition: border-color var(--i9-dur-fast) var(--i9-ease),
              box-shadow var(--i9-dur-fast) var(--i9-ease),
              transform var(--i9-dur-fast) var(--i9-ease);
}
/* 顶部渐变细线（与桌面一致；触屏用 :active 触发） */
.i9-mnav__acc-list .i9-pcard__link::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--i9-brand), #4B8BFF);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--i9-dur) var(--i9-ease);
}
.i9-mnav__acc-list .i9-pcard__link:active::before { transform: scaleX(1); }
.i9-mnav__acc-list .i9-pcard__link:active {
  border-color: var(--i9-brand);
  box-shadow: 0 4px 14px rgba(0, 82, 217, .12);
  transform: scale(.99);
}

/* 图标方块（渐变底，与桌面一致，尺寸略小） */
.i9-mnav__acc-list .i9-pcard__ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--i9-brand);
  background: linear-gradient(135deg, var(--i9-brand-1), #E8EEFF);
  border-radius: var(--i9-radius-md);
}
.i9-mnav__acc-list .i9-pcard__ico .i9-ico { width: 20px; height: 20px; }

/* 右侧内容：名称一行 + 标签/查看一行（与桌面同结构） */
.i9-mnav__acc-list .i9-pcard__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.i9-mnav__acc-list .i9-pcard__name {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--i9-fs-sm);
  font-weight: var(--i9-fw-semibold);
  line-height: 1.45;
  color: var(--i9-text-1);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.i9-mnav__acc-list .i9-pcard__flag { flex: 0 0 auto; }

.i9-mnav__acc-list .i9-pcard__foot {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-height: 18px;
}

/* 标签：橙色胶囊（与桌面同款） */
.i9-mnav__acc-list .i9-pcard__tag {
  display: inline-block;
  padding: 1px 8px;
  font-size: var(--i9-fs-xs);
  line-height: 1.7;
  color: #D4380D;
  background: #FFF2E8;
  border-radius: var(--i9-radius-pill);
  white-space: nowrap;
}

/* 「查看 →」：桌面靠 hover 出现，触屏没有 hover → 常显（淡色） */
.i9-mnav__acc-list .i9-pcard__go {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  font-size: var(--i9-fs-xs);
  color: var(--i9-text-5);
  white-space: nowrap;
}
.i9-mnav__acc-list .i9-pcard__link:active .i9-pcard__go { color: var(--i9-brand); }

/* 「查看该分类全部」与卡片保持间距 */
.i9-mnav__acc-more { margin-top: 12px; }