/* ============================================
   RESPONSIVE — Tablet & Kiosk Breakpoints
   ============================================ */

/* Large displays (trade show monitors) */
@media (min-width: 1800px) {
  html { font-size: 18px; }
  .section { padding: 120px var(--space-3xl) var(--space-4xl); }
  .patient-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Standard laptop */
@media (max-width: 1400px) {
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .grid-6 { grid-template-columns: repeat(4, 1fr); }
}

/* Tablet landscape / small laptop */
@media (max-width: 1024px) {
  .nav-links { display: none; }

  .section { padding: 80px var(--space-lg) var(--space-2xl); }
  .section-title { font-size: var(--text-3xl); }

  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }

  .sim-layout { grid-template-columns: 1fr !important; }
  .sim-sidebar { display: none; }

  .pathway-flow { overflow-x: auto; min-width: 800px; }

  .modal-content { padding: var(--space-lg); }
}

/* Tablet portrait */
@media (max-width: 768px) {
  html { font-size: 14px; }

  .section-title { font-size: var(--text-2xl); }
  .stat-value { font-size: var(--text-4xl); }

  .grid-3 { grid-template-columns: 1fr; }
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(2, 1fr); }

  .tabs { gap: 2px; }
  .tab { padding: var(--space-xs) var(--space-md); font-size: var(--text-xs); }

  .hero-title { font-size: var(--text-3xl) !important; }
}

/* Touch optimization for kiosk */
@media (pointer: coarse) {
  .btn { min-height: 48px; min-width: 48px; }
  .tab { min-height: 44px; }
  .nav-link { min-height: 44px; padding: var(--space-md); }
  .condition-card { padding: var(--space-xl) var(--space-lg); }
  .quiz-option { min-height: 48px; padding: var(--space-md) var(--space-lg); }
  .modal-close { width: 48px; height: 48px; }
}