/* /sermons/ page: the filter bar and the card grid. (The video lightbox
   overlay lives in lightbox.css; the .sermon-series and
   .scripture-ref--icon links are styled in base.css.)
   Loaded only on /sermons/ via the extra_css block in templates/sermons.html. */

/* ---- Filter bar ----
   Ships with [hidden] in the markup; sermons.js reveals it, so visitors
   without JavaScript never meet dead controls. */
.sermons-filter {
  margin: 20px 0 12px;
}

.sermons-filter__row {
  margin: 0 0 12px;
}

.sermons-filter__label {
  display: block;
  font-size: 12px;
  font-weight: var(--weight-bold);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-heading);
}

.sermons-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* The .filter-chip appearance itself lives in base.css. */

.sermons-filter input[type='search'] {
  width: 100%;
  max-width: 480px;
  padding: 10px 14px;
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  font: inherit;
  /* 16px minimum: anything smaller makes iOS Safari zoom the whole
     page when the field is focused. */
  font-size: 16px;
  background: #fff;
  color: var(--color-text);
}

.sermons-filter input[type='search']:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-color: var(--color-brand);
}

.sermons-filter__status {
  margin: 8px 0 0;
  min-height: 1.2em;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.sermons-filter__count {
  font-size: 13px;
  color: #666;
}

.sermons-filter__clear {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--color-brand);
  text-decoration: underline;
  cursor: pointer;
}

.sermons-filter__clear:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.sermons-filter__empty {
  margin: 16px 0 0;
  font-size: 14px;
  color: #666;
  font-style: italic;
}

/* ---- Card grid ---- */
.sermons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin: 20px 0 8px;
}

/* The card is an <article>: the play link wraps the thumbnail and title,
   and the meta line below carries its own links (the passage filters the
   grid, the book icon opens Bible Gateway). */
.sermon-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.sermon-card[hidden] {
  display: none;
}

/* The play link sits inside .prose, whose links are underlined and
   brand-coloured. Reset that; the title sets its own colour. Higher
   specificity than `.prose a` so it wins. */
.prose a.sermon-card__link,
.prose a.sermon-card__link:hover,
.prose a.sermon-card__link:focus-visible {
  display: block;
  text-decoration: none;
  color: var(--color-text);
}

.sermon-card:hover,
.sermon-card:focus-within {
  border-color: var(--color-brand);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.sermon-card__link:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
}

.sermon-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.sermon-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  /* hqdefault is 4:3 with letterbox bars; cover crops them to a clean 16:9 */
  object-fit: cover;
}

.sermon-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.sermon-card:hover .sermon-card__play,
.sermon-card:focus-within .sermon-card__play {
  opacity: 1;
  transform: scale(1.08);
}

.sermon-card__play svg {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

.sermon-card__title {
  display: block;
  padding: 12px 14px 0;
  font-weight: var(--weight-bold);
  line-height: 1.25;
  color: var(--color-heading);
}

/* Meta foot: two fixed lines (series row, then byline) so every card in a
   row renders the same shape regardless of how long the text runs. */
.sermon-card__meta {
  margin: auto 0 0; /* pins the meta foot to the card bottom in equal-height rows */
  padding: 6px 10px 12px 14px;
  font-size: 14px;
  line-height: 1.45;
  color: #555;
}

/* Series row: passage link + Bible Gateway icon, share button held to the
   right edge. Centring the row keeps the icon and button on the passage's
   line instead of hanging below it. */
/* Element-qualified so these outrank `.prose p`'s bottom margin. */
p.sermon-card__series-row {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sermon-card__series-text {
  flex: 1;
  min-width: 0;
}

/* On cards the Bible Gateway icon sits beside the share button, so it
   dresses like it: quiet grey that warms to brand red on hover/focus.
   The passage text stays the only red thing on the line, which keeps
   "red text filters, grey buttons open elsewhere" legible at a glance.
   Prose-scoped to outrank the base `a` colour. */
.prose .sermon-card__series-row a.scripture-ref--icon {
  color: #555;
  border-radius: 50%;
}

.prose .sermon-card__series-row a.scripture-ref--icon:hover,
.prose .sermon-card__series-row a.scripture-ref--icon:focus-visible {
  color: var(--color-brand);
  background: rgba(188, 20, 20, 0.08);
}

p.sermon-card__byline {
  margin: 2px 0 0;
  font-size: 13px;
  color: #666;
}

/* The date reads as one unit; a mid-date line break ("21 / June 2026")
   looks broken. */
.sermon-card__date {
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .sermon-card,
  .sermon-card__play {
    transition: none;
  }
}