/*
 * Tablet / wide-screen responsive layer.
 *
 * The base app shell is 480px-wide centered (phone-shaped). On iPad and
 * Mac Catalyst that leaves a thin column in the middle of a huge dark void.
 * This file widens the shell at iPad breakpoints, switches list views to
 * multi-column grids, and floats modals instead of bottom-sheeting them.
 *
 * Load order: index.html links this AFTER css/v084-prototype.css so these
 * rules win at equal specificity. We keep specificity low — no #ids, no
 * !important — so individual screens can still override per-card.
 *
 * Breakpoints:
 *   ≥ 768px  — iPad mini portrait, smaller tablets
 *   ≥ 1024px — iPad landscape, iPad Pro, Mac Catalyst, desktop browser
 *   ≥ 1280px — large Mac Catalyst windows, ultrawide
 *
 * Phone-first: any rule outside a @media block applies to every viewport.
 * The base 480px-wide shell stays untouched on phone widths.
 */

/* === iPad portrait + larger (≥ 768px) === */
@media (min-width: 768px) {
  /* Shell: widen so we use the iPad screen instead of squatting in a 480 column. */
  .app {
    max-width: 820px;
  }

  /* Bottom-nav matches the shell width so tabs sit under their content. */
  .nav,
  .bottom-nav {
    max-width: 820px;
  }

  /* Modals: switch from phone-style bottom-sheet to centered card. */
  .modal-overlay {
    align-items: center;
  }
  .modal {
    max-width: 560px;
    border-radius: var(--radius-lg);
    max-height: 80vh;
  }

  /* Places list: two-up grid. Each card stays a comfortable reading width. */
  .places-list-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Loadout list: keep single column but cap each item width so it doesn't
     stretch into a banner. Drag-reorder math assumes vertical stack — we
     preserve that. The cap is just for readability. */
  .loadout-list {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Section headers + content blocks: a touch more horizontal padding so
     they don't hug the wider shell edge. */
  .subscreen {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Places map: taller on iPad — phones get ~60vh, tablets can spare more. */
  .places-map-canvas {
    min-height: 65vh;
  }
}

/* === iPad landscape, iPad Pro, Mac Catalyst (≥ 1024px) === */
@media (min-width: 1024px) {
  /* Shell: widen further. Cards inside use grids so this is breathing room
     not banner-stretch. */
  .app {
    max-width: 1080px;
  }

  .nav,
  .bottom-nav {
    max-width: 1080px;
  }

  /* Places list: three columns on landscape iPad and Mac. */
  .places-list-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  /* Loadout list cap stays around phone-width — drag is per-row, density
     matters more than horizontal spread. */
  .loadout-list {
    max-width: 760px;
  }

  /* Modals: slightly bigger budget for forms. */
  .modal {
    max-width: 640px;
  }

  /* Subscreen content gets a centered max-width so paragraphs don't run
     to 1000px (unreadable). Cards/grids inside still consume the full
     subscreen width because they sit at depth ≥ 2. */
  .subscreen {
    padding-left: 32px;
    padding-right: 32px;
  }

  /* Map: full landscape height. */
  .places-map-canvas {
    min-height: 70vh;
  }
}

/* === Large Mac Catalyst, desktop browser (≥ 1280px) === */
@media (min-width: 1280px) {
  /* Keep the cap at 1080px — going wider hurts readability without
     adding columns. If we later want a sidebar layout on Mac, that's a
     bigger architectural change tracked separately. */
  .app {
    max-width: 1080px;
  }
}