/* ============================================================================
   Sprout — children's, Sunday school and family ministry.
   ----------------------------------------------------------------------------
   The reader is a parent, not a four-year-old, and a parent's first question
   about a children's group is not about the church: it is whether their child
   will be safe. So the safeguarding block here is a headline section with the
   checks named and dated, not a policy link in the footer — and everything
   else is arranged around a parent standing in a doorway deciding whether to
   come in: what happens, who runs it, what age, how long, what it costs.

   Warm and rounded without being childish. Crayon colours and bubble letters
   would be designing for the child, which is the mistake this template exists
   to avoid — the child is not the one reading it.

   Palette matches the `sprout` row in ministry_templates.
   ========================================================================== */

.demo-body--sprout {
  --paper: #fffbf4;
  --paper-2: #fdefe0;
  --clay: #b4451f;        /* 5.2:1 on the paper */
  --clay-2: #8f3617;
  --leaf: #3f6b4a;        /* 5.6:1 on the paper */
  --ink: #26221d;
  --ink-soft: #5a524a;    /* 6.9:1 on the paper */
  --line: rgba(38, 34, 29, 0.12);

  background: var(--paper);
  color: var(--ink);
  font-family: "Nunito", -apple-system, "Segoe UI", "PingFang SC", "Yuanti SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Source Han Sans SC", sans-serif;
  font-size: 17px;
  line-height: 1.75;
}

.sp-shell { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem); }

h1, h2, h3 { font-weight: 800; line-height: 1.2; }

.sp-tag {
  display: inline-flex; align-items: center;
  margin-bottom: 0.9rem; padding: 0.32rem 0.9rem;
  border-radius: 999px; background: var(--paper-2);
  color: var(--clay); font-size: 0.75rem; font-weight: 800;
}
.sp-tag--light { background: #fff; color: var(--clay-2); }

.sp-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0.55rem 1.7rem;
  border: 2px solid var(--clay); border-radius: 999px;
  background: var(--clay); color: #fff;
  font-size: 0.96rem; font-weight: 800; text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.sp-button:hover { background: var(--clay-2); border-color: var(--clay-2); }
.sp-button--sm { min-height: 44px; padding: 0.35rem 1.2rem; font-size: 0.88rem; }
.sp-button--ghost { background: transparent; color: var(--clay); }
.sp-button--ghost:hover { background: rgba(180, 69, 31, 0.1); color: var(--clay); }
.sp-button--light { background: #fff; border-color: #fff; color: var(--clay-2); }

.sp-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.9rem; font-weight: 800; color: var(--clay);
  text-decoration: none; border-bottom: 2px solid rgba(180, 69, 31, 0.35);
}
.sp-link:hover { border-bottom-color: currentColor; }

/* ── Header ──────────────────────────────────────────────────────────────── */

.sp-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.sp-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 84px; }
.sp-brand { display: flex; align-items: center; gap: 0.65rem; min-height: 44px; text-decoration: none; color: inherit; }
.sp-brand svg { width: 40px; height: 40px; color: var(--leaf); flex: none; }
.sp-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.sp-brand__text strong { font-size: 1.28rem; font-weight: 800; }
.sp-brand__text span { font-size: 0.74rem; font-weight: 700; color: var(--ink-soft); }
.sp-nav { display: flex; gap: 1.4rem; margin-inline-start: auto; font-size: 0.93rem; font-weight: 700; }
.sp-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-soft); text-decoration: none; }
.sp-nav a:hover { color: var(--clay); }
@media (max-width: 900px) {
  .sp-header__inner { flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: space-between; }
  .sp-brand { flex: 1 0 100%; }
  .sp-nav { gap: 0.85rem; font-size: 0.87rem; flex-wrap: wrap; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.sp-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem); background: var(--paper-2); }
.sp-hero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 880px) { .sp-hero__inner { grid-template-columns: 1fr; } }
.sp-hero__title { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 1rem; }
.sp-hero__lede { color: var(--ink-soft); font-size: 1.05rem; }
.sp-hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }
.sp-hero__art { margin: 0; border-radius: 28px; overflow: hidden; }
.sp-hero__art img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }

/* ── Sections ────────────────────────────────────────────────────────────── */

.sp-section { padding-block: clamp(3rem, 7vw, 5rem); }
.sp-section--tint { background: var(--paper-2); }
.sp-head { max-width: 42rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.sp-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.sp-head__lede { margin-top: 0.8rem; color: var(--ink-soft); }

/* What happens, by age. The one table a parent reads. */
.sp-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: clamp(1rem, 2.5vw, 1.6rem); }
.sp-group { padding: 1.6rem 1.4rem; border-radius: 22px; background: var(--paper); box-shadow: 0 16px 34px -26px rgba(38, 34, 29, 0.5); }
.sp-section--tint .sp-group { background: var(--paper); }
.sp-group__age { display: inline-flex; align-items: center; padding: 0.28rem 0.85rem; margin-bottom: 0.9rem; border-radius: 999px; background: var(--paper-2); color: var(--clay); font-size: 0.78rem; font-weight: 800; }
.sp-group h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.sp-group__when { font-size: 0.86rem; font-weight: 700; color: var(--leaf); margin-bottom: 0.4rem; }
.sp-group p { font-size: 0.92rem; color: var(--ink-soft); }

/* ── Safety. Not a footer link. ───────────────────────────────────────────── */

.sp-safe { background: var(--leaf); color: #f2f7f3; padding-block: clamp(3rem, 7vw, 5rem); }
.sp-safe h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin-bottom: 0.8rem; }
.sp-safe__lede { max-width: 42rem; color: #e0efe5; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.sp-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); }
.sp-check { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0.8rem; align-items: start; }
.sp-check__mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; }
.sp-check__mark svg { width: 16px; height: 16px; }
.sp-check h3 { font-size: 1.02rem; margin-bottom: 0.2rem; }
.sp-check p { font-size: 0.9rem; color: #e0efe5; }
.sp-safe__foot { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* ── A session, with a player: the story from last Sunday ───────────────── */

.sp-story { display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; padding: clamp(1.1rem, 2.5vw, 1.75rem); border-radius: 24px; background: var(--paper); box-shadow: 0 22px 44px -30px rgba(38, 34, 29, 0.45); }
@media (max-width: 800px) { .sp-story { grid-template-columns: 1fr; } }
.sp-story__art { position: relative; margin: 0; border-radius: 18px; overflow: hidden; }
.sp-story__art img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sp-story__pill { position: absolute; inset-block-start: 0.7rem; inset-inline-start: 0.7rem; padding: 0.28rem 0.8rem; border-radius: 999px; background: var(--paper); color: var(--clay); font-size: 0.72rem; font-weight: 800; }
.sp-story h3 { font-size: clamp(1.3rem, 2.7vw, 1.85rem); margin-bottom: 0.35rem; }
.sp-story__meta { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 1.1rem; }
.sp-play { display: flex; align-items: center; gap: 0.9rem; }
.sp-play__btn { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; flex: none; border-radius: 50%; background: var(--clay); color: #fff; text-decoration: none; transition: transform 0.2s ease; }
.sp-play__btn:hover { transform: scale(1.06); }
.sp-play__btn svg { width: 16px; height: 16px; margin-inline-start: 3px; }
.sp-play__rail { flex: 1; min-width: 0; }
.sp-play__bar { position: relative; height: 5px; border-radius: 999px; background: rgba(180, 69, 31, 0.2); overflow: hidden; }
.sp-play__bar span { position: absolute; inset: 0 auto 0 0; width: 52%; background: var(--clay); }
.sp-play__time { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.76rem; color: var(--ink-soft); }
.sp-story__links { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1rem; }

/* Dates, leaders, finding the door */
.sp-dates { display: grid; gap: 0; border-top: 1px solid var(--line); }
.sp-dates li { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; gap: clamp(1rem, 3vw, 2rem); align-items: center; padding-block: 1.3rem; border-bottom: 1px solid var(--line); }
.sp-dates__d { text-align: center; padding: 0.5rem 0.3rem; border-radius: 16px; background: var(--paper-2); line-height: 1.05; }
.sp-dates__d b { display: block; font-size: 1.4rem; font-weight: 800; color: var(--ink); }
.sp-dates__d span { display: block; font-size: 0.66rem; font-weight: 800; color: var(--clay); }
.sp-dates h3 { font-size: 1.1rem; margin-bottom: 0.15rem; }
.sp-dates__note { font-size: 0.88rem; color: var(--ink-soft); }
@media (max-width: 700px) { .sp-dates li { grid-template-columns: 4.4rem minmax(0, 1fr); } }

.sp-leads { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.sp-leads__d { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: 0.8rem; border-radius: 50%; background: var(--paper-2); font-size: 1.4rem; font-weight: 800; color: var(--clay); }
.sp-leads h3 { font-size: 1.05rem; margin-bottom: 0.15rem; }
.sp-leads__role { font-size: 0.74rem; font-weight: 800; color: var(--clay); margin-bottom: 0.4rem; }
.sp-leads p { font-size: 0.9rem; color: var(--ink-soft); }

.sp-find { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 860px) { .sp-find { grid-template-columns: 1fr; } }
.sp-map { border-radius: 24px; overflow: hidden; background: var(--paper-2); }
.sp-map svg { display: block; width: 100%; height: auto; }
.sp-find dl { display: grid; gap: 1.1rem; margin: 0; }
.sp-find dt { font-size: 0.76rem; font-weight: 800; color: var(--clay); margin-bottom: 0.2rem; }
.sp-find dd { margin: 0; color: var(--ink-soft); }

/* ── Giving ──────────────────────────────────────────────────────────────── */

.sp-give { padding-block: clamp(3rem, 7vw, 5rem); background: var(--clay); color: #fff5ec; }
.sp-give__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 780px) { .sp-give__inner { grid-template-columns: 1fr; } }
.sp-give h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin-bottom: 0.8rem; }
/* :not(.sp-tag) because the label inside this band is also a <p>, and
   `.sp-give p` outweighs `.sp-tag--light` on specificity — so the white pill
   kept its white background and took the band's cream text colour with it.
   1.18:1, and invisible to anything except the contrast audit. */
.sp-give p:not(.sp-tag) { color: #fce9dd; }
.sp-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.1rem; }
.sp-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 4.6rem; padding: 0.4rem 1.1rem; border: 2px solid rgba(255, 245, 236, 0.42); border-radius: 999px; color: #fff5ec; font-size: 0.92rem; font-weight: 800; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; }
.sp-pill:hover, .sp-pill.is-on { background: #fff; border-color: #fff; color: var(--clay-2); }
.sp-give__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.sp-foot { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--paper-2); }
.sp-signup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: center; padding-bottom: clamp(2rem, 4vw, 3rem); margin-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
@media (max-width: 820px) { .sp-signup { grid-template-columns: 1fr; } }
.sp-signup h2 { font-size: clamp(1.35rem, 2.8vw, 1.9rem); margin-bottom: 0.4rem; }
.sp-signup p { color: var(--ink-soft); font-size: 0.92rem; }
.sp-form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sp-form input { flex: 1 1 13rem; min-height: 50px; padding: 0.5rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 0.95rem; font-family: inherit; }
.sp-form input:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; }
.sp-form__note { flex: 1 0 100%; font-size: 0.76rem; color: var(--ink-soft); }
.sp-foot__cols { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2rem; align-items: start; font-size: 0.92rem; color: var(--ink-soft); }
@media (max-width: 900px) { .sp-foot__cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } }
.sp-foot h3 { font-size: 0.78rem; font-weight: 800; color: var(--clay); margin-bottom: 0.55rem; }
.sp-foot ul { display: grid; gap: 0.35rem; }
.sp-foot li a { color: inherit; text-decoration: none; }
.sp-foot li a:hover { color: var(--clay); }
.sp-foot__name { display: flex; align-items: center; gap: 0.6rem; font-size: 1.12rem; font-weight: 800; color: var(--ink); margin-bottom: 0.7rem; }
.sp-foot__name svg { width: 32px; height: 32px; color: var(--leaf); flex: none; }
.sp-social { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.sp-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); color: var(--ink-soft); transition: background 0.2s ease, color 0.2s ease; }
.sp-social a:hover { background: var(--clay); color: #fff; }
.sp-social svg { width: 17px; height: 17px; }
.sp-foot__base { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--ink-soft); }
.sp-foot__base a { color: inherit; }

/* Measured, not guessed: #cfe0d5 on the leaf panel and #f5d9c8 on the clay
   band both came out at 4.1–4.48:1 — under the floor by a hair, which is
   exactly the kind of miss that ships without visual-check.py failing the run.
   The light tag was the same story: a 16% white wash over clay is not an
   opaque background, so the audit read it against the clay underneath — the
   same trap `.demo-cover` hit, one component down. Fully opaque now. */