/* =============================================================
   mobile.css — 手机 / 平板响应式公共层
   断点体系：
     ≤768px          手机（本文件的堆叠基础布局）
     769–1200px      平板（基础布局 + 密度增强：双列网格、更大字号）
     >1200px         桌面，完全不命中本文件，走 1920 设计稿 zoom 方案
   加载顺序：style.css → mobile.css → 页面内联 <style> → scale.css
   （页面内联样式可覆盖本文件，用于页面级微调）
   ============================================================= */

@media (max-width: 1200px) {
    :root {
        --gutter: 20px;
    }

    /* ---------- 触感基础 ---------- */
    body {
        -webkit-tap-highlight-color: transparent;
    }

    a, button, [role="button"] {
        touch-action: manipulation;
    }

    [id] {
        scroll-margin-top: 84px;
    }

    .container {
        width: 100%;
        margin: 0;
        padding: 0 var(--gutter);
        box-sizing: border-box;
    }

    /* ---------- 内页 Banner ---------- */
    /* header 默认满宽贴顶（style.css 移动端 header 区块），banner 整体下移让位 */
    .page-banner,
    .hero-home {
        margin-top: 60px;
    }

    .page-banner {
        height: 480px;
    }

    .page-banner .banner-content {
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }

    .page-banner .banner-title {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .page-banner .banner-desc {
        font-size: 14px;
        max-width: 92%;
    }

    .page-banner::after {
        width: 100%;
    }

    /* ---------- 首页 Hero ---------- */
    /* hero 的尺寸与图片展示方式全部由 index.html 内联样式控制
       （≤1200px 图片走文档流整幅展示，详见该文件注释），此处不再设高度 */
    .hero-home .hero-content {
        padding: 0 var(--gutter) 96px;
    }

    .hero-home .hero-content .hero-btns {
        flex-wrap: wrap;
        gap: 12px;
    }

    .hero-home .hero-content .hero-btns .btn {
        width: auto;
        min-width: 128px;
        height: 46px;
        padding: 0 22px;
        font-size: 15px;
    }

    /* ---------- 通用 Hero Banner（旧页面备用） ---------- */
    .hero-banner {
        height: 320px;
    }

    .hero-banner .hero-content {
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }

    .hero-banner .hero-title {
        font-size: 26px;
    }

    /* ---------- 统计条 ---------- */
    .stats-bar {
        height: auto;
        padding: 40px 0 32px;
        background-size: cover;
        background-position: center;
        /* 移动端背景大图换小图（原图 1MB），仅 ≤1200px 命中，PC 端仍加载原图 */
        background-image: url('../images/index/img6-m.webp');
    }

    .stats-bar .container {
        flex-direction: column;
        gap: 24px;
    }

    .stats-bar .stats-left {
        width: 100%;
    }

    .stats-bar .stats-items {
        flex-wrap: wrap;
        row-gap: 18px;
    }

    .stats-bar .stat-item {
        width: 50%;
    }

    /* 数字：26 → 30px，并补上 PC 那套「工业仪表字面 + 等宽数字」。
       移动端原来只覆盖了 font-size，字体沿用正文的苹方/雅黑 —— 它们的数字是
       比例宽度的，0→100 滚动过程中每一位宽度都在变，text-align:center 的数字
       就会左右抖。PC 早就用 tabular-nums 治住了，移动端漏了。
       font-variant-numeric 与 font-feature-settings 双写（同 PC 写法），
       即使落到 sans-serif，常见系统字体也带 tnum，抖动即消失。
       原来那个 height: 38px / line-height: 38px 的定高居中一并换成
       line-height + padding-bottom —— 定高是为 26px 配的，放大后会顶到。 */
    .stats-bar .stat-num {
        position: relative;
        height: auto;
        line-height: 1.15;
        padding-bottom: 12px;
        font-family: 'Bahnschrift', 'DIN Alternate', 'Oswald', 'Arial Narrow', sans-serif;
        font-size: 30px;
        letter-spacing: .5px;
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum" 1;
    }

    /* 落定刻度线 —— PC 那条在 @media (min-width:1201px) 里，移动端一直没有，
       于是 js/index.js 加上的 stat-land 在手机上完全看不出效果：数字数完就完了，
       没有任何「到位」的信号。这里补一条按移动端尺度收窄的刻度，
       与 PC 同一套语言、同一段 keyframes（stat-rule-in 定义在 index.html 顶层，
       两端共用，不需要重复定义）。 */
    .stats-bar .stat-num::after {
        content: '';
        position: absolute;
        left: 50%;
        margin-left: -14px;
        bottom: 0;
        width: 28px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, #5ECFFE 0%, #025FFF 100%);
        transform: scaleX(0);
        transform-origin: 0 50%;
        opacity: 0;
    }

    .stats-bar .stat-num.stat-land::after {
        animation: stat-rule-in .5s cubic-bezier(.22, 1, .36, 1) forwards;
    }

    /* 单位跟着数字走同一支字面（"+" 与 "年" 才不会有两种气质）。
       原来落回正文色 #666，改用与 PC 一致的冷调 #64707F（4.8:1 过 AA） */
    .stats-bar .stat-num .unit {
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        color: #64707F;
        margin-left: 2px;
        letter-spacing: 0;
    }

    /* 标签：原来用 color:#333 + opacity:.7 凑灰，透明度会连字重一起压淡。
       改成和 PC 同一支冷调色，层级靠字色与字号拉开 */
    .stats-bar .stat-label {
        margin-top: 8px;
        font-size: 14px;
        letter-spacing: 1px;
        color: #5A6B85;
        opacity: 1;
    }

    .stats-bar .stats-right {
        width: 100%;
        padding-left: 0;
        align-items: center;
        text-align: center;
        gap: 6px;
    }

    .stats-bar .stats-right p {
        font-size: 16px;
        height: auto;
        line-height: 1.5;
    }

    .stats-bar .stats-right .btn1 {
        height: auto;
        font-size: 16px;
    }

    /* ---------- 区块与标题 ---------- */
    .section {
        padding: 44px 0;
    }

    .section-title {
        margin-bottom: 26px;
    }

    .section-title h2 {
        font-size: 20px;
    }

    .section-title p {
        font-size: 13px;
    }

    .home-products .container .home-section-title {
        font-size: 20px;
        height: auto;
        line-height: 1.4;
        margin: 34px 0 22px;
    }

    .news-more {
        margin-top: 28px;
    }

    /* ---------- 产品预览卡（首页） ---------- */
    /* 外层 .container 已有 gutter 内边距，这里清掉网格自身的 padding 避免叠加 */
    .home-products .products-grid {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 0;
    }

    .product-preview-card {
        width: 100%;
        height: auto;
        padding: 26px 22px;
        border-radius: 16px;
    }

    .product-preview-card:first-child {
        margin-right: 0;
    }

    .product-preview-card .card-title {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .product-preview-card .features li {
        padding: 16px 0;
    }

    .product-preview-card .features li .li-icon {
        width: 32px;
        height: 32px;
    }

    .product-preview-card .features li .li-content {
        width: calc(100% - 40px);
        padding-left: 16px;
    }

    .product-preview-card .features li .li-content .li-title {
        font-size: 16px;
        white-space: normal;
    }

    .product-preview-card .features li .li-content .li-desc {
        font-size: 13px;
        white-space: normal;
        line-height: 1.5;
    }

    /* ---------- 按钮 ---------- */
    .btn-box,
    .home-news .btn-detail,
    .news-more .btn-detail,
    .product-content .btn-detail {
        width: auto;
        min-width: 150px;
        height: 48px;
        line-height: 48px;
        padding: 0 30px;
        font-size: 16px;
        box-sizing: border-box;
    }

    .btn-box {
        margin: 36px auto;
    }

    /* ---------- Tab 条（新闻 / 解决方案 / 首页新闻） ---------- */
    .news-tabs,
    .news-page-tabs,
    .solution-page-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x proximity;
    }

    .news-tabs::-webkit-scrollbar,
    .news-page-tabs::-webkit-scrollbar,
    .solution-page-tabs::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .news-tabs a,
    .news-page-tabs a,
    .solution-page-tabs a {
        flex-shrink: 0;
        padding: 12px 16px;
        font-size: 15px;
        scroll-snap-align: start;
    }

    /* ---------- 产品页：侧栏改为横滚标签条 ---------- */
    .product-layout {
        flex-direction: column;
        gap: 20px;
        padding: 24px 0 48px;
    }

    .product-sidebar {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        padding: 8px 10px;
        border-radius: 14px;
        box-shadow: 0 6px 20px rgba(222, 226, 234, 0.5);
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }

    .product-sidebar::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .product-sidebar .sidebar-item {
        flex: 0 0 auto;
        height: 44px;
        padding: 0 20px;
        font-size: 15px;
        border-radius: 22px;
        background: #F5F7FA;
        white-space: nowrap;
    }

    .product-sidebar .sidebar-item .img-box {
        width: 24px;
        height: 24px;
        margin-right: 8px;
    }

    .product-sidebar .sidebar-item.active {
        background: linear-gradient(90deg, #5ECFFE 0%, #025FFF 100%);
        color: #fff;
        font-weight: 500;
    }

    .product-content .product-block h3 {
        font-size: 18px;
    }

    /* ---------- 新闻列表条目 ---------- */
    .news-page-item {
        padding: 16px 0;
        gap: 16px;
    }

    .news-page-item h4 {
        font-size: 15px;
    }

    .news-page-item p {
        font-size: 12px;
    }

    /* ---------- 空状态（产品/解决方案/新闻三列表页共用）：悬浮小球 + 虚线托盘 ----------
       桌面端沿用 style.css 的 SVG 文档图标；移动端换成本方案，
       图标元素由各页 JS 输出（.empty-icon），球与托盘都是纯 CSS 绘制 */
    .empty-state {
        min-height: 0;
        padding: 40px 24px 36px;
        background: #FAFBFD;
        border: 1.5px dashed #D9E0EC;
        border-radius: 20px;
    }

    .empty-state::before {
        display: none;
    }

    .empty-state .empty-icon {
        position: relative;
        width: 72px;
        height: 60px;
        margin-bottom: 18px;
        flex: none;
    }

    /* 托盘：虚线碗形 */
    .empty-state .empty-icon::before {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 64px;
        height: 30px;
        transform: translateX(-50%);
        border: 2px dashed #B9C4D6;
        border-top: none;
        border-radius: 0 0 60px 60px;
        box-sizing: border-box;
    }

    /* 品牌渐变小球，在托盘上方悬浮跳动 */
    .empty-state .empty-icon::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 2px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: linear-gradient(135deg, #5ECFFE 0%, #025FFF 100%);
        box-shadow: 0 8px 16px rgba(2, 95, 255, 0.3);
        animation: empty-ball-float 2.6s ease-in-out infinite;
    }

    .empty-state .empty-main {
        font-size: 16px;
        font-weight: 600;
        color: #5A6474;
    }

    .empty-state .empty-hint {
        margin-top: 8px;
        font-size: 13px;
        color: #98A2B6;
    }

    /* 引导按钮（由各页 JS 输出）：与桌面共用渐变，移动端收小一档 */
    .empty-state .empty-action {
        margin-top: 18px;
        height: 38px;
        padding: 0 24px;
        border-radius: 8px;
        font-size: 13px;
        box-shadow: 0 4px 10px rgba(2, 95, 255, 0.22);
    }

    @media (prefers-reduced-motion: reduce) {
        .empty-state .empty-icon::after {
            animation: none;
        }
    }

    /* ---------- 触控微交互：按压回弹 ----------
       仅作用于按钮/标签类元素；带 motion-reveal 进场过渡的卡片
       不改 transition（会破坏错峰进场，见 style.css 的说明）。 */
    .btn,
    .btn-primary,
    .btn-outline,
    .btn-box,
    .btn-detail,
    .product-sidebar .sidebar-item,
    .news-tabs a,
    .news-page-tabs a,
    .solution-page-tabs a,
    .nav a,
    .link-arrow {
        transition:
            transform .16s cubic-bezier(.34, 1.56, .64, 1),
            color .3s ease,
            background-color .3s ease,
            border-color .3s ease,
            box-shadow .3s ease;
    }

    .btn:active,
    .btn-primary:active,
    .btn-outline:active,
    .btn-box:active,
    .btn-detail:active,
    .product-sidebar .sidebar-item:active,
    .news-tabs a:active,
    .news-page-tabs a:active,
    .solution-page-tabs a:active,
    .nav a:active {
        transform: scale(.93);
    }

    /* ---------- 进场动效提速（仅移动端） ----------
       桌面端 .5s 过渡 + 60ms 步进错峰在真机上会放大"切页后内容迟迟未就位"
       的感知延迟。这里保留与 style.css 完全相同的属性集和 --motion-delay
       错峰机制，只缩短时长（错峰步进同步减半，见 js/main.js），
       进场节奏不变、更跟手。header 菜单 .nav a 的错峰不受影响。 */
    .motion-reveal,
    .product-preview-card,
    .solution-page-card,
    .news-page-list .card,
    .news-card,
    .faq-item,
    .service-card,
    .contact-card,
    .product-sidebar,
    .product-content {
        transition:
            opacity .3s cubic-bezier(.22, 1, .36, 1) var(--motion-delay, 0ms),
            transform .26s cubic-bezier(.22, 1, .36, 1) var(--motion-delay, 0ms),
            box-shadow .3s ease,
            border-color .3s ease;
    }
}

/* =============================================================
   平板密度增强（769–1200px）
   基础堆叠布局不变，提升信息密度与字号
   ============================================================= */
@media (min-width: 769px) and (max-width: 1200px) {
    :root {
        --gutter: 40px;
    }

    .page-banner {
        height: 560px;
    }

    .page-banner .banner-title {
        font-size: 34px;
    }

    .hero-banner {
        height: 400px;
    }

    .section {
        padding: 56px 0;
    }

    .section-title h2 {
        font-size: 28px;
    }

    .home-products .container .home-section-title {
        font-size: 28px;
        margin: 42px 0 28px;
    }

    /* 统计条：平板一行 4 个 */
    .stats-bar {
        padding: 48px 0 42px;
    }

    .stats-bar .stat-item {
        width: 25%;
    }

    .stats-bar .stat-num {
        font-size: 36px;
    }

    .stats-bar .stat-label {
        font-size: 16px;
    }

    /* 产品预览卡：平板双列 */
    .home-products .products-grid {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 24px;
    }

    .product-preview-card {
        width: calc(50% - 12px);
        padding: 30px 26px;
    }

    .product-preview-card .card-title {
        font-size: 24px;
    }

    .product-preview-card .features li {
        padding: 24px 0;
    }

    .product-preview-card .features li .li-content .li-title {
        font-size: 18px;
    }

    .product-preview-card .features li .li-content .li-desc {
        font-size: 14px;
    }

    .product-sidebar .sidebar-item {
        height: 48px;
        font-size: 16px;
    }

    .news-page-item h4 {
        font-size: 16px;
    }
}