/* ── Upcoming Sunday Message ──────────────────────────────────────────────────
   The homepage message block. Moved out of components.css when the message
   became editor-managed: the old comment there said "rewritten every week",
   which stopped being true the moment Rev. Ellen could post one from a form.

   The markup is now built by js/sunday-message-render.js from the record served
   at /api/sunday-message. The copy in index.html is a FALLBACK, not the source
   of truth — it renders identically and is what a visitor sees before the fetch
   returns, if the fetch fails, or if nothing is published.

   Structure (both the fallback and the rendered version produce this):
     section.sunday-message > .container
       .section-header        (heading + gold divider, centred)
       .content-split#sunday-message-body
         .content-split__text
           span.eyebrow       (the date)
           h3.sunday-message__title
           p.lead             (the body copy)
           .sunday-message__block > span.eyebrow + blockquote.sunday-message__scripture
           .sunday-message__block > span.eyebrow + p.lead.sunday-message__affirmation
         .content-split__media > img   (portrait 9:16)

   The layout borrows .content-split from components.css, so it collapses to a
   single column below 900px with the image dropping beneath the text. */

/* Tuck the split up under the gold divider instead of leaving the full header gap. */
.sunday-message .section-header {
  margin-bottom: 0;
}

.sunday-message__title {
  margin-bottom: var(--space-6);
}

/* 65/35 split rather than the even columns .content-split defaults to — the text
   carries far more weight than the image. fr units (not percentages) so the
   grid gap is subtracted before the ratio is applied. The text starts at the top
   of the row; the 9:16 image is centred against it. */
.sunday-message .content-split {
  grid-template-columns: 65fr 35fr;
  align-items: start;
}

.sunday-message .content-split__media {
  align-self: center;
}

/* Reserve the image's shape before it loads AND before the fetch swaps the
   block. Without this the whole page shifts under the reader when a message of
   a different length replaces the fallback — the swap happens after first
   paint, so it is a visible jump rather than a layout choice. */
.sunday-message .content-split__media img {
  aspect-ratio: 9 / 16;
  width: 100%;
  height: auto;
  display: block;
}

.sunday-message__block {
  margin-top: var(--space-8);
}

.sunday-message__scripture {
  margin: 0;
  border-left: 3px solid var(--color-gold);
  padding-left: var(--space-6);
}

.sunday-message__scripture p {
  font-style: italic;
  margin-bottom: var(--space-2);
}

.sunday-message__scripture cite {
  font-style: normal;
  font-weight: 600;
  color: var(--color-text-muted);
}

.sunday-message__affirmation {
  font-style: italic;
  margin-bottom: 0;
}

/* Paragraph spacing inside the rendered body. The editor writes blank lines;
   the renderer turns each block into its own <p>, so they need separating. The
   fallback in index.html is a single <p> and is unaffected. */
.sunday-message__body p {
  margin-bottom: var(--space-4);
}

.sunday-message__body p:last-child {
  margin-bottom: 0;
}