/* ============================================================
   Wellspring — Responsive Styles
   ============================================================ */

/* ── Large Desktop (1200px+) ────────────────────────────────── */
@media (min-width: 1201px) {
  .main-nav__list a { font-size: .88rem; padding: .4rem .75rem; }
}

/* ── Medium Desktop (992px–1200px) ─────────────────────────── */
@media (max-width: 1200px) {
  :root { --max-width: 960px; }

  .header__org-name { font-size: .95rem; }
  .main-nav__list a { font-size: .78rem; padding: .35rem .55rem; }

  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer__grid > *:last-child { grid-column: 1 / -1; }

  .stats-bar__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tablet (768px–992px) ───────────────────────────────────── */
@media (max-width: 992px) {

  .section { padding: 4rem 0; }
  .section--lg { padding: 5rem 0; }

  .grid-2  { grid-template-columns: 1fr; gap: 2rem; }
  .grid-3  { grid-template-columns: repeat(2, 1fr); }
  .grid-4  { grid-template-columns: repeat(2, 1fr); }

  .content-block { grid-template-columns: 1fr; gap: 2.5rem; }
  .content-block--reverse .content-block__image { order: 0; }
  .content-block--reverse .content-block__text  { order: 0; }

  .values-grid  { grid-template-columns: repeat(2, 1fr); }
  .team-grid    { grid-template-columns: repeat(2, 1fr); }

  .hero { min-height: 75vh; }
  .page-hero { height: 300px; }

  .mission-strip__inner { flex-direction: column; text-align: center; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; max-width: 100%; }
}

/* ── Mobile Navigation ──────────────────────────────────────── */
@media (max-width: 768px) {

  /* Show hamburger, hide desktop nav */
  .nav-toggle { display: flex; }

  .main-nav {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--white);
    box-shadow: var(--shadow-md);
    transform: translateY(-110%);
    transition: transform .3s ease, opacity .3s ease;
    opacity: 0;
    z-index: 999;
    pointer-events: none;
    border-top: 1px solid var(--border);
  }

  .main-nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  .main-nav__list {
    flex-direction: column;
    gap: 0;
    padding: 1rem 0;
    white-space: normal;
  }

  .main-nav__list li { width: 100%; }

  .main-nav__list a {
    padding: .85rem 1.75rem;
    border-radius: 0;
    font-size: .95rem;
    border-bottom: 1px solid var(--border);
    display: block;
  }

  .nav-cta a {
    margin: .5rem 1.75rem;
    border-radius: var(--radius) !important;
    text-align: center;
    padding: .85rem 1.75rem !important;
  }

  /* Layout */
  .container { padding: 0 1.25rem; }
  .section { padding: 3rem 0; }

  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }

  .hero { min-height: 90vh; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; text-align: center; }

  .page-hero { height: 240px; }
  .page-hero__content { padding-bottom: 1.75rem; }

  .stats-bar__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .stat__number { font-size: 2.25rem; }

  .values-grid { grid-template-columns: 1fr; }
  .team-grid   { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__brand { grid-column: auto; }

  .event-card { flex-direction: column; }
  .event-card__date { padding: 1rem; flex-direction: row; justify-content: flex-start; gap: .75rem; min-width: auto; }

  .content-block__image img { height: 260px; }

  .scripture-block blockquote { font-size: 1.2rem; }

  .cta-section__actions { flex-direction: column; align-items: center; }
  .cta-section__actions .btn { width: 100%; max-width: 320px; }

  .timeline::before { left: 22px; }
  .timeline__dot { width: 44px; height: 44px; font-size: .7rem; }
}

/* ── Small Mobile (< 400px) ─────────────────────────────────── */
@media (max-width: 400px) {
  .container { padding: 0 1rem; }
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.5rem; }
  .hero__desc { font-size: 1rem; }
  .header__org-name { font-size: .85rem; }
}