/* ==================== 翼讯优 · 全站移动端专属样式 (mobile.css) ==================== */
/* 加载顺序：所有 CSS 之后 · 覆盖并精致化 ≤768px 视口的桌面样式 */

/* =====================================================================
   全局
   ===================================================================== */
@media (max-width: 768px) {
  .container { padding: 0 1rem; }
  .section { padding: 2.5rem 0; }
  [id] { scroll-margin-top: 60px; }
}

/* =====================================================================
   导航栏
   ===================================================================== */
@media (max-width: 768px) {
  .nav { height: 56px; }
  .nav .container { padding: 0 1rem; }
  .nav__logo { font-size: .94rem; gap: .4rem; }
  .nav__logo-img { height: 24px; }
  .nav__mobile { padding: .4rem; }
}

/* =====================================================================
   移动菜单（全屏 · 顶部品牌 + 列表导航 + 底部 CTA）
   ===================================================================== */
@media (max-width: 768px) {
  /* 容器：覆盖 base.css 居中布局 */
  .mobile-menu {
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
    /* 叠加 translateY 动画，配合 opacity */
    transform: translateY(-6px);
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
  }
  .mobile-menu--open {
    transform: translateY(0);
  }

  /* ── 顶部品牌区 ── */
  .mobile-menu__hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    min-height: 56px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
  }
  .mobile-menu__logo {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .94rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
  }
  .mobile-menu__logo-img {
    height: 24px;
    width: auto;
    filter: brightness(0) saturate(100%) invert(14%) sepia(96%) saturate(6028%) hue-rotate(356deg) brightness(95%) contrast(107%);
  }

  /* 关闭按钮（覆盖 base.css 的 position: absolute） */
  .mobile-menu__close {
    position: static;
    background: none;
    border: none;
    cursor: pointer;
    padding: .4rem;
    border-radius: 8px;
    transition: background .15s;
    line-height: 0;
  }
  .mobile-menu__close:active { background: var(--gray-100); }
  .mobile-menu__close svg { width: 22px; height: 22px; fill: var(--text-dark); display: block; }

  /* ── 导航链接区 ── */
  .mobile-menu__bd {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 分组标签：与其他菜单项等高，但用浅灰背景区分为一级标题 */
  .mobile-menu__section-label {
    display: flex;
    align-items: center;
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-dark);
    padding: .88rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
    letter-spacing: 0;
  }

  /* 覆盖 base.css 移动菜单链接样式 */
  .mobile-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .95rem;
    font-weight: 500;
    color: var(--text-dark);
    padding: .88rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    transition: background .15s, color .15s;
    /* 覆盖 base.css 的 font-size: 1.2rem 和居中对齐 */
    text-align: left;
    width: 100%;
  }
  .mobile-menu a:hover { background: var(--gray-50); color: var(--text-dark); }
  .mobile-menu a.is-active,
  .mobile-menu a.mobile-menu__link.is-active {
    color: var(--primary);
    background: var(--primary-soft);
  }

  /* 子菜单链接（解决方案） */
  .mobile-menu a.mobile-menu__link--sub {
    font-size: .88rem;
    padding-left: 2rem;
    color: var(--text-dark-soft);
    font-weight: 400;
  }
  .mobile-menu a.mobile-menu__link--sub:hover { color: var(--primary); }

  /* ── 底部 CTA 区 ── */
  .mobile-menu__ft {
    padding: 1.25rem 1rem 1.5rem;
    border-top: 1px solid var(--gray-100);
    display: flex;
    flex-direction: column;
    gap: .75rem;
    flex-shrink: 0;
    background: #fff;
  }
  .mobile-menu__tel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .5rem;
    padding: .85rem !important;
    border-radius: 8px;
    border: 1px solid var(--gray-200) !important;
    border-bottom: 1px solid var(--gray-200) !important;
    color: var(--text-dark) !important;
    font-size: .9rem;
    font-weight: 600;
    background: var(--gray-50) !important;
    transition: background .15s !important;
  }
  .mobile-menu__tel:hover { background: var(--gray-100) !important; }
  .mobile-menu__tel svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: var(--primary);
  }
  .mobile-menu__cta {
    width: 100%;
    justify-content: center;
    padding: .9rem !important;
    font-size: .9rem !important;
    border-radius: 8px !important;
    color: var(--white) !important;
  }
  /* 防止 .mobile-menu a 覆盖按钮文字颜色 */
  .mobile-menu a.mobile-menu__cta { color: var(--white) !important; }
}

/* =====================================================================
   粘性底部 CTA 栏（仅移动端）
   ===================================================================== */
.mobile-sticky-cta { display: none; }

@media (max-width: 768px) {
  .mobile-sticky-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 800;
    align-items: stretch;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .07);
    height: 52px;
  }

  /* 底部栏时 footer 额外留白 */
  .footer { padding-bottom: 68px; }

  .mobile-sticky-cta__call {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-size: .83rem;
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
    border-right: 1px solid var(--gray-200);
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-sticky-cta__call:active { background: var(--gray-50); }
  .mobile-sticky-cta__call svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    stroke: var(--primary);
    fill: none;
  }

  .mobile-sticky-cta__consult {
    flex: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: .03em;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-sticky-cta__consult:active { background: var(--primary-dark); }
}

/* =====================================================================
   Hero 首页
   ===================================================================== */
@media (max-width: 768px) {
  .hero { min-height: auto; }
  .hero__layout {
    padding: 4.75rem 0 2.5rem;
    min-height: auto;
    gap: 1.75rem;
  }
  .hero__badge {
    font-size: .72rem;
    padding: .3rem .85rem;
    margin-bottom: 1.4rem;
  }
  .hero__title {
    font-size: 1.75rem !important;
    line-height: 1.28;
    letter-spacing: -.01em;
  }
  .hero__subtitle {
    font-size: .9rem;
    margin-top: 1.1rem;
    line-height: 1.82;
  }
  .hero__actions {
    margin-top: 1.75rem;
    gap: .65rem;
    flex-direction: column;
  }
  .hero__actions .btn {
    width: 100%;
    justify-content: center;
    padding: .85rem 1.5rem;
  }
  .hero__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 2rem;
    padding-top: 1.5rem;
    gap: 0;
    flex-direction: unset;
  }
  .hero__stat-value { font-size: 1.5rem; }
  .hero__stat-label { font-size: .68rem; }
  .hero__visual { display: none; }
}

@media (max-width: 480px) {
  .hero__title { font-size: 1.55rem !important; }
  .hero__stat-value { font-size: 1.35rem; }
  .hero__stat-label { font-size: .62rem; }
  .hero__stats { padding-top: 1.25rem; margin-top: 1.75rem; }
}

/* =====================================================================
   首页版块（Pain Cards / Product Tabs / Steps / Metrics）
   ===================================================================== */
@media (max-width: 768px) {
  /* Pain Cards */
  .pain-card {
    padding: 1.5rem 1.25rem;
    border-radius: 12px;
  }
  .pain-card__icon {
    width: 40px;
    height: 40px;
    margin-bottom: .85rem;
  }
  .pain-card__title { font-size: .92rem; }
  .pain-card__text { font-size: .83rem; }

  /* Product Tabs — 横向滚动，不折行 */
  .product-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: .4rem;
    padding-bottom: .25rem;
    margin-top: 2rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .product-tabs::-webkit-scrollbar { display: none; }
  .product-tab {
    flex-shrink: 0;
    font-size: .82rem;
    padding: .55rem 1.1rem;
  }
  .product-panel__content h3 { font-size: 1.15rem; }
  .product-panel__content p { font-size: .88rem; }
  .product-panel__card { padding: 1.75rem 1.25rem; }
  .product-panel__card-num { font-size: 2.6rem; }
  .product-panel__card-label { font-size: .85rem; }

  /* Steps */
  .step-card {
    padding: 1.5rem 1.25rem;
    border-radius: 12px;
  }
  .step-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    margin-bottom: .85rem;
  }
  .step-card__title { font-size: .97rem; }
  .step-card__text { font-size: .84rem; }

  /* Metrics 首页 */
  .metric-item { padding: 1.5rem 1rem; }
  .metric-item__val { font-size: 2rem; }
  .metric-item__label { font-size: .82rem; }
  .metric-item__desc { font-size: .78rem; }

  /* News Cards */
  .news-card__body { padding: 1rem 1.25rem 1.25rem; }
  .news-card__title { font-size: .95rem; }
  .news-card__excerpt {
    -webkit-line-clamp: 2;
    font-size: .83rem;
  }
}

/* =====================================================================
   子页面 Hero
   ===================================================================== */
@media (max-width: 768px) {
  .page-hero { padding: 5rem 0 2.5rem; }
  .page-hero__lead {
    font-size: .92rem;
    margin-top: 1rem;
    line-height: 1.82;
  }
  .page-hero__actions {
    margin-top: 1.75rem;
    gap: .6rem;
    flex-direction: column;
    align-items: center;
  }
  .page-hero__actions .btn {
    width: 100%;
    justify-content: center;
    max-width: 280px;
  }
}

/* =====================================================================
   Section 通用排版
   ===================================================================== */
@media (max-width: 768px) {
  .section .heading-lg {
    font-size: clamp(1.25rem, 5.5vw, 1.55rem);
    padding-bottom: .5rem;
  }
  .section-tag {
    font-size: .8rem;
    padding: .32rem .85rem;
    margin-bottom: 1rem;
  }
  .section-desc { font-size: .88rem; }
  .section-subtitle {
    font-size: .9rem;
    line-height: 1.8;
  }
  .section-label { font-size: .7rem; }
}

/* =====================================================================
   CTA 区域
   ===================================================================== */
@media (max-width: 768px) {
  .cta { padding: 3.5rem 0; }
  .cta__panel { padding: 0 .25rem; }
  .cta__actions {
    gap: .6rem;
    flex-direction: column;
    align-items: center;
  }
  .cta__actions .btn {
    width: 100%;
    justify-content: center;
    max-width: 280px;
  }
  .cta__meta { gap: .4rem; }
  .cta__meta-item { font-size: .78rem; }
}

/* =====================================================================
   子页面共享卡片组件（来自 pages.css）
   ===================================================================== */
@media (max-width: 768px) {
  /* Stats */
  .about-stat { padding: 1.5rem 1rem; }
  .about-stat__val { font-size: 1.8rem; }
  .about-stat__label { font-size: .78rem; }
  .about-identity__title { font-size: 1.35rem; }
  .about-identity__text { font-size: .9rem; }

  /* Commit Cards */
  .commit-card { padding: 1.5rem 1.25rem; }
  .commit-card__icon { width: 38px; height: 38px; }
  .commit-card__title { font-size: .95rem; }
  .commit-card__text { font-size: .84rem; }

  /* Feature Cards */
  .feature-card { padding: 1.5rem 1.25rem; }
  .feature-card__icon { width: 40px; height: 40px; }
  .feature-card__title { font-size: .95rem; }
  .feature-card__text { font-size: .83rem; }

  /* Role Cards */
  .role-card { padding: 1.5rem 1.25rem; }
  .role-card__icon { width: 36px; height: 36px; }
  .role-card__title { font-size: .95rem; }
  .role-card__desc { font-size: .83rem; }

  /* Boundary */
  .boundary-box { padding: 1.75rem 1.25rem; }
  .boundary-box__title { font-size: .97rem; }
  .boundary-list__item { font-size: .85rem; }

  /* Metric Items (sub-pages) */
  .metric-item__icon { width: 40px; height: 40px; }
  .metric-item__label { font-size: .9rem; }
  .metric-item__desc { font-size: .82rem; }

  /* Timeline */
  .timeline { padding-left: 1.5rem; }
  .timeline__item { padding-bottom: 2rem; padding-left: 1.25rem; }
  .timeline__title { font-size: .95rem; }
  .timeline__text { font-size: .84rem; }
}

/* =====================================================================
   子页面专属样式（styles.css / service.css / product-ai.css）
   ===================================================================== */
@media (max-width: 768px) {
  /* 文章 */
  .article-content {
    font-size: .93rem;
    line-height: 1.82;
  }
  .article-content h2 { font-size: 1.2rem; }
  .article-content h3 { font-size: 1.05rem; }
  .article-content blockquote { padding: .75rem 1rem; font-size: .9rem; }
  .article-content figure { margin: 1.25rem 0; }
  .article-content table { font-size: .8rem; }
}

/* =====================================================================
   Footer
   ===================================================================== */
@media (max-width: 768px) {
  .footer { padding-top: 2.5rem; }
  .footer__logo { font-size: .92rem; margin-bottom: .8rem; }
  .footer__logo img { height: 26px; }
  .footer__contact { font-size: .82rem; line-height: 2; }
  .footer__col-title {
    font-size: .74rem;
    margin-bottom: .8rem;
    padding-bottom: .4rem;
  }
  .footer__col-links a { font-size: .82rem; }
  .footer__bottom {
    font-size: .72rem;
    padding: 1.1rem 0 .75rem;
  }
}

/* =====================================================================
   极小屏（480px 以下）补充修正
   ===================================================================== */
@media (max-width: 480px) {
  .container { padding: 0 .875rem; }

  /* Hero */
  .hero__title { font-size: 1.55rem !important; }
  .hero__stats { grid-template-columns: repeat(3, 1fr); }
  .hero__stat-value { font-size: 1.35rem; }
  .hero__stat-label { font-size: .62rem; }

  /* 保持 about-stat 2列 */
  .about-stat-grid { grid-template-columns: repeat(2, 1fr); }

  /* 卡片极小屏微调 */
  .step-card { padding: 1.25rem 1rem; }
  .commit-card { padding: 1.25rem 1rem; }
  .feature-card { padding: 1.25rem 1rem; }
  .role-card { padding: 1.25rem 1rem; }
  .pain-card { padding: 1.25rem 1rem; }

  /* Tabs */
  .product-tab { font-size: .78rem; padding: .48rem .9rem; }

  /* Section */
  .section .heading-lg { font-size: clamp(1.2rem, 5.5vw, 1.4rem); }
}