/* ===================================================================
   SERMONS — /sermons/ and /sermons/<slug>/
   Page-specific only. The cards reuse .msg-grid / .msg-card from
   watch.css so the index, the /watch/ archive and the "More Sermons"
   row are one component rather than three lookalikes.
   =================================================================== */

/* --- index hero: close the gap above the grid ----------------------
   Three gaps stacked between the Subscribe button and the first card, and
   at desktop width they came to ~212px of empty cream:

     .head-block margin-bottom   52px   <- separates it from content BELOW it
                                           inside the same section. Here it is
                                           the last thing in the hero, so the
                                           margin has nothing to separate.
     .hero padding-bottom        56px
     .section padding-top       104px

   Cut to 0 + 32 + 48 = 80px. Scoped rather than changed globally: every
   other hero on the site has the same stack, and retuning all of them is a
   bigger decision than this page. sermons.css also loads on
   /sermons/<slug>/, which is why these hang off classes the index sets
   rather than off .hero and .section directly. */
.hero--tight { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.hero--tight .head-block { margin-bottom: 0; }
.sermon-index { padding-top: clamp(2rem, 4vw, 3rem); }

/* --- index cards -------------------------------------------------- */
/* The archive on /watch/ shows title + meta only. These cards also carry
   a short description, so they need the extra spacing. */
.sermon-card-desc {
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--slate);
}
.sermon-grid .event-link { display: inline-block; margin-top: 0.9rem; }

/* .msg-media::before in watch.css positions absolutely, so the anchor has
   to establish a containing block or the scrim escapes to the viewport. */
.sermon-media { position: relative; overflow: hidden; }

/* --- detail ------------------------------------------------------- */
.sermon-detail { padding-top: clamp(2rem, 4vw, 3rem); }
/* One 62rem column for the whole page body — back link, player and text all
   share it, which is what puts them on a single left edge. */
.sermon-detail > .container > * { max-width: 62rem; margin-inline: auto; }

/* Wrapper carries the 62rem column so the link itself stays inline-block and
   only the words are clickable — a full-width anchor strip would be a big
   invisible hit area. */
.sermon-col { max-width: 62rem; margin-inline: auto; }
.sermon-back {
  display: inline-block;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none; color: var(--slate);
}
.sermon-back:hover { color: var(--red); }

/* 16:9 responsive player. aspect-ratio on the wrapper plus an absolutely
   filled iframe keeps the ratio without the old padding-top hack. */
.sermon-player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--navy);
  max-width: 62rem;
  margin-inline: auto;
}
.sermon-player iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}
/* No video attached yet: the fallback photo shows with the reason on it. */
.sermon-player--empty {
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
}
.sermon-player--empty .review-flag-block {
  max-width: 34rem;
  margin: 0;
}

/* Everything under the player shares the player's exact width and left edge,
   so the meta line, title, copy and buttons all start on the same vertical
   line as the video rather than floating in a narrower centred column. The
   copy itself is measure-limited separately below. */
.sermon-detail-body {
  max-width: 62rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  text-align: left;
}
.sermon-detail-meta {
  margin: 0;
  font-size: 0.9rem; color: var(--slate);
}
.sermon-detail-title {
  margin: 0.75rem 0 0;
  /* Sermon titles run long and are often two clauses, so this sits a step
     below .head--xl and stays sentence-cased rather than uppercase. */
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.sermon-detail-title + .msg-series { margin-top: 0.9rem; }

.sermon-detail-copy {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  /* The block is 62rem wide to match the player, but prose at that width is
     unreadable — so the paragraphs keep their own measure and stay left. */
  max-width: 46rem;
}
.sermon-detail-copy p {
  margin: 0 0 1.1rem;
  font-size: 1.05rem; line-height: 1.8; color: var(--slate);
}
.sermon-detail-copy p:last-child { margin-bottom: 0; }
/* .cta-row is centred globally; on this page the buttons line up under the
   copy, on the player's left edge. */
.sermon-detail-body .cta-row {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  justify-content: flex-start;
}

.sermon-more-cta {
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

/* Grid columns and their breakpoints come from .msg-grid in style.css. */

/* Shown only when the archive comes back empty — see sermons.njk. Not an
   error page: the sermons still exist on YouTube, so it points there. */
.sermon-empty {
  max-width: 34rem; margin: 0 auto; text-align: center;
  font-size: 1.02rem; line-height: 1.75; color: var(--slate);
}