/* ==========================================================================
   ShiftyBuilds — Responsive
   ========================================================================== */

/* ---------- Tablet (<=1024px) ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-panel { order: -1; }
  .build-grid { grid-template-columns: repeat(2, 1fr); }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .build-detail { grid-template-columns: 1fr; }
  .review-layout, .checkout-layout, .order-layout { grid-template-columns: 1fr; }
  .summary-card { position: static; }
  .dashboard-layout { grid-template-columns: 180px 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Mobile nav toggle (<=860px) ---------- */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav-actions .btn-secondary.desktop-only { display: none; }
}

/* ---------- Small tablet / large mobile (<=768px) ---------- */
@media (max-width: 768px) {
  .container { padding: 0 var(--space-4); }
  .section { padding: var(--space-7) 0; }
  .dashboard-layout { grid-template-columns: 1fr; }
  .dashboard-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-5);
  }
  .dashboard-stats { grid-template-columns: 1fr 1fr; }
  .contact-methods { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .discord-cta { flex-direction: column; text-align: center; }
  .status-track { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .status-step { text-align: left; padding-top: 0; padding-left: var(--space-6); min-width: 0; width: 100%; }
  .status-step::before { display: none; }
  .status-step .dot { position: absolute; left: 0; top: 0; margin: 0; }
}

/* ---------- Mobile (<=560px) ---------- */
@media (max-width: 560px) {
  .build-grid { grid-template-columns: 1fr; }
  .benefit-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .dashboard-stats { grid-template-columns: 1fr; }
  .hero { padding: var(--space-7) 0 var(--space-6); }
  .form-card { padding: var(--space-5); }
  .auth-card { padding: var(--space-6); }
  .build-card__actions { flex-direction: column; }
  .review-actions { flex-direction: column; }
  .review-actions .btn { width: 100%; }
  .nav { padding: var(--space-3) var(--space-4); }
  .discord-link-card { flex-direction: column; align-items: flex-start; }
}