/* ═══════════════════════════════════════════
   TFA-AVA – Responsive Breakpoints
   iPhone-first → iPad → Desktop
   ═══════════════════════════════════════════ */

/* ─── Mobile (default, < 768px) ─── */
.page { padding: var(--sp-md); }
.grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-md); }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--sp-md); }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--sp-md); }
.hide-mobile { display: none; }
.show-mobile { display: block; }

/* Bottom navigation on mobile */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--c-bg-elevated);
  border-top: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 100;
}

.sidebar { display: none; }

/* ─── Tablet (768px – 1023px) ─── */
@media (min-width: 768px) {
  .page {
    padding: var(--sp-lg);
    padding-bottom: var(--sp-lg);
  }

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

  .hide-tablet { display: none; }
  .show-tablet { display: block; }

  /* Splitview support */
  .splitview {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0;
    height: 100dvh;
  }

  .splitview-master {
    border-right: 1px solid var(--c-border);
    overflow-y: auto;
    height: 100dvh;
  }

  .splitview-detail {
    overflow-y: auto;
    height: 100dvh;
  }

  /* Bottom nav → sidebar on tablet */
  .bottom-nav { display: none; }
  .sidebar {
    display: flex;
    flex-direction: column;
    width: 72px;
    height: 100dvh;
    position: fixed;
    left: 0;
    top: 0;
    background: var(--c-bg-elevated);
    border-right: 1px solid var(--c-border);
    z-index: 100;
    padding-top: var(--safe-top);
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-md) 0;
  }

  .has-sidebar {
    margin-left: 72px;
  }
}

/* ─── Desktop (1024px+) ─── */
@media (min-width: 1024px) {
  .page {
    padding: var(--sp-xl);
  }

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

  .hide-desktop { display: none; }
  .show-desktop { display: block; }

  .sidebar { width: 220px; }
  .sidebar .nav-label { display: block; }
  .has-sidebar { margin-left: 220px; }

  .splitview { grid-template-columns: 360px 1fr; }
}

/* ─── Large Desktop (1440px+) ─── */
@media (min-width: 1440px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  .page { max-width: 1400px; }
}