/* Styles for the <lite-youtube> facade in lite-yt-embed.js.

   The shape is set by --lyt-aspect (default 16 / 9); a Short wants something
   nearer 9 / 16. Width is left to whatever box the page puts it in. */

lite-youtube {
  position: relative;
  display: block;
  contain: content;
  background-color: #000000;
  background-position: center center;
  background-size: cover;
  cursor: pointer;
  /* Holds the frame's shape before the poster loads, so nothing jumps. */
  aspect-ratio: var(--lyt-aspect, 16 / 9);
}

lite-youtube > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The play button: a rounded rectangle with a triangle punched out of it,
   drawn as a background image so it stays crisp at any size. Neutral rather
   than YouTube red — it sits on a black-and-white page. */
lite-youtube > .lty-playbtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  cursor: inherit;
  background: rgba(0, 0, 0, 0.72) no-repeat center / 26px 30px
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 28"><path d="M2 2 L22 14 L2 26 Z" fill="%23ffffff"/></svg>');
  transition: background-color 0.15s ease, transform 0.15s ease;
}

lite-youtube:hover > .lty-playbtn,
lite-youtube > .lty-playbtn:focus-visible {
  background-color: #000000;
  transform: translate(-50%, -50%) scale(1.06);
}

lite-youtube > .lty-playbtn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* Present for screen readers and for the case where the iframe never loads,
   but never drawn — the play button is the visible control. */
lite-youtube > .lty-fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

lite-youtube.lyt-activated {
  cursor: unset;
  background-image: none;
}

lite-youtube.lyt-activated > .lty-playbtn {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  lite-youtube > .lty-playbtn { transition: none; }
}