/* CTPL Auto Aspect: styles for the responsive player container and media elements */
.video-player .responsive-player {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: #000;
  border-radius: 8px;
  /* fallback if JS is disabled: 16:9 default */
  padding-top: 56.25%;
}

/* make iframe/video fill container */
.video-player .responsive-player iframe,
.video-player .responsive-player video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain; /* never distort video; explore 'cover' if you prefer cropping */
  background: #000;
}

/* small helper when JS computes aspect and applies .ctp-aspect-fixed */
.video-player .responsive-player.ctp-aspect-fixed {
  padding-top: 0 !important; /* removed because we will set height explicitly via style */
  height: auto;
}

/* ensure container respects computed inline style for aspect */
.video-player .responsive-player[style] {
  /* no-op: keeps priority for inline styles applied by JS */
}

/* optional: smooth transition when aspect changes */
.video-player .responsive-player {
  transition: padding-top 300ms ease, height 300ms ease;
}