/* StreakPass responsive — mobile-first; tablet >=640, desktop >=1024.
   Desktop keeps the same design language: focused flows stay centered,
   dashboards expand into grids. Never merely stretch mobile screens. */

/* ---------- tablet (>= 640px) ---------- */
@media (min-width: 640px) {
  .sp-shell { padding-left: var(--sp-space-8); padding-right: var(--sp-space-8); }

  .sp-grid--offers { grid-template-columns: 1fr; } /* offers stay list-form until desktop */
  .sp-grid--stats-desktop { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- desktop (>= 1024px) ---------- */
@media (min-width: 1024px) {
  /* Marketing/dashboard shells widen; flows (survey/onboarding/signup) keep --sp-page-max. */
  .sp-shell--wide { max-width: var(--sp-page-max-wide); }

  /* Landing: split hero — copy left, phone preview right. */
  .sp-landing-split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--sp-space-16);
    align-items: center;
  }
  .sp-landing-split .sp-hero { text-align: left; }

  /* Centered phone preview frame for marketing pages. */
  .sp-phone-preview {
    width: 380px;
    margin: 0 auto;
    border: 1px solid var(--sp-border);
    border-radius: 44px;
    padding: var(--sp-space-3);
    background: var(--sp-bg-soft);
    box-shadow: var(--sp-shadow-card), var(--sp-glow-soft);
  }
  .sp-phone-preview__screen {
    border-radius: 34px;
    overflow: hidden;
    background: var(--sp-bg);
  }

  /* Offers: 3-up grid on desktop; cards go vertical. */
  .sp-grid--offers { grid-template-columns: repeat(3, 1fr); }
  .sp-grid--offers .sp-offer-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-space-4);
  }
  .sp-grid--offers .sp-offer-card__aside {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  /* Profile: two-column — summary left, history+calendar right. */
  .sp-profile-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: var(--sp-space-6);
    align-items: start;
  }

  /* Text measure guard on wide layouts */
  .sp-measure { max-width: 60ch; }
}