/* ============================================================
   PLAY BUTTONS
   ============================================================ */

/* Base play button — small (sermon list rows) */
.sermon-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem 0.35rem 0.6rem;
  transition: background 0.12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.sermon-play-btn:hover { background: var(--navy-light); }

/* Card variant — slightly larger */
.sermon-play-btn--card {
  font-size: 0.8rem;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
}

/* Large play button on sermon show page */
.sermon-play-btn--lg {
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  gap: 0.65rem;
  min-width: 10rem;
  justify-content: center;
}

/* ---- Icon / bars sub-elements (injected by play_btn_controller) ---- */

/* Fixed-width icon containers so switching icons doesn't resize the button */
.play-btn-icon,
.play-btn-bars {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.play-btn-icon svg { width: 10px; height: 10px; display: block; }
.sermon-play-btn--card .play-btn-icon svg { width: 11px; height: 11px; }
.sermon-play-btn--lg   .play-btn-icon svg { width: 16px; height: 16px; }

/* Label: hidden on small/card buttons, visible on --lg */
.play-btn-label { display: none; }
.sermon-play-btn--lg .play-btn-label { display: inline; }

/* Duration: visible by default, hidden while this sermon is loaded */
.play-btn-duration {
  opacity: 0.65;
  font-weight: 400;
  margin-left: 0.1rem;
}

/* ---- Default (idle / other sermon loaded) state ---- */
/* Show play icon; hide pause icon, bars */
.play-btn-icon--pause { display: none; }
.play-btn-bars        { display: none; }

/* ---- Bars shared structure ---- */
.play-btn-bars {
  align-items: flex-end;
  gap: 2px;
  height: 10px;
}
.sermon-play-btn--card .play-btn-bars { height: 11px; }
.sermon-play-btn--lg   .play-btn-bars { height: 14px; }

.play-btn-bars span {
  display: block;
  width: 3px;
  background: currentColor;
  border-radius: 1px;
}
/* Fixed heights for the four bars (used in both playing and paused) */
.play-btn-bars span:nth-child(1) { height: 40%; }
.play-btn-bars span:nth-child(2) { height: 80%; }
.play-btn-bars span:nth-child(3) { height: 60%; }
.play-btn-bars span:nth-child(4) { height: 100%; }

/* ---- Playing state ---- */
.sermon-play-btn--playing .play-btn-icon--play  { display: none; }
.sermon-play-btn--playing .play-btn-bars        {
  display: inline-flex;
}
.sermon-play-btn--playing .play-btn-duration    { display: none; }
/* Animate bars while playing */
.sermon-play-btn--playing .play-btn-bars span {
  animation: sound-bars 0.8s ease-in-out infinite alternate;
}
.sermon-play-btn--playing .play-btn-bars span:nth-child(1) { animation-delay: 0s; }
.sermon-play-btn--playing .play-btn-bars span:nth-child(2) { animation-delay: 0.15s; }
.sermon-play-btn--playing .play-btn-bars span:nth-child(3) { animation-delay: 0.3s; }
.sermon-play-btn--playing .play-btn-bars span:nth-child(4) { animation-delay: 0.45s; }
/* Hover while playing — swap bars for pause icon */
.sermon-play-btn--playing:hover .play-btn-bars       { display: none; }
.sermon-play-btn--playing:hover .play-btn-icon--pause { display: inline-flex; }

/* ---- Paused state ---- */
.sermon-play-btn--paused .play-btn-icon--play { display: none; }
.sermon-play-btn--paused .play-btn-bars       {
  display: inline-flex;
  opacity: 0.7;
}
/* No animation — bars stay static */
.sermon-play-btn--paused .play-btn-duration   { display: none; }
/* Hover while paused — swap static bars for play icon */
.sermon-play-btn--paused:hover .play-btn-bars      { display: none; }
.sermon-play-btn--paused:hover .play-btn-icon--play { display: inline-flex; opacity: 1; }

@keyframes sound-bars {
  from { transform: scaleY(0.4); }
  to   { transform: scaleY(1); }
}

/* ---- Download button — matches --lg play button height ---- */
.sermon-download-btn {
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
}