/* ==========================================================================
   parts/video-facade.css — parts/video-facade.php (R4-PLAN §1.6; R4-ADDENDUM C9). Template-scoped
   (WFX_SCOPED_PART_STYLES): printed only where a block asked for it (wfx_use_part_styles('video-facade')).
   A 16:9 box with the first-party poster (cover) and a play button over all of it (the poster is the hit area);
   the 64px --primary disc and its triangle are the button's pseudo-elements (no asset). Hover and :focus-visible
   darken the disc to the primary gradient's end; the focus ring is drawn inside the box, over the poster, where the
   light --btn-focus-dark ring reads (outside it would sit on the popup's white padding).
   After the click video-facade.js swaps the poster + button for the provider's iframe (.video-facade__frame).
   Inside parts/popup.php the box fills .popup__media (popup.css positions it).
   ========================================================================== */

.video-facade {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--black);
}
.video-facade__poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-facade__play {
  --focus-color: var(--btn-focus-dark);
  --focus-offset: -6px;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.video-facade__play::before {                   /* the disc */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6.4rem;
  height: 6.4rem;
  margin: -3.2rem 0 0 -3.2rem;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--white-trans-20), 0 4px 20px var(--black-trans-33);
  transition: background-color .3s ease-in-out;  /* live's button transition */
}
.video-facade__play::after {                    /* the triangle, optically centred (+3px) */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1.1rem 0 0 -.6rem;
  border-style: solid;
  border-width: 1.1rem 0 1.1rem 1.8rem;
  border-color: transparent transparent transparent var(--white);
}
.video-facade__play:hover::before,
.video-facade__play:focus-visible::before { background: var(--wfx-blue-dark); }

.video-facade__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Round 5 (R5-PLAN §1.7, OD-R5-4): a post-content embed (the stable singles' Vimeo clips). The <span> root sits in
   live's <p> where the <iframe width=W height=H> was, and keeps that box exactly: width min(100 %, W), the height
   attribute H at every width (live keeps the attribute, not the ratio: 347.63 × 281 at 390), inline on the baseline
   (overflow: hidden puts an inline-block's baseline at its bottom edge, as a replaced iframe's), so the <p> is
   H + 8.25 px tall, as live's. The poster needs its height back from .horse-details__content img { height: auto }. */
.video-facade--embed {
  display: inline-block;
  aspect-ratio: auto;
  width: min(100%, var(--vf-w, 50rem));
  height: var(--vf-h, 28.1rem);
  vertical-align: baseline;
}
.video-facade--embed .video-facade__poster { height: 100%; }
.video-facade__fallback {                        /* no first-party image: a --tertiary panel with the title */
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2rem 2rem 10rem;
  background: var(--tertiary);
  color: var(--white);
  font-size: var(--text-s);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .video-facade__play::before { transition: none; }
}

@media (forced-colors: active) {
  .video-facade__play::before { background: ButtonText; }
  .video-facade__play::after { border-left-color: ButtonFace; }
}