/**
 * TO Video Player — base styles (v0.4.x, Plyr-based).
 *
 * Skin tokens (set inline on the container by JS `applySkin`) cascade
 * through every layer. Each TO token is mapped to a Plyr CSS var so
 * Plyr renders with the template's palette automatically.
 *
 * TO tokens:
 *   --to-player-primary
 *   --to-player-controls
 *   --to-player-controls-hover
 *   --to-player-progress
 *   --to-player-volume
 *   --to-player-buffer
 *   --to-player-tooltip
 *   --to-player-radius
 *   --to-player-border-width
 *   --to-player-border-color
 *   --to-player-sticky-width
 */

/* ---------------------------------------------------------------- *
 * Container
 * ---------------------------------------------------------------- */
.to-video-player-container {
  --to-player-primary: #FFE400;
  --to-player-controls: #FFFFFF;
  --to-player-controls-hover: #FFE400;
  --to-player-progress: #FFE400;
  --to-player-volume: #FFFFFF;
  --to-player-buffer: rgba(255, 255, 255, 0.25);
  --to-player-tooltip: #191919;
  --to-player-radius: 4px;
  --to-player-border-width: 0;
  --to-player-border-color: #000;
  --to-player-sticky-width: 360px;

  /* Map TO tokens onto Plyr's own vars so Plyr inherits the palette. */
  --plyr-color-main: var(--to-player-primary);
  --plyr-video-control-color: var(--to-player-controls);
  --plyr-video-control-color-hover: var(--to-player-controls-hover);
  --plyr-video-progress-buffered-background: var(--to-player-buffer);
  --plyr-range-fill-background: var(--to-player-progress);
  --plyr-tooltip-background: var(--to-player-tooltip);
  --plyr-border-radius: var(--to-player-radius);

  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--to-player-radius);
  border: var(--to-player-border-width) solid var(--to-player-border-color);
  overflow: hidden;
  box-sizing: border-box;
}

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

.to-video-player-container .plyr,
.to-video-player-container video {
  width: 100%;
  height: 100%;
}

.to-video-player-container .plyr {
  border-radius: inherit;
}

/* ---------------------------------------------------------------- *
 * Thumbnail / overlay (pre-play)
 * ---------------------------------------------------------------- */
.to-player__thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 4;
  transition: opacity 200ms ease;
}

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

.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: 5;
  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;
  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;
}

/* Title / description overlays */
.to-player__title-overlay {
  position: absolute;
  left: 16px;
  bottom: 88px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  z-index: 3;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.to-player__desc-overlay {
  position: absolute;
  left: 16px;
  bottom: 60px;
  color: #fff;
  font-size: 14px;
  z-index: 3;
  opacity: 0.9;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* ---------------------------------------------------------------- *
 * IMA ad container
 * ---------------------------------------------------------------- */
.to-ad-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: inherit;
}

.to-ad-container:empty {
  pointer-events: none;
}

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

.to-player__logo img {
  display: block;
  height: 100%;
  width: auto;
  /* SVGs without explicit width/height attrs report 0 intrinsic width in Chrome;
     min-width prevents the element from collapsing to invisible. */
  min-width: 20px;
}

.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; }
.to-player__logo--center-hover { top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity .2s; }
.to-video-player-container:hover .to-player__logo--center-hover { opacity: .9; }

/* ---------------------------------------------------------------- *
 * Sticky rich
 * ---------------------------------------------------------------- */
.to-player--sticky {
  position: fixed;
  width: var(--to-player-sticky-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,
              top 240ms ease, left 240ms ease;
}

.to-player--sticky-bottom-right { bottom: 20px; right: 20px; top: auto; left: auto; }
.to-player--sticky-bottom-left  { bottom: 20px; left: 20px;  top: auto; right: auto; }
.to-player--sticky-top-right    { top: 20px;    right: 20px; bottom: auto; left: auto; }
.to-player--sticky-top-left     { top: 20px;    left: 20px;  bottom: auto; right: auto; }

@media (max-width: 640px) {
  .to-player--sticky {
    width: min(var(--to-player-sticky-width, 260px), calc(100vw - 24px));
  }
  .to-player--sticky-bottom-right,
  .to-player--sticky-bottom-left { bottom: 12px; }
  .to-player--sticky-bottom-right,
  .to-player--sticky-top-right   { right: 12px; }
  .to-player--sticky-bottom-left,
  .to-player--sticky-top-left    { left: 12px; }
  .to-player--sticky-top-right,
  .to-player--sticky-top-left    { top: 12px; }
}

/* Close button — only visible in sticky mode */
.to-player__close-sticky {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 16px;
  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;
  }
}

/* ---------------------------------------------------------------- *
 * Legacy YouTube layer — kept for v0.3.x posts that still use iframes.
 * New blocks never render this; assets.php only loads it when the legacy
 * marker class is present.
 * ---------------------------------------------------------------- */
.to-player--legacy-youtube .to-player__youtube-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

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