/* ============================================
   Responsive / Mobile Adaptations
   ============================================ */

/* ---- 1024px (Tablet & Phone Landscape) ---- */
@media (max-width: 1024px) {
  .hero h1 { font-size: 32px; }
  .hero p { font-size: 14px; }
  .section { padding: 36px 0; }
  .section-title { font-size: 22px; }
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .solutions-grid, .cases-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .product-detail { flex-direction: column; gap: 24px; }
  .product-gallery { max-width: 100% !important; }
  .product-sidebar { width: 100% !important; position: static !important; }
  .product-nav { display: flex; overflow-x: auto; gap: 4px; }
  .product-nav-item { white-space: nowrap; flex-shrink: 0; }
  .product-header { flex-direction: column; }
  .product-meta { min-width: 100% !important; }
  .contact-grid { grid-template-columns: 1fr; }
}

/* ---- 768px (Phone Portrait) ---- */
@media (max-width: 768px) {
  html { font-size: 14px; }
  .hero { min-height: 320px; }
  .hero h1 { font-size: 24px; }
  .hero p { font-size: 13px; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions .btn { width: 100%; text-align: center; justify-content: center; }
  .hero-content { padding: 20px 0; }
  .page-hero { padding: 32px 0 28px; }
  .page-hero h1 { font-size: 22px; }
  .section { padding: 36px 0; }
  .section-title { font-size: 20px; }
  .container { padding: 0 16px; }
  .features-grid, .about-content .about-values { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .solutions-grid, .cases-grid, .news-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .about-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .product-detail { flex-direction: column; gap: 20px; }
  .product-layout { flex-direction: column !important; }
  .product-sidebar { width: 100% !important; position: static !important; }
  .product-nav { display: flex; overflow-x: auto; gap: 4px; }
  .product-nav-item { white-space: nowrap; flex-shrink: 0; border-bottom: 3px solid transparent; border-left: none !important; padding: 8px 14px; font-size: 13px; }
  .product-nav-item.active { border-bottom-color: var(--primary); }
  .product-header { flex-direction: column; gap: 16px; }
  .product-gallery { max-width: 100% !important; min-width: 100% !important; }
  .product-gallery .main-image { height: 220px; }
  .product-meta { min-width: 100% !important; }
  .product-card .card-img { height: 160px; }
  .doc-item { flex-direction: column; align-items: stretch; gap: 12px; }
  .doc-item .btn { width: 100%; text-align: center; }
  .search-box form { flex-direction: column; gap: 8px; }
  .search-box input, .search-box button { width: 100%; border-radius: var(--radius-sm); }
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .recruit-item { padding: 16px; }
  .recruit-meta { flex-wrap: wrap; gap: 8px; }
  .solution-detail .cover-image, .case-detail .cover-image { height: 180px; }
  .pagination { flex-wrap: wrap; gap: 6px; }
  .footer-bottom { text-align: center; }
  input, textarea, select { font-size: 16px !important; }
  .scenario-tabs { flex-wrap: wrap; gap: 6px; }
}

/* ---- 480px (Mobile Phone) ---- */
@media (max-width: 480px) {
  html { font-size: 13px; }

  .hero { min-height: 360px; }
  .hero h1 { font-size: 22px; line-height: 1.3; }
  .hero p { font-size: 13px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { text-align: center; justify-content: center; }

  .container { padding: 0 14px; }
  .section { padding: 32px 0; }
  .section-title { font-size: 20px; }

  .products-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .features-grid { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr; }

  .product-card .card-img { height: 150px; }
  .product-detail { gap: 16px; }
  .product-gallery .main-image { height: 200px; }
  .product-header { flex-direction: column; gap: 16px; }

  .solution-detail .cover-image, .case-detail .cover-image { height: 160px; }

  .page-hero { padding: 28px 0 24px; }
  .page-hero h1 { font-size: 20px; }

  .scenario-tabs { flex-direction: column; align-items: stretch; }
  .scenario-tabs .scenario-tab { text-align: center; }

  .card { border-radius: var(--radius-sm); }
  .recruit-item .recruit-meta span { font-size: 12px; }
  .contact-item { flex-direction: column; align-items: flex-start; gap: 4px; }
}