/* ============================================================
   Backlog — Responsive breakpoints
   ============================================================ */

/* ── Tablet (≤ 900px) ────────────────────────────────────────── */
@media (max-width: 900px) {
  .page { padding: var(--s-6) var(--s-4); }

  .grid-cards        { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .grid-cards--wide  { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

  .showcase-stats { gap: var(--s-2); }
  .showcase-stat  { padding: var(--s-3) var(--s-4); min-width: 70px; }
  .showcase-stat__value { font-size: var(--text-xl); }

  .stats-bar { gap: var(--s-2); flex-wrap: wrap; }
  .stat-pill { padding: var(--s-4) var(--s-5); min-width: 110px; }
}

/* ── Mobile (≤ 600px) ────────────────────────────────────────── */
@media (max-width: 600px) {

  /* ── Nav ── */
  .nav__links { display: none; }          /* replaced by drawer */
  .nav__desktop-only { display: none; }   /* Settings/Logout in nav bar */
  .nav__burger { display: flex; }
  .nav__inner { padding: 0 var(--s-4); gap: var(--s-3); }

  /* ── Page ── */
  .page { padding: var(--s-4) var(--s-3); }

  /* ── Auth ── */
  .auth-box { padding: var(--s-5) var(--s-4); border-radius: var(--r-lg); margin: var(--s-4); }

  /* ── Cards grid ── */
  .grid-cards        { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--s-2); }
  .grid-cards--wide  { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--s-2); }
  .grid-cards--compact { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: var(--s-2); }

  /* ── Flash ── */
  .flash-container { right: var(--s-3); left: var(--s-3); }
  .flash { min-width: 0; max-width: 100%; }

  /* ── Stats bar ── */
  .stats-bar { gap: var(--s-2); }
  .stats-bar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
  .stat-pill { min-width: 0; width: 100%; padding: var(--s-3) var(--s-4); }
  .stat-pill__value { font-size: var(--text-2xl); }
  .stat-pill__label { font-size: 0.65rem; }
  .stat-pill__icon-wrap { font-size: 0.9rem; }

  /* ── Showcase ── */
  .showcase-header { flex-direction: column; gap: var(--s-4); align-items: flex-start; }
  .showcase-header__avatar,
  .showcase-header__avatar-placeholder { width: 64px; height: 64px; }
  .showcase-stats { gap: var(--s-2); flex-wrap: wrap; }
  .showcase-stat  { padding: var(--s-2) var(--s-3); min-width: 60px; }
  .showcase-stat__value { font-size: var(--text-lg); }

  /* ── Filter tabs ── */
  .filter-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab { white-space: nowrap; flex-shrink: 0; }

  /* ── Search ── */
  .search-bar { flex-direction: column; }
  .search-bar input { font-size: 1rem; }   /* prevent iOS zoom */

  /* ── Modal ── */
  .modal {
    margin: var(--s-4);
    max-height: calc(100dvh - 2 * var(--s-4));
    overflow-y: auto;
  }

  /* ── Settings ── */
  .settings-section { padding: var(--s-4); }
  .form-row { flex-direction: column; }

  /* ── Library filters ── */
  .library-controls { flex-direction: column; gap: var(--s-3); }

  /* ── Section title ── */
  .section-title { font-size: 0.65rem; }

  /* ── Footer ── */
  .footer { padding: var(--s-6) var(--s-4); }
}

/* ── Library page header ─────────────────────────────────────── */
@media (max-width: 600px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
  }
  .page-header .flex-row {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* ── Settings ────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .profile-link-row {
    flex-direction: column;
    align-items: stretch;
  }
  .profile-link-url {
    word-break: break-all;
    white-space: normal;
  }
  #btn-copy-profile-link { width: 100%; }

  .username-current-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
  }
}

/* ── Nav role badge ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .role-badge { display: none; }   /* hidden in mobile nav — shown on profile/settings */
}

/* ── Landing hero ────────────────────────────────────────────── */
@media (max-width: 600px) {
  .landing-hero__tags { gap: var(--s-2); }
  .landing-hero__cta  { flex-direction: column; width: 100%; max-width: 280px; }
  .landing-hero__cta .btn { width: 100%; }
  .landing-hero__usercount { font-size: var(--text-xs); }
}

/* ── Very small (≤ 380px) ────────────────────────────────────── */
@media (max-width: 380px) {
  .grid-cards { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
  .nav__logo-text { display: none; }

  /* Modal 2-col → 1-col on tiny screens */
  .grid-2col { grid-template-columns: 1fr; }
}