/*
 * sermon_player.css — base styles for the shared playlist player.
 *
 * Loaded once per template layout, BEFORE template.css, so each template
 * can skin `.sermon-player` in its own stylesheet (and themes after that).
 * Everything here is structural (aspect ratios, grid, scroll, the play
 * facade) plus neutral, low-commitment color so it looks fine unstyled and
 * is trivial to override. Colors lean on `currentColor` / inherited type so
 * a skin only needs to set a few accents.
 *
 * Markup contract (templates/_shared/blocks/sermon_player.php):
 *   .sermon-player[data-sermon-player]
 *     .sermon-player__frame[data-sp-frame]      (16:9; holds poster, then iframe)
 *       .sermon-player__poster[data-sp-poster]  (facade — click to load iframe)
 *     .sermon-player__now                        (now-playing title + meta)
 *     .sermon-player__tabs                       (only when >1 playlist)
 *     .sermon-player__videos[data-pl-panel]      (one per playlist; grid of items)
 *       .sermon-player__item                     (thumb + title + date)
 *     .sermon-player__footer                     ("watch all" link)
 */

.sermon-player { width: 100%; }

/* ── Featured video / facade ─────────────────────────────────────────── */
.sermon-player__frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;          /* 16:9 */
  background: #000;
  overflow: hidden;
  border-radius: 6px;
  scroll-margin-top: 24px;          /* breathing room for scroll-to-player;
                                       a template with a sticky header can
                                       raise this in its own stylesheet */
}
.sermon-player__frame iframe,
.sermon-player__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.sermon-player__poster {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  background: #000;
}
.sermon-player__poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  transition: opacity 0.15s ease;
}
.sermon-player__poster:hover .sermon-player__poster-img { opacity: 0.68; }
.sermon-player__play {
  position: relative;
  z-index: 1;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  display: inline-block;
  transition: background 0.15s ease, transform 0.15s ease;
}
.sermon-player__play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--bg, #fff);
}
.sermon-player__poster:hover .sermon-player__play {
  background: var(--accent, var(--moment, #c42020));
  transform: scale(1.04);
}

/* ── Now playing ─────────────────────────────────────────────────────── */
.sermon-player__now { margin-top: 14px; }
.sermon-player__now-title { display: block; font-weight: 600; line-height: 1.35; }
.sermon-player__now-meta  { display: block; margin-top: 2px; font-size: 0.85em; opacity: 0.7; }
.sermon-player__now-meta:empty { display: none; }

/* Full description for the playing video (links open in a new tab). */
/* Toggle + collapsible, boxed description for the playing video. */
.sermon-player__desc-toggle {
  margin: 14px 20px 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.85em;
  color: var(--accent, var(--moment, currentColor));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  opacity: 0.9;
}
.sermon-player__desc-toggle[hidden] { display: none; }
.sermon-player__desc-toggle:hover { opacity: 1; }
.sermon-player__desc-toggle:hover .sermon-player__desc-toggle-label { text-decoration: underline; }
.sermon-player__desc-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.2s ease;
}
.sermon-player__desc-toggle[aria-expanded="true"] .sermon-player__desc-caret { transform: rotate(180deg); }

.sermon-player__now-desc-wrap {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}
.sermon-player__now-desc {
  margin: 12px 20px 0;
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,0.12);
  border-color: color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 10px;
  line-height: 1.6;
  font-size: 0.95em;
  opacity: 0.9;
  overflow-wrap: anywhere;
}
.sermon-player__now-desc a {
  color: var(--accent, var(--moment, #2a3441));
  text-decoration: underline;
}

/* ── Playlist tabs (only rendered when >1 playlist) ──────────────────── */
.sermon-player__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 24px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  border-bottom-color: color-mix(in srgb, currentColor 15%, transparent);
}
.sermon-player__tab {
  padding: 8px 14px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.9em;
  color: inherit;
  opacity: 0.6;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: opacity 0.12s ease;
}
.sermon-player__tab:hover { opacity: 0.9; }
.sermon-player__tab.is-active {
  opacity: 1;
  font-weight: 600;
  border-bottom-color: currentColor;
}

/* ── Intro paragraph (optional; edited in the side panel) ────────────── */
.sermon-player__intro {
  margin: 0 0 22px;
  /*max-width: 640px;*/
  line-height: 1.6;
  opacity: 0.85;
}
.sermon-player__intro:empty { display: none; }

/* ── Video list ──────────────────────────────────────────────────────
   A vertical list: thumbnail on the left, title + meta in the middle, and
   a theme-coloured play button on the right. (Was a thumbnail grid.) */
.sermon-player__videos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.sermon-player__videos[hidden] { display: none; }

.sermon-player__item {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  /* Derive chrome from the inherited text colour so the player adapts to
     whatever surface a template puts it on — a light page or a dark feature
     band (bold/garden/loft/modern). Falls back to the rgba above on browsers
     without color-mix. */
  border-color: color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
/* The `display: flex` above overrides the UA `[hidden]{display:none}` (author
   styles beat UA styles), so re-assert it — this is what the "Load more"
   reveal toggles via the hidden attribute. */
.sermon-player__item[hidden] { display: none; }
.sermon-player__item:hover {
  background: rgba(0,0,0,0.035);
  background: color-mix(in srgb, currentColor 5%, transparent);
  border-color: rgba(0,0,0,0.14);
  border-color: color-mix(in srgb, currentColor 18%, transparent);
}
.sermon-player__item.is-active {
  background: rgba(0,0,0,0.05);
  background: color-mix(in srgb, currentColor 8%, transparent);
  border-color: rgba(0,0,0,0.16);
  border-color: color-mix(in srgb, currentColor 22%, transparent);
}

/* Thumbnail (left) */
.sermon-player__thumb-wrap {
  position: relative;
  flex-shrink: 0;
  width: 168px;
  max-width: 38%;
  aspect-ratio: 16 / 9;
  background: #e9ecef;
  background: color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 5px;
  overflow: hidden;
  display: block;
}
@supports not (aspect-ratio: 1) {
  .sermon-player__thumb-wrap { height: 0; padding-bottom: 21.375%; } /* 38% * 9/16 */
}
.sermon-player__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}
.sermon-player__item:hover .sermon-player__thumb { transform: scale(1.04); }
.sermon-player__thumb-dur {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0,0,0,0.8);
  color: #fff;
  font-size: 0.72em;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* Title + meta (middle) */
.sermon-player__item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sermon-player__item-title {
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sermon-player__item-meta { font-size: 0.82em; opacity: 0.65; }
.sermon-player__item-desc {
  font-size: 0.82em;
  opacity: 0.72;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Play button (right) — theme colour. --accent (most templates) or
   --moment (atrium/gather/press/vault); triangle uses the page bg, which
   is light across all themes, as the contrast colour. */
.sermon-player__item-play {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent, var(--moment, #2a3441));
  transition: transform 0.12s ease, filter 0.12s ease;
}
.sermon-player__item-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--bg, #fff);
}
.sermon-player__item:hover .sermon-player__item-play { transform: scale(1.07); filter: brightness(1.08); }
.sermon-player__item.is-active .sermon-player__item-play { transform: scale(1.07); }

/* ── Load more ───────────────────────────────────────────────────────── */
.sermon-player__more-wrap { margin-top: 6px; }
.sermon-player__more-wrap[hidden] { display: none; }
.sermon-player__more {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid rgba(0,0,0,0.16);
  border-color: color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.88em;
  color: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.sermon-player__more:hover {
  background: rgba(0,0,0,0.035);
  background: color-mix(in srgb, currentColor 5%, transparent);
  border-color: rgba(0,0,0,0.26);
  border-color: color-mix(in srgb, currentColor 32%, transparent);
}
.sermon-player__more-count { opacity: 0.6; }

/* ── Footer link ─────────────────────────────────────────────────────── */
.sermon-player__footer { margin-top: 22px; }
.sermon-player__all {
  font-size: 0.9em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

@media (max-width: 560px) {
  .sermon-player__play { width: 54px; height: 54px; }
  .sermon-player__item { gap: 12px; }
  .sermon-player__thumb-wrap { width: 120px; }
  .sermon-player__item-play { width: 36px; height: 36px; }
  .sermon-player__item-play::after { border-width: 6px 0 6px 10px; }
}