/* ============================================================
   Atisbo 移动端适配层
   ------------------------------------------------------------
   为什么全是 !important：
   页面布局写在 300+ 处内联 style="" 上，内联样式优先级高于
   外部样式表，不加 !important 覆盖不掉。这是权宜之计，不是
   偷懒——彻底解决需要把内联样式重构成 class（方案 B）。

   回滚方式：删掉页面里 <link rel="stylesheet" href="assets/mobile.css">
   这一行即可，桌面端不受任何影响。

   断点：860px（平板竖屏及以下）、520px（小屏手机）
   ============================================================ */

@media (max-width: 860px) {

  /* ---- 1. 多列网格一律塌陷为单列 ---- */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* 洞察卡片：横向滑动，一屏露出下一张的边，暗示可滑
     （必须写在通用塌陷规则之后，靠顺序压过 grid-template-columns:1fr） */
  /* 用 flex 而非 grid-auto-flow：display 一改成 flex，
     上面那条 grid-template-columns:1fr !important 自然失效，
     不必依赖书写顺序去压制，Safari 下也更稳。 */
  [data-at-hscroll] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    gap: 12px !important;
    padding-bottom: 6px !important;
    scrollbar-width: none;
  }
  [data-at-hscroll]::-webkit-scrollbar { display: none; }
  [data-at-hscroll] > * {
    flex: 0 0 78% !important;   /* 露出下一张的边，暗示可滑 */
    scroll-snap-align: start;
    min-width: 0 !important;
  }

  /* ROI 计算器：保持左右两栏（左输入 / 右结算单）。
     两栏各约 165px，所以内边距和字号要同步压到最小可读。 */
  /* 交互照搬 Tailwind（可拖分隔线 + 圆形箭头 + 左浅右深），
     但内部用真实的列宽变化而非 clip-path 擦除：
     擦除会把结算单自己的左半边也裁掉（"ROI STATEMENT" 变成 "EMENT"），
     而这里拖动的目的正是要看清那张表。列宽变化则让内容重新排版。 */
  [data-at-roigrid] {
    grid-template-columns: var(--at-split, 50%) 1fr !important;
    gap: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    /* 高度锁死（由 JS 量出 50/50 时的高度写入），
       否则拖动时文字重新折行会让整块忽长忽短 */
    height: var(--at-roi-h, auto) !important;
  }
  /* 被压窄的一侧内部滚动，不撑高外框 */
  [data-at-roi-left], [data-at-roi-right] {
    min-width: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  [data-at-roi-right] { background: #14161C !important; }
  /* 拖拽手柄：跨在分界线上 */
  #at-split-h {
    position: absolute !important;
    top: 0; bottom: 0;
    width: 44px;
    margin-left: -22px;
    z-index: 20;          /* 必须高于绝对定位的右侧面板，否则收不到指针事件 */
    border: none;
    background: none;
    padding: 0;
    cursor: col-resize;
    touch-action: none;              /* 拖动时不要触发页面滚动 */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* 竖线 */
  #at-split-h::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 21px;
    width: 2px;
    background: #C8542B;
  }
  /* 中间圆形箭头把手 */
  #at-split-h > span {
    position: relative;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #C8542B;
    color: #FFFFFF;
    font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px -4px rgba(200, 84, 43, .6);
  }
  /* 左边距与其他卡片一致（22px），栏与栏之间收窄，
     否则双栏各只剩 148px，文字会大量折行。 */
  [data-at-roigrid] > * { min-width: 0 !important; }
  [data-at-roi-left]  { padding: 16px 22px !important; }
  [data-at-roi-right] { padding: 16px 22px !important; }
  /* 只收右栏内部那张结算单暗卡；不能写成 [data-at-roigrid] [data-at-pad]，
     那样会连左栏一起收掉，左边距就和其他卡片对不齐了。 */
  [data-at-roi-right] [data-at-pad] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  [data-at-roigrid] input { font-size: 16px !important; padding: 7px 2px !important; }
  /* 场景切换按钮在窄栏里改为纵向排列 */
  [data-at-roigrid] [data-at-scenario] {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  [data-at-roigrid] [data-at-scenario] > * {
    width: 100% !important;
    font-size: 12.5px !important;
    padding: 8px 6px !important;
  }
  /* 结算单：两端对齐行改上下堆叠，否则窄栏里标签和数值会重叠 */
  [data-at-splitrow] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1px !important;
  }
  [data-at-splitrow] > * { text-align: left !important; width: auto !important; }
  /* 结算单：大数字和正文同步收窄 */
  [data-at-roigrid] [data-at-bignum] { font-size: 26px !important; }
  [data-at-roigrid] { font-size: 11.5px !important; }

  /* 页脚：品牌区通栏，产品/开发者/公司 三栏并排 */
  [data-at-footgrid] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 26px 12px !important;
  }
  [data-at-footgrid] > :first-child { grid-column: 1 / -1 !important; }
  [data-at-footgrid] a { font-size: 13px !important; }

  /* 账单表例外：保留 4 列表格结构。必须写在通用塌陷规则之后，
     两者特异性相同，靠顺序取胜。 */
  [data-at-table] {
    grid-template-columns: 1.4fr 0.9fr 0.6fr 0.8fr !important;
    gap: 5px !important;
    font-size: 9px !important;
  }
  [data-at-table] > * { min-width: 0 !important; }

  /* ---- 1b. 卡片内边距收紧：36px / 40px 44px → 18px ---- */
  /* 统一成 22px，与页面上未被收紧的卡片（定价卡等）保持一致。
     用 18px 会让同一页出现 22/18 两种内边距，肉眼能看出来。 */
  [data-at-pad] {
    padding-left: 22px !important;
    padding-right: 22px !important;
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }

  /* ---- 1c. 表单：输入框压扁，标签与提示文字允许换行 ---- */
  /* 字号必须保持 ≥16px，否则 iOS 聚焦时会自动放大页面 */
  input {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    font-size: 16px !important;
  }
  /* 标签左右两段（名称 + 提示）在窄屏挤在一起，允许折行 */
  label { flex-wrap: wrap !important; row-gap: 2px !important; }

  /* ---- 2. 主容器左右边距：32px → 20px ---- */
  [data-at-container] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ---- 3. 区块纵向留白：120px → 56px ---- */
  section,
  header[id] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* ---- 4. 字号收敛 ---- */
  [data-at-bignum] { font-size: 40px !important; }   /* ROI 大数字 */
  [data-at-h3] { font-size: 25px !important; }       /* 阶段面板标题 */

  /* 绝对定位的浮动装饰标签会盖住标题，窄屏隐藏 */
  [data-at-floatchip] { display: none !important; }

  /* 可点击放大的图片，给个提示性手势 */
  [data-at-zoomable] { cursor: zoom-in; }
  /* 主标题已是 clamp(46px,5.6vw,80px)，46px 在 375px 屏偏大 */
  h1[style*="clamp"] {
    font-size: clamp(32px, 8.6vw, 46px) !important;
    letter-spacing: -0.6px !important;
  }

  /* ---- 对比表重排：宽表 → 每行一张卡片 ---- */
  [data-at-cmp] {
    min-width: 0 !important;
    display: block !important;
  }
  [data-at-cmp] thead { display: none !important; }   /* 表头改由单元格自带标签 */
  [data-at-cmp] tbody { display: block !important; }
  [data-at-cmp] tr {
    display: block !important;
    padding: 14px 0 12px !important;
    border-bottom: 1px solid rgba(251, 250, 248, .14) !important;
  }
  /* 项目名：整行标题 */
  [data-at-cmp] td:first-child {
    display: block !important;
    padding: 0 0 8px !important;
    border: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }
  /* 各方案：左标签右取值 */
  [data-at-cmp] td[data-at-col] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 12px !important;
    padding: 4px 0 !important;
    border: none !important;
    font-size: 13px !important;
  }
  [data-at-cmp] td[data-at-col]::before {
    content: attr(data-at-col);
    color: rgba(251, 250, 248, .42);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: .04em;
    flex-shrink: 0;
  }
  /* Atisbo 那列高亮，视觉落点 */
  [data-at-cmp] td:last-child {
    background: rgba(200, 84, 43, .14) !important;
    border-radius: 6px !important;
    padding: 7px 10px !important;
    margin-top: 6px !important;
    font-weight: 600 !important;
  }
  [data-at-cmp] td:last-child::before { color: rgba(232, 135, 92, .85); }

  /* ---- 创始人区：两个面板左右拖拽切换 ---- */
  [data-at-founderswap] {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    gap: 12px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    scrollbar-width: none;
    align-items: stretch !important;   /* 两面板高度锁死一致 */
  }
  [data-at-founderswap]::-webkit-scrollbar { display: none; }
  /* 88% 而非 100%：让下一个面板露出一角，这是最直观的"可滑"提示 */
  [data-at-founderswap] > * {
    flex: 0 0 88% !important;
    scroll-snap-align: center;
    min-width: 0 !important;
  }

  /* 折叠的信件段落 */
  [data-at-hidden-para] { display: none !important; }
  [data-at-founderswap] .at-open [data-at-hidden-para],
  [data-at-founderswap] > .at-open [data-at-hidden-para] { display: block !important; }

  .at-more {
    margin-top: 10px;
    background: none;
    border: none;
    padding: 4px 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: #C8542B;
    cursor: pointer;
  }

  /* 底部翻页控件：圆点可点，两侧箭头可点 */
  #at-fdr-ui {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
  }
  #at-fdr-ui .at-dot {
    width: 8px; height: 8px; border-radius: 50%; padding: 0;
    border: none; background: #CFCBC3; cursor: pointer;
    transition: background .2s ease, width .2s ease;
  }
  #at-fdr-ui .at-dot.on { background: #C8542B; width: 20px; border-radius: 4px; }
  #at-fdr-ui .at-fdr-arw {
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid #E4E1DA; background: #FFFFFF;
    color: #4A4D55; font-size: 15px; line-height: 1;
    cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
  }
  #at-fdr-ui .at-fdr-arw[disabled] { opacity: .35; }
  #at-fdr-ui .at-hint {
    margin-left: 4px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: #9A9DA4;
  }

  /* 创始人卡片重排：杂志式浮动排版。
     DOM 是扁平的（头像、姓名、职位、简介都是兄弟节点）。
     早先用 grid 让头像跨两行——但姓名很短时，头像 76px 会把右列
     撑高，姓名/职位到简介之间留出一大块空档。改成头像浮左、
     文字自然往下流：姓名紧贴头像顶、简介紧接职位并绕排在头像下方，
     不再有那道空隙。 */
  [data-at-foundercard] {
    display: block !important;
    grid-template-columns: none !important;
  }
  /* 头像：浮左 */
  [data-at-foundercard] > :nth-child(1) {
    float: left !important;
    width: 76px !important;
    height: 76px !important;
    margin: 2px 14px 8px 0 !important;
  }
  [data-at-foundercard] image-slot {
    width: 76px !important;
    height: 76px !important;
  }
  /* 姓名 */
  [data-at-foundercard] > :nth-child(2) { margin: 0 0 2px !important; }
  /* 职位：与简介之间留一点固定间距即可 */
  [data-at-foundercard] > :nth-child(3) { margin: 0 0 14px !important; }
  /* 简介及后续内容：正常流，绕排在头像下方 */
  [data-at-foundercard] > :nth-child(n+4) { margin-top: 0 !important; }
  /* 末尾清除浮动，防止卡片高度塌陷 */
  [data-at-foundercard]::after { content: ""; display: block; clear: both; }

  /* 靠 gap 露出容器底色当分隔线的网格：单列下 28px 太厚，收成细线 */
  [data-at-hairline] { gap: 1px !important; }

  /* 列分隔线：单列下应该消失，否则会把条目往右推造成不对齐 */
  [data-at-colsep] {
    border-left: none !important;
    padding-left: 0 !important;
  }

  /* ---- 5. 换行控制：窄屏禁止强制不换行 ---- */
  [data-at-nowrap] { white-space: normal !important; }

  /* ---- 6. 顶部导航：桌面版两条导航全部让位给汉堡菜单 ---- */
  /* 悬浮胶囊导航（锚点导航）整条隐藏 */
  nav[data-at-fixednav] { display: none !important; }
  /* 顶部工具栏保留 logo，链接组交给抽屉 */
  [data-at-navgroup] { display: none !important; }
  /* 语言切换 + Book a demo 同样收进抽屉，导航条只留 logo */
  [data-at-navtrail] { display: none !important; }
  /* 抽屉按钮由 mobile-nav.js 注入到 body 层 */

  /* 常驻顶栏：滚动时 logo 一直可见，汉堡按钮由 JS 对齐到栏内。
     不这么做的话，两条桌面导航被隐藏后手机上就完全没有导航了。 */
  /* 用 fixed 而非 sticky：sticky 只在父元素盒子内粘着，首页这条栏的
     父容器高度与它自身相当，没有可粘行程，会直接被滚走。 */
  [data-at-topbar] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 60 !important;
    background: rgba(251, 250, 248, .94) !important;
    backdrop-filter: saturate(150%) blur(12px) !important;
    -webkit-backdrop-filter: saturate(150%) blur(12px) !important;
  }
  /* LV 式：汉堡在左，logo 居中放大。
     居中要加在真正的 flex 行上（由 JS 标出），不是它的子元素。 */
  [data-at-topbar-row] {
    justify-content: center !important;
    padding-left: 52px !important;
    padding-right: 52px !important;
  }
  [data-at-topbar] img[alt="Atisbo"] {
    height: 30px !important;
    max-width: 62vw !important;
  }

  /* 公告栏在顶栏上方，会随页面滚走，无需为按钮让位 */

  /* 锚点跳转的顶部避让高度同步调小 */
  section[id], header[id] { scroll-margin-top: 64px !important; }

  /* ---- 7. 倾斜图形/浮动元素防溢出 ---- */
  [data-at-tilt] {
    transform: none !important;
    max-width: 100% !important;
  }

  /* ---- 8. 图片自适应 ---- */
  /* 注意：必须排除 logo。logo 内联写的是 height:26px;width:auto，
     若被 height:auto 覆盖会退回原始 633px 宽并撑满全屏。 */
  img:not([alt="Atisbo"]) {
    max-width: 100% !important;
    height: auto !important;
  }
  /* logo 只加一道上限兜底，高度交给内联样式 */
  img[alt="Atisbo"] { max-width: 55vw !important; }

  /* ---- 9. 横向溢出兜底 ---- */
  html, body { overflow-x: hidden !important; }

  /* ---- 10. 触摸目标不小于 44px（iOS HIG 建议）---- */
  nav a, footer a { min-height: 24px; }
}

/* ---- 小屏手机进一步收紧 ---- */
@media (max-width: 520px) {
  [data-at-container] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  section, header[id] {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  [data-at-bignum] { font-size: 34px !important; }
}