/* =============================================================
 * Zone 移动端 / 响应式 修复 (加载顺序在 responsiver.css 之后)
 * 解决: 横向溢出, 标题溢出, 卡片堆叠, 触控目标过小, 装饰错位等
 * ============================================================= */

/* 全局防横向滚动 */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}
* { box-sizing: border-box; }

img { max-width: 100%; height: auto; }


/* ========== 平板与中小屏 (≤1199) ========== */
@media (max-width: 1199px) {
  .award-area { padding: 100px 0 !important; }
  .invacat-header nav ul li { margin: 0 12px !important; }
}


/* ========== 平板及以下 (≤991) ========== */
@media (max-width: 991px) {
  /* 桌面 header 由 responsiver.css 隐藏, 此处仅做兜底  */
  .header-area { display: none !important; }

  /* 移动 nav drawer 自身 - 提升对比度 */
  #invacat-mobile-nav {
    background-color: #ffffff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
  }
  #invacat-mobile-nav .invact-logo {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px;
  }
  #invacat-mobile-nav .menu-button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 10px;
    background-image: linear-gradient(120deg, #4f46e5, #6366f1, #8b5cf6, #a855f7, #6366f1, #4f46e5);
    background-size: 300% 300%;
    animation: zoneGradientShift 6s ease infinite;
    color: #fff !important;
    cursor: pointer;
  }
  #invacat-mobile-nav .menu-button span { color: #fff !important; }

  /* drawer 列表 */
  #invacat-mobile-nav ul {
    background-color: #ffffff !important;
  }
  #invacat-mobile-nav ul li {
    border-top: 1px solid rgba(99, 102, 241, .08) !important;
  }
  #invacat-mobile-nav ul li a {
    color: #1f2937 !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    width: 100%;
    box-sizing: border-box;
  }
  #invacat-mobile-nav ul li a:hover,
  #invacat-mobile-nav ul li a:active {
    color: #6d28d9 !important;
    background: rgba(124, 58, 237, .06);
  }
  #invacat-mobile-nav ul ul li a {
    padding: 12px 20px 12px 36px !important;
    font-size: 14px !important;
    color: #4b5563 !important;
  }

  /* drawer + 折叠按钮 */
  #invacat-mobile-nav .open-menu {
    position: absolute;
    right: 16px;
    top: 12px;
    width: 30px; height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 8px;
    background: rgba(99, 102, 241, .1);
    color: #6366f1;
    cursor: pointer;
    transition: transform .25s ease;
  }
  #invacat-mobile-nav .open-menu.rotate { transform: rotate(45deg); }

  /* hero 区: slider */
  .slider-area { padding: 100px 0 30px !important; position: relative; }
  .admin-content { margin: 30px 0 !important; padding: 0 16px; }
  .admin-content h1 { font-size: 60px !important; line-height: 1.15 !important; }
  .admin-content h6 { font-size: 14px !important; }

  /* 隐藏装饰形状, 避免错位 / 溢出 */
  .shape-animation,
  .shape-man,
  .slide-shape04,
  .testi-image,
  .award-img img.aimg02 { display: none !important; }

  /* admin-man 图片大小 + 居中 */
  .admin-section { margin-top: 0 !important; text-align: center !important; }
  .admin-section img { max-width: 70%; height: auto; display: block; margin: 0 auto; }

  /* counter-process 居中 */
  .counter-process { text-align: center; margin-bottom: 30px; }
  .counter-process h2 { font-size: 36px; }

  /* 留言表单 */
  .contact-from {
    margin-top: 40px !important;
    padding: 24px !important;
    border-radius: 14px;
  }

  /* section 内边距 */
  .admin-man, .skill-area, .service-area, .project-area,
  .blog-area, .testimonial-area, .video-area {
    padding: 60px 0 !important;
    margin: 0 !important;
  }

  /* 卡片间距 */
  .single-service,
  .single-project,
  .blog-single,
  .progess-wapper { margin-bottom: 24px; }

  /* video-content 适配 */
  .video-content { padding: 32px 24px !important; margin-left: 0 !important; width: 100% !important; }
  .video-content h3 { font-size: 22px; }
  .video-section img { width: 100%; height: auto; }

  /* footer 间距 */
  .footer-area .col-lg-4,
  .footer-area .col-md-6 { margin-bottom: 32px; }

  /* award contact list */
  .contact-address-area .col-xxl-3,
  .contact-address-area .col-lg-6 { margin-bottom: 16px; }
}


/* ========== 手机 (≤767) ========== */
@media (max-width: 767px) {
  .admin-content h1 { font-size: 44px !important; }
  .admin-content h6 { font-size: 13px !important; letter-spacing: 2px; }
  .cd-headline.clip span { font-size: 44px !important; }

  /* section 标题 */
  .section-title h1 { font-size: 28px !important; line-height: 1.3 !important; }
  .section-title h1 span { font-size: 28px !important; }
  .section-title p { font-size: 13px !important; letter-spacing: 2px; }
  .section-title img { display: none; }

  /* 项目过滤器换行 */
  .project-filter {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 8px !important;
  }
  .project-filter button {
    padding: 8px 14px !important;
    font-size: 13px !important;
    margin: 0 !important;
  }
  .project-area .section-title { padding: 0 16px !important; }
  .project-area .section-title img { left: auto !important; }

  /* 表单触摸友好 */
  .contact-from label { font-size: 14px; }
  .contact-from input,
  .contact-from select,
  .contact-from textarea {
    font-size: 14px !important;
    padding: 12px !important;
  }
  .contack_btn,
  .contact-from input[type="submit"] {
    width: 100% !important;
    padding: 14px 20px !important;
    text-align: center;
  }

  /* footer 居中 */
  .footer-area .single-about,
  .footer-area .call-number,
  .footer-area .quick-link { text-align: center; }
  .footer-area .abouts-icon ul,
  .footer-area .quick-link ul {
    padding-left: 0;
    list-style: none;
  }
  .footer-area .abouts-icon ul {
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  /* social icon 居中 */
  .slider-area .social-icon { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .slider-area .social-icon ul {
    display: flex; gap: 12px;
    padding-left: 0; list-style: none; margin: 0;
  }
  .slider-area .social-icon ul li { display: inline-block; }

  /* video-play 按钮居中 */
  .video-play {
    width: 70px !important; height: 70px !important;
    line-height: 70px !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  .video-play:before, .video-play:after {
    width: 70px !important; height: 70px !important;
  }
  .video-play a { font-size: 18px !important; }

  /* award */
  .award-area { padding: 50px 16px !important; margin: 0 !important; }
  .award-img img.aimg01 { max-width: 80%; height: auto; }
  .award-content { text-align: center; margin-top: 32px; }

  /* 弹窗 */
  .popup-content {
    width: 86% !important;
    max-width: 360px;
    margin: 30vh auto !important;
    padding: 18px !important;
  }
  .popup-content h2 { font-size: 18px; line-height: 1.5; word-break: break-word; }

  /* 段落字号 */
  p { font-size: 14px; line-height: 1.75; }

  /* counter 数字 */
  .counter-process h2 { font-size: 30px; }
  .counter-process p { font-size: 14px; }

  /* skill section 容器 */
  .skill-area { margin-top: 0 !important; }
  .progess-wapper { padding: 24px !important; border-radius: 22px; }

  /* service area 不要被 responsiver.css 强行加 margin-top: 557px */
  .service-area { margin-top: 0 !important; }
}


/* ========== 小屏手机 (≤480) ========== */
@media (max-width: 480px) {
  .admin-content h1,
  .cd-headline.clip span { font-size: 36px !important; }
  .section-title h1,
  .section-title h1 span { font-size: 22px !important; }
  .blog-content { padding: 16px !important; }
  .single-service { padding: 16px !important; }
  .video-play { width: 60px !important; height: 60px !important; line-height: 60px !important; }
  .video-play a { font-size: 16px !important; }

  /* footer 紧凑 */
  .footer-area { padding: 40px 0 20px !important; }
  .footer-area h2 { font-size: 20px !important; }

  /* award contact 紧凑 */
  .contact-address {
    display: flex; align-items: center; gap: 12px;
    padding: 14px !important;
    border-radius: 10px;
    background: rgba(99, 102, 241, .04);
  }
  .award-title i { font-size: 22px; }

  /* 按钮触控目标最小 44px */
  a, button, .btn {
    min-height: 36px;
  }
}