/**
 * Click-to-load facade for core/embed YouTube blocks (inc/embed-facade.php).
 *
 * Sibling of the bio facade in bio.css. Kept separate because the shapes
 * differ: a bio video is a 9/16 portrait in a fixed slot, these are 16/9
 * landscape inside the block's own wp-embed-aspect-16-9 wrapper — so this
 * file sizes to the wrapper rather than declaring a ratio of its own.
 */

.kdpc-embed-facade {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  line-height: 0; /* kill the inline-image descender gap under the poster */
}

/* ── Aspect-ratio wrappers ──
 * When the embed block carries `wp-has-aspect-ratio`, WordPress gives
 * .wp-block-embed__wrapper a ::before with padding-top set to the ratio and
 * overflow:hidden, then absolutely positions the IFRAME to fill it. Our
 * facade is a <button>, so it matched none of that: it flowed AFTER the
 * pseudo-element at top:684px and was clipped away entirely — the block
 * rendered as blank space. (Caught 2026-09-04 the moment Alain refreshed;
 * a getBoundingClientRect() check had called it "visible" because a clipped
 * element still reports a box.)
 *
 * Same treatment WordPress gives the iframe, applied to the facade.
 */
.wp-has-aspect-ratio .wp-block-embed__wrapper > .kdpc-embed-facade,
.wp-has-aspect-ratio .wp-block-embed__wrapper > .kdpc-embed-facade__frame {
  position: absolute;
  inset: 0;
  height: 100%;
}

.wp-has-aspect-ratio .wp-block-embed__wrapper > .kdpc-embed-facade .kdpc-embed-facade__img {
  height: 100%;
  object-fit: cover;
}

.kdpc-embed-facade__img {
  display: block;
  width: 100%;
  height: auto;
}

.kdpc-embed-facade__play {
  position: absolute;
  /* Bottom-left, matching the bio facade — the point is to leave the frame
     itself uncovered, and a centred chip is the thing being replaced. */
  left: var(--space-xs);
  bottom: var(--space-xs);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  height: 40px;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-pill);
  background-color: var(--color-success);
  color: var(--color-retreat-navy);
  font-family: var(--font-heading);
  font-size: var(--font-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  transition: transform 0.15s ease;
}

.kdpc-embed-facade:hover .kdpc-embed-facade__play {
  transform: translateY(-2px);
}

.kdpc-embed-facade:focus-visible {
  outline: 3px solid var(--color-success);
  outline-offset: 3px;
}

.kdpc-embed-facade__play svg {
  display: block;
  flex-shrink: 0;
}

/* The swapped-in player fills the block's aspect-ratio wrapper. */
.kdpc-embed-facade__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .kdpc-embed-facade__play { transition: none; }
  .kdpc-embed-facade:hover .kdpc-embed-facade__play { transform: none; }
}