/**
 * YouTube facade player styles.
 * Fills whatever sized container it's placed in (the existing page CSS
 * already establishes a 16:9 box via .action-video / .videoSection-video__media),
 * and also sets its own 16:9 aspect-ratio as a safe default when used
 * standalone without a pre-sized parent.
 */

.youtube-player {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0A1E3C;
}

.youtube-player__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.youtube-player__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.youtube-player__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.youtube-player__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.youtube-player__play:hover,
.youtube-player__play:focus-visible {
  transform: scale(1.06);
}
.youtube-player__play-svg {
  width: 100%;
  height: 100%;
}

.youtube-player[data-youtube-loaded="true"] .youtube-player__placeholder,
.youtube-player[data-youtube-loaded="true"] .youtube-player__play {
  display: none;
}