/* Shared video feature: the click-to-play lightbox overlay (used on
   /sermons/ and /resources/) plus the thumbnail trigger styling for the
   sermons table. The card-grid thumbnail (/sermons/) is styled in
   sermons.css; the generic overlay below was moved here from sermons.css
   so /resources/ can reuse it without pulling in the grid styles. */

/* ---- Sermons table: clickable video thumbnail (first column) ---- */
.sermons-table th:first-child,
.sermons-table td:first-child {
  width: 132px;
}

.sermon-thumb {
  position: relative;
  display: block;
  width: 120px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}

.sermon-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;
}

/* The table sits inside .prose, whose links are underlined and brand-coloured.
   Reset that for the thumbnail link (higher specificity than `.prose a`). */
.prose a.sermon-thumb,
.prose a.sermon-thumb:hover,
.prose a.sermon-thumb:focus-visible {
  text-decoration: none;
}

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

.sermon-thumb:hover .sermon-thumb__play,
.sermon-thumb:focus-visible .sermon-thumb__play {
  opacity: 1;
  transform: scale(1.08);
}

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

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

/* Visually-hidden label for the thumbnail column header. */
.sermons-table__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Video lightbox overlay ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.lightbox__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(96vw, 1000px);
}

.lightbox__player {
  flex: 1 1 auto;
  min-width: 0;
}

.lightbox__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}

.lightbox__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.lightbox__title {
  margin: 10px 0 0;
  text-align: center;
  color: #fff;
  font-size: 15px;
}

.lightbox__close,
.lightbox__nav {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.lightbox__nav {
  width: 44px;
  height: 44px;
}

.lightbox__close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 40px;
  height: 40px;
}

.lightbox__close:hover,
.lightbox__nav:hover,
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  background: var(--color-brand);
  outline: none;
}

.lightbox__nav[disabled] {
  opacity: 0.3;
  cursor: default;
}

.lightbox__nav[disabled]:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Lock the page behind the overlay. */
body.has-lightbox {
  overflow: hidden;
}

@media (max-width: 560px) {
  .lightbox {
    padding: 16px;
  }
  .lightbox__dialog {
    gap: 4px;
  }
  .lightbox__nav {
    width: 36px;
    height: 36px;
  }
  .lightbox__close {
    top: -46px;
  }
}

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