/* ==========================================================
   Responsive - 某某公司 BarcodePro
   Breakpoints: 1440 / 1024 / 768 / 480
   ========================================================== */

/* ---------- Large Desktop ---------- */
@media (max-width: 1440px) {
  .container { max-width: 1200px; }
  .hero-visual { height: 480px; }
  .bento-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 280px);
  }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; }
}

/* ---------- Tablet Landscape / Small Desktop ---------- */
@media (max-width: 1024px) {
  .container { padding: 0 var(--space-5); }
  .section { padding: var(--space-20) 0; }

  .nav-menu { display: none; }
  .menu-toggle { display: flex; }
  .nav-actions .btn { display: none; }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .hero-visual {
    height: 400px;
    max-width: 500px;
    margin: 0 auto;
  }
  .hero-metrics { grid-template-columns: repeat(3, 1fr); }

  .scenario-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 220px);
  }
  .scenario-card.size-lg { grid-column: span 4; grid-row: span 1; }
  .scenario-card.size-md { grid-column: span 2; grid-row: span 1; }
  .scenario-card.size-sm { grid-column: span 2; grid-row: span 1; }

  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 280px);
  }
  .bento-item.size-lg { grid-column: span 2; grid-row: span 1; }
  .bento-item.size-wide { grid-column: span 1; grid-row: span 1; }
  .bento-item.size-md { grid-column: span 1; grid-row: span 1; }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  .stat-card:nth-child(2)::after { display: none; }

  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .news-card.featured { grid-column: span 2; grid-row: span 1; }

  .cases-grid { grid-template-columns: 1fr; }
  .product-list { grid-template-columns: repeat(2, 1fr); }
  .cases-page-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-6);
  }
  .footer-brand { grid-column: span 3; }

  .compat-form { grid-template-columns: 1fr 1fr; }
  .compat-result { grid-template-columns: 1fr; }

  .solution-card-grid { grid-template-columns: 1fr; }
  .solution-card-image { min-height: 280px; }
  .solution-card-body { padding: var(--space-8); }

  .about-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }

  .product-detail-hero { grid-template-columns: 1fr; }
  .news-list-item { grid-template-columns: 1fr; }
  .news-list-image { min-height: 240px; }
}

/* ---------- Tablet Portrait ---------- */
@media (max-width: 768px) {
  :root {
    --space-24: 72px;
    --space-20: 60px;
    --space-16: 48px;
  }

  body { font-size: 15px; }
  .container { padding: 0 var(--space-4); }
  .section { padding: var(--space-16) 0; }

  /* Hero */
  .hero { padding: 100px 0 60px; min-height: auto; }
  .hero-title { font-size: clamp(2rem, 8vw, 3.5rem); }
  .hero-desc { font-size: 1rem; }
  .hero-actions { gap: var(--space-3); }
  .hero-actions .btn { flex: 1; min-width: 140px; }
  .hero-metrics {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    padding-top: var(--space-6);
  }
  .metric-value { font-size: 1.5rem; }
  .metric-label { font-size: 10px; }
  .hero-visual { height: 340px; }
  .hud-device { width: 200px; height: 200px; }
  .hud-float-1, .hud-float-3 { display: none; }

  /* Scenarios */
  .scenario-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 200px);
  }
  .scenario-card.size-lg,
  .scenario-card.size-md,
  .scenario-card.size-sm {
    grid-column: span 1;
    grid-row: span 1;
  }

  /* Bento */
  .bento-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .bento-item,
  .bento-item.size-lg,
  .bento-item.size-md,
  .bento-item.size-wide {
    grid-column: span 1;
    grid-row: span 1;
    height: 320px;
  }
  .bento-item.size-lg { height: 360px; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card::after { display: none; }

  /* News */
  .news-grid { grid-template-columns: 1fr; }
  .news-card.featured { grid-column: span 1; }

  /* Compat */
  .compat-form { grid-template-columns: 1fr; }
  .compat-result { grid-template-columns: 1fr; }
  .compat-steps {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .compat-steps::before { display: none; }
  .compat-test-form { grid-template-columns: 1fr; }
  .compat-test-form .compat-field.span-2 { grid-column: span 1; }
  .compat-results-table-header,
  .compat-results-table-row {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
  .compat-results-table-header > :nth-child(4),
  .compat-results-table-row > :nth-child(4) {
    display: none;
  }
  .compat-page-panel { padding: var(--space-6); }

  /* Cases */
  .case-card { grid-template-columns: 1fr; }
  .case-card-image { aspect-ratio: 16/9; }
  .product-list { grid-template-columns: 1fr; }
  .cases-page-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .case-page-card-image { aspect-ratio: 16/10; }

  /* Case card horizontal layout for mobile */
  .cases-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .cases-grid .case-card {
    grid-template-columns: 140px 1fr;
  }
  .cases-grid .case-card .case-card-image {
    aspect-ratio: 1;
    height: 100%;
    min-height: 160px;
  }
  .cases-grid .case-card .case-card-content {
    padding: var(--space-3) var(--space-4);
  }
  .cases-grid .case-card .case-card-title {
    font-size: 1rem;
  }
  .cases-grid .case-card .case-card-desc {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 13px;
  }

  /* Solutions */
  .solution-card-body { padding: var(--space-6); }
  .solution-card-title { font-size: 1.5rem; }
  .solution-card-params { grid-template-columns: 1fr; }
  .solution-card-cta { flex-direction: column; }
  .solution-card-cta .btn { width: 100%; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
  .footer-brand { grid-column: span 2; }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* CTA */
  .cta-panel { padding: var(--space-10) var(--space-6); }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; }

  /* Form */
  .contact-form { padding: var(--space-6); }
  .contact-form-grid { grid-template-columns: 1fr; }
  .form-field.span-2 { grid-column: span 1; }

  /* Product detail */
  .product-detail-info h1 { font-size: 1.75rem; }
  .product-detail-specs { grid-template-columns: 1fr; }
  .product-detail-cta { flex-direction: column; }
  .product-detail-cta .btn { width: 100%; }
  .product-tabs { overflow-x: auto; flex-wrap: nowrap; width: 100%; justify-content: flex-start; }
  .product-tab { white-space: nowrap; }

  /* Article */
  .article-body { font-size: 15px; }
  .article-body h2 { font-size: 1.375rem; }
  .article-body h3 { font-size: 1.125rem; }

  /* News list */
  .news-list-item { grid-template-columns: 1fr; }
  .news-list-image { min-height: 200px; }
  .news-list-title { font-size: 1.25rem; }
}

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
  :root {
    --space-24: 56px;
    --space-20: 48px;
    --space-16: 36px;
  }

  body { font-size: 14px; }
  .container { padding: 0 var(--space-3); }
  .section { padding: var(--space-12) 0; }
  .section-header { margin-bottom: var(--space-10); }
  .section-title { font-size: 1.75rem; }
  .section-subtitle { font-size: 14px; }
  .section-tag { font-size: 10px; padding: 4px 10px; }

  /* Hero */
  .hero { padding: 90px 0 50px; }
  .hero-title { font-size: 2rem; letter-spacing: -0.03em; }
  .hero-title .accent { display: inline; }
  .hero-status { font-size: 10px; padding: 4px 10px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .hero-metrics {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }
  .metric-value { font-size: 1.25rem; }
  .metric-label { font-size: 9px; letter-spacing: 0; }
  .hero-visual { height: 280px; }
  .hud-device { width: 180px; height: 180px; }
  .hud-device-content h3 { font-size: 0.875rem; }
  .hud-device-content p { font-size: 9px; }
  .hud-device-content svg { width: 60px; height: 60px; }
  .hud-float { display: none; }
  .hud-data { font-size: 8px; }

  /* Scenarios */
  .scenario-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 180px);
  }
  .scenario-card.size-lg .scenario-card-title { font-size: 1.5rem; }
  .scenario-card-content { padding: var(--space-4); }
  .scenario-tag { font-size: 9px; padding: 1px 6px; }

  /* Bento */
  .bento-item,
  .bento-item.size-lg,
  .bento-item.size-md,
  .bento-item.size-wide {
    height: 280px;
  }
  .bento-item.size-lg { height: 320px; }
  .bento-content { padding: var(--space-4); }
  .bento-item.size-lg .bento-title { font-size: 1.25rem; }
  .bento-item.size-wide .bento-title { font-size: 1rem; }
  .bento-item.size-md .bento-title { font-size: 1rem; }
  .bento-desc { font-size: 12px; -webkit-line-clamp: 2; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .stat-value { font-size: 2rem; }
  .stat-label { font-size: 11px; }
  .stat-sub { font-size: 10px; }

  /* CTA */
  .cta-panel { padding: var(--space-8) var(--space-4); }
  .cta-title { font-size: 1.5rem; }
  .cta-desc { font-size: 14px; }

  /* Compat */
  .compat-panel { padding: var(--space-4); }
  .compat-page-panel { padding: var(--space-4); }
  .compat-panel-header { flex-direction: column; align-items: flex-start; }
  .compat-result-card { padding: var(--space-4); }
  .compat-results-table-header,
  .compat-results-table-row {
    grid-template-columns: 1fr 1fr;
    padding: var(--space-2) var(--space-3);
    font-size: 11px;
  }
  .compat-results-table-header > :nth-child(3),
  .compat-results-table-header > :nth-child(4),
  .compat-results-table-row > :nth-child(3),
  .compat-results-table-row > :nth-child(4) {
    display: none;
  }

  /* Cases */
  .case-card-content { padding: var(--space-4); }
  .case-card-title { font-size: 1rem; }
  .case-card-stats { flex-direction: column; gap: var(--space-2); }
  .case-page-body { padding: var(--space-4); }
  .case-page-title { font-size: 1.125rem; }
  .case-page-results { gap: var(--space-2); }
  .case-page-result-value { font-size: 1.125rem; }

  /* News */
  .news-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .news-card-content { padding: var(--space-4); }
  .news-card.featured .news-card-title { font-size: 1.25rem; }
  .news-card:not(.featured) .news-card-title { font-size: 1rem; }
  .news-list-body { padding: var(--space-4); }
  .news-list-title { font-size: 1.125rem; }

  /* Product card */
  .product-card-body { padding: var(--space-4); }
  .product-card-name { font-size: 1rem; }
  .product-card-specs { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .product-card-spec { font-size: 10px; }
  .product-card-spec svg { width: 10px; height: 10px; }

  /* Product card horizontal layout for mobile */
  .product-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .product-list .product-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: stretch;
  }
  .product-list .product-card .product-card-image {
    aspect-ratio: 1;
    height: 100%;
    min-height: 140px;
  }
  .product-list .product-card .product-card-body {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
  }
  .product-list .product-card .product-card-desc {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  /* Solutions */
  .solution-card-body { padding: var(--space-5); }
  .solution-card-title { font-size: 1.25rem; }
  .solution-card-desc { font-size: 14px; }
  .solution-card-params { padding: var(--space-3); gap: var(--space-2); }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .footer-brand { grid-column: span 1; }
  .footer-bottom { text-align: center; }

  /* Brand */
  .brand-name strong { font-size: 0.95rem; }
  .brand-name span { font-size: 9px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-mark svg { width: 18px; height: 18px; }

  /* Ticker */
  .ticker-item { font-size: 11px; gap: var(--space-2); }

  /* Article */
  .article { padding: var(--space-8) 0; }
  .article-title { font-size: 1.5rem; }
  .article-excerpt { font-size: 1rem; }
  .article-body { font-size: 14px; line-height: 1.8; }
  .article-body h2 { font-size: 1.25rem; margin: var(--space-6) 0 var(--space-3); }
  .article-body h3 { font-size: 1.125rem; }
  .article-body blockquote { padding: var(--space-4); font-size: 14px; }
  .article-share { flex-direction: column; align-items: flex-start; }

  /* Buttons */
  .btn { padding: var(--space-3) var(--space-4); font-size: 14px; }
  .btn-lg { padding: var(--space-3) var(--space-5); font-size: 15px; }

  /* Forms */
  .form-field input, .form-field select, .form-field textarea {
    padding: var(--space-3);
    font-size: 16px; /* Prevent iOS zoom */
  }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .cta-section, .nav-actions { display: none; }
  body { background: white; color: black; }
}