/* ==========================================================================
   YouTube facade

   An embedded YouTube iframe pulls ~2.9 MB of player JavaScript before the
   visitor has expressed any interest in watching. This renders a thumbnail and
   a play button instead, and swaps in the real iframe on click - identical
   playback quality, none of the upfront cost.
   ========================================================================== */

.yt-facade {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}

/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
  .yt-facade { padding-top: 56.25%; height: 0; }
}

.yt-facade-btn {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  appearance: none;
}

.yt-facade-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1), filter .3s ease;
}

.yt-facade-btn:hover img,
.yt-facade-btn:focus-visible img {
  transform: scale(1.04);
  filter: brightness(.82);
}

/* YouTube-style play badge */
.yt-facade-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 48px;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  background: rgba(18, 18, 18, .78);
  transition: background-color .2s ease, transform .2s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}

.yt-facade-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
}

.yt-facade-btn:hover .yt-facade-play,
.yt-facade-btn:focus-visible .yt-facade-play {
  background: #f00;
  transform: translate(-50%, -50%) scale(1.08);
}

.yt-facade-btn:focus-visible {
  outline: 3px solid #ff7a2f;
  outline-offset: 3px;
}

/* The injected iframe fills the same box, so nothing shifts on click */
.yt-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .yt-facade-btn img,
  .yt-facade-play { transition: none !important; }
  .yt-facade-btn:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   Inside the homepage video carousel

   The slide used to hold a 90%-sized iframe inside a fixed-viewport-height
   stage. The facade is 16:9, so that stage left a band of empty space above
   and below it. The stage now sizes to its content (see videoCarousel), and
   the facade just takes the slide's width.
   -------------------------------------------------------------------------- */

ul#move li .yt-facade {
  width: 92%;
  max-width: 900px;
  margin: 0 auto;
}