/* ===== Desktop Layout — Plan 19 =====
   CSS-only media queries. No sidebar. Nav stays at top on all sizes.
   768px  → wider cards, looser spacing
   1024px → two-column CHARACTER layout
   1280px → JOURNAL 2-col grid, SPELLS multi-col
*/

/* ─── 768px: Tablet ──────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  /* More breathing room in main content */
  .content {
    max-width: 1400px;
    padding: 32px;
  }

  /* Nav tabs wider */
  .nav-tab {
    min-width: 110px;
    padding: 12px 22px;
  }
}

/* ─── 1024px: Desktop ────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  /* CHARACTER tab: two-column layout — scoped to .active so display:none still hides inactive panes */
  #panel-character.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    align-items: start;
  }

  /* Anchor chips span both columns */
  .char-section-chips {
    grid-column: 1 / -1;
  }

  /* Stats grid (abilities + saves) spans both columns */
  .char-stats-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  /* Section dividers span both columns */
  .char-section-divider {
    grid-column: 1 / -1;
  }

  /* Skill section on the left */
  #panel-skills {
    grid-column: 1;
  }

  /* Inventory on the right */
  #panel-inventory {
    grid-column: 2;
  }

  /* Features spans both columns */
  #panel-features {
    grid-column: 1 / -1;
  }
}

/* ─── 1280px: Wide desktop ───────────────────────────────────────────────── */

@media (min-width: 1280px) {
  /* JOURNAL session cards 2-col grid */
  .journal-sessions-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  /* SPELLS: level groups in a 2-column grid — scoped to .active */
  #panel-spells.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  /* Each spell level group fits naturally in the grid */
  .spells-level-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
}