/*
 * MindOS 移动端布局补丁
 * 由 futurx-website 站点维护，加载在 mindos build 产物 CSS 之后。
 * 触发场景：viewport ≤ 640px。
 * 解决问题：
 *   1) 标题/副标题使用 word-break: keep-all，导致中文整段不换行、撑爆视口
 *   2) Hero 字号/padding 未做移动端缩放
 *   3) 场景 tabs（训练/调用/对外分享）按桌面 padding 渲染，第三项被裁
 *   4) hero CTA 横排导致按钮溢出
 *   5) product visual / 大图片未做 max-width 兜底
 *   下次 mindos 重新发布时，请保留 index.html 里对本文件的 <link> 引用。
 */

@media (max-width: 640px) {
  html,
  body {
    overflow-x: hidden;
  }

  /* ---------- Hero 主区 ---------- */
  .version-hero {
    padding-inline: 16px !important;
    padding-top: 48px !important;
    padding-bottom: 56px !important;
  }

  /* 约束 hero 区内所有顶层容器宽度，防止内容自然宽度撑大父级溢出视口 */
  .version-hero > *,
  .version-hero-inner,
  .version-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .version-hero-title,
  .version-hero-title-dark {
    font-size: 1.5rem !important;        /* 24px */
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 0.875rem !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    text-wrap: wrap !important;
    max-width: 100% !important;
  }

  .version-hero-lead,
  .version-hero-lead-dark {
    font-size: 0.9375rem !important;     /* 15px */
    line-height: 1.65 !important;
    margin-bottom: 1.25rem !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    text-wrap: wrap !important;
    padding-inline: 4px;
    max-width: 100% !important;
  }

  /* ---------- 场景 tabs（训练 / 调用 / 对外分享）---------- */
  .hero-scene-nav {
    max-width: 100% !important;
    gap: 6px !important;
    padding: 4px !important;
    font-size: 12px !important;
    margin-bottom: 1.5rem !important;
  }

  .hero-scene-link {
    padding-inline: 6px !important;
    padding-block: 10px !important;
    border-radius: 999px !important;
    white-space: nowrap;
    min-width: 0;
    font-size: 12px !important;
  }

  /* ---------- Hero CTA 按钮区 ---------- */
  .hero-actions {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    padding-inline: 4px;
  }

  .hero-actions > .btn-primary-solid,
  .hero-actions > .btn-secondary-ghost {
    width: 100% !important;
    padding-inline: 18px !important;
    padding-block: 12px !important;
    font-size: 0.9375rem !important;
  }

  /* ---------- 通用：大字号标题在移动端缩小 ---------- */
  .text-4xl,
  .text-5xl,
  .md\:text-5xl {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }

  .text-3xl {
    font-size: 1.375rem !important;
    line-height: 1.3 !important;
  }

  .text-2xl {
    font-size: 1.25rem !important;
    line-height: 1.35 !important;
  }

  /* ---------- 图片 / 视觉元素防溢出（仅 product visual，避免影响 logo 等小 img） ---------- */
  .product-visual,
  .product-visual-asset {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ---------- 顶部 sticky 导航：移动端两行布局 ----------
   * 第一行：futurX | MindOS logo
   * 第二行：4 个 tab 等宽平铺（个人 / 企业 / 创作者合作 / 下载）
   * pill 子元素 1=个人 2=企业 3=创作者合作 4=使用指南 5=下载
   * 注：4=使用指南 已被 mindos-guide-relocate.js 通过 data-guide-relocated 隐藏，
   *    在 FAQ 区域有独立入口，移动端 sticky bar 不重复展示。
   */
  .sticky.top-0 .max-w-6xl {
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    padding-block: 8px !important;
    row-gap: 6px !important;
  }
  /* logo 行 */
  .sticky.top-0 .max-w-6xl > div:first-child {
    justify-content: flex-start;
    width: 100%;
  }
  /* 第二行容器：整行铺开 */
  .sticky.top-0 .max-w-6xl > div:nth-child(2) {
    width: 100% !important;
  }
  /* pill 容器变为整行、内部 4 个 tab 等宽分布 */
  .sticky.top-0 .bg-tab-pill {
    width: 100% !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    column-gap: 2px !important;
  }
  /* 每个 tab 等宽 + 紧凑 padding（保留各自原有 active/inactive 视觉，不动 bg/shadow） */
  .sticky.top-0 .bg-tab-pill > * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-inline: 4px !important;
  }
  .sticky.top-0 .bg-tab-pill > * svg {
    width: 16px !important;
    height: 16px !important;
  }
  .sticky.top-0 .bg-tab-pill > * span {
    font-size: 11px !important;
    white-space: nowrap;
  }
}

/* 360px 及以下的更极端窄屏 */
@media (max-width: 360px) {
  .version-hero-title,
  .version-hero-title-dark {
    font-size: 1.5rem !important;
  }

  .hero-scene-link {
    padding-inline: 4px !important;
    font-size: 11px !important;
  }
}

/* ---------- 使用指南位置调整 ----------
 * 顶部导航的「使用指南」由 mindos-guide-relocate.js 在挂载完成后
 * 加上 data-guide-relocated="hidden"，CSS 把它彻底隐藏；
 * FAQ 列表下方注入的新按钮使用 .mindos-faq-guide-* 类名。
 */
[data-guide-relocated="hidden"] {
  display: none !important;
}

.mindos-faq-guide-wrap {
  display: flex;
  justify-content: flex-start;
  margin-top: 1.5rem;
  /* FAQ section 自带 py-24(桌面)/py-16(移动),按钮在 section 内,
     下方会出现一大块原本的 padding 空白。用负 margin-bottom 收紧。 */
  margin-bottom: -4rem;
}

@media (max-width: 640px) {
  .mindos-faq-guide-wrap {
    margin-bottom: -2.5rem;
  }
}

.mindos-faq-guide-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #847678;
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1;
  text-decoration: none;
  transition: color 0.18s ease;
  cursor: pointer;
}

.mindos-faq-guide-btn:hover {
  color: #ff4b4b;
}

.mindos-faq-guide-arrow {
  display: inline-block;
  transition: transform 0.18s ease;
}

.mindos-faq-guide-btn:hover .mindos-faq-guide-arrow {
  transform: translateX(3px);
}

/* ---------- 「了解产品组合」弹窗：≥640px 强制 2×2 四宫格 + 重排序 ----------
 * bundle JS 写死 4 张卡的数组顺序为 [MindOS Card, MindOS App, MindCard 小程序, AI 名片]，
 * 且第一张 .product-combo-feature 在 ≥768px 自带 `grid-column: span 2` + 左文右图横向布局。
 * 产品要求改为 2×2 四宫格，顺序按 App→小程序→Card→AI 名片：
 *   [ 01 MindOS App ]   [ 02 MindCard 小程序 ]
 *   [ 03 MindOS Card]   [ 04 AI 思维名片   ]
 * 实现方式：
 *   1. 锁定 grid 容器为 2 列；
 *   2. 抹除 feature 卡的 span 2 与横向 grid 样式，让 4 张卡视觉一致；
 *   3. 用 `order` 视觉重排，DOM 顺序不变。
 * 移动端 (<640px) 不受影响，保持 bundle 原 grid-cols-1 的 4 行叠放（且 DOM 顺序）。
 */
@media (min-width: 640px) {
  .grid:has(> .product-combo-card) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* feature 卡还原为普通卡片：抹掉 span 2 与横向 grid 内部布局 */
  .product-combo-feature {
    grid-column: auto !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0 !important;
  }
  .product-combo-feature .product-combo-thumb {
    grid-column: auto !important;
    grid-row: auto !important;
    order: 0 !important;
    margin-bottom: 1.5rem !important;
    justify-self: center !important;
  }
  .product-combo-feature h3,
  .product-combo-feature p,
  .product-combo-feature > div:not(.product-combo-thumb) {
    grid-column: auto !important;
    justify-self: center !important;
  }

  /* 视觉顺序重排（DOM 顺序保持 Card→App→小程序→AI 名片 不变） */
  .product-combo-card:nth-child(1) { order: 3 !important; }  /* MindOS Card → 03 左下 */
  .product-combo-card:nth-child(2) { order: 1 !important; }  /* MindOS App → 01 左上 */
  .product-combo-card:nth-child(3) { order: 2 !important; }  /* MindCard 小程序 → 02 右上 */
  .product-combo-card:nth-child(4) { order: 4 !important; }  /* AI 思维名片 → 04 右下 */

  /* 数字标号(01/02/03/04)按视觉位置显示,而非跟随 DOM 卡片。
   * bundle 把 step 写死在 <span class="absolute right-6 top-6 ... font-black">XX</span> 文本节点里,
   * 用 font-size:0 隐藏原文 + ::after 注入正确编号。第 4 张卡 DOM 编号 "04" 就在视觉位置 4,无需改写。 */
  .product-combo-card:nth-child(1) > span.absolute.font-black,
  .product-combo-card:nth-child(2) > span.absolute.font-black,
  .product-combo-card:nth-child(3) > span.absolute.font-black {
    font-size: 0 !important;
  }
  .product-combo-card:nth-child(1) > span.absolute.font-black::after { content: "03"; }
  .product-combo-card:nth-child(2) > span.absolute.font-black::after { content: "01"; }
  .product-combo-card:nth-child(3) > span.absolute.font-black::after { content: "02"; }
  .product-combo-card > span.absolute.font-black::after {
    font-size: 0.75rem;             /* text-xs */
    font-weight: 900;               /* font-black */
    letter-spacing: 0.1em;          /* tracking-widest */
    color: rgb(255 75 75 / 0.35);   /* 复刻 text-brand-red/35 */
  }
}

/* PC 端弹窗面板缩窄：bundle 原 max-width=1160px，调小到 960px。
 * 用属性选择器锁定 Tailwind 编译出来的具名宽度 class，避免误伤其他弹窗。
 * 仅在 ≥768px 桌面/平板 生效；<768px 弹窗本身已是 w-full 撑满，无需限制。 */
@media (min-width: 768px) {
  [class*="max-w-[1160px]"] {
    max-width: 960px !important;
  }
}