/* ==========================================================================
   Bridge — responsive + motion preferences
   ========================================================================== */

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding-top: var(--space-7); padding-bottom: var(--space-8); }
  .hero-art { max-width: 460px; }
  .why { grid-template-columns: 1fr; gap: var(--space-5); }
  .room-grid.has-activity { grid-template-columns: 1fr; }
  /* On small screens incoming files come first: that's what the receiver is looking for. */
  .room-grid.has-activity .composer { order: 0; }
}

@media (max-width: 760px) {
  .site-nav { display: none; }
  .header-inner { justify-content: space-between; }
  .kinds-strip { grid-template-columns: 1fr 1fr; }
  .kinds-strip li { flex-direction: row; align-items: center; padding: var(--space-4) var(--space-5); font-size: 1.125rem; }
  .kinds-strip li + li { border-inline-start: 0; }
  .kinds-strip li:nth-child(even) { border-inline-start: 1px solid var(--line); }
  .kinds-strip li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .kinds-strip li:last-child { grid-column: 1 / -1; border-inline-start: 0; }
  .steps { grid-template-columns: 1fr; gap: var(--space-5); }
  .step-num { font-size: 2.75rem; }
  .choices { grid-template-columns: 1fr; gap: var(--space-4); }
  .choice { padding: var(--space-5); }
}

@media (max-width: 520px) {
  body { font-size: 1rem; }
  .header-inner { padding-inline: var(--space-4); }
  .hero { padding-inline: var(--space-4); gap: var(--space-6); }
  .hero-cta .btn { width: 100%; }
  .hero-kinds { margin-top: var(--space-5); }
  .kinds, .tools-home, .how, .why, .privacy { padding: var(--space-7) var(--space-4); }
  .why-list { grid-template-columns: 1fr; }
  .app-shell { padding: var(--space-5) var(--space-4) var(--space-6); }
  .qr-card { padding: var(--space-5); }
  .dropzone { padding: var(--space-4) var(--space-3); }
  .dropzone .btn { width: 100%; }
  .drop-hint { display: none; } /* no drag & drop on phones */
  .button-row .btn-primary.btn-lg { flex: 1 1 100%; }
  .view-center { padding: var(--space-7) 0; }
  .view-center .button-row .btn { flex: 1 1 100%; }
  .item { padding: var(--space-4); }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* Touch devices: no hover-only affordances, keep targets large. */
@media (hover: none) {
  .btn-primary:hover { box-shadow: none; }
  .drop-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .arc { stroke-dashoffset: 0; }
  .chip { display: none; }
  .arrived { opacity: 1; }
  .pulse { animation: none; }
  .spinner { animation: spin 2.4s linear infinite !important; animation-duration: 2.4s !important; animation-iteration-count: infinite !important; }
}