/* ===================================================================
   GIVE — /give/
   Page-specific components only. Everything here is built on the
   tokens already in style.css (--navy, --red, --slate, --cream,
   --line, --radius). Containers 10px, buttons inherit 6px.
   =================================================================== */

/* --- ways to give (3-up card grid) ------------------------------- */
.give-ways {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  list-style: none; margin: 0; padding: 0;
}
.give-way {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: clamp(1.35rem, 2.2vw, 1.9rem);
}
.give-way-title {
  margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 800;
  line-height: 1.25; color: var(--navy);
}
/* flex:1 lets the copy absorb the slack so the buttons line up along the
   bottom of the row even when one card runs a line longer */
.give-way-copy {
  flex: 1 1 auto;
  margin: 0.75rem 0 0; font-size: 0.98rem; line-height: 1.7; color: var(--slate);
}
.give-way-copy a { color: var(--red-ink); }
/* stands in for a missing detail (e.g. the text-to-give number) */
.give-way-note {
  margin: 1.25rem 0 0; font-size: 0.9rem; font-style: italic; color: var(--muted);
}
.give-way .btn { margin-top: 1.5rem; }

@media (max-width: 62rem) { .give-ways { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .give-ways { grid-template-columns: 1fr; } }

/* --- where it goes: photo strip ---------------------------------- */
.give-photos {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.give-photo { aspect-ratio: 4 / 3; border-radius: 10px; }
@media (max-width: 48rem) {
  .give-photos { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
}

/* --- where it goes: the church's fragment stack -------------------
   One sentence per line is the voice, not an accident. Narrow
   measure so the short lines read as deliberate rather than as
   wrapped prose. */
.give-impact {
  list-style: none; padding: 0;
  max-width: 34rem; margin: clamp(2.25rem, 4.5vw, 3.25rem) auto 0;
  display: flex; flex-direction: column; gap: 0.85rem;
}
.give-impact li {
  position: relative; padding-left: 1.65rem;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 300; line-height: 1.4; color: var(--navy);
}
.give-impact li::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: 0.7rem; height: 2px; background: var(--red);
}

.give-through {
  max-width: 42rem; margin: clamp(2rem, 4vw, 3rem) auto 0;
  text-align: center; font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 300; line-height: 1.35; color: var(--navy);
}
.give-through strong { font-weight: 800; }

/* --- financial transparency (open-request cards) ------------------
   White cards on the navy band; every answer slot is a bracketed
   request until the church supplies real content. */
.give-faq {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  list-style: none; margin: 0; padding: 0;
}
.give-faq > li {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: clamp(1.35rem, 2.2vw, 1.9rem);
}
.give-q {
  margin: 0; font-size: clamp(1.1rem, 1.7vw, 1.35rem); font-weight: 800;
  line-height: 1.25; color: var(--navy);
}
.give-a { margin: 0.85rem 0 0; font-size: 1rem; line-height: 1.7; color: var(--slate); }
.give-a a { color: var(--red-ink); }
@media (max-width: 48rem) { .give-faq { grid-template-columns: 1fr; } }

/* --- why we give -------------------------------------------------- */
/* Uses the shared .about-pastor two-column shape; the red rule and
   the larger lead are the only additions, to give the client's
   "Giving isn't a cover charge" line the weight it needs. */
.give-guest-body { border-left: 4px solid var(--red); padding-left: clamp(1.25rem, 2.5vw, 2rem); }
.give-guest-lead {
  margin: 1.1rem 0 0; font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.7; color: var(--ink);
}
.give-guest-copy { margin: 1.1rem 0 0; font-size: 1rem; line-height: 1.7; color: var(--slate); }
.give-guest-copy + .btn { margin-top: 1.75rem; }
/* matches the 48rem breakpoint where .about-pastor collapses to one column */
@media (max-width: 48rem) {
  .give-guest-body { border-left: none; border-top: 4px solid var(--red); padding-left: 0; padding-top: 1.5rem; }
}