/* ================================================================
   responsive.css — Responsive Breakpoints
   Mobile ≤ 640px | Tablet 641–1024px | Desktop ≥ 1025px
   ================================================================ */

/* ================================================================
   TABLET (≤ 1024px)
   ================================================================ */
@media (max-width: 1024px) {
  /* Provider grid: 2 columns */
  .provider-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Profile grid: 2 columns */
  .profile-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Stats */
  .stats-bar {
    gap: var(--sp-6);
  }

  /* Hero */
  .hero {
    padding: var(--sp-12) 0;
  }

  .hero h1 {
    font-size: var(--fs-3xl);
  }

  .hero p {
    font-size: var(--fs-base);
  }

  /* Stepper labels */
  .step-label {
    font-size: var(--fs-xs);
  }

  .step-line {
    width: 32px;
  }
}

/* ================================================================
   MOBILE (≤ 640px)
   ================================================================ */
@media (max-width: 640px) {
  /* ── Header ── */
  .nav-desktop {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .header-inner {
    height: 56px;
  }

  /* ── Hero ── */
  .hero {
    padding: var(--sp-10) 0;
  }

  .hero h1 {
    font-size: var(--fs-2xl);
  }

  .hero p {
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-6);
  }

  /* ── Stats ── */
  .stats-bar {
    gap: var(--sp-4);
  }

  .stat-number {
    font-size: var(--fs-2xl);
  }

  .stat-label {
    font-size: var(--fs-xs);
  }

  /* ── Provider grid: 1 column ── */
  .provider-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  /* ── Profile grid: 1 column ── */
  .profile-grid {
    grid-template-columns: 1fr;
  }

  .profile-card {
    text-align: left;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
  }

  .profile-card .profile-icon {
    font-size: 2rem;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .profile-card .profile-desc {
    display: none;
  }

  .profile-card.card--selected .profile-desc {
    display: block;
  }

  /* ── Provider select: 1 column ── */
  .provider-select-grid {
    grid-template-columns: 1fr;
  }

  /* ── Stepper: compact ── */
  .stepper {
    padding: var(--sp-4) 0;
    gap: 0;
  }

  .step-label {
    display: none;
  }

  .step-circle {
    width: 32px;
    height: 32px;
    font-size: var(--fs-xs);
  }

  .step-line {
    width: 24px;
  }

  /* Show label only for active step */
  .step--active .step-label {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: var(--sp-1);
    font-size: var(--fs-xs);
  }

  .step--active {
    position: relative;
  }

  /* ── Page header ── */
  .page-header h2 {
    font-size: var(--fs-xl);
  }

  .page-header p {
    font-size: var(--fs-sm);
  }

  /* ── Buttons ── */
  .btn-lg {
    width: 100%;
  }

  /* ── Action bar ── */
  .action-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .action-bar .btn {
    width: 100%;
  }

  .action-bar-right {
    flex-direction: column;
  }

  .counter-text {
    text-align: center;
  }

  /* ── Cards ── */
  .card {
    padding: var(--sp-4);
  }

  /* ── Weight panel ── */
  .weight-row {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .weight-name {
    flex-basis: 100%;
  }

  /* ── Review ── */
  .review-section {
    padding: var(--sp-4);
  }

  /* ── Results ── */
  .result-hero {
    padding: var(--sp-6);
  }

  .result-hero .result-provider {
    font-size: var(--fs-2xl);
  }

  .result-hero .result-package {
    font-size: var(--fs-base);
  }

  .result-meta {
    flex-direction: column;
    gap: var(--sp-2);
  }

  /* ── Table mobile scroll ── */
  .table-wrapper {
    margin-inline: calc(var(--sp-4) * -1);
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  /* ── Accordion ── */
  .accordion-trigger {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
  }

  .accordion-panel {
    padding: 0 var(--sp-4) var(--sp-4);
  }

  /* ── Modal ── */
  .modal {
    max-height: 90vh;
    border-radius: var(--radius-lg);
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: var(--sp-4);
  }

  /* ── Toast ── */
  .toast-container {
    left: var(--sp-4);
    right: var(--sp-4);
  }

  .toast {
    max-width: 100%;
  }

  /* ── Search ── */
  .search-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input-wrapper {
    min-width: 100%;
  }

  .filter-pills {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--sp-2);
    -webkit-overflow-scrolling: touch;
  }

  /* ── Package specs 1 col ── */
  .package-specs {
    grid-template-columns: 1fr;
  }

  /* ── Section spacing ── */
  .section {
    padding: var(--sp-8) 0;
  }

  /* ── Footer ── */
  .site-footer {
    padding: var(--sp-6) 0;
  }

  /* ── Formula block ── */
  .formula-block {
    font-size: var(--fs-xs);
    padding: var(--sp-3);
  }

  /* ── Container tighter padding ── */
  .container {
    width: calc(100% - 24px);
  }

  /* ── Login page ── */
  .login-card {
    padding: var(--sp-6);
  }

  .login-header h1 {
    font-size: var(--fs-xl);
  }

  /* ── User info in header ── */
  .user-info {
    display: none;
  }
}

/* ================================================================
   VERY SMALL MOBILE (≤ 380px)
   ================================================================ */
@media (max-width: 380px) {
  html {
    font-size: 14px;
  }

  .hero h1 {
    font-size: var(--fs-xl);
  }

  .step-line {
    width: 16px;
    margin: 0 2px;
  }

  .step-circle {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
}

/* ================================================================
   LARGE DESKTOP (≥ 1200px)
   ================================================================ */
@media (min-width: 1200px) {
  .hero h1 {
    font-size: var(--fs-5xl);
  }

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