/* ==========================================================================
   Blog YouTube facade — styles (Area D,
   run 2026-07-04-blog-perf-final-touches).

   Reserves the 16:9 box from first paint so the click-to-load facade (and the
   iframe injected later) never shifts layout (zero CLS). Poster and the injected
   player absolutely fill the box; a centered play button overlays them. Loaded
   only on blog posts that actually embed a YouTube video (conditional enqueue).
   ========================================================================== */

.ll-yt-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin: 1.5rem 0;
  background-color: #000;
  border-radius: 8px;
}

/* Fallback for browsers without aspect-ratio (padding-hack reserves the box).
   Modern browsers honour aspect-ratio and ignore this padding because the
   absolutely-positioned children take the element out of normal flow. */
@supports not (aspect-ratio: 16 / 9) {
  .ll-yt-facade {
    height: 0;
    padding-top: 56.25%;
  }
}

/* The crawlable link wraps the whole poster area. */
.ll-yt-facade__link {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer;
}

/* Poster image and (post-click) the injected iframe fill the reserved box. */
.ll-yt-facade__poster,
.ll-yt-facade__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ll-yt-facade__poster {
  object-fit: cover;
  display: block;
  background-color: #000;
}

/* Video title: visible + readable over the poster (crawlable, not hidden). */
.ll-yt-facade__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 2.25rem 1rem 0.75rem;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.3;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* Centered play button (real <button> for click + keyboard a11y). */
.ll-yt-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background-color: rgba(23, 23, 23, 0.72);
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

/* CSS play triangle (no image request). */
.ll-yt-facade__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
}

.ll-yt-facade__play:hover,
.ll-yt-facade__link:hover ~ .ll-yt-facade__play {
  background-color: #f00;
  transform: translate(-50%, -50%) scale(1.05);
}

.ll-yt-facade__play:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Once playing, hide the (now empty) overlay controls if any linger. */
.ll-yt-facade.is-playing .ll-yt-facade__play,
.ll-yt-facade.is-playing .ll-yt-facade__title,
.ll-yt-facade.is-playing .ll-yt-facade__link {
  display: none;
}