/* ==========================================================================
   STEEPED — Responsive Styles
   ========================================================================== */

/* --- Tablet (768px) --- */
@media (max-width: 768px) {
  :root {
    --text-5xl: 2.5rem;
    --text-4xl: 2rem;
    --text-3xl: 1.65rem;
  }

  .section {
    padding: var(--space-lg) var(--space-md) var(--space-xl);
  }

  .welcome-banner {
    padding: var(--space-xl) var(--space-md);
  }

  .form-row {
    flex-direction: column;
  }

  .tab-nav__list {
    gap: var(--space-md);
  }
}

/* --- Mobile (480px) --- */
@media (max-width: 480px) {
  :root {
    --text-5xl: 2rem;
    --text-4xl: 1.65rem;
    --text-3xl: 1.4rem;
    --text-2xl: 1.25rem;
  }

  .header-inner {
    padding: 0.7rem var(--space-sm);
  }

  .header-wordmark {
    font-size: var(--text-lg);
  }

  .tab-nav__list {
    padding: 0 var(--space-sm);
    gap: var(--space-md);
  }

  .tab-nav__link {
    font-size: var(--text-xs);
    padding: 0.75rem 0;
  }

  .section {
    padding: var(--space-md) var(--space-sm) var(--space-xl);
  }

  .welcome-banner {
    padding: var(--space-lg) var(--space-sm);
  }

  .welcome-banner h2 {
    font-size: var(--text-2xl);
  }

  /* Month pills: smaller, scrollable */
  .month-nav {
    padding: var(--space-sm) var(--space-sm);
  }

  .month-pill {
    font-size: var(--text-xs);
    padding: 0.4em 0.85em;
  }

  /* Audio player: stack on very small screens */
  .audio-player {
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem;
  }

  .audio-player__body {
    width: 100%;
    order: 2;
  }

  .audio-player__play {
    width: 40px;
    height: 40px;
  }

  /* Question form card */
  .question-form-card {
    padding: var(--space-md);
  }

  /* Gate adjustments */
  .gate-wordmark {
    font-size: var(--text-3xl);
  }

  .gate-input,
  .gate-submit {
    max-width: 100%;
  }

  .manifesto-actions {
    flex-direction: column;
  }

  .manifesto-actions .btn {
    width: 100%;
    justify-content: center;
  }
}