/* ===================================================================
   NEXT STEPS — /next-steps/
   Page-specific components only. Everything structural (sections,
   heads, buttons, .about-pastor rows, .quick-grid, .loc-giving,
   .giving-cta) comes from style.css. Built on the existing tokens
   so this page reads as the same site. Containers 10px, buttons 6px.

   The one idea this page adds: the church's step headings are
   written in first person ("I want some people."). Those get
   .ns-said — sentence case instead of the site's uppercase — so
   they read as somebody speaking rather than as a banner. The
   body copy under each is a stack of one-sentence lines, set
   narrow in .ns-lines so the fragments look deliberate.
   =================================================================== */

/* --- stacked two-column rows -------------------------------------
   .about-pastor rows repeated in one section, with every second
   one flipped so the page alternates instead of marching down one
   side.                                                            */
.ns-rows { display: grid; gap: clamp(2.75rem, 6vw, 4.5rem); }

/* Flip only while .about-pastor is still two columns (it collapses
   at 48rem in style.css). Below that, image stays on top.          */
@media (min-width: 48.0625rem) {
  .ns-row--flip .about-pastor-media { order: 2; }
}

/* Anchor targets for the retired /jesus/, /baptism/, /groups/,
   /serve/, and /care/ routes — give the landing a little air.      */
.ns-step, #care { scroll-margin-top: clamp(1.5rem, 4vw, 3rem); }

/* --- first-person step heading ------------------------------------
   .head, minus the uppercase. The sentence case IS the point: these
   are the visitor's own words, not a section label. Mixed weight is
   kept (<strong> on the "I ..." clause) so it still belongs to the
   same heading family as the rest of the site.                     */
.ns-said {
  text-transform: none;
  font-size: clamp(1.5rem, 2.7vw, 2.2rem);
  line-height: 1.18;
  letter-spacing: 0;
}

/* --- fragment stack ------------------------------------------------
   Their copy is one sentence per line and should stay that way. A
   ~34rem measure keeps the short lines from looking like a
   paragraph that failed to justify.                                */
.ns-lines { max-width: 34rem; margin: 1.35rem 0 0; }
.ns-lines p {
  margin: 0 0 0.6rem;
  color: var(--slate);
  font-size: 1.05rem;
  line-height: 1.55;
}
.ns-lines p:last-child { margin-bottom: 0; }
.ns-lines--center { margin-inline: auto; text-align: center; }

/* style.css spaces .about-pastor-copy + .btn; .ns-lines breaks that
   adjacency, so restore the gap here. */
.ns-lines + .btn { margin-top: 1.75rem; }

/* on the dark closing CTA */
.ns-lines--light p { color: rgba(255, 255, 255, 0.9); }
.ns-lines--light + .btn { margin-top: 2.25rem; }

/* --- prayer and care ----------------------------------------------
   Centered, narrow, and deliberately without a photograph. This is
   the step someone reaches for on their worst day; a stock image of
   people laughing would be arguing with the copy.                  */
.ns-care { max-width: 46rem; margin-inline: auto; text-align: center; }
.ns-care .ns-lines { margin-top: 1.5rem; }

/* --- crisis line --------------------------------------------------
   Small, quiet, and below the asks on purpose.                     */
.ns-crisis {
  margin: clamp(1.75rem, 3.5vw, 2.75rem) auto 0;
  max-width: 46rem; text-align: center;
  font-size: 0.9rem; line-height: 1.75; color: var(--slate);
}
.ns-crisis a { color: var(--navy); }