/* =========================================================
   هم‌تاب (HamTab) — Responsive System
   ========================================================= */

/* ---- Large desktop already default (>1280px) ---- */

/* ---- Desktop / laptop ---- */
@media (max-width: 1180px) {
  .container { padding-inline: var(--space-4); }
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Tablet ---- */
@media (max-width: 960px) {
  :root { --header-height: 68px; }

  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }

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

  .section { padding-block: var(--space-7); }
  .section-title { font-size: var(--fs-xl); }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

  .table-wrap { display: none; }
  .table-cards { display: flex; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  .section { padding-block: var(--space-6); }
  .section-title { font-size: var(--fs-lg); }
  .section-desc { font-size: var(--fs-base); }

  .btn-lg { padding: 14px 24px; font-size: var(--fs-base); }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .footer-bottom { flex-direction: column; gap: var(--space-3); align-items: flex-start; }

  .modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; align-self: flex-end; width: 100%; }
  .modal-overlay { align-items: flex-end; padding: 0; }

  .toast-stack { left: var(--space-3); right: var(--space-3); width: auto; bottom: var(--space-3); }

  .chart-container { height: 200px; }
}

/* ---- Small mobile ---- */
@media (max-width: 380px) {
  .container { padding-inline: var(--space-3); }
  .fs-hero { font-size: var(--fs-2xl) !important; }
}


/* Extra responsive polish */
@media (max-width: 960px) {
  .filters-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .filters-bar .select,
  .filters-bar .btn {
    width: 100%;
  }
  .compare-bar .container {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .compare-bar__actions {
    justify-content: center;
  }
  .hero__visual {
    max-width: 320px;
  }
  .user-menu__dropdown {
    left: auto;
    right: 0;
  }
  .admin-layout {
    grid-template-columns: 1fr !important;
  }
  .admin-sidebar {
    position: static !important;
  }
  .pkg-grid {
    grid-template-columns: 1fr !important;
  }
  .nb-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
  .hero__stats {
    gap: var(--space-4);
  }
  .site-header .brand {
    font-size: 1rem;
  }
  #compareModal .modal,
  #detailModal .modal {
    width: 96vw !important;
    margin: 8px;
  }
  .compare-table {
    font-size: 12px;
  }
}

@media (max-width: 400px) {
  .user-menu__hint { display: none; }
}