/* ─────────────────────────────────────────────────────────────────
   Mobile-first. Base styles = mobile (0px+).
   Overrides at 640px (tablet) and 1024px (desktop).
───────────────────────────────────────────────────────────────────── */

/* ── Mobile base overrides (narrow viewport adjustments) ── */
.site-nav__links { display: none; } /* hidden on mobile — hamburger TODO Phase 2 */
.site-nav__inner { gap: var(--sp-3); padding: 0 var(--sp-4); }
.site-nav__wordmark { font-size: var(--t-base); }

/* Mobile: actions area — drop labels, keep icons */
.search-trigger__label { display: none; }
.btn--ai { padding: var(--sp-2); }

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

/* Mobile: card grid — single column */
.card-grid { grid-template-columns: 1fr; }

/* Mobile: article */
.article { border-left: none; padding-left: 0; }
.article__inner { padding: var(--sp-8) var(--sp-4); }
.article__title { font-size: var(--t-2xl); }
.article__byline { flex-direction: column; gap: var(--sp-2); }

/* Mobile: newsletter form stacks */
.newsletter-cta__form { flex-direction: column; }
.newsletter-cta__input,
.newsletter-cta__form .btn--subscribe { width: 100%; }

/* Mobile: tier prompt options stack */
.tier-prompt__options { flex-direction: column; }
.tier-option { min-width: unset; }

/* Mobile: newcomer stats */
.newcomer-block__stats { gap: var(--sp-5); }
.newcomer-stat__n { font-size: var(--t-lg); }

/* Mobile: AI teaser wraps */
.ai-teaser { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

/* Mobile: search overlay full-width */
.search-overlay { padding-top: 0; align-items: flex-end; }
.search-overlay__inner { max-height: 90vh; max-width: 100%; border-left: none; border-right: none; border-bottom: none; }

/* Mobile: AI page */
.ai-page__headline { font-size: var(--t-2xl); }
.ai-page__progress-stages { gap: var(--sp-2); }

/* ── Tablet (640px+) ── */
@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid--library { grid-template-columns: repeat(2, 1fr); }
  .article__inner { padding: var(--sp-10) var(--sp-6); }
  .article__title { font-size: var(--t-3xl); }
  .search-overlay { align-items: flex-start; padding-top: var(--sp-12); }
  .search-overlay__inner { max-width: 680px; }
  .newsletter-cta__form { flex-direction: row; }
}

/* ── Desktop (1024px+) ── */
@media (min-width: 1024px) {
  .site-nav__links { display: flex; }
  .search-trigger__label { display: inline; }
  .btn--ai { padding: var(--sp-2) var(--sp-3); }
  .container { padding: 0 var(--sp-6); }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .card-grid--library { grid-template-columns: repeat(3, 1fr); }
  .article { border-left: var(--status-bar-art) solid transparent; padding-left: var(--sp-6); }
  .article__inner { padding: var(--sp-12) var(--sp-8); max-width: var(--w-content); margin: 0 auto; }
  .tier-prompt__options { flex-direction: row; }
  .ai-teaser { flex-direction: row; align-items: center; }
}

/* ── Wide (1280px+) ── */
@media (min-width: 1280px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}