/* ============================================================
   ai-speech.css — AI 语音文本模型页面
   数值取自 Figma「创亚官网2期」· 产品-AI 语音文本模型（画布 1920 × 2770）

   本页只负责 0 ~ 2690 这段自研区：导航（0~348）由 include/header-nav.thtml 承担，
   页脚（2690~2770）由 include/foot.thtml 承担，都不在本文件内。

   与 ai-work.css / lingzhi.css 同源但数值各自独立，未抽公共骨架 ——
   本页 hero 胶囊只有 30.8 高（ai-work 是 38.7），纵向节奏、区块间距也全不同。

   入场动效全部复用全站的 animations.css，本文件不定义动画。
   ============================================================ */

/* ==================== Hero ====================
   纵向用 padding-top 直接定位，不是 flex 居中：
   padding-top 249 = 标题行框顶（48px × line-height 1.2 = 57.6，墨迹高 44，
   上下各留 6.8 → 墨迹落在 256~299，与设计稿实测一致） */
.hero {
    position: relative;
    min-height: 630px;
    padding: 249px 0 0;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
/* 设计稿 mask 层 866:59：#0068DD → 全透明，逐像素核过 */
.hero-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, #0068dd 0%, rgba(0, 104, 221, 0) 100%);
}
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 20px;
}
.hero-title {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    margin-bottom: 16.4px;
}
/* 胶囊：底色 #2DA8FF 20% + 白描边 40%（同 ai-work 的 hero-pill 配方），
   但本页只有 30.8 高。内边距 29 由设计稿宽 378 反推（378 − 20 字 × 16px）÷ 2 */
.hero-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    height: 30.8px;
    margin: 0 auto 23px;
    padding: 0 29px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-radius: 999px;
    background: rgba(45, 168, 255, .2);
    font-size: 16px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}
.hero-desc {
    font-size: 24px;
    line-height: 48px;
    color: #fff;
    text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    max-width: 1198px;   /* 设计稿 866:61 宽度，正好卡住两行断点 */
    margin: 0 auto;
}

/* ==================== 主体背景区（629 ~ 2040） ====================
   设计稿 866:41 是一张 1920×1411 的图，实测 cover 后与渲染逐像素吻合。
   容器高度由内容撑开（126 + 488 + 148 + 488 + 161 = 1411），不写死高度，
   窄屏单列变高时靠 cover 继续铺底 */
.speech-main {
    background: #f4f8ff url('../images/speech-bg-main.webp') center / cover no-repeat;
    /* 123.5 而非设计稿的 126：浏览器渲染 12px 字的墨迹比 Figma 低约 1.5px，
       减掉后本区所有墨迹行（胶囊/标题/正文/卡片/底部说明）与设计稿零偏差 */
    padding: 123.5px 0 161px;
}

/* ---- 左右两栏块 ----
   两块共用同一个居中容器、并在容器内一律左对齐：设计稿里两块的内容左边界都是 233，
   「从左往右扫，每一栏的阅读起点一致」是设计意图。但两块内容宽度并不相同
   （1559 vs 1438）、右边界也不同（1792 vs 1671），若让各自居中，
   左边界会拉开 60px、阅读起点就散了。故容器宽度取较宽的那块，两块都从容器左边起排。
   代价：整块相对设计稿左移 52.5px —— 设计稿左边距 233 / 右边距 128 本就不对称，
   要同时保住 233 和响应式不溢出是做不到的，这里选了一致的起点 */
.speech-blocks {
    max-width: 1619px;   /* 1559 内容 + 左右内边距各 30 */
    margin: 0 auto;
    padding: 0 30px;
}
.speech-block {
    display: flex;
    /* 文案与配图垂直居中。两块的配图恒 488（aspect-ratio 决定行高），文案更矮
       （is-flow 393.8、is-value 465.8），故本属性移动的是**文案**：
       文案顶下移 (488−393.8)/2 = 47.1（is-value 为 (488−465.8)/2 = 11.1）。
       原为「文字列首行与配图顶对齐」，居中后该取齐关系不再保留。
       本属性不改容器高度 —— is-flow 的 148px 行距不受影响；
       ≤1024 的单列块显式写了 align-items: stretch，column 方向下不会被它误伤。 */
    align-items: center;
}
/* 区块1「核心能力链路」：文左图右，文字 544 + 间距 320 + 图 695 = 1559（正好撑满容器） */
.speech-block.is-flow {
    gap: 320px;
    margin-bottom: 148px;
}
/* 区块2「核心价值」：图左文右，图 695 + 间距 185 + 文字 558 = 1438。
   row-reverse 下主轴自右向左，要贴容器左边得写 flex-end */
.speech-block.is-value {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 185px;
}
.speech-text { min-width: 0; }
.is-flow .speech-text { flex: 0 1 544px; }
.is-value .speech-text { flex: 0 1 558px; }
.speech-image { flex: 0 1 695px; min-width: 0; }
/* 圆角与比例落在图片自身；原图是 4:3，容器 695×488 靠 cover 裁上下各 16.7，
   与设计稿渲染实测一致 */
.speech-image img {
    width: 100%;
    aspect-ratio: 695 / 488;
    object-fit: cover;
    border-radius: 20px;
}

/* ---- 小标胶囊：设计稿三个宽度 72 / 100 / 110 是手摆的，同一句「语音文本模型」
        在两处还差 10px，故改为内容自适应 + 统一内边距 ---- */
.speech-tag {
    display: inline-block;
    background: #d2e7ff;
    border-radius: 999px;
    padding: 3px 14px;
    font-size: 12px;
    line-height: 18px;
    color: #0068dd;
    margin-bottom: 14.4px;
}
.speech-title {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    background-image: linear-gradient(180deg, #00e5ff 0%, #0068dd 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 21.9px;
}
/* 正文 18px / 行高 36，段间不额外留白（设计稿实测每行都是 36 的整倍数） */
.speech-desc {
    font-size: 18px;
    line-height: 36px;
    color: #000;
}

/* ==================== 应用场景区（2040 ~ 2690） ====================
   设计稿 887:140 以 53% 不透明度叠在白底上。用伪元素承载 opacity，
   不把透明度加在容器上 —— 否则四张卡片会一起被压淡 */
.scene {
    position: relative;
    background: #fff;
    padding: 55px 0 61.5px;
}
.scene::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../images/speech-bg-scene.webp') center / cover no-repeat;
    opacity: .53;
    pointer-events: none;
}
.scene > * {
    position: relative;
    z-index: 1;
}
.scene-header {
    text-align: center;
    padding: 0 20px;
    margin-bottom: 58.2px;
}
.scene-header .speech-tag { margin-bottom: 29.2px; }
.scene-title {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 2.88px;
    background-image: linear-gradient(180deg, #00e5ff 0%, #0068dd 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 四张卡片：336×260、间距 25，共 1419 居中（1920 下左边界 250，与设计稿一致） */
.scene-cards {
    display: flex;
    justify-content: center;
    gap: 25px;
    padding: 0 20px;
}
.scene-card {
    flex: 0 1 336px;
    min-width: 0;
    height: 260px;
    padding: 35px 28px 0;
    border-radius: 16px;
    background: rgba(253, 254, 255, .7);
    box-shadow: 0 0 8px 5px rgba(210, 231, 255, .5);
    text-align: center;
}
.scene-card-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto;
}
.scene-card-icon img { width: 100%; height: 100%; object-fit: contain; }
.scene-card-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
    margin-top: 16.7px;
}
.scene-card-desc {
    font-size: 14px;
    line-height: 24px;
    color: #444;
    margin-top: 17.2px;
}

.scene-foot {
    font-size: 18px;
    line-height: 36px;
    color: #000;
    text-align: center;
    max-width: 1305px;   /* 设计稿 880:134 宽度，1920 下单行 */
    margin: 68.5px auto 0;
    padding: 0 20px;
}

/* ==================== Responsive ====================
   断点只保留 1024：1025 以上交给文件末尾的等比缩放。缩放区间内不得再有任何降级块，
   否则会出现「既等比缩放、又局部改布局」的混合态（媒体查询按物理视口判定，
   1440 视口下 zoom 已把布局撑到 1920，但那些断点照样会命中）。

   原 @media (max-width: 1620px) 整块已删：两条 gap 都被原 1280 档的同特异性规则覆盖。
   原 @media (max-width: 1280px) 整体并入本块、且必须排在最前 —— 它的 .is-value gap、
   .speech-main padding、.scene-card flex 都会被本块后半段覆盖，顺序颠倒就改了 ≤1024 的结果。
   注意 .is-flow 的 gap / margin-bottom 是 (0,2,0)，比后半段的 .speech-block (0,1,0) 高，
   本块合并后仍由它们生效（与合并前一致）。 */
@media (max-width: 1024px) {
    /* ---- 原 1280 档：栏距与卡片宽度 ---- */
    .speech-block.is-flow { gap: 64px; }
    .speech-block.is-value { gap: 56px; }
    .speech-main { padding: 96px 0 110px; }
    .speech-block.is-flow { margin-bottom: 110px; }
    .scene-cards { flex-wrap: wrap; gap: 20px; }
    .scene-card { flex: 0 1 300px; }

    /* ---- 单列堆叠 ---- */
    .hero { min-height: 520px; padding-top: 170px; }
    .hero-title { font-size: 36px; margin-bottom: 14px; }
    .hero-pill { height: 30px; padding: 0 20px; font-size: 14px; margin-bottom: 18px; }
    .hero-desc { font-size: 18px; line-height: 34px; }

    .speech-main { padding: 72px 0 84px; }
    /* 单列堆叠后横向间距失去意义，改为纵向；两块统一「文字在上、配图在下」，
       反向行要重置 row-reverse 遗留的 flex-end，否则 column 下会靠底 */
    .speech-blocks { max-width: 780px; }
    .speech-block,
    .speech-block.is-value {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 40px;
        margin-bottom: 72px;
    }
    .speech-block.is-value { margin-bottom: 0; }
    .is-flow .speech-text,
    .is-value .speech-text,
    .speech-image { flex: 1 1 auto; }
    .speech-title { font-size: 30px; margin-bottom: 18px; }

    .scene { padding: 56px 0 60px; }
    .scene-header { margin-bottom: 44px; }
    .scene-title { font-size: 38px; letter-spacing: 1.8px; }
    .scene-cards { padding: 0 32px; }
    .scene-card { flex: 0 1 320px; }
    .scene-foot { margin-top: 48px; font-size: 16px; line-height: 30px; }
}

@media (max-width: 768px) {
    .hero { min-height: 460px; padding-top: 140px; }
    .hero-title { font-size: 30px; }
    .hero-pill { height: 28px; padding: 0 16px; font-size: 12px; }
    .hero-desc { font-size: 16px; line-height: 30px; }

    .speech-main { padding: 56px 0 64px; }
    .speech-blocks { padding: 0 24px; }
    .speech-block { gap: 32px; margin-bottom: 56px; }
    .speech-title { font-size: 26px; }
    .speech-desc { font-size: 16px; line-height: 32px; }

    .scene { padding: 44px 0 48px; }
    .scene-header { margin-bottom: 32px; }
    .scene-title { font-size: 30px; letter-spacing: 1px; }
    .scene-cards { flex-direction: column; align-items: center; gap: 16px; padding: 0 24px; }
    .scene-card { flex: 0 0 auto; width: 100%; max-width: 336px; }
    .scene-foot { font-size: 15px; line-height: 28px; margin-top: 36px; }
}

@media (max-width: 480px) {
    .hero { min-height: 400px; padding-top: 118px; }
    .hero-title { font-size: 26px; margin-bottom: 12px; }
    .hero-pill { height: 26px; padding: 0 12px; font-size: 11px; margin-bottom: 14px; }
    .hero-desc { font-size: 15px; line-height: 26px; }

    .speech-main { padding: 40px 0 48px; }
    .speech-blocks { padding: 0 16px; }
    .speech-block { margin-bottom: 44px; }
    .speech-tag { padding: 3px 12px; }
    .speech-title { font-size: 22px; }
    .speech-desc { font-size: 15px; line-height: 28px; }

    .scene { padding: 36px 0 40px; }
    .scene-title { font-size: 26px; letter-spacing: .5px; }
    .scene-cards { padding: 0 16px; }
    .scene-foot { font-size: 14px; line-height: 26px; }
}

/* === 设计稿等比缩放（基准 1920）===
   本页尺寸全按 1920 画布写死。视口不足 1920 时原本只有左右留白被压、元素尺寸不动，
   观感就是「元素被放大」。这里把整页按 视口/1920 缩放：留白与元素乘同一个系数，
   比例关系恒定，任意视口下都是设计稿的等比副本。

   zoom 只改「尺寸的缩放系数」，不改变媒体查询的判定依据 —— 媒体查询与 100vw 仍按
   **物理视口**判定，而布局视口被撑成 物理视口/zoom（1440 下即 1920）。所以本页
   max-width 落在 [1025,1919] 的降级块都已收进 1024。 */
@media (min-width: 1025px) {
    html { --z: min(1, calc(100vw / 1920px)); zoom: var(--z); }

    /* 页脚与设计稿同比：base.css 那条 1600 断点兜底只服务 1200 系页面，
       在缩放区间（1025–1600）会把内边距压成 40px，比页面其余部分宽出一截。
       同特异性下后加载者胜，故这里可直接覆盖 base.css 的规则。 */
    .footer .content { padding: 18px 180px 0; }
    .footer-qr { margin-right: 94px; }
}