/* ============================================================
   responsive.css — 九恒集团官网 移动端自适应样式
   适用于所有页面，与内联 <style> 配合使用
   ============================================================ */

/* ===== Mobile Navigation Overlay ===== */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1001;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mobile-nav-overlay.active {
  opacity: 1;
}

.mobile-nav-panel {
  display: none;
  position: fixed;
  top: 0;
  right: -300px;
  width: 280px;
  max-width: 80vw;
  height: 100vh;
  height: 100dvh;
  background: #fff;
  z-index: 1002;
  overflow-y: auto;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -4px 0 30px rgba(0,0,0,0.15);
  padding: 24px 20px;
}
.mobile-nav-panel.active {
  display: block;
  right: 0;
}

.mobile-nav-panel .mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: var(--gray-100, #F5F5F5);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  margin-bottom: 20px;
  color: var(--gray-900, #1A1A1A);
  transition: background 0.2s;
}
.mobile-nav-panel .mobile-nav-close:hover {
  background: var(--gray-200, #EEE);
}

.mobile-nav-panel .mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-nav-panel .mobile-nav-links a {
  display: block;
  padding: 14px 16px;
  font-size: 16px;
  color: var(--text, #333);
  border-radius: 8px;
  transition: all 0.2s;
  font-weight: 500;
}
.mobile-nav-panel .mobile-nav-links a:hover,
.mobile-nav-panel .mobile-nav-links a.active {
  color: var(--primary, #00A651);
  background: var(--primary-light, #E8F5E9);
}

.mobile-nav-panel .mobile-nav-actions {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-200, #EEE);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ===== Tablet & Small Desktop (≤1024px) ===== */
@media (max-width: 1024px) {
  /* Grid fallbacks */
  .intro-grid,
  .speech-grid { grid-template-columns: 1fr !important; gap: 40px; }

  .sub-grid,
  .values-grid,
  .team-grid { grid-template-columns: repeat(2, 1fr) !important; }

  .stats-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .adv-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .news-grid { grid-template-columns: repeat(2, 1fr) !important; }

  .footer-grid { grid-template-columns: repeat(2, 1fr) !important; }

  .timeline-v2 { grid-template-columns: repeat(2, 1fr) !important; }

  .product-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .products-catalog { grid-template-columns: repeat(2, 1fr) !important; }
  .sol-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Hero text */
  .hero-text h1 { font-size: 36px; }
  .page-hero h1 { font-size: 34px; }

  .section-header h2 { font-size: 28px; }
  .container { padding: 0 20px; }
}

/* ===== Mobile (≤768px) ===== */
@media (max-width: 768px) {
  /* ---- HEADER ---- */
  .header .container {
    height: 60px;
  }
  .header .container .logo {
    margin-right: auto;
  }
  .logo {
    font-size: 17px;
    gap: 8px;
  }
  .logo-mark {
    width: 38px;
    height: 38px;
  }
  .logo-text small {
    font-size: 10px;
  }

  /* Hide desktop nav, show mobile toggle */
  .nav,
  .nav-right {
    display: none !important;
  }
  .mobile-toggle {
    display: flex !important;
  }
  .mobile-nav-overlay.active {
    display: block;
  }

  /* ---- HERO ---- */
  .hero {
    padding: 90px 0 50px;
  }
  .hero-text h1 {
    font-size: 28px;
  }
  .hero-text .sub {
    font-size: 15px;
  }
  .hero-text p {
    font-size: 14px;
    margin-bottom: 28px;
  }
  .hero-stats {
    gap: 16px;
    flex-wrap: wrap;
  }
  .hero-stat .num {
    font-size: 26px;
  }
  .hero-stat .label {
    font-size: 12px;
  }
  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .hero-actions .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
    padding: 12px 24px;
    font-size: 15px;
  }

  /* ---- PAGE HERO ---- */
  .page-hero {
    padding: 110px 0 50px;
  }
  .page-hero h1 {
    font-size: 28px;
  }
  .page-hero p {
    font-size: 15px;
  }

  /* ---- SECTIONS ---- */
  .section {
    padding: 50px 0;
  }
  .section-header {
    margin-bottom: 36px;
  }
  .section-header h2 {
    font-size: 24px;
  }
  .section-header p {
    font-size: 14px;
  }

  /* ---- GRID LAYOUTS (force single column) ---- */
  .intro-grid,
  .speech-grid,
  .sub-grid,
  .values-grid,
  .team-grid,
  .adv-grid,
  .news-grid,
  .footer-grid,
  .stats-grid,
  .timeline-v2,
  .product-grid,
  .products-catalog,
  .sol-grid,
  .pain-points,
  .capability-grid,
  .contact-grid,
  .cert-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  /* ---- STATS ---- */
  .stat-item .num {
    font-size: 36px;
  }
  .stat-item .unit {
    font-size: 18px;
  }
  .stat-item .label {
    font-size: 13px;
  }

  /* ---- CHAIN ---- */
  .chain-flow {
    flex-direction: column;
    gap: 16px;
  }
  .chain-step {
    max-width: 100%;
  }
  .chain-step::after {
    display: none;
  }

  /* ---- SUBSIDIARY CARDS ---- */
  .sub-card {
    padding: 24px 20px;
  }
  .sub-card h3 {
    font-size: 16px;
  }
  .sub-card .sub-desc {
    font-size: 13px;
  }
  html[lang="zh"] .sub-card .sub-desc,
  html[lang="en"] .sub-card .sub-desc {
    height: auto;
  }

  /* ---- TIMELINE ---- */
  .timeline::before {
    left: 20px;
  }
  .timeline-item,
  .timeline-item:nth-child(odd) {
    flex-direction: column;
    padding-left: 50px;
  }
  .timeline-item::before,
  .timeline-item:nth-child(odd)::before {
    left: 20px;
  }
  .timeline-item .year,
  .timeline-item:nth-child(odd) .year {
    width: 100%;
    text-align: left;
    padding: 0;
  }
  .timeline-item .content,
  .timeline-item:nth-child(odd) .content {
    width: 100%;
    padding: 0;
    text-align: left;
  }
  .timeline-item .year span {
    font-size: 22px;
  }

  /* ---- TABS ---- */
  .tabs-nav {
    gap: 6px;
    padding: 0 8px;
  }
  .tab-btn {
    padding: 10px 16px;
    font-size: 13px;
  }

  /* ---- NEWS ---- */
  .news-img {
    height: 180px;
  }
  .news-content {
    padding: 16px;
  }
  .news-card h3 {
    font-size: 14px;
  }

  /* ---- BRANDS ---- */
  .brands-inner {
    gap: 20px;
  }
  .brand-item {
    width: 100px;
    height: 44px;
  }

  /* ---- CTA ---- */
  .cta-section {
    padding: 50px 0;
  }
  .cta-section h2 {
    font-size: 24px;
  }
  .cta-section p {
    font-size: 14px;
  }
  .btn-yellow {
    padding: 14px 28px;
    font-size: 15px;
  }

  /* ---- FOOTER ---- */
  .footer {
    padding: 40px 0 0;
  }
  .footer-grid {
    gap: 28px;
    padding-bottom: 32px;
  }
  .footer h3 {
    margin-bottom: 14px;
  }
  .footer-brand p {
    font-size: 13px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
  }

  /* ---- BACK TO TOP ---- */
  .back-top {
    bottom: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  /* ---- SOLUTIONS SCROLL ---- */
  .solutions-track > * {
    flex: 0 0 260px;
  }

  /* ---- INTRO IMAGE ---- */
  .intro-img {
    height: 250px;
    font-size: 60px;
  }
  .intro-img::after {
    font-size: 22px;
    bottom: 20px;
  }

  /* ---- SPEECH ---- */
  .speech-img {
    width: 100%;
    max-width: 274px;
    height: auto;
    margin: 0 auto;
  }
  .speech-title {
    font-size: 18px;
  }
  .speech-body {
    font-size: 13px;
  }

  /* ---- CONTACT ---- */
  .contact-section {
    grid-template-columns: 1fr !important;
  }

  /* ---- FAQ ---- */
  .faq-item {
    padding: 16px;
  }

  /* ---- KNOWLEDGE ---- */
  .knowledge-grid {
    grid-template-columns: 1fr !important;
  }

  /* ---- VIDEO FLOAT ---- */
  #videoFloatContainer {
    width: 280px !important;
  }

  /* ---- LANGUAGE SWITCHER ---- */
  .lang-switcher select {
    font-size: 12px;
    padding: 4px 6px;
    padding-right: 18px;
    background-position: right 4px center;
  }

  /* ---- GENERIC TABLES ---- */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- FORMS ---- */
  input, textarea, select {
    font-size: 16px !important; /* prevent iOS zoom */
  }

  /* ---- MAP ---- */
  .map-container {
    height: 300px;
  }

  /* ---- TIMELINE CARD ---- */
  .timeline-card {
    padding: 20px;
    gap: 16px;
  }
  .timeline-card .card-year {
    font-size: 28px;
    min-width: 60px;
  }
  .timeline-card .card-content h3 {
    font-size: 16px;
  }

  /* ---- VALUE CARD ---- */
  .value-card {
    padding: 28px 20px;
  }
  .value-card .value-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 16px;
  }
}

/* ===== Small Mobile (≤480px) ===== */
@media (max-width: 480px) {
  .hero-text h1 {
    font-size: 24px;
  }
  .hero-text .sub {
    font-size: 14px;
  }
  .hero-stats {
    gap: 10px;
  }
  .hero-stat .num {
    font-size: 22px;
  }
  .hero-stat .label {
    font-size: 11px;
  }

  .page-hero h1 {
    font-size: 24px;
  }

  .section-header h2 {
    font-size: 22px;
  }

  .container {
    padding: 0 16px;
  }

  .hero-actions .btn {
    max-width: 100%;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px;
  }
  .stat-item .num {
    font-size: 30px;
  }

  .brands-inner {
    gap: 14px;
  }
  .brand-item {
    width: 80px;
    height: 36px;
  }

  .footer-grid {
    gap: 20px;
  }

  .mobile-nav-panel {
    width: 260px;
  }

  /* Solutions scroll */
  .solutions-track > * {
    flex: 0 0 240px;
  }

  /* Timeline card */
  .timeline-card {
    flex-direction: column;
    gap: 12px;
  }
  .timeline-card .card-year {
    font-size: 24px;
  }

  /* Cert image */
  .cert-image-wrapper img {
    border-radius: 8px;
  }

  .news-img {
    height: 150px;
  }
}

/* ============================================================
   团队风采 (Team Section) — about.html & subsidiary pages
   ============================================================ */
@media (max-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px;
  }
}
@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px;
  }
  .team-card {
    text-align: center;
    padding: 0 0 20px 0;
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
  }
  .team-card .team-avatar {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 0;
    overflow: hidden;
  }
  .team-card .team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto;
  }
  .team-card .team-info {
    padding: 16px 12px 0;
  }
  .team-card h3 {
    font-size: 15px;
    margin-bottom: 4px;
  }
  .team-card .team-title {
    font-size: 12px;
    margin-bottom: 4px;
  }
  .team-card p {
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .team-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .team-card .team-avatar {
    aspect-ratio: 16/9;
  }
  .team-card h3 {
    font-size: 14px;
  }
}

/* ============================================================
   热门产品 (Hot Products) — 子公司首页 hot-grid
   5 列 → 平板 3 列 → 手机 2 列 → 小屏 1 列
   ============================================================ */
@media (max-width: 1024px) {
  .hot-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px;
  }
  .hot-products {
    padding: 60px 24px !important;
  }
}
@media (max-width: 768px) {
  .hot-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px;
  }
  .hot-products {
    padding: 50px 20px !important;
  }
  .hot-products .section-header {
    margin-bottom: 32px;
  }
  .hot-products .section-title {
    font-size: 1.3rem;
  }
  .hot-img {
    height: 140px;
    font-size: 3rem;
  }
  .hot-body {
    padding: 14px 12px;
  }
  .hot-body h3 {
    font-size: 0.9rem;
  }
  .hot-body p {
    font-size: 11px;
  }
}
@media (max-width: 480px) {
  .hot-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
  .hot-products {
    padding: 40px 16px !important;
  }
  .hot-img {
    height: 120px;
    font-size: 2.5rem;
  }
  .hot-body {
    padding: 10px 8px;
  }
  .hot-body h3 {
    font-size: 0.85rem;
  }
}

/* ============================================================
   热门场景 (Hot Scenes) — 子公司首页
   ============================================================ */
@media (max-width: 768px) {
  .scene-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .scene-card {
    flex-direction: column;
  }
}
@media (max-width: 480px) {
  .scene-grid {
    gap: 12px;
  }
  .scene-icon {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
  }
}