/* ═══════════════════════════════════════════════
   AgentLink 移动端体验优化 - 2026-07-17
   加载顺序: 在 index.css 和 fixes.css 之后
   ═══════════════════════════════════════════════ */

/* ═══ 1. 聊天 FAB 与移动端 CTA Dock 冲突修复 ═══
   原始: FAB bottom:24px, CTA dock bottom:14px 全宽
   方案: 移动端 FAB 上移到 CTA dock 上方，避开重叠 */
@media (max-width: 768px) {
  .al-chat-fab {
    bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    right: 16px !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 121 !important;
  }
  .al-chat-fab svg {
    width: 22px !important;
    height: 22px !important;
  }
  /* 聊天面板全屏覆盖 */
  .al-chat-panel {
    bottom: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    padding-top: env(safe-area-inset-top);
  }
}

@media (max-width: 480px) {
  .al-chat-fab {
    bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }
}

/* ═══ 2. 对比表格移动端优化 ═══
   原始: min-width:640px 横滑，第一列不固定
   方案: 缩小内边距，固定第一列，添加滑动提示 */
@media (max-width: 768px) {
  .comparison-table-scroll {
    position: relative;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .comparison-table {
    min-width: 540px;
  }
  .comparison-table th,
  .comparison-table td {
    padding: 10px 12px;
    font-size: 0.82rem;
  }
  .comparison-table thead th {
    font-size: 0.76rem;
  }
  /* 固定第一列（维度列） */
  .comparison-table .comparison-dim {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #0b1121;
    min-width: 80px;
  }
  .comparison-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #1e293b;
  }
  /* 滑动提示渐变阴影 */
  .comparison-table-scroll::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 100%;
    background: linear-gradient(90deg, transparent, #0b1121);
    pointer-events: none;
    z-index: 1;
  }
  /* before-after 表格 */
  .before-after-table th,
  .before-after-table td {
    padding: 8px 10px;
    font-size: 0.8rem;
  }
  .before-after-table {
    min-width: 360px;
  }
}

/* ═══ 3. 触控目标放大 ═══
   原始: 许多标签 min-height:22-26px
   方案: 移动端最小触控目标 36px */
@media (max-width: 768px) {
  .mobile-cta-kicker,
  .cases-mobile-dock-kicker {
    min-height: 24px !important;
  }
  .mobile-cta-signals span,
  .cases-mobile-dock-meta {
    min-height: 24px !important;
  }
  /* 导航链接触控优化 */
  .nav a {
    min-height: 40px !important;
    padding: 0 14px !important;
  }
  /* 快捷按钮触控优化 */
  .al-quick-btn {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  /* 聊天发送按钮 */
  .al-chat-send {
    width: 42px !important;
    height: 42px !important;
  }
}

/* ═══ 4. 字体可读性提升 ═══
   原始: 大量 0.62rem(~10px) 在移动端过小
   方案: 小屏最小字体 0.72rem(~11.5px) */
@media (max-width: 560px) {
  .storyboard-kicker,
  .storyboard-image-label,
  .storyboard-image-signal,
  .case-portal-outline span,
  .case-portal-card-meta span,
  .contact-trust-strip span,
  .case-study-tags span,
  .case-index-tags span,
  .case-study-gallery-tags span,
  .case-study-gallery-image span,
  .case-study-sector,
  .process-signal,
  .scenario-tag,
  .scenario-foot span,
  .process-output span,
  .content-label,
  .insight-card-label,
  .site-footer-signals span {
    font-size: 0.68rem !important;
  }
  .mobile-cta-kicker,
  .cases-mobile-dock-kicker {
    font-size: 0.66rem !important;
  }
  .mobile-cta-label,
  .cases-mobile-dock-label {
    font-size: 0.76rem !important;
  }
  .mobile-cta-signals span,
  .cases-mobile-dock-meta {
    font-size: 0.68rem !important;
  }
}

/* ═══ 5. 导航体验优化 ═══
   添加横滑渐变提示 */
@media (max-width: 768px) {
  .nav {
    position: relative;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  }
  /* 导航活跃链接高亮 */
  .nav a {
    transition: color 0.2s, background 0.2s;
    border-radius: 10px;
  }
  .nav a:hover,
  .nav a:active {
    background: rgba(59, 130, 246, 0.1);
    color: #93c5fd;
  }
}

/* ═══ 6. 统计数字防截断 ═══ */
@media (max-width: 380px) {
  .stats-band-grid,
  .trust-metrics-bar {
    grid-template-columns: 1fr !important;
  }
  .stats-band-item {
    padding: 20px 16px !important;
  }
  .stats-band-item strong {
    font-size: 1.6rem !important;
  }
}

/* ═══ 7. 横滑卡片区域优化 ═══
   让用户更直观地发现可滑动内容 */
@media (max-width: 768px) {
  .pain-grid,
  .solution-grid,
  .scenario-grid {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pain-grid::-webkit-scrollbar,
  .solution-grid::-webkit-scrollbar,
  .scenario-grid::-webkit-scrollbar {
    display: none;
  }
  /* 滑动提示样式增强 */
  .mobile-swipe-hint {
    opacity: 0.8;
    animation: al-swipe-fade 3s ease 2s forwards;
  }
  @keyframes al-swipe-fade {
    to { opacity: 0.4; }
  }
}

/* ═══ 8. CTA Dock 文字溢出修复 ═══ */
@media (max-width: 560px) {
  .mobile-cta-dock,
  .cases-mobile-dock {
    min-height: 66px !important;
  }
  .mobile-cta-copy,
  .cases-mobile-dock-copy {
    min-width: 0;
    overflow: hidden;
  }
  .mobile-cta-label {
    max-width: 140px !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
  .cases-mobile-dock-label {
    max-width: 130px !important;
  }
  .mobile-cta-dock strong,
  .cases-mobile-dock strong {
    min-width: 88px !important;
    font-size: 0.82rem !important;
  }
}

/* ═══ 9. Hero 区域性能优化 ═══
   移动端降低 canvas 透明度减少 GPU 压力 */
@media (max-width: 768px) {
  .canvas-container {
    opacity: 0.25 !important;
  }
  /* hero-visual 浮动指标卡片防溢出 */
  .hero-visual-metrics {
    width: 130px !important;
    bottom: -16px !important;
    right: 8px !important;
  }
  .hero-visual-metric p {
    font-size: 0.66rem !important;
    line-height: 1.4 !important;
  }
}

/* ═══ 10. 表单输入体验 ═══
   确保 iOS 不缩放（input font-size >= 16px） */
@media (max-width: 768px) {
  .contact-form input,
  .contact-form textarea {
    font-size: 16px !important;
  }
  /* 增大表单触控区域 */
  .contact-form label {
    margin-bottom: 16px !important;
  }
}

/* ═══ 11. 案例横滑面板优化 ═══ */
@media (max-width: 768px) {
  .cases-hero-panel,
  .cases-reading-grid {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .cases-hero-stat,
  .cases-reading-card {
    scroll-snap-align: start;
  }
}

/* ═══ 12. 页脚安全区域 ═══ */
@media (max-width: 768px) {
  .site-footer {
    margin-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }
  .contact-section {
    padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
  }
}

/* ═══ 13. 文字间距与行高微调 ═══ */
@media (max-width: 560px) {
  .hero-copy h1 {
    letter-spacing: -0.03em !important;
    line-height: 1.06 !important;
  }
  .section-heading h2 {
    line-height: 1.12 !important;
  }
  /* 段落行高优化 */
  .hero-lead,
  .section-heading > p,
  .content-wrap p {
    line-height: 1.76 !important;
  }
}

/* ═══ 14. 防止图片加载导致布局偏移 ═══ */
@media (max-width: 768px) {
  .card-image-wrap,
  .media-visual,
  .case-portal-card-image,
  .case-index-card-image,
  .case-study-visual {
    overflow: hidden;
  }
  .card-image-wrap img,
  .media-visual img,
  .case-portal-card-image img,
  .case-index-card-image img,
  .case-study-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ═══════════════════════════════════════════════
   15. 信息密度精简 - 手机端隐藏次要内容
   让每屏只传达一个核心信息，减少认知负担
   ═══════════════════════════════════════════════ */

/* ── Hero 区域: 只保留核心标题+描述+按钮 ── */
@media (max-width: 768px) {
  /* 隐藏信号卡片网格（3个小卡片太多） */
  .hero-signal-grid {
    display: none !important;
  }
  /* 隐藏滚动提示 */
  .hero-scroll-cue {
    display: none !important;
  }
  /* 隐藏 hero 区域的标签行 */
  .hero-meta-row {
    display: none !important;
  }
  /* 隐藏 hero 底部注释 */
  .hero-caption-note {
    display: none !important;
  }
  /* 隐藏 hero 卡片浮层（减少视觉干扰） */
  .hero-card.top-right {
    display: none !important;
  }
  .hero-card.bottom {
    display: none !important;
  }
  /* 隐藏 hero 浮动指标 */
  .hero-visual-metrics {
    display: none !important;
  }
  /* 隐藏 hero proof card 中的额外标签 */
  .hero-proof-line:not(:first-child) {
    display: none !important;
  }
  /* 隐藏"继续浏览"链接（减少干扰） */
  .hero-section .content-wrap > a:last-child {
    display: none !important;
  }
}

/* ── 隐藏 Hero 区域下方的 6 个信息条目（启动节奏/典型成效等）── */
@media (max-width: 768px) {
  .hero-section .content-wrap > article,
  .hero-section [class*="hero-quick-facts"] article,
  .hero-section [class*="hero-meta"] article {
    display: none !important;
  }
  /* 隐藏 hero-quick-facts 整个区块 */
  .hero-quick-facts {
    display: none !important;
  }
}

/* ── 业务现场实录: 隐藏故事板细节 ── */
@media (max-width: 768px) {
  /* 隐藏项目故事板的阶段标签 */
  .storyboard-card-copy p {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
  /* 隐藏故事板底部统计条 */
  .storyboard-section [class*="result"],
  .storyboard-section [class*="signal-bar"] {
    display: none !important;
  }
}

/* ── 对比区域: 隐藏两个对比卡片，只保留表格 ── */
@media (max-width: 768px) {
  /* 隐藏"对比01"和"对比02"卡片，直接看表格更高效 */
  .comparison-section article,
  [class*="comparison"] > article {
    display: none !important;
  }
  /* 对比标题简化 */
  .comparison-title {
    font-size: 1rem !important;
    margin-bottom: 12px !important;
  }
}

/* ── 挑战区域: 只保留标题和一句话描述 ── */
@media (max-width: 768px) {
  /* 隐藏挑战卡片详情 */
  .insight-card p,
  .pain-card li {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
  /* 隐藏挑战底部摘要条 */
  .insight-summary-strip,
  .pain-summary-strip {
    display: none !important;
  }
}

/* ── 解决方案: 简化卡片，只显示标题和一行描述 ── */
@media (max-width: 768px) {
  .solution-card p,
  .scenario-card p {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
  /* 隐藏解决方案底部摘要条 */
  .solution-summary-strip {
    display: none !important;
  }
}

/* ── FAQ: 默认折叠，点击展开 ── */
@media (max-width: 768px) {
  /* FAQ 答案默认隐藏 */
  .faq-answer {
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    transition: max-height 0.3s ease, padding 0.3s ease !important;
  }
  /* FAQ 条目点击后展开 */
  .faq-item:active .faq-answer,
  .faq-item.open .faq-answer {
    max-height: 500px !important;
    padding: 0 20px 20px !important;
  }
  /* FAQ 问题添加展开提示 */
  .faq-question::after {
    content: ' ＋' !important;
    float: right !important;
    color: #64748b !important;
  }
  .faq-item.open .faq-question::after {
    content: ' －' !important;
  }
}

/* ── 区块间距增大，让内容呼吸 ── */
@media (max-width: 768px) {
  .section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  /* 区块标题与内容间距 */
  .section-heading {
    margin-top: 0 !important;
    margin-bottom: 32px !important;
  }
  /* 区块标签与标题间距 */
  .section-kicker {
    margin-bottom: 10px !important;
  }
}

/* ── 行业场景: 隐藏详细描述 ── */
@media (max-width: 768px) {
  .scenario-card .scenario-foot {
    display: none !important;
  }
  /* 行业卡片描述限制行数 */
  .scenario-card p {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
}

/* ── 差异化区域: 简化 ── */
@media (max-width: 768px) {
  /* 隐藏差异化卡片的详细段落 */
  [class*="differentiator"] p,
  [class*="differentiation"] p {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
}

/* ── 交付流程: 简化卡片内容 ── */
@media (max-width: 768px) {
  .process-card p {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
  /* 隐藏交付产出标签 */
  .process-output {
    display: none !important;
  }
}

/* ── 页脚: 简化 ── */
@media (max-width: 768px) {
  /* 隐藏页脚品牌描述（已在 hero 看过了） */
  .site-footer-brand > p {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
  /* 隐藏页脚信号标签 */
  .site-footer-signals {
    display: none !important;
  }
}

/* ── 联系区域: 隐藏预览卡片 ── */
@media (max-width: 768px) {
  .contact-preview-card {
    display: none !important;
  }
  .contact-trust-strip {
    display: none !important;
  }
}

/* ── 段落最大行数限制（通用）── */
@media (max-width: 560px) {
  .section-heading > p,
  .section-heading.split > p {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
}

/* ═══ 统一悬浮 AI 引导（合并底部 dock + 右下角 FAB） ═══ */
/* CSS 层面永久隐藏原有 dock（防止 React 重渲染闪现） */
.mobile-cta-dock { display: none !important; }

.al-unified-cta {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9998;
  max-width: 380px;
}
.al-unified-cta-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 12px 18px;
  background: #080d18d1;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 240, 255, 0.08);
  transition: transform 0.25s, box-shadow 0.25s;
}
.al-unified-cta-inner:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 28px rgba(0, 240, 255, 0.15);
}
.al-unified-cta-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.al-unified-cta-badge {
  font-size: 0.68rem;
  font-weight: 600;
  color: #00f0ff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.al-unified-cta-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  animation: al-pulse 2s infinite;
}
.al-unified-cta-desc {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.al-unified-cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #00f0ff 0%, #0099ff 100%);
  color: #050810;
  border: none;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.3);
}
.al-unified-cta-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.5);
}
.al-unified-cta-btn:active {
  transform: scale(0.98);
}
/* 聊天面板打开时隐藏悬浮引导 */
.al-chat-panel-open ~ .al-unified-cta,
.al-unified-cta.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.2s, transform 0.2s;
}

/* ── 移动端：底部全宽 dock ── */
@media (max-width: 768px) {
  .al-unified-cta {
    left: 14px;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    max-width: none;
  }
  .al-unified-cta-inner {
    padding: 10px 10px 10px 14px;
    border-radius: 20px;
  }
  .al-unified-cta-desc {
    font-size: 0.76rem;
  }
  .al-unified-cta-btn {
    padding: 9px 16px;
    font-size: 0.84rem;
  }
}
@media (max-width: 560px) {
  .al-unified-cta-badge {
    font-size: 0.62rem;
  }
  .al-unified-cta-desc {
    font-size: 0.72rem;
  }
  .al-unified-cta-btn span {
    font-size: 0.8rem;
  }
}

/* ═══ 联系区域 → AI 会话引导 ═══ */
.contact-section {
  position: relative;
}
.chat-cta {
  max-width: 620px;
  margin: 0 auto;
  padding: 56px 24px 48px;
  text-align: center;
}
.chat-cta-badge {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 999px;
  font-size: 0.8rem;
  color: #00f0ff;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
  background: rgba(0, 240, 255, 0.06);
}
.chat-cta-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.4;
}
.chat-cta-desc {
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
  margin: 0 0 28px;
}
.chat-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  background: linear-gradient(135deg, #00f0ff 0%, #0099ff 100%);
  color: #050810;
  border: none;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.25);
}
.chat-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 36px rgba(0, 240, 255, 0.45);
}
.chat-cta-btn:active {
  transform: translateY(0);
}
.chat-cta-btn-icon {
  font-size: 1.2rem;
}
.chat-cta-hint {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 16px 0 0;
}
@media (max-width: 560px) {
  .chat-cta {
    padding: 40px 20px 36px;
  }
  .chat-cta-title {
    font-size: 1.35rem;
  }
  .chat-cta-desc {
    font-size: 0.9rem;
  }
}

/* ═══════════════════════════════════════════════
   16. 布局溢出修复 - 解决移动端横向滚动
   React 构建产物的 grid 布局在移动端未被覆盖
   ═══════════════════════════════════════════════ */

/* ── Hero 区域: 改为单列 ── */
@media (max-width: 768px) {
  .hero-section {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 100px 20px 60px !important;
    min-height: auto !important;
  }
  .hero-visual {
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

/* ── Pain grid: 3列改1列 ── */
@media (max-width: 768px) {
  .pain-grid {
    grid-template-columns: 1fr !important;
    grid-auto-columns: initial !important;
    gap: 16px !important;
    padding-inline: 0 !important;
  }
}

/* ── Insight grid: 2列改1列 ── */
@media (max-width: 768px) {
  .insight-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ── Solution grid: 768px改1列, 480px以下确保不溢出 ── */
@media (max-width: 560px) {
  .solution-grid {
    grid-template-columns: 1fr !important;
    grid-auto-columns: initial !important;
    gap: 16px !important;
    padding-inline: 0 !important;
  }
}

/* ── Scenario grid: 确保不溢出 ── */
@media (max-width: 560px) {
  .scenario-grid {
    grid-template-columns: 1fr !important;
    grid-auto-columns: initial !important;
    gap: 16px !important;
    padding-inline: 0 !important;
  }
}

/* ── 全局溢出防护 ── */
@media (max-width: 768px) {
  /* 防止任何元素导致横向滚动 */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  /* 确保所有 section 不溢出 */
  .section, section {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  /* 表格容器保持横滑但不影响页面 */
  .comparison-table-scroll,
  .before-after-table-wrap {
    overflow-x: auto !important;
    max-width: 100% !important;
  }
  /* before-after-table 缩小 min-width */
  .before-after-table {
    min-width: 320px !important;
  }
}

/* ── media-section 布局修复 ── */
@media (max-width: 768px) {
  .media-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ── storyboard 区域: 确保不溢出 ── */
@media (max-width: 768px) {
  .storyboard-grid,
  .storyboard-section [class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ── trust-section 布局修复 ── */
@media (max-width: 768px) {
  .trust-grid,
  .trust-section [class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ── 对比区域布局修复 ── */
@media (max-width: 768px) {
  .comparison-section [class*="grid"],
  .comparison-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ── 差异化区域布局修复 ── */
@media (max-width: 768px) {
  [class*="differentiator-grid"],
  [class*="differentiation-grid"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ── process grid 修复 ── */
@media (max-width: 768px) {
  .process-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ── case-portal grid 修复 ── */
@media (max-width: 560px) {
  .case-portal-grid,
  .case-portal-actions {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ── 通用: 所有 grid 在 380px 以下强制单列 ── */
@media (max-width: 380px) {
  [class*="grid"]:not(.comparison-table-scroll):not(.before-after-table-wrap) {
    grid-template-columns: 1fr !important;
  }
}

/* ── 图片和媒体元素防溢出 ── */
@media (max-width: 768px) {
  img, video, canvas, iframe {
    max-width: 100% !important;
    height: auto !important;
  }
  /* hero-visual 容器 */
  .hero-visual img,
  .hero-visual video {
    object-fit: cover !important;
    width: 100% !important;
  }
}

/* ── flex 布局防溢出 ── */
@media (max-width: 768px) {
  .hero-actions,
  .hero-meta-row,
  [class*="actions"] {
    flex-wrap: wrap !important;
  }
}
@media (max-width: 380px) {
  .hero-actions .button,
  .hero-actions a {
    flex-basis: 100% !important;
    text-align: center !important;
  }
}