/* Founder's Voyage - responsive overrides.
 *
 * Strategy: every JSX component still ships its desktop look via inline
 * style={...} objects. This file adds class-targeted overrides for narrow
 * viewports. Because inline styles win the cascade, the overrides here
 * use !important. Per coding_standard.md sections 4.3 and 5.1.
 *
 * Two breakpoints:
 *   - max-width: 900px  (tablet + large phone landscape)
 *   - max-width: 600px  (phone portrait, default mobile)
 */

/* ===========================================================
 * 900px: collapse multi-column grids, shrink hero typography,
 * reduce horizontal page padding.
 * =========================================================== */
@media (max-width: 900px) {

  /* Nav: tighten padding and gap, hide the small log/phrase. */
  .fv-nav {
    padding: 18px 24px !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  .fv-nav-left { gap: 18px !important; flex-wrap: wrap !important; }
  .fv-nav-right { gap: 14px !important; }
  .fv-nav-phrase { display: none !important; }
  .fv-nav-link { font-size: 13px !important; }

  /* Footer: 4-col -> 2-col. */
  .fv-footer-wrap {
    padding-left: 28px !important;
    padding-right: 28px !important;
    padding-top: 56px !important;
  }
  .fv-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px !important;
    margin-bottom: 40px !important;
  }
  .fv-footer-fine {
    flex-direction: column !important;
    gap: 14px !important;
    text-align: center !important;
  }

  /* Hero (home) - 2-col split stacks. */
  .fv-hero {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
    padding: 56px 28px 64px !important;
  }
  .fv-hero-h1 { font-size: 56px !important; }
  .fv-hero-sub { font-size: 19px !important; }

  /* Hero "log entry" card. */
  .fv-hero-card { padding: 28px !important; }
  .fv-hero-card-title { font-size: 28px !important; }

  /* "Why small" 3-col strip. */
  .fv-why-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  .fv-why-num { font-size: 44px !important; }

  /* Voices: 180px + 1fr row -> stack. */
  .fv-voices-section { padding: 80px 28px 60px !important; }
  .fv-voices-title { font-size: 36px !important; }
  .fv-voice-row {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding-top: 24px !important;
  }
  .fv-voice-quote { font-size: 22px !important; }

  /* Journal (homepage section). */
  .fv-journal-section { padding: 72px 28px 64px !important; }
  .fv-journal-title { font-size: 36px !important; }
  .fv-journal-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
  }
  .fv-journal-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }

  /* Podcast strip (homepage). */
  .fv-pod-section {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
    padding: 72px 28px !important;
  }
  .fv-pod-title { font-size: 36px !important; }

  /* CTA banner. */
  .fv-banner-section { padding: 80px 28px !important; }
  .fv-banner-text { font-size: 44px !important; }

  /* Gatherings page. */
  .fv-gather-hero { padding: 56px 28px 48px !important; }
  .fv-gather-featured {
    grid-template-columns: 1fr !important;
    margin: 32px 28px 64px !important;
  }
  .fv-gather-feat-img {
    height: 280px !important;
    min-height: 0 !important;
  }
  .fv-gather-feat-body { padding: 40px 28px !important; }
  .fv-gather-feat-title { font-size: 40px !important; }
  .fv-gather-year-wrap { padding: 64px 28px !important; }
  .fv-gather-year-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 36px !important;
  }
  .fv-gather-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 24px 0 !important;
  }
  .fv-gather-row-cta { justify-self: start !important; }
  .fv-gather-how-wrap { padding: 72px 28px !important; }
  .fv-gather-how-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
  .fv-gather-faq { padding: 64px 28px !important; }
  .fv-gather-faq-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Podcast page. */
  .fv-pod-page-hero { padding: 56px 28px 24px !important; }
  .fv-pod-page-h1 { font-size: 56px !important; }
  .fv-pod-page-sub { font-size: 19px !important; }
  .fv-pod-page-listen { flex-wrap: wrap !important; gap: 10px !important; }
  .fv-pod-feat {
    grid-template-columns: 1fr !important;
    margin: 40px 28px 72px !important;
    min-height: 0 !important;
  }
  .fv-pod-feat-left {
    padding: 36px 28px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(244,239,230,0.08) !important;
    align-items: center !important;
    text-align: center !important;
  }
  .fv-pod-feat-num { font-size: 88px !important; }
  .fv-pod-feat-body { padding: 36px 28px !important; }
  .fv-pod-feat-title { font-size: 32px !important; }
  .fv-pod-grid-header {
    padding: 0 28px 24px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .fv-pod-grid {
    grid-template-columns: 1fr !important;
    padding: 0 28px 24px !important;
    gap: 16px !important;
  }
  .fv-pod-card {
    padding: 22px !important;
    gap: 18px !important;
  }
  .fv-pod-num-block { padding: 12px 8px !important; }

  /* Community page. */
  .fv-comm-hero { padding: 64px 28px 56px !important; }
  .fv-comm-h1 { font-size: 56px !important; line-height: 1.05 !important; }
  .fv-comm-sub { font-size: 19px !important; }
  .fv-comm-cta-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .fv-comm-stats {
    grid-template-columns: 1fr 1fr !important;
  }
  .fv-comm-stat-cell { border-right: none !important; }
  .fv-comm-stat-cell:nth-child(1),
  .fv-comm-stat-cell:nth-child(2) {
    border-bottom: 1px solid rgba(11,42,64,0.12);
  }
  .fv-comm-stat-cell:nth-child(odd) {
    border-right: 1px solid rgba(11,42,64,0.12) !important;
  }
  .fv-comm-stat-num { font-size: 48px !important; }
  .fv-comm-pillars { padding: 80px 28px 64px !important; }
  .fv-comm-pillar-title { font-size: 40px !important; }
  .fv-comm-pillar-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .fv-comm-audience { padding: 72px 28px !important; }
  .fv-comm-audience-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .fv-comm-audience-title { font-size: 32px !important; }
  .fv-comm-voices { padding: 72px 28px !important; }
  .fv-comm-voices-title { font-size: 36px !important; }
  .fv-comm-voices-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .fv-comm-banner { padding: 80px 28px !important; }
  .fv-comm-banner-text { font-size: 44px !important; }

  /* Journal index page. */
  .fv-journal-page-hero { padding: 56px 28px 32px !important; }
  .fv-journal-page-h1 { font-size: 56px !important; }
  .fv-journal-page-sub { font-size: 19px !important; }
  .fv-journal-featured-wrap { padding: 24px 28px 72px !important; }
  .fv-journal-featured {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .fv-journal-featured-img { height: 280px !important; }
  .fv-journal-featured-title { font-size: 36px !important; }
  .fv-journal-filterbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 24px 28px 24px !important;
  }
  .fv-journal-page-grid {
    grid-template-columns: 1fr 1fr !important;
    padding: 0 28px 72px !important;
    gap: 24px !important;
  }
  .fv-journal-page-card-img { height: 200px !important; }
  .fv-journal-news { padding: 64px 28px !important; }
  .fv-journal-news-title { font-size: 32px !important; }
  .fv-journal-news .fv-capture-form { flex-wrap: wrap !important; }
  .fv-journal-news .fv-capture-input { width: 240px !important; }

  /* Blog post (page-journal-post.jsx). */
  .fv-blog-header { padding: 48px 28px 36px !important; }
  .fv-blog-title { font-size: 44px !important; }
  .fv-blog-dek { font-size: 20px !important; }
  .fv-blog-meta { flex-wrap: wrap !important; }
  .fv-blog-hero-wrap { padding: 0 28px 40px !important; }
  .fv-blog-hero-img { height: 320px !important; }
  .fv-blog-bodywrap {
    padding: 16px 28px 56px !important;
  }
  .fv-blog-h2 { font-size: 28px !important; }
  .fv-blog-h3 { font-size: 20px !important; }
  .fv-blog-p { font-size: 18px !important; }
  .fv-blog-list { font-size: 18px !important; }
  .fv-blog-pullquote {
    margin: 32px 0 !important;
    padding: 24px 0 !important;
    font-size: 22px !important;
  }
  .fv-blog-inline-img {
    margin: 24px 0 8px !important;
    width: 100% !important;
  }
  .fv-blog-inline-caption {
    margin: 0 0 24px !important;
    width: 100% !important;
  }
  .fv-blog-author-wrap { padding: 48px 28px !important; }
  .fv-blog-author-card {
    grid-template-columns: 1fr !important;
    text-align: left !important;
    gap: 20px !important;
  }
  .fv-blog-author-avatar { width: 88px !important; height: 88px !important; }
  .fv-blog-related { padding: 64px 28px 28px !important; }
  .fv-blog-related-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 28px !important;
  }
  .fv-blog-related-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .fv-blog-related-img { height: 200px !important; }

  /* 404 page. */
  .fv-404-main { padding: 56px 28px !important; }
  .fv-404-title { font-size: 56px !important; }
  .fv-404-body { font-size: 19px !important; }

  /* Newsletter page (page-newsletter.jsx). */
  .fv-news-hero { padding: 64px 28px 48px !important; }
  .fv-news-h1 { font-size: 60px !important; }
  .fv-news-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
}

/* ===========================================================
 * 600px: tighten further, stack remaining two-column areas.
 * =========================================================== */
@media (max-width: 600px) {

  /* Nav: stack the row into two lines, hide phrase already. */
  .fv-nav { padding: 14px 18px !important; gap: 12px !important; }
  .fv-nav-left { gap: 14px !important; }
  .fv-nav-link { font-size: 13px !important; }
  .fv-nav-right { width: 100% !important; justify-content: flex-end !important; }
  .fv-nav-logo { width: 32px !important; height: 32px !important; }

  /* Footer: 1-col. */
  .fv-footer-wrap { padding: 56px 18px 28px !important; }
  .fv-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .fv-footer-fine-right { flex-wrap: wrap !important; justify-content: center !important; }

  /* Hero. */
  .fv-hero { padding: 40px 18px 48px !important; gap: 36px !important; }
  .fv-hero-h1 { font-size: 40px !important; line-height: 1.05 !important; }
  .fv-hero-sub { font-size: 17px !important; margin: 28px 0 32px !important; }
  .fv-hero-cta-row { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .fv-hero-cta-primary { width: 100% !important; text-align: center !important; }
  .fv-hero-card-meta { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* "Why small". */
  .fv-why-strip { padding: 48px 18px !important; }
  .fv-why-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .fv-why-num { font-size: 40px !important; }

  /* Voices. */
  .fv-voices-section { padding: 56px 18px !important; }
  .fv-voices-title { font-size: 28px !important; }
  .fv-voice-quote { font-size: 20px !important; }

  /* Journal homepage section. */
  .fv-journal-section { padding: 56px 18px !important; }
  .fv-journal-title { font-size: 28px !important; }
  .fv-journal-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Podcast strip. */
  .fv-pod-section { padding: 56px 18px !important; gap: 36px !important; }
  .fv-pod-title { font-size: 28px !important; }
  .fv-pod-card { padding: 20px !important; }
  .fv-pod-ep-row { grid-template-columns: 1fr !important; gap: 4px !important; padding: 12px 0 !important; }

  /* CTA banner. */
  .fv-banner-section { padding: 56px 18px !important; }
  .fv-banner-text { font-size: 32px !important; line-height: 1.1 !important; margin-bottom: 28px !important; }
  .fv-banner-cta { padding: 16px 32px !important; font-size: 15px !important; width: 100% !important; text-align: center !important; }

  /* Gatherings. */
  .fv-gather-hero { padding: 48px 18px 36px !important; }
  .fv-gather-h1 { font-size: 44px !important; }
  .fv-gather-sub { font-size: 17px !important; }
  .fv-gather-featured { margin: 24px 18px 56px !important; }
  .fv-gather-feat-body { padding: 28px 20px !important; }
  .fv-gather-feat-title { font-size: 32px !important; }
  .fv-gather-feat-meta { grid-template-columns: 1fr !important; gap: 12px !important; }
  .fv-gather-feat-cta { width: 100% !important; text-align: center !important; }
  .fv-gather-year-wrap { padding: 48px 18px !important; }
  .fv-gather-year-title { font-size: 32px !important; }
  .fv-gather-how-wrap { padding: 56px 18px !important; }
  .fv-gather-how-grid { grid-template-columns: 1fr !important; }
  .fv-gather-how-title { font-size: 32px !important; }
  .fv-gather-faq-title { font-size: 28px !important; }

  /* Podcast page. */
  .fv-pod-page-hero { padding: 48px 18px 24px !important; }
  .fv-pod-page-h1 { font-size: 44px !important; }
  .fv-pod-page-sub { font-size: 17px !important; }
  .fv-pod-feat { margin: 32px 18px 56px !important; }
  .fv-pod-feat-left { padding: 28px 20px !important; }
  .fv-pod-feat-num { font-size: 72px !important; }
  .fv-pod-feat-body { padding: 28px 20px !important; }
  .fv-pod-feat-title { font-size: 28px !important; }
  .fv-pod-grid-header { padding: 0 18px 18px !important; }
  .fv-pod-grid { padding: 0 18px 24px !important; }
  .fv-pod-card { grid-template-columns: 88px 1fr !important; padding: 18px !important; gap: 14px !important; }
  .fv-pod-num-block { padding: 8px 6px !important; }

  /* Community. */
  .fv-comm-hero { padding: 48px 18px 40px !important; }
  .fv-comm-h1 { font-size: 44px !important; }
  .fv-comm-sub { font-size: 17px !important; }
  .fv-comm-cta-primary { width: 100% !important; text-align: center !important; }
  .fv-comm-stats { grid-template-columns: 1fr !important; }
  .fv-comm-stat-cell {
    border-right: none !important;
    border-bottom: 1px solid rgba(11,42,64,0.12) !important;
    padding: 28px 18px !important;
  }
  .fv-comm-stat-cell:last-child { border-bottom: none !important; }
  .fv-comm-stat-num { font-size: 40px !important; }
  .fv-comm-pillars { padding: 56px 18px 40px !important; }
  .fv-comm-pillar-title { font-size: 32px !important; }
  .fv-comm-audience { padding: 56px 18px !important; }
  .fv-comm-audience-title { font-size: 26px !important; }
  .fv-comm-aud-item { font-size: 17px !important; }
  .fv-comm-voices { padding: 56px 18px !important; }
  .fv-comm-voices-title { font-size: 28px !important; }
  .fv-comm-voice-card { padding: 24px !important; }
  .fv-comm-voice-quote { font-size: 18px !important; }
  .fv-comm-banner { padding: 56px 18px !important; }
  .fv-comm-banner-text { font-size: 32px !important; }

  /* Journal index. */
  .fv-journal-page-hero { padding: 48px 18px 24px !important; }
  .fv-journal-page-h1 { font-size: 44px !important; }
  .fv-journal-page-sub { font-size: 17px !important; }
  .fv-journal-featured-wrap { padding: 16px 18px 56px !important; }
  .fv-journal-featured-img { height: 220px !important; }
  .fv-journal-featured-title { font-size: 28px !important; }
  .fv-journal-page-grid {
    grid-template-columns: 1fr !important;
    padding: 0 18px 56px !important;
  }
  .fv-journal-news { padding: 56px 18px !important; }
  .fv-journal-news-title { font-size: 26px !important; }
  .fv-journal-news .fv-capture-form {
    flex-direction: column !important;
    width: 100% !important;
    border-radius: 12px !important;
    padding: 10px !important;
  }
  .fv-journal-news .fv-capture-input { width: 100% !important; padding: 10px 14px !important; }
  .fv-journal-news .fv-capture-btn { width: 100% !important; }

  /* Blog post. */
  .fv-blog-header { padding: 36px 18px 28px !important; }
  .fv-blog-title { font-size: 34px !important; }
  .fv-blog-dek { font-size: 18px !important; }
  .fv-blog-hero-wrap { padding: 0 18px 32px !important; }
  .fv-blog-hero-img { height: 220px !important; }
  .fv-blog-bodywrap { padding: 8px 18px 48px !important; }
  .fv-blog-p { font-size: 17px !important; }
  .fv-blog-h2 { font-size: 24px !important; }
  .fv-blog-pullquote { font-size: 19px !important; }
  .fv-blog-author-wrap { padding: 40px 18px !important; }
  .fv-blog-related { padding: 48px 18px 24px !important; }

  /* 404. */
  .fv-404-main { padding: 40px 18px !important; }
  .fv-404-title { font-size: 44px !important; }
  .fv-404-body { font-size: 17px !important; }

  /* Get Involved. */
  .fv-inv-hero { padding: 48px 18px 24px !important; }
  .fv-inv-h1 { font-size: 44px !important; }
  .fv-inv-sub { font-size: 17px !important; }
  .fv-inv-section { padding: 48px 18px !important; }
  .fv-inv-sec-title { font-size: 30px !important; }
  .fv-inv-split {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .fv-inv-input { font-size: 16px !important; } /* >=16px avoids iOS zoom-on-focus */

  /* Newsletter page (page-newsletter.jsx). */
  .fv-news-hero { padding: 48px 18px 36px !important; }
  .fv-news-h1 { font-size: 42px !important; }
  .fv-news-sub { font-size: 17px !important; }
  .fv-news-expect { padding: 56px 18px !important; }
  .fv-news-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .fv-news-hero .fv-capture-form {
    flex-direction: column !important;
    width: 100% !important;
    border-radius: 14px !important;
    padding: 8px !important;
  }
  .fv-news-hero .fv-capture-input { width: 100% !important; }
  .fv-news-hero .fv-capture-btn { width: 100% !important; }

  /* All email-capture inputs: >=16px avoids iOS zoom-on-focus. */
  .fv-capture-input { font-size: 16px !important; }
}

/* ----------------------------------------------------------------------
   coding_standard.md 5.4 -- touch targets: every interactive element is at
   least 44x44px on mobile (Apple HIG / WCAG). Inline styles win, so these
   use !important. Applies to all touch-width viewports (<=900px).
   ---------------------------------------------------------------------- */
@media (max-width: 900px) {
  .fv-nav-link,
  .fv-nav-cta,
  .fv-comm-cta-primary,
  .fv-banner-cta,
  .fv-gather-feat-cta,
  .fv-gather-row-cta,
  .fv-inv-support-cta,
  .fv-inv-submit,
  .fv-capture-btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    touch-action: manipulation !important;
  }
  /* Nav links have no vertical padding by default (~22px tall); pad to 44. */
  .fv-nav-link { padding-top: 11px !important; padding-bottom: 11px !important; }
  /* Footer column links (inline-styled, no class) -- target via the grid. */
  .fv-footer-grid a {
    min-height: 44px !important;
    align-items: center !important;
    box-sizing: border-box !important;
    touch-action: manipulation !important;
  }
}