/* Reuse the Closer Look shell unchanged; native sticky placement follows the
   landing page without image scaling, hover zoom, or scroll animation. */
.church-community-page .community-media .media-frame { aspect-ratio:var(--media-ratio,1); }
.church-community-page .community-media img { width:100%; height:100%; object-fit:contain; }
.church-community-page .community-diagram { width:100%; max-width:600px; }
.growth-kind h3 { font-family:var(--serif); color:var(--teal); font-size:25px; font-weight:400; line-height:1.3; margin:0 0 8px; }
.church-community-page .community-final .story-copy { text-align:center; }
/* Align to the start of the text so the image can hold throughout its section.
   Leave 38px below the header and below the artwork, even on short screens. */
@media(min-width:1001px) {
  .church-community-page .community-media {
    align-self:start;
    max-width:min(600px,calc((100svh - var(--header) - 76px) * var(--media-ratio,1)));
  }
}
/* Long-form copy and diagram labels need more room on tablets. A stacked image
   must scroll normally so it never covers the next section's text. */
@media(max-width:1000px) {
  .church-community-page .story-grid { grid-template-columns:1fr; }
  .church-community-page .story-copy { grid-row:1; }
  .church-community-page .community-media { position:relative; top:auto; max-width:600px; }
}

/* Illustrated bullets preserve the approved cycle copy and reading order. */
.church-community-page .cycle-points { list-style:none; padding:0; margin:30px 0; display:grid; gap:22px; }
.church-community-page .cycle-points li { display:grid; grid-template-columns:42px minmax(0,1fr); gap:16px; align-items:start; }
.church-community-page .cycle-points p { margin:0; }
.church-community-page .cycle-point-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:var(--teal); background:rgba(127,168,166,.18); }
.church-community-page .cycle-point-icon svg { display:block; width:28px; height:28px; }
.church-community-page .cycle-points li:nth-child(2) .cycle-point-icon { background:rgba(216,162,74,.18); }
.church-community-page .cycle-points li:nth-child(3) .cycle-point-icon { background:rgba(196,106,61,.13); }
@media(max-width:760px) {
  .church-community-page .cycle-points li { grid-template-columns:36px minmax(0,1fr); gap:12px; }
  .church-community-page .cycle-point-icon { width:36px; height:36px; }
  .church-community-page .cycle-point-icon svg { width:25px; height:25px; }
}