/* ============================================
   RESPONSIVE — Shelf Layout Breakpoints
   ============================================ */

/* Spotlight grid containment — caps copy/reel tracks so the
   screenshot reel can't push copy or crop at ~1280px.
   Loaded last so this wins over spotlight.css base grid. */
.spotlight-content {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

.spotlight-info,
.spotlight-screenshots {
  min-width: 0;
}

.spotlight-screenshots {
  max-width: 100%;
  overflow: hidden;
  overflow-x: auto;
}

@media (max-width: 960px) {
  .spotlight-content {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .spotlight-info {
    text-align: center;
    align-items: center;
  }

  .spotlight-actions {
    justify-content: center;
  }

  .spotlight-screenshots {
    width: 100%;
    max-width: 100%;
  }

  .app-shelf,
  .app-shelf--featured {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .shelf-info {
    text-align: center;
    align-items: center;
  }

  .shelf-app-features li {
    padding-left: 0;
  }

  .shelf-app-features li::before {
    display: none;
  }

  .shelf-actions {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  :root {
    --header-height: 56px;
  }

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

  .hero-title {
    font-size: 2.5rem;
  }

  .spotlight-title {
    font-size: var(--text-3xl);
  }

  .spotlight-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .app-shelf,
  .app-shelf--featured {
    padding: var(--sp-10) 0;
  }

  .app-shelf--featured {
    padding: var(--sp-12) 0;
  }

  .device-shot {
    flex-basis: 160px;
  }

  .app-shelf--featured .device-shot {
    flex-basis: 180px;
  }

  .spotlight-screenshots .device-shot {
    flex-basis: 170px;
  }

  .shelf-app-title {
    font-size: var(--text-xl);
  }

  .app-shelf--featured .shelf-app-title {
    font-size: var(--text-2xl);
  }

  .footer-links {
    flex-direction: column;
    gap: var(--sp-5);
  }
}

/* ============================================
   Trust / FAQ — Responsive
   ============================================ */

@media (max-width: 960px) {
  .trust-strip-list {
    gap: var(--sp-2);
  }
}

@media (max-width: 800px) {
  .faq-list {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .faq {
    padding: var(--sp-10) 0;
  }

  .header-cta {
    height: 32px;
    padding: 0 var(--sp-3);
  }

  .trust-pill {
    font-size: var(--text-xs);
    padding: var(--sp-2) var(--sp-3);
  }
}