/* ==========================================================================
   ACUROINDIA — RESPONSIVE DESIGN SYSTEM
   Breakpoints: 375px, 390px, 430px, 768px, 820px, 1024px, 1280px, 1440px, 1920px
   ========================================================================== */

/* 1920px+ (Ultra-wide displays) */
@media (min-width: 1920px) {
  :root {
    --container-standard: 1320px;
    --container-wide: 1600px;
    --container-immersive: 1780px;
  }
  
  body {
    font-size: 1.1rem;
  }
}

/* 1280px - 1440px (Standard Laptops & Desktops) */
@media (max-width: 1280px) {
  .footer-top {
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1.2fr;
    gap: var(--space-2xl);
  }
}

/* 1024px (Tablets Landscape & Small Laptops) */
@media (max-width: 1024px) {
  .site-header {
    height: 64px;
  }

  .main-nav {
    display: none;
  }

  .mobile-toggle {
    display: block;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  .footer-brand-col {
    grid-column: 1 / -1;
  }

  /* Split sections become stacked */
  .grid-split {
    grid-template-columns: 1fr !important;
    gap: var(--space-2xl) !important;
  }

  /* 3-Panel Audit Engine Layout becomes 2-panel or tabbed */
  .three-panel-audit {
    grid-template-columns: 1fr !important;
  }
}

/* 768px - 820px (Tablets Portrait) */
@media (max-width: 768px) {
  :root {
    --space-5xl: 5rem;
    --space-4xl: 3.5rem;
    --space-3xl: 2.5rem;
    --space-2xl: 2rem;
  }

  .container-standard,
  .container-wide,
  .container-immersive,
  .container-narrow {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }

  .search-trigger-btn {
    display: none;
  }

  /* Hero adjustments */
  .hero-actions {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }

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

  /* Footer adjustments */
  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  /* System map mobile vertical flow */
  .system-map-horizontal {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .system-map-connector {
    width: 2px !important;
    height: 30px !important;
    margin: 0.5rem auto !important;
  }

  /* Demo tabs */
  .demo-panel-tabs {
    display: flex !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1rem;
    overflow-x: auto;
  }

  .demo-tab-btn {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    color: var(--slate-400);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
  }

  .demo-tab-btn.active {
    color: var(--accent-blue-light);
    border-bottom-color: var(--accent-blue-light);
  }
}

/* 430px, 390px, 375px (Mobile Phones) */
@media (max-width: 480px) {
  html {
    font-size: 15px;
  }

  .btn {
    min-height: 48px; /* Touch target size */
    padding: 0.75rem 1.25rem;
  }

  .mobile-drawer-header {
    margin-bottom: var(--space-xl);
  }

  .mobile-nav-link {
    font-size: 1.25rem;
    padding: 0.5rem 0;
  }

  .card-glass, .card-solid, .clinical-doc-panel {
    padding: var(--space-lg);
  }

  /* Command Palette full width on mobile */
  .command-palette-backdrop {
    padding-top: 5vh;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .command-palette {
    max-height: 80vh;
  }
}

/* Touch Friendly Adjustments */
@media (pointer: coarse) {
  button, a, input, select, textarea, .clinical-highlight {
    min-height: 44px;
    touch-action: manipulation;
  }

  .clinical-highlight {
    min-height: auto;
    padding: 0.2rem 0.4rem;
  }
}