/* ─── Responsive Styles — Mobile-First, Breakpoints xs→4xl ─── */

/* ═══ Default: xs (320px+) = single column, stacked ═══ */
.case-list {
  display: flex;
  flex-direction: column;
}

.report-steps {
  width: 100%;
}

/* ═══ sm: 480px+ ═══ */
@media (min-width: 480px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .photo-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .page-container {
    padding: var(--space-6);
  }
}

/* ═══ md: 768px+ (tablets) ═══ */
@media (min-width: 768px) {
  .case-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  .case-card {
    margin-bottom: 0;
  }
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .report-steps {
    max-width: 500px;
    margin: 0 auto;
  }
  .page-container {
    padding: var(--space-8);
  }
  .modal {
    max-width: 440px;
  }
  .verify-container {
    padding: var(--space-10) var(--space-6);
  }
  .photo-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ═══ lg: 1024px+ (small desktops / landscape tablets) ═══ */
@media (min-width: 1024px) {
  #app-shell {
    max-width: 960px;
    margin: 0 auto;
    border-left: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
  }
  .case-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-container {
    max-width: 800px;
  }
  .mini-map {
    height: 240px;
  }
}

/* ═══ xl: 1280px+ (desktops) ═══ */
@media (min-width: 1280px) {
  #app-shell {
    max-width: 1100px;
  }
  .page-container {
    max-width: 900px;
  }
}

/* ═══ 2xl: 1536px+ (large screens) ═══ */
@media (min-width: 1536px) {
  #app-shell {
    max-width: 1280px;
  }
  .page-container {
    max-width: 1024px;
  }
}

/* ═══ Orientation: Landscape on mobile ═══ */
@media (max-height: 480px) and (orientation: landscape) {
  .bottom-nav {
    height: 44px;
  }
  #app-shell {
    padding-bottom: calc(44px + var(--safe-area-inset-bottom));
  }
  .modal {
    max-height: 90vh;
  }
  .mini-map {
    height: 140px;
  }
}

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

/* ═══ High Contrast (forced-colors) ═══ */
@media (forced-colors: active) {
  .card, .case-card, .modal, .badge {
    border: 1px solid CanvasText;
  }
  .btn { border: 2px solid ButtonText; }
}