/* ========================================
   TradeHub - Responsive Styles
   Mobile-first approach with breakpoints
   ======================================== */

/* ----------------------------------------
   Tablet Styles (768px - 1023px)
   ---------------------------------------- */
@media (max-width: 1023px) {
  :root {
    --container-padding: var(--space-8);
  }

  .section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .section--lg {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }

  /* Navigation */
  .nav__links {
    display: none;
  }

  .nav__toggle {
    display: flex;
  }

  .nav__mobile {
    display: block;
  }

  .nav__actions {
    gap: var(--space-3);
  }

  .nav__actions .btn {
    display: none;
  }

  /* Hero */
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .hero__content {
    text-align: center;
    max-width: 100%;
  }

  .hero__values {
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero__cta {
    justify-content: center;
  }

  .hero__visual {
    max-width: 500px;
    margin: 0 auto;
  }

  .hero__floating-card {
    display: none;
  }

  /* Pain Points */
  .pain-points__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Flow */
  .flow__diagram {
    flex-direction: column;
    gap: var(--space-6);
  }

  .flow__arrow {
    transform: rotate(90deg);
  }

  .flow__step {
    min-width: 200px;
  }

  /* Architecture */
  .arch-layer {
    flex-direction: column;
    text-align: center;
  }

  /* Product Tabs */
  .tab-panel {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .tab-panel__content {
    padding-right: 0;
    order: 2;
  }

  .tab-panel__image {
    order: 1;
    max-width: 500px;
    margin: 0 auto;
  }

  /* Service */
  .delivery-flow__steps {
    flex-direction: column;
    gap: var(--space-8);
    align-items: center;
  }

  .delivery-flow__steps::before {
    display: none;
  }

  .delivery-step {
    width: 100%;
    max-width: 300px;
  }

  .service-content__grid {
    grid-template-columns: 1fr;
  }

  /* About */
  .about-content__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .contact-section__inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  /* Footer */
  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .footer__brand {
    grid-column: span 2;
    max-width: 100%;
    text-align: center;
  }

  .footer__social {
    justify-content: center;
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }

  /* FAB */
  .fab-group {
    bottom: var(--space-6);
    right: var(--space-6);
  }

  .fab {
    width: 48px;
    height: 48px;
  }
}

/* ----------------------------------------
   Mobile Styles (max-width: 767px)
   ---------------------------------------- */
@media (max-width: 767px) {
  :root {
    --container-padding: var(--space-4);
  }

  .section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  /* Navigation */
  .nav__inner {
    height: 64px;
  }

  .nav__mobile {
    top: 64px;
  }

  .nav__logo {
    font-size: var(--text-lg);
  }

  .nav__logo-icon {
    width: 32px;
    height: 32px;
    font-size: var(--text-base);
  }

  .nav__logo-img {
    height: 36px;
    max-height: 36px;
    max-width: 140px;
  }

  /* Hero */
  .hero {
    min-height: auto;
    padding-top: calc(64px + var(--space-10));
    padding-bottom: var(--space-12);
  }

  .hero__badge {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
  }

  .hero__title {
    font-size: var(--text-3xl);
  }

  .hero__subtitle {
    font-size: var(--text-base);
  }

  .hero__values {
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
  }

  .hero__cta {
    flex-direction: column;
    width: 100%;
  }

  .hero__cta .btn {
    width: 100%;
  }

  /* Pain Points */
  .pain-points__title {
    font-size: var(--text-2xl);
  }

  .pain-card {
    padding: var(--space-6);
  }

  .pain-card__icon {
    width: 48px;
    height: 48px;
  }

  .pain-card__title {
    font-size: var(--text-lg);
  }

  /* Flow */
  .flow__title {
    font-size: var(--text-2xl);
  }

  .flow__step {
    padding: var(--space-4);
    min-width: 100%;
  }

  /* Architecture */
  .architecture__title {
    font-size: var(--text-2xl);
  }

  .arch-layer {
    padding: var(--space-4);
  }

  .arch-layer__icon {
    width: 40px;
    height: 40px;
  }

  .arch-layer__title {
    font-size: var(--text-base);
  }

  /* CTA Section */
  .cta-section__title {
    font-size: var(--text-2xl);
  }

  .cta-section__buttons {
    flex-direction: column;
  }

  .cta-section__buttons .btn {
    width: 100%;
  }

  /* Product Tabs */
  .tabs__nav {
    gap: var(--space-2);
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
  }

  .tabs__btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .tab-panel__position {
    font-size: var(--text-base);
  }

  .tab-panel__title {
    font-size: var(--text-2xl);
  }

  .tab-panel__feature {
    flex-direction: column;
    text-align: center;
  }

  .tab-panel__feature-icon {
    margin: 0 auto;
  }

  /* Service */
  .service-hero__title {
    font-size: var(--text-2xl);
  }

  .delivery-flow__title {
    font-size: var(--text-2xl);
  }

  .delivery-step__number {
    width: 64px;
    height: 64px;
    font-size: var(--text-xl);
  }

  .service-card {
    padding: var(--space-6);
  }

  .service-card__icon {
    width: 48px;
    height: 48px;
  }

  /* About */
  .about-hero__title {
    font-size: var(--text-2xl);
  }

  .about-hero__desc {
    font-size: var(--text-base);
  }

  .about-content__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .capability-card {
    padding: var(--space-4);
  }

  .capability-card__icon {
    width: 40px;
    height: 40px;
  }

  .capability-card__title {
    font-size: var(--text-sm);
  }

  .contact-info__title {
    font-size: var(--text-2xl);
  }

  .contact-form {
    padding: var(--space-6);
  }

  .contact-form__title {
    font-size: var(--text-xl);
  }

  /* Footer */
  .footer {
    padding: var(--space-12) 0 var(--space-6);
  }

  .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    text-align: center;
  }

  .footer__brand {
    grid-column: auto;
  }

  .footer__logo {
    justify-content: center;
  }

  .footer__logo-img {
    height: 40px;
    max-width: 160px;
  }

  .footer__column-title {
    margin-bottom: var(--space-4);
  }

  .footer__links {
    gap: var(--space-2);
  }

  .footer__legal {
    flex-direction: column;
    gap: var(--space-2);
  }

  /* FAB */
  .fab-group {
    bottom: var(--space-4);
    right: var(--space-4);
  }

  .fab {
    width: 44px;
    height: 44px;
  }

  .fab__icon {
    width: 20px;
    height: 20px;
  }

  .fab__qr {
    right: 0;
    bottom: calc(100% + var(--space-3));
    transform: translateY(10px);
  }

  .fab--wechat:hover .fab__qr,
  .fab__qr--visible {
    transform: translateY(0);
  }

  .fab__qr-image {
    width: 140px;
    height: 140px;
  }

  /* Buttons */
  .btn--lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
  }
}

/* ----------------------------------------
   Small Mobile (max-width: 480px)
   ---------------------------------------- */
@media (max-width: 480px) {
  .hero__title {
    font-size: var(--text-2xl);
  }

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

  .capability-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    text-align: left;
  }

  .capability-card__icon {
    margin: 0;
  }
}

/* ----------------------------------------
   Large Desktop (min-width: 1400px)
   ---------------------------------------- */
@media (min-width: 1400px) {
  :root {
    --container-max: 1400px;
  }

  .hero__inner {
    gap: var(--space-20);
  }

  .pain-points__grid {
    gap: var(--space-10);
  }
}

/* ----------------------------------------
   Print Styles
   ---------------------------------------- */
@media print {
  .nav,
  .fab-group,
  .footer__social {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  a {
    text-decoration: underline;
  }

  .section {
    page-break-inside: avoid;
  }
}

/* ----------------------------------------
   Reduced Motion
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ----------------------------------------
   High Contrast Mode
   ---------------------------------------- */
@media (prefers-contrast: high) {
  :root {
    --color-gray-300: #666;
    --color-gray-400: #555;
    --color-gray-500: #444;
    --color-gray-600: #333;
  }

  .btn--secondary {
    border-width: 2px;
  }

  .nav__link::after {
    height: 3px;
  }
}

/* ----------------------------------------
   Dark Mode Support (future)
   ---------------------------------------- */
@media (prefers-color-scheme: dark) {
  /* Placeholder for dark mode styles */
  /* Can be activated by adding data-theme="dark" to html */
}

html[data-theme="dark"] {
  --color-white: #0f172a;
  --color-gray-50: #1e293b;
  --color-gray-100: #334155;
  --color-gray-200: #475569;
  --color-gray-300: #64748b;
  --color-gray-400: #94a3b8;
  --color-gray-500: #cbd5e1;
  --color-gray-600: #e2e8f0;
  --color-gray-700: #f1f5f9;
  --color-gray-800: #f8fafc;
  --color-gray-900: #ffffff;
}