/* Video on click (scripts/lib/components/video.mjs). The poster sits in the embed's 16:9
   frame (styles.css .video-frame): the title top left, the Classic red play button in the
   middle, and a note that the video plays from YouTube. A real frame from the video fills
   it when public/assets/video-posters/<id>.webp exists, under a flat scrim so the title
   stays readable. */

.wfg-video .video-frame { position: relative; background: var(--panel-2); }
.wfg-video-poster {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  background: var(--panel-2);
  box-shadow: var(--shadow-inner);
}
.wfg-video-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wfg-video.has-poster .wfg-video-poster::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 20%, transparent); }
/* Over a frame the title sits on a flat title bar, like a panel's. */
.wfg-video.has-poster .wfg-video-title { top: 0; left: 0; right: 0; padding: .45rem 1rem .5rem; background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid var(--edge); }
.wfg-video.has-poster .wfg-video-note { left: 0; bottom: 0; padding: .2rem .6rem; background: color-mix(in srgb, var(--bg) 82%, transparent); }
.wfg-video-title {
  position: absolute;
  z-index: 1;
  top: .9rem;
  left: 1rem;
  right: 1rem;
  font: 400 clamp(1.15rem, 2.6vw, 1.6rem)/1.05 var(--font-display);
  letter-spacing: .01em;
  text-wrap: balance;
  color: var(--ink);
}
.wfg-video-play {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 3rem;
  border: 1px solid var(--enter-edge);
  border-radius: var(--r-ctl);
  background: linear-gradient(180deg, var(--enter-red), var(--enter-red-2));
  box-shadow: var(--shadow-enter);
  color: var(--classic-yellow);
  transform: translate(-50%, -50%);
  transition: filter var(--t);
}
.wfg-video-play svg { width: 1.6rem; height: 1.6rem; }
.wfg-video-note { position: absolute; z-index: 1; left: 1rem; bottom: .8rem; font: 400 .78rem/1.3 var(--font-ui); color: var(--ink-3); }
.wfg-video.has-poster .wfg-video-note { color: var(--ink-2); }
.wfg-video-poster:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) {
  .wfg-video-poster:hover .wfg-video-play { filter: brightness(1.15); }
}
@media (max-width: 40rem) {
  .wfg-video-play { width: 3.5rem; height: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wfg-video-play { transition: none; }
}