/* ============================================================
   英文版布局适配（字符长度差异）
   ------------------------------------------------------------
   英文较中文更长，文字切图尺寸随之变化。本文件在 style.css 之后加载，
   仅覆盖「文字切图」的宽度，让英文切图按英文稿自然尺寸渲染。
   共享图片（照片 / 架构图 / 无文字图）中英文同图，无需覆盖。
   ============================================================ */

/* ---------- Home ---------- */
.home-hero-sub-img { width: 655px; }        /* 358 → 655 */
.home-hero-sub-api-img { width: 637px; }    /* 431 → 637 */

/* ---------- OctoMind ---------- */
.octo-hero-sub-img { width: 655px; }         /* 358 → 655 */
.octo-features-card { flex-basis: 356px; }   /* 260 → 356（英文稿卡片宽 356） */
.octo-feature-desc { max-width: 276px; }     /* 180 → 276（内容区宽） */
.octo-slogan-text-img { width: 742px; }      /* 493 → 742 */

/* ---------- OctoMind SYNAction（frame 353 比赛/评级图，Bug 14） ---------- */
/* 设计：列表列 450 / 图列 612（Frame 353 = 302:406，612×330，比赛图比列表宽 ~36%，应主导）。
   共享网格 480px 1fr + .octo-section 内容盒仅 1000px → 1fr 只能分到 480px，frame 353 被压小。
   改 360px 1fr → 图列 1fr=600px（≈设计 612 的 98%），让图按设计尺寸。仅桌面；≤768px 由 style.css 改 1fr 纵排。 */
@media (min-width: 769px) {
  .octo-synaction { grid-template-columns: 360px 1fr; }
  .octo-pipeline-figure { width: 612px; max-width: 100%; }  /* = Figma 1x 宽（1224/2），超过列宽时被 max-width 截住 */
}

/* ---------- OctoMind SYNAction 图下标注（frame353 的“500+ Participants…”，Bug 14） ---------- */
/* 设计稿 302:425“500+ Participants, Including Leading / Universities and Technology Companies Worldwide”
   是独立文字节点（x:721 y:3370 w:260 h:37），未烧进 frame353（302:406）导出图；中文图当初把它烧进去了、
   英文图没烧 → 英文页缺这句。按要求导出 302:425 为透明白字切图（240×29，1x），作为图下标注放在
   frame353 下发。宽度 = 设计文字自然宽 240px（非 frame 260px），与 frame353 同屏比例吻合。
   与 frame353 绑定成整体：上下结构（直接压在面板下发）、左对齐（左边缘对齐 frame353 左缘 x:620）。 */
.octo-pipeline-caption {
  display: block;
  /* 宽度按 figure 列宽（= frame353 显示宽）取百分比，保持与 frame353 的设计比例 240:600 = 40%；
     height:auto 按图固有宽高比 29:240 自动缩放 → 分辨率变化时两者相对大小不变（用户要求）。 */
  width: 40%;
  max-width: 100%;
  height: auto;
  align-self: flex-start;
  /* 左偏移与负边距同样按列宽百分比、随分辨率等比缩放：
     - margin-left 53/600 ≈ 8.83% → 对齐 frame353 面板显示内容左缘（而非 img 外缘）
     - margin-top  -58/600 ≈ -9.67% → 越过 flex gap:20px，让标注上缘落入图底部暗区做紧密贴合。
       因 frame353 图宽高比固定（612:330≈1.855），按宽度取 % 即按高度等比；
       任何分辨率下都落在图底部暗区内、不穿进有效内容（这正是固定 -58px 在手机端叠压的病根）。 */
  margin-left: 8.83%;
  margin-top: -9.67%;
}

/* ---------- OctoH-Hand ---------- */
.octoh-hero-sub-api-img { width: 637px; }    /* 431 → 637 */
.octoh-figure-lead-img { width: 255px; }     /* 364 → 255（英文换 2 行更窄） */
.octoh-figure-headline { width: 494px; }     /* 475 → 494 */
.octoh-hand-page .octoh-slogan-api-img { width: 497px; } /* 713 → 497（英文 2 行） */
.octoh-syn-title { width: 417px; max-width: 82%; height: auto; }   /* HTML 文字 → 透明切图（Bug 3）；max-width 对齐 .octoh-syn-img，避免手机端溢出（Bug 6） */

/* ---------- OctoH-Hand 图片区：标题/图左右位置（Bug 15） ---------- */
/* 英文稿：手图在左、「OctoH-Hand」标题+lead 在右；共享 .octoh-figure-stage 按中文稿
   （标题 order:1 左 / 图 order:2 右，注释「标题在左，图片在右」）。翻转 order 仅英文；
   ≤768px 由 style.css 改 column 纵排（标题上/图下），桌面覆盖不生效、不回归。
   偏右修正：共享 .octoh-figure-stage{align-self:flex-end} 把整行右对齐到内容盒右缘（title 右缘=1380），
   而英文稿标题在 x=900（277:297）→ 渲染偏右 ~225px。改 flex-start 左对齐整行（图在内容左缘 ~60，
   标题~860≈设计900，标题右缘~1115≈设计1157），消除「整体偏右」。 */
@media (min-width: 769px) {
  .octoh-figure-img { order: 1; }
  .octoh-figure-title { order: 2; }
  .octoh-figure-stage { align-self: flex-start; }
}

/* ---------- OctoH-Hand 规格要点：每行行首加点（Bug 16） ---------- */
/* 英文稿（原框架 277:412）为一整段 flow，每项前都有「·」（· Unified Data Source · …）；
   共享 .octoh-specs-list{list-style:none} 已去 disc 圆点，且 li 用「·」做行内分隔符，
   故行首无「·」。加 ::before 前缀复原设计行首「· 」。 */
.octoh-specs-list li::before { content: "· "; }

/* ---------- OctoSense ---------- */
.octos-lead-img { width: 755px; }            /* 399 → 755 */
.octos-ego-lead-img { width: 710px; }        /* 304 → 710 */
.octos-band-title-img { width: 793px; }      /* 600 → 793 */
.octos-glove-title-img { width: 798px; }     /* 446 → 798 */
.octos-components-title-img { width: 402px; }/* 273 → 402 */
.octos-paths-img { width: 893px; }           /* 700 → 893 */

/* ---------- OctoSense 规格表（英文换行多） ---------- */
/* 英文版规格表在 Figma 中比中文版更宽（中文：glove 505px / ego 535px，首列 94px；
   英文：glove 696px / ego 625px，首列 204px / 164px）。按设计稿尺寸渲染 this。 */

/* Glove 规格表 → 整帧英文图（英文标签在首列 204px，比中文 94px 宽，左列不挤） */
.octos-glove-spec-img { width: 696px; max-width: 100%; height: auto; }
/* PC 端保持 Figma「规格表在左、照片在右」：窄屏时两图等比缩小适配（min-width:0 允许 flex 子项压缩），
   而非换行成上下排列；≤768px 由 style.css 改纵排 */
.octos-glove-grid { flex-wrap: nowrap; }
.octos-glove-spec-img,
.octos-glove-img { min-width: 0; }

/* Ego 规格表保留 HTML（Figma 导出图仍含旧品牌「AI-Native Stereo」，与 SYNStereo 冲突）。
   按设计稿：整表 625px（中文 535px）、首列 164px（中文 94px）；
   label 单元内边距收紧为 12px/12px，使「Other Specifications」(≈136px) 在 164px 首列内单行不换 */
@media (min-width: 769px) {
  .octos-ego-spec { width: 625px; }
}
.octos-ego-row { grid-template-columns: 164px 1fr; }
.octos-ego-row span:first-child { padding: 12px 12px; }
.octos-ego-grid { flex-wrap: nowrap; }
.octos-ego-spec,
.octos-ego-img { min-width: 0; }

/* ---------- OctoS-Forge 数据生产平台：描述改左对齐 ---------- */
/* 英文长文案在 272px 左列 justify 会拉伸词距（与 .octoh-story-body 同类），改左对齐。
   标题 .octos-forge-title（h3）默认即左，一并显式置 left 仅为读起来完整。仅英文覆盖，中文 justify 保留。 */
.octos-forge-title,
.octos-forge-desc { text-align: left; }

/* ---------- OctoS-Forge 描述列：宽度按英文稿（Bug 17） ---------- */
/* 英文稿：描述块 287:653 宽 372 / 图 287:652 宽 580 / 间距 80。
   共享 style.css 按中文稿调 .octos-forge-list{width:272px} + .octos-forge-grid{gap:120px}，
   把英文描述压窄 100px（372→272）、间距拉宽 40px（80→120）→ 区域比设计稿窄。
   按英文稿加宽描述、收紧间距；仅桌面（≥769px），≤768px 沿用 style.css 纵排。 */
@media (min-width: 769px) {
  .octos-forge-grid { gap: 80px; }
  .octos-forge-list { width: 372px; }
}

/* ---------- OctoH-Hand 技术规格表（英文换行多） ---------- */
/* 英文版规格表在 Figma 中比中文版更宽（中文：表 422px / 首列 118px；
   英文：表 622px / 首列 208px）。按设计稿渲染，label 首列 208px 使
   「Total Degrees of Freedom」(Figma 渲染 173px) 单行不换行；text 内缩 12px、
   表格→侧图间距 80px 亦对齐英文稿（table x:134-756，side x:836）。
   仅桌面（≥769px）覆盖；≤768px 沿用 style.css 的纵排 + width:100%。 */
@media (min-width: 769px) {
  .octoh-specs { gap: 80px; }
  .octoh-specs-table { flex: 0 0 622px; }
  .octoh-specs-row { grid-template-columns: 208px 1fr; }
  .octoh-specs-row span:first-child { padding: 10px 12px; }
}

/* ---------- OctoH-Hand 品牌故事正文 ---------- */
/* 弯引号 ’（’）+ justify 两端对齐，在 OPPO Sans 度量下把 octopus’s 的 s
   当作独立字块拉伸，出现「octopus’   s」。英文短段改左对齐，消除 justify 拉出的字间空隙。 */
.octoh-story-body { text-align: left; }

/* ---------- OctoH-Hand 品牌故事：标题/正文距左侧改为设计稿 200px ---------- */
/* 英文稿：标题+lead+正文三段左对齐在 x=200，正文块宽 465，配图靠右（w=715，y 至 1440）。
   现状 .octoh-story{justify-content:flex-end} 把整组右对齐，文字落在 175；
   改 flex-start + padding-left:180（section 盒居中后左缘 ~20px → 20+180=200），
   放宽文字块到 465px。仅桌面，移动端沿用 style.css 纵排。
   关键：padding-right:0 让配图贴到内容右缘（1440 上宽 ~695）；min-width:0 →
   允许图片在窄桌面等比收缩（默认 min-width:auto 取 2x 固有宽，阻止收缩导致横向溢出，
   与 specs 页 .octos-*-img{min-width:0} 同一处理）。 */
@media (min-width: 769px) {
  .octoh-story {
    justify-content: flex-start;
    padding-left: 180px;
    padding-right: 0;
  }
  .octoh-story-text {
    flex-basis: 465px;
  }
  .octoh-story-img {
    min-width: 0;
  }
}

/* ---------- OctoH-Hand 独特亮点（Key Differentiators） ---------- */
/* 中英文 Figma 稿布局不同：中文稿一行四卡、单卡 200px、两端对齐（style.css 保留）；
   英文稿为 2×2 网格、单卡 410px、列距 80px、行距 60px、整宽 900px、文字左对齐
   （英文稿 Frame 347/348，单卡 277:267/268/269/270）。英文文案较长，需按英文稿加宽
   并改为左对齐，避免窄卡 justified 拉出难看词距。仅英文覆盖（en.css 只被 views/en 引用）。 */
.octoh-highlight-card { text-align: left; }
.octoh-highlight-desc { text-align: left; }

@media (min-width: 769px) {
  .octoh-highlights-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 60px 80px;
    width: 900px;
    max-width: 100%;
    justify-content: center;
  }
  /* 关键：覆盖 style.css 的 max-width:200px，否则 grid 里卡片被压回 200px */
  .octoh-highlight-card {
    max-width: none;
    width: auto;
  }
}

/* ---------- About ---------- */
.abouts-funding-sub-img { width: 847px; }    /* 574 → 847 */
/* About 创始人块：文字区域改文字切图（Bug 12 分析后按 Figma 原样导出，姓名+简历为透明文字图）。
   原因：英文长简历在 414px 左列 justify 会拉伸词距，改为文字切图（设计稿精度，规避字体回退/两端对齐拉伸）。
   宽度 = Figma 导出 1x 宽（姓名 364 / 简历 414，均 2x 高清）；简历的 0.8 不透明度已 bake 进 alpha，勿再叠 opacity。 */
.abouts-founder-name-img { width: 364px; max-width: 100%; height: auto; display: block; }
.abouts-founder-bio-img { width: 414px; max-width: 100%; height: auto; display: block; margin-top: 12px; }

/* ---------- 移动端 ---------- */
@media (max-width: 768px) {
  /* 无 max-width 的元素补响应式：卡片恢复自适应、标题去负边距 */
  .octo-features-card { flex-basis: auto; }
  .octoh-figure-headline {
    width: 100%;
    max-width: 494px;
    margin: 0;
  }
  .octos-glove-spec-img { width: 100%; }
  /* Bug 18：EN「OctoSense Core Components」标题 402px 在手机(≤~402px 屏)被 max-width:100%
     clamp 成满屏、0 留白、显得过大溢出（CN 273px 天然有留白故无碍）。手机端缩到 78%，
     375 屏 → ~292px、两边 ~42px 留白；用 max-width 故 >502px 平板仍保持自然 402px 不放大。 */
  .octos-components-title-img { max-width: 78%; }
  .abouts-founder-text { width: 100%; }   /* 创始人文字图为 364/414px，手机端改为满宽，避免横向溢出 */
  .abouts-founder-name-img,
  .abouts-founder-bio-img { width: 100%; }
  /* 首页手机 hero：背景切图改为整帧（背景+标题+副标题+按钮烧入一张图，Bug 13）。
     英文副标题铺满整幅宽度，style.css 的 object-fit:cover 在移动端局部放大时会横向裁剪，
     把副标题两侧长英文（…Platform / …Intelligence）裁掉；中文副标题短、居中故未暴露。
     改为 contain 永不横向裁剪（深色 hero 上黑边不可见），完整显示整帧文字。 */
  .home-hero-bg { object-fit: contain; }
}