/* Load after experience.css. All overrides belong to this component. */
.pa-media { min-width: 0; max-width: 100%; }
.pa-media [hidden] { display: none !important; }
.pa-media .player-stage {
  box-sizing: border-box; width: 100%; min-width: 0;
  min-height: 270px; height: auto; aspect-ratio: 16 / 9;
}
.pa-media .player-cover { min-width: 0; overflow-wrap: anywhere; }
.pa-media .player-cover-title { max-width: 100%; }
.pa-media .player-stage iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.pa-media .media-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px;
}
.pa-media .media-controls button {
  border: 1px solid #587287; background: #102737; color: #f7faff;
  padding: 10px 12px; font: 600 .875rem/1.3 var(--body, Arial, sans-serif);
  min-height: 44px; cursor: pointer;
}
.pa-media .media-controls button:hover { background: #1d4159; }
.pa-media .media-origin {
  min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere;
  font-size: .9375rem; line-height: 1.4;
}
.pa-media .media-controls .media-origin { margin-left: auto; }
.pa-media .player-status {
  margin: 12px 0 0; max-width: 100%; color: #c5d9e7; font-size: .875rem; line-height: 1.5;
}
.pa-media button:focus-visible, .pa-media a:focus-visible {
  outline: 3px solid #58c5ff; outline-offset: 4px;
}
@media (max-width: 600px) {
  .pa-media .player-stage { height: 270px; min-height: 270px; aspect-ratio: auto; }
  .pa-media .media-controls { gap: 10px; }
  .pa-media .media-controls .media-origin { margin-left: 0; }
  .pa-media .play-button { padding: 12px 14px; font-size: .9375rem; }
}