/**
 * TO Video Player — base styles.
 *
 * Skin tokens (set inline on the container by JS `applySkin`) cascade
 * through every layer:
 *   --to-player-primary   (default #FFE400)
 *   --to-player-controls  (default #191919)
 *   --to-player-progress  (default #FFE400)
 */

/* ---------------------------------------------------------------- *
 * Container
 * ---------------------------------------------------------------- */
.to-video-player-container {
  --to-player-primary: #FFE400;
  --to-player-controls: #191919;
  --to-player-progress: #FFE400;

  position: relative;
  /*
   * Sizing note: we intentionally use `width`/`max-width` (NOT
   * `inline-size`/`max-inline-size`). Some block themes treat logical
   * sizing properties differently and end up stretching the container to
   * 100vw, breaking post-column flow. `width: 100%` + `max-width: 100%`
   * keeps the player inside its parent (`.entry-content`, a column,
   * a sidebar, etc.) and lets the theme handle `.alignwide` /
   * `.alignfull` classes on its own.
   */
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
}

/*
 * Sticky overrides the base width — keep the 360px fixed width even when
 * the container would otherwise respect its parent.
 */
.to-video-player-container.to-player--sticky {
  width: 360px;
  max-width: calc(100vw - 40px);
  margin: 0;
}

@media (max-width: 640px) {
  .to-video-player-container.to-player--sticky {
    width: 260px;
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 640px) {
  .to-video-player-container {
    border-radius: 0;
  }
}

/* ---------------------------------------------------------------- *
 * YouTube-mode layers
 * ---------------------------------------------------------------- */
.to-player__thumbnail,
.to-player__ad-layer,
.to-player__youtube-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.to-player__thumbnail {
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 2;
  transition: opacity 200ms ease;
}

.to-player__thumbnail--hidden {
  opacity: 0;
  pointer-events: none;
}

.to-player__youtube-layer {
  z-index: 1;
}

.to-player__youtube-layer iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.to-player__ad-layer {
  z-index: 3;
  background: #000;
}

.to-player__ad-layer video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.to-player__ad-layer--hidden {
  display: none;
}

/* ---------------------------------------------------------------- *
 * Big circular play button (thumbnail overlay)
 * ---------------------------------------------------------------- */
.to-player__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--to-player-primary);
  cursor: pointer;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 160ms ease, box-shadow 160ms ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.to-player__play-btn::before {
  content: '';
  display: block;
  width: 28px;
  height: 32px;
  margin-left: 6px; /* optical centering of triangle */
  background: #000;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.to-player__play-btn:hover {
  transform: scale(1.06);
}

.to-player__play-btn:focus-visible {
  outline: 3px solid var(--to-player-primary);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- *
 * Ads container (direct mode IMA)
 * ---------------------------------------------------------------- */
.to-ad-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: inherit;
}

/* ---------------------------------------------------------------- *
 * Direct-mode Video.js skin overrides
 * Uses CSS vars; !important only where video-js defaults force it.
 * ---------------------------------------------------------------- */
.video-js.to-video-js {
  font-family: inherit;
}

.video-js.to-video-js .vjs-control-bar {
  background-color: var(--to-player-controls);
  color: #fff;
}

.video-js.to-video-js .vjs-control {
  color: #fff;
}

.video-js.to-video-js .vjs-play-progress,
.video-js.to-video-js .vjs-volume-level {
  background-color: var(--to-player-progress) !important;
}

.video-js.to-video-js .vjs-slider {
  background-color: rgba(255, 255, 255, 0.25);
}

.video-js.to-video-js .vjs-big-play-button {
  background-color: var(--to-player-primary);
  border-color: var(--to-player-primary);
  color: #000;
}

.video-js.to-video-js .vjs-big-play-button:focus-visible {
  outline: 3px solid var(--to-player-primary);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- *
 * Logo overlay
 * ---------------------------------------------------------------- */
.to-player__logo {
  position: absolute;
  z-index: 10;
  height: 40px;
  width: auto;
  pointer-events: none;
  opacity: 0.92;
}

.to-player__logo img {
  display: block;
  height: 100%;
  width: auto;
}

.to-player__logo--top-left     { top: 16px;    left: 16px; }
.to-player__logo--top-right    { top: 16px;    right: 16px; }
.to-player__logo--bottom-left  { bottom: 16px; left: 16px; }
.to-player__logo--bottom-right { bottom: 16px; right: 16px; }

/* ---------------------------------------------------------------- *
 * Sticky mode
 * ---------------------------------------------------------------- */
.to-player--sticky {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 360px;
  aspect-ratio: 16 / 9;
  z-index: 9999;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: transform 240ms ease, opacity 240ms ease,
              bottom 240ms ease, right 240ms ease;
}

@media (max-width: 640px) {
  .to-player--sticky {
    width: 260px;
    bottom: 12px;
    right: 12px;
  }
}

/* Close button — only visible in sticky mode */
.to-player__close-sticky {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
}

.to-player--sticky .to-player__close-sticky {
  display: flex;
}

.to-player__close-sticky:focus-visible {
  outline: 2px solid var(--to-player-primary);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- *
 * Reduced motion
 * ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .to-player--sticky,
  .to-player__play-btn,
  .to-player__thumbnail {
    transition: none;
  }
}