/* ═══════════════════════════════════════════════════════════════
   SonicSpace — responsive.css
   Breakpoints: tablet (≤900px), mobile (≤600px), small (≤400px)
   ═══════════════════════════════════════════════════════════════ */

/* ─── TABLET ─────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* Purpose grid → 2 columns */
  .purpose-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Info grid → stacked */
  .info-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  /* Steps → 2 columns */
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .step-item::before {
    display: none;
  }

  /* Results layout → stacked */
  .results-grid {
    grid-template-columns: 1fr;
  }

  .results-sidebar {
    position: static;
  }

  /* Comparison → stacked */
  .comparison-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .comparison-divider {
    display: none;
  }

  /* Header nav — hide text labels on smaller screens */
  .header-nav .nav-link {
    font-size: var(--text-xs);
  }

  /* Hero heading scale */
  .hero-heading {
    font-size: clamp(var(--text-2xl), 8vw, var(--text-4xl));
  }
}

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

  /* Base spacing */
  .section-inner {
    padding: var(--sp-12) var(--sp-4);
  }

  .page-body {
    padding: var(--sp-8) var(--sp-4);
  }

  /* Header */
  .header-inner {
    padding: 0 var(--sp-4);
  }

  .header-nav {
    gap: var(--sp-3);
  }

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

  .hero-heading {
    font-size: clamp(var(--text-2xl), 10vw, var(--text-3xl));
  }

  .hero-description {
    font-size: var(--text-base);
  }

  /* Purpose grid → single column on very small */
  .purpose-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
  }

  .purpose-card {
    padding: var(--sp-3) var(--sp-2);
  }

  .purpose-icon {
    font-size: 1.25rem;
  }

  /* Hero actions */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-large {
    width: 100%;
    justify-content: center;
    padding: var(--sp-4) var(--sp-8);
  }

  /* Trust row → 2 per row */
  .trust-row {
    gap: var(--sp-3) var(--sp-4);
  }

  .trust-item {
    font-size: var(--text-xs);
  }

  /* Steps → single column */
  .steps-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  /* Info grid */
  .info-grid {
    gap: var(--sp-6);
  }

  /* Limitation card */
  .limitation-card {
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-5);
  }

  /* Footer */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: 0 var(--sp-4);
  }

  /* History item */
  .history-item {
    grid-template-columns: 1fr;
  }

  .history-item-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  /* Modals */
  .modal {
    padding: var(--sp-5);
  }

  /* Data card values */
  .data-card-value {
    font-size: var(--text-2xl);
  }

  .rt60-display {
    padding: var(--sp-5);
  }

  /* Tech rows — stay flex on mobile, allow wrap */
  .tech-row {
    gap: var(--sp-2);
    min-height: 40px;
  }

  /* Progress steps labels — hide on mobile */
  .progress-step-label {
    display: none;
  }

  /* Score ring — smaller */
  .score-ring {
    width: 120px;
    height: 120px;
  }

  .score-number {
    font-size: var(--text-2xl);
  }
}

/* ─── SMALL ───────────────────────────────────────────────────── */
@media (max-width: 400px) {

  .purpose-grid {
    grid-template-columns: 1fr 1fr;
  }

  .header-nav .nav-link:not(:last-child) {
    display: none;
  }

  .comparison-grid {
    gap: var(--sp-4);
  }

  .hero-heading {
    font-size: var(--text-2xl);
  }
}

/* ─── LARGE DESKTOP ──────────────────────────────────────────── */
@media (min-width: 1400px) {

  .hero-content {
    padding-top: var(--sp-32);
  }

  .hero-heading {
    font-size: 90px;
  }
}

/* ─── TOUCH DEVICE ───────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {

  /* Larger tap targets */
  .btn {
    min-height: 48px;
  }

  .btn-small {
    min-height: 40px;
  }

  .purpose-card {
    min-height: 72px;
  }

  .nav-link {
    padding: var(--sp-2) var(--sp-1);
  }

  /* Remove hover effects that look weird on touch */
  .btn-primary:hover {
    transform: none;
    box-shadow: none;
  }

  .history-item:hover {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
  }
}

/* ─── LANDSCAPE MOBILE ───────────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) {

  .hero-section {
    min-height: auto;
    padding-top: var(--sp-8);
  }

  .hero-content {
    padding: var(--sp-8) var(--sp-6);
  }
}

/* ─── HIGH DPI / RETINA ──────────────────────────────────────── */
@media (min-resolution: 2dppx) {
  /* Canvas elements render at device pixel ratio via JS */
  .hero-canvas {
    image-rendering: pixelated;
  }
}