/* ===============================================
   PODCAST VIDEO PLAYER STYLES
   =============================================== */

/* Podcast video wrapper - common styles for both player types */
.podcast-video-wrapper {
  max-width: 100%;
  margin-bottom: 1.875em;
  position: relative;
}

/* Ensure proper spacing */
.podcast-video-player {
  margin-bottom: 1.25em;
  width: 100%;
}

/* Make sure video respects container */
.podcast-video-player .m-video-player__video {
  max-width: 100%;
}

/* Match podcast branding */
.podcast-video-player .a-play-button {
  background-color: #00b5e2;
}

/* Make the play button arrow white */
.podcast-video-player .a-play-button .a-play-button__arrow {
  border-color: transparent transparent transparent #ffffff;
}

/* Fallback iframe styles */
.podcast-video-iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.podcast-video-iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Fix for Plyr controls */
.plyr {
  min-width: 0;
  width: 100%;
}

.plyr__control--overlaid {
  background: rgba(0, 181, 226, 0.8);
}

.plyr--video .plyr__control:hover {
  background: #00b5e2;
}

.plyr--full-ui input[type="range"] {
  color: #00b5e2;
}

.plyr__control--overlaid:focus,
.plyr__control--overlaid:hover {
  background: #00b5e2;
}

/* Ensure mobile responsiveness */
@media (max-width: 48em) { /* 768px */
  .podcast-video-wrapper {
    margin-left: -0.9375em;
    margin-right: -0.9375em;
    width: calc(100% + 1.875em);
  }
}