/* ========================================================================
   涛飞网络官网 · 全站响应式适配系统
   assets/css/responsive.css
   覆盖范围：4K(3840+) / 2K(2560) / 1K(1920) 桌面 + 平板 + 手机
   断点策略：mobile-first，配合 min-width 逐级放大容器与排版
   移动端设计原则：呼吸感 · 层次感 · 节奏感 · 可读性
   ======================================================================== */

/* ---- 0. 基础防溢出 ---- */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }
.grid, [class*="grid-cols"] { min-width: 0; }
*, *::before, *::after { box-sizing: border-box; }


/* ========================================================================
   1. 流式容器：覆盖全站固定 1200px（内联 style 与 footer 卡片类）
   ------------------------------------------------------------------------ */
[style*="max-width:1200px"],
[style*="max-width: 1200px"],
.brand-banner,
.card-grid-wrap,
.footer-bottom {
  max-width: min(92vw, 1400px) !important;
}

@media (min-width: 1920px) {
  [style*="max-width:1200px"],
  [style*="max-width: 1200px"],
  .brand-banner,
  .card-grid-wrap,
  .footer-bottom {
    max-width: 1600px !important;
  }
}
@media (min-width: 2560px) {
  [style*="max-width:1200px"],
  [style*="max-width: 1200px"],
  .brand-banner,
  .card-grid-wrap,
  .footer-bottom {
    max-width: 1920px !important;
  }
}
@media (min-width: 3840px) {
  [style*="max-width:1200px"],
  [style*="max-width: 1200px"],
  .brand-banner,
  .card-grid-wrap,
  .footer-bottom {
    max-width: 2400px !important;
  }
}


/* ========================================================================
   2. 大屏增强（2K / 4K）：放大区块呼吸感与标题
   ------------------------------------------------------------------------ */
@media (min-width: 1920px) {
  main section {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }
  .grid { gap: 28px !important; }
  [style*="padding:28px 24px"] { padding: 36px 32px !important; }
}
@media (min-width: 2560px) {
  main section {
    padding-top: 112px !important;
    padding-bottom: 112px !important;
  }
  [style*="padding:120px 24px 80px"],
  [style*="padding:120px 24px"],
  [style*="padding: 120px"] {
    padding-top: 140px !important;
    padding-bottom: 96px !important;
  }
  .grid { gap: 36px !important; }
  [style*="padding:28px 24px"] { padding: 44px 40px !important; }
  h1 { font-size: 56px !important; line-height: 64px !important; }
  h2 { font-size: 40px !important; line-height: 50px !important; }
  h3 { font-size: 22px !important; line-height: 30px !important; }
  .card-grid .f-card { grid-column: span 3 / span 3; }
}
@media (min-width: 3840px) {
  h1 { font-size: 68px !important; line-height: 78px !important; }
  h2 { font-size: 48px !important; line-height: 58px !important; }
}


/* ========================================================================
   3. 顶部导航：手机端汉堡菜单 + 抽屉
   ------------------------------------------------------------------------ */
.tf-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-neutral-l1);
  border-radius: 10px;
  background: var(--bg-overlay-l1);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.tf-nav-toggle:hover {
  background: var(--bg-overlay-l2);
  border-color: var(--border-neutral-l2);
}
.tf-nav-toggle svg { display: block; }

@media (max-width: 1023px) {
  header[data-shared-region="global-header"] nav[data-nav-region="primary"] {
    display: none !important;
  }
  header[data-shared-region="global-header"] [data-dom-id="cta-contact"] {
    display: none !important;
  }
  .tf-nav-toggle {
    display: inline-flex !important;
  }
}

@media (max-width: 480px) {
  header[data-shared-region="global-header"] .tracking-\[0\.05em\] {
    display: none;
  }
}

/* 移动端抽屉 */
.tf-mobile-drawer {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-base-secondary);
  border-top: 1px solid var(--border-neutral-l1);
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
  z-index: 49;
  overflow-y: auto;
  padding: 12px 16px 32px;
  pointer-events: none;
}
.tf-mobile-drawer.tf-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 1023px) {
  .tf-mobile-drawer { display: block; }
}
.tf-mobile-drawer a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-default);
  text-decoration: none;
  border-bottom: 1px solid var(--border-neutral-l1);
  transition: background 0.15s ease;
}
.tf-mobile-drawer a:hover { background: var(--bg-overlay-l1); }
.tf-mobile-drawer a[data-active="true"] { color: var(--text-brand); }
.tf-mobile-drawer a.tf-cta {
  margin-top: 20px;
  justify-content: center;
  background: var(--bg-brand);
  color: var(--text-onbrand);
  border-radius: 10px;
  border: none;
  font-weight: 600;
  font-size: 15px;
}
.tf-mobile-drawer a.tf-cta:hover { background: var(--bg-brand-hover); }

/* 抽屉遮罩 */
.tf-mobile-overlay {
  display: none;
  position: fixed;
  inset: 64px 0 0 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 48;
}
.tf-mobile-overlay.tf-open { display: block; }
@media (min-width: 1024px) {
  .tf-mobile-overlay { display: none !important; }
}


/* ========================================================================
   4. 移动端排版系统（≤1023 平板 / ≤768 / ≤640 / ≤480 手机）
   设计目标：呼吸感 · 层次感 · 节奏感 · 可读性
   ------------------------------------------------------------------------ */

/* ===== 4.1 区块间距：建立统一垂直节奏 ===== */
@media (max-width: 768px) {
  main section {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* hero 大内边距内层容器 */
  [style*="padding:120px 24px 80px"],
  [style*="padding:120px 24px"],
  [style*="padding: 120px"] {
    padding: 56px 20px 48px !important;
  }
  [style*="padding:96px 24px"],
  [style*="padding: 96px"] {
    padding: 52px 20px !important;
  }
  [style*="padding:64px 24px"],
  [style*="padding: 64px 24px"] {
    padding: 44px 20px !important;
  }
}

@media (max-width: 480px) {
  main section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  [style*="padding:120px 24px 80px"],
  [style*="padding:120px 24px"],
  [style*="padding: 120px"] {
    padding: 44px 16px 36px !important;
  }
  [style*="padding:96px 24px"],
  [style*="padding: 96px"] {
    padding: 40px 16px !important;
  }
  [style*="padding:64px 24px"],
  [style*="padding: 64px 24px"] {
    padding: 36px 16px !important;
  }
}


/* ===== 4.2 标题层级：清晰区分 H1/H2/H3 ===== */
@media (max-width: 640px) {
  h1 {
    font-size: clamp(24px, 7.5vw, 28px) !important;
    line-height: 1.28 !important;
    letter-spacing: -0.01em !important;
  }
  h2 {
    font-size: clamp(19px, 5.4vw, 22px) !important;
    line-height: 1.32 !important;
  }
  h3 {
    font-size: clamp(15px, 4.2vw, 17px) !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 380px) {
  h1 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
  h2 {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }
}


/* ===== 4.3 正文字号：保证中文可读性 ===== */
@media (max-width: 640px) {
  p {
    font-size: 13.5px !important;
    line-height: 1.62 !important;
  }
  /* 描述性小字提升至 12px，保证可读 */
  [style*="font-size:11px"],
  [style*="font-size: 11px"] {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  [style*="font-size:10px"],
  [style*="font-size: 10px"] {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }
  /* eyebrow / 标签性文字保持紧凑 */
  [style*="text-transform:uppercase"][style*="letter-spacing:0.1em"] {
    font-size: 10.5px !important;
    letter-spacing: 0.08em !important;
  }
}


/* ===== 4.4 网格间距：移动端收紧但有呼吸 ===== */
@media (max-width: 640px) {
  .grid {
    gap: 16px !important;
  }
}

@media (max-width: 480px) {
  .grid {
    gap: 14px !important;
  }
}


/* ===== 4.5 换行与防溢出 ===== */
@media (max-width: 640px) {
  .whitespace-nowrap { white-space: normal !important; }
  /* 导航与按钮内文字保留不换行 */
  header[data-shared-region="global-header"] .whitespace-nowrap,
  a[data-dom-id] .whitespace-nowrap,
  .tf-mobile-drawer .whitespace-nowrap,
  .tf-mobile-drawer a {
    white-space: nowrap !important;
  }
  /* h3 卡片标题允许换行（防止截断） */
  h3.whitespace-nowrap { white-space: normal !important; }
}


/* ===== 4.6 Section Header：缩减下边距与内间距 ===== */
@media (max-width: 640px) {
  .flex.flex-col.items-center[style*="margin-bottom:48px"],
  .flex.flex-col.items-center[style*="margin-bottom:56px"],
  .flex.flex-col.items-center[style*="margin-bottom: 48px"],
  .flex.flex-col.items-center[style*="margin-bottom: 56px"],
  .flex.flex-col.items-center.text-center[style*="margin-bottom"] {
    margin-bottom: 28px !important;
    gap: 10px !important;
  }
  /* services / cases 的左对齐 header */
  .flex.flex-col[style*="margin-bottom:48px"] {
    margin-bottom: 28px !important;
    gap: 10px !important;
  }
  .flex.flex-col.md\:flex-row[style*="margin-bottom:48px"] {
    margin-bottom: 28px !important;
    gap: 14px !important;
  }
}


/* ===== 4.7 Hero 区域：优化首屏焦点与节奏 ===== */
@media (max-width: 640px) {
  /* hero 内层容器更紧凑 */
  [style*="padding:120px 24px 80px"],
  [style*="padding:120px 24px"] {
    padding: 44px 16px 36px !important;
  }
  /* hero 网格：左右栏间距收紧 */
  .grid.grid-cols-1.lg\:grid-cols-12 {
    gap: 28px !important;
  }
  /* hero 左栏内容间距：24px → 18px */
  .lg\:col-span-7.flex.flex-col[style*="gap:24px"] {
    gap: 18px !important;
  }
  /* hero subtitle 限宽移除，跟随容器 */
  .lg\:col-span-7 p[style*="max-width:520px"] {
    max-width: 100% !important;
  }

  /* CTA 按钮组：保持横向排列，自然换行，不全宽堆叠 */
  .grid.grid-cols-1.lg\:grid-cols-12 .flex.flex-wrap.items-center[style*="gap:16px"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .grid.grid-cols-1.lg\:grid-cols-12 .flex.flex-wrap.items-center[style*="gap:16px"] > a {
    padding: 11px 22px !important;
    min-height: 44px;
    box-sizing: border-box;
  }

  /* AI 搜索入口：减小上边距，减少割裂感 */
  .grid.grid-cols-1.lg\:grid-cols-12 .lg\:col-span-7 > div[style*="margin-top:32px"] {
    margin-top: 16px !important;
  }
  .grid.grid-cols-1.lg\:grid-cols-12 a[style*="padding:14px 20px"][style*="gap:12px"] {
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  /* 热门标签：间距收紧，触摸目标提升 */
  .flex.flex-wrap.items-center[style*="gap:8px"][style*="margin-top:12px"] {
    gap: 8px !important;
    margin-top: 10px !important;
  }
  .flex.flex-wrap.items-center[style*="gap:8px"][style*="margin-top:12px"] > a {
    padding: 6px 12px !important;
  }

  /* hero 右侧代码面板：缩小但保留视觉趣味 */
  .lg\:col-span-5 [style*="min-height:360px"],
  .lg\:col-span-5 > div[style*="min-height"] {
    min-height: 168px !important;
    padding: 18px !important;
  }
  /* 代码面板内间距收紧 */
  .lg\:col-span-5 .flex.flex-col[style*="gap:12px"] {
    gap: 10px !important;
  }
  .lg\:col-span-5 .flex.items-center[style*="gap:6px"][style*="margin-bottom:24px"] {
    margin-bottom: 16px !important;
  }
  /* 代码面板 checklist 间距 */
  .lg\:col-span-5 .flex.flex-col[style*="gap:8px"][style*="margin-top:12px"] {
    gap: 7px !important;
    margin-top: 8px !important;
  }

  /* 装饰光晕：适度缩小，避免溢出 */
  [style*="width:520px"][style*="height:520px"],
  [style*="width: 520px"] { width: 280px !important; height: 280px !important; }
  [style*="width:380px"][style*="height:380px"],
  [style*="width: 380px"] { width: 220px !important; height: 220px !important; }
  [style*="width:600px"][style*="height:300px"] { width: 320px !important; height: 180px !important; }
  [style*="width:400px"][style*="height:200px"] { width: 260px !important; height: 140px !important; }
  [style*="width:240px"][style*="height:240px"] { width: 160px !important; height: 160px !important; }
  [style*="width:140px"][style*="height:140px"] { width: 100px !important; height: 100px !important; }
}


/* ===== 4.8 KPI 数据卡：平衡布局，末项居中 ===== */
@media (max-width: 640px) {
  .grid.grid-cols-2.sm\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .grid.grid-cols-2.sm\:grid-cols-3 > div {
    padding: 16px 14px !important;
  }
  /* 第 5 个卡片跨两列居中，避免右侧空白 */
  .grid.grid-cols-2.sm\:grid-cols-3 > div:nth-child(5) {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
  }
  .grid.grid-cols-2.sm\:grid-cols-3 > div:nth-child(5) > .flex.items-baseline {
    flex-shrink: 0;
  }
  .grid.grid-cols-2.sm\:grid-cols-3 > div:nth-child(5) > .whitespace-nowrap[style*="margin-top"] {
    margin-top: 0 !important;
  }
  /* KPI 数字：统一字号，防止截断 */
  .grid.grid-cols-2.sm\:grid-cols-3 span[style*="font-size:28px"] {
    font-size: clamp(20px, 6.5vw, 24px) !important;
    line-height: 1.2 !important;
  }
}


/* ===== 4.9 AI 工具卡：单列舒适排版 ===== */
@media (max-width: 640px) {
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 {
    gap: 12px !important;
  }
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > a {
    padding: 20px !important;
    gap: 14px !important;
  }
  /* 卡片内图标略缩 */
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 .flex.items-center.justify-center[style*="width:48px"] {
    width: 42px !important;
    height: 42px !important;
  }
  /* 卡片内标题与描述间距 */
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 .flex.flex-col[style*="gap:6px"] {
    gap: 6px !important;
  }

  /* AI 能力统计条：收紧 */
  .flex.flex-wrap.items-center.justify-center[style*="gap:32px"] {
    gap: 10px 18px !important;
    padding: 14px 16px !important;
    margin-top: 24px !important;
  }
  .flex.flex-wrap.items-center.justify-center[style*="gap:32px"] > div {
    gap: 6px !important;
  }
}


/* ===== 4.10 服务卡片：舒适留白 ===== */
@media (max-width: 640px) {
  .grid.grid-cols-1.md\:grid-cols-3 {
    gap: 14px !important;
  }
  .grid.grid-cols-1.md\:grid-cols-3 > .flex.flex-col[style*="padding:32px"] {
    padding: 22px !important;
    gap: 16px !important;
  }
  /* 服务卡图标略缩 */
  .grid.grid-cols-1.md\:grid-cols-3 .flex.items-center.justify-center[style*="width:48px"][style*="height:48px"] {
    width: 42px !important;
    height: 42px !important;
  }
  /* 服务列表间距 */
  .grid.grid-cols-1.md\:grid-cols-3 .flex.flex-col[style*="gap:10px"] {
    gap: 9px !important;
  }
}


/* ===== 4.11 案例卡片：视觉区高度缩减 ===== */
@media (max-width: 640px) {
  /* 案例视觉区 160px → 120px */
  .grid.grid-cols-1.md\:grid-cols-3 .flex.items-center.justify-center[style*="height:160px"] {
    height: 120px !important;
  }
  /* 案例大字 48px → 38px */
  .grid.grid-cols-1.md\:grid-cols-3 span[style*="font-size:48px"] {
    font-size: 38px !important;
    line-height: 1.1 !important;
  }
  /* 案例内容区 padding */
  .grid.grid-cols-1.md\:grid-cols-3 .flex.flex-col[style*="padding:24px"][style*="gap:12px"] {
    padding: 18px !important;
    gap: 10px !important;
  }
}


/* ===== 4.12 CTA 行动召唤区块：紧凑居中 ===== */
@media (max-width: 640px) {
  .flex.flex-col.items-center[style*="padding:64px 32px"],
  .flex.flex-col.items-center[style*="padding: 64px 32px"] {
    padding: 36px 20px !important;
    gap: 14px !important;
  }
  /* CTA h2 限宽移除 */
  .flex.flex-col.items-center h2[style*="max-width:640px"] {
    max-width: 100% !important;
  }
  /* CTA 主按钮：保持自然宽度，触摸友好 */
  .flex.flex-col.items-center a[style*="padding:14px 32px"] {
    padding: 12px 28px !important;
    min-height: 44px;
    box-sizing: border-box;
    margin-top: 4px !important;
  }
}


/* ===== 4.13 通用卡片内边距：统一舒适留白 ===== */
@media (max-width: 640px) {
  /* 32px 内边距 → 22px（服务卡等已单独处理，这里兜底） */
  [style*="padding:32px"]:not(.grid > .flex.flex-col) {
    padding: 22px !important;
  }
  /* 28px 24px → 20px（AI 工具卡已单独处理） */
  [style*="padding:28px 24px"]:not(.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > a) {
    padding: 20px !important;
  }
  /* 24px 通用 → 18px */
  [style*="padding:24px"][style*="border-radius"]:not(.grid.grid-cols-2 > div):not(.grid.grid-cols-1.md\:grid-cols-3 .flex.flex-col) {
    padding: 18px !important;
  }
}


/* ===== 4.14 触摸目标：按钮最小高度 ===== */
@media (max-width: 640px) {
  a[role="button"],
  a[style*="bg-[var(--bg-brand)]"],
  a[style*="border border-[var(--border-neutral-l2)"] {
    min-height: 44px;
  }
  .tf-mobile-drawer a { min-height: 48px; }
}


/* ===== 4.15 横向滚动与代码面板防溢出 ===== */
@media (max-width: 640px) {
  .lg\:col-span-5 [style*="min-height"] .flex.flex-col[style*="gap:12px"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ===== 4.16 超小屏（≤480px）微调 ===== */
@media (max-width: 480px) {
  /* KPI 保持 2 列，间距更紧 */
  .grid.grid-cols-2.sm\:grid-cols-3 {
    gap: 10px !important;
  }
  .grid.grid-cols-2.sm\:grid-cols-3 > div {
    padding: 14px 12px !important;
  }
  /* AI 工具卡间距 */
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > a {
    padding: 18px !important;
  }
  /* 服务卡间距 */
  .grid.grid-cols-1.md\:grid-cols-3 > .flex.flex-col[style*="padding:32px"] {
    padding: 20px !important;
  }
  /* 案例内容区 */
  .grid.grid-cols-1.md\:grid-cols-3 .flex.flex-col[style*="padding:24px"][style*="gap:12px"] {
    padding: 16px !important;
  }
}


/* ========================================================================
   5. AI 聊天面板：手机端改为底部全宽抽屉
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
  [data-ai-chat-panel] {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 72vh !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 80px !important;
    border-radius: 14px !important;
  }
  [data-ai-chat-toggle] {
    bottom: 16px !important;
    right: 16px !important;
    width: 52px !important;
    height: 52px !important;
  }
}