/* sermons.css
 *
 * The sermon archive at /sermons/. It leans on parish-life.css for the filter
 * buttons and the small-caps date line, and on site.css for the click-to-play
 * video frame, so the page reads as part of the same family.
 */
.sm-tools { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: end; margin: 0 0 6px; }
.sm-search { flex: 1 1 280px; max-width: 420px; }
.sm-search label { display: block; font-family: var(--body); font-weight: 700; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--soft); margin: 0 0 6px; }
.sm-search input { width: 100%; font: inherit; font-size: 1rem; padding: 11px 14px; color: var(--ink);
  background: #fff; border: 1px solid var(--rule); border-radius: 2px; }
.sm-search input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.sm-tools .pl-filter { margin: 0; }
.sm-tools .pl-count { margin: 0; flex-basis: 100%; }

.sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 46px 34px; margin: 34px 0 10px; }
.sm-item[hidden] { display: none; }
.sm-item .video-frame { max-width: 100%; margin: 0 0 16px; }
.sm-item .pl-meta { margin: 0 0 .5em; }
.sm-item h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.45rem, 2.4vw, 1.75rem);
  line-height: 1.16; color: var(--blue); margin: 0 0 .35em; text-wrap: balance; }
.sm-by { margin: 0 0 .3em; color: var(--ink); font-size: 1rem; }
.sm-alt { margin: 0; font-size: .9rem; }
.sm-alt a { color: var(--soft); }
.sm-none { margin: 30px 0; color: var(--soft); }
.sm-more { margin: 40px 0 0; max-width: 62ch; color: var(--soft); font-size: 1rem; }