/* System Design Primer: lite-youtube embed (facade pattern).
   Adapted from paulirish/lite-youtube-embed (BSD-3). Total CSS ~1.5 KB.

   What this is: a <lite-youtube videoid="..."> custom element that paints
   only a poster image and a play button at first paint. The actual YouTube
   <iframe> (~500 KB of JS + cookies + tracking) is injected ONLY when the
   user clicks the play button. This keeps page load fast and PageSpeed
   green even with one embed per topic. */

lite-youtube {
  background-color: #000;
  position: relative;
  display: block;
  contain: content;
  background-position: center center;
  background-size: cover;
  cursor: pointer;
  max-width: 100%;
  margin: 1rem 0;
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Maintain 16:9 aspect-ratio via a top-padding trick (works in all browsers). */
lite-youtube::before {
  content: '';
  display: block;
  padding-bottom: calc(100% / (16 / 9));
}

/* Gradient bar at the top mimics YouTube's loading shimmer. pointer-events
   is none so the overlay never intercepts clicks meant for the play button
   or, after activation, the YouTube iframe — without this fix the iframe
   appears but its play / pause controls are unreachable. */
lite-youtube::after {
  content: "";
  display: block;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    hsl(0deg 0% 0% / 67%) 0%,
    hsl(0deg 0% 0% / 0%) 25%);
}

/* The big red Play button */
lite-youtube > .lty-playbtn {
  display: block;
  width: 68px;
  height: 48px;
  position: absolute;
  cursor: pointer;
  transform: translate3d(-50%, -50%, 0);
  top: 50%;
  left: 50%;
  z-index: 1;
  background-color: transparent;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 68 48" width="68" height="48" xmlns="http://www.w3.org/2000/svg"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="%23f00"/><path d="M45 24 27 14v20" fill="%23fff"/></svg>');
  background-repeat: no-repeat;
  background-size: cover;
  border: 0;
}

/* Lift opacity on hover */
lite-youtube:hover > .lty-playbtn {
  opacity: 1;
}

/* Once iframe is activated, hide poster and button */
lite-youtube.lyt-activated {
  cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
  opacity: 0;
  pointer-events: none;
}

/* The injected iframe fills the whole element */
lite-youtube > iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
  border: 0;
}

/* Caption / title row above the embed */
.sdp-video-section {
  margin-top: 2rem;
}
.sdp-video-section h2 {
  margin-bottom: 0.5rem;
}
.sdp-video-section .sdp-video-credit {
  display: block;
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
  margin-top: 0.3rem;
}