/*
 * Click-to-load facade for third-party video.
 *
 * PREFIX: .zgr-vembed — NOT .zgr-video and NOT .zgr-vplayer.
 *
 *   .zgr-video*   belongs to the legacy player in zgr-media.css (~282-580),
 *                 which is ALWAYS enqueued (it styles images) and which
 *                 assets/js/zgr-media.js binds to via
 *                 `.zgr-video-card[data-zgr-video-url]` and `closest('.zgr-video')`.
 *                 It also sets `.zgr-video-card { height: 24rem }` — reusing
 *                 that name silently clamps the frame and clips the controls.
 *   .zgr-vplayer* belongs to the current hosted-mp4 player.
 *
 * Reusing either prefix would have the other component's CSS *and JS* drive
 * this one. Do not rename these selectors without checking both stylesheets.
 */

.zgr-vembed {
  position: relative;
  margin: 1.25rem 0 1.75rem;
  width: 100%;
}

.zgr-vembed-card {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0.25rem;
  background: #121212;
}

/*
 * The aspect box lives on the frame, not on the <img> and not on the iframe.
 * It therefore exists before the poster loads and survives the poster →
 * iframe swap, so nothing reflows at any point: cumulative layout shift is
 * zero across the whole interaction.
 */
.zgr-vembed-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #121212;
}

.zgr-vembed[data-aspect="9:16"] .zgr-vembed-frame { aspect-ratio: 9 / 16; }
.zgr-vembed[data-aspect="1:1"]  .zgr-vembed-frame { aspect-ratio: 1 / 1; }

/* Older Safari has no aspect-ratio; keep the box reserved there too. */
@supports not (aspect-ratio: 16 / 9) {
  .zgr-vembed-frame { height: 0; padding-top: 56.25%; }
  .zgr-vembed[data-aspect="9:16"] .zgr-vembed-frame { padding-top: 177.78%; }
  .zgr-vembed[data-aspect="1:1"]  .zgr-vembed-frame { padding-top: 100%; }
}

.zgr-vembed-trigger,
.zgr-vembed-linkcard {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

/*
 * The trigger fills the frame and has no border of its own, so without an
 * explicit ring a keyboard user sees nothing at all when it is focused.
 */
.zgr-vembed-trigger:focus-visible,
.zgr-vembed-linkcard:focus-visible {
  outline: 3px solid #4c8dff;
  outline-offset: -3px;
}

.zgr-vembed-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zgr-vembed-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  width: 68px;
  height: 48px;
  transition: transform 120ms ease-out;
}

.zgr-vembed-play-bg    { fill: rgba(0, 0, 0, 0.6); }
.zgr-vembed-play-arrow { fill: #fff; }

.zgr-vembed-trigger:hover .zgr-vembed-play,
.zgr-vembed-trigger:focus-visible .zgr-vembed-play,
.zgr-vembed-linkcard:hover .zgr-vembed-play {
  transform: translate(-50%, -50%) scale(1.08);
}

.zgr-vembed-trigger:hover .zgr-vembed-play-bg,
.zgr-vembed-linkcard:hover .zgr-vembed-play-bg {
  fill: rgba(200, 0, 0, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .zgr-vembed-play { transition: none; }
  .zgr-vembed-trigger:hover .zgr-vembed-play,
  .zgr-vembed-trigger:focus-visible .zgr-vembed-play,
  .zgr-vembed-linkcard:hover .zgr-vembed-play { transform: translate(-50%, -50%); }
}

.zgr-vembed-badge,
.zgr-vembed-duration {
  position: absolute;
  bottom: 0.5rem;
  padding: 0.125rem 0.4rem;
  border-radius: 0.125rem;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.zgr-vembed-badge    { left: 0.5rem; }
.zgr-vembed-duration { right: 0.5rem; font-variant-numeric: tabular-nums; }

.zgr-vembed-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Announced, not shown — the visual change is the iframe appearing. */
.zgr-vembed-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.zgr-vembed-linkcard-label {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 2.5rem 0.75rem 0.75rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
  color: #fff;
}

.zgr-vembed-linkcard-title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}

.zgr-vembed-linkcard-cta {
  font-size: 0.8rem;
  opacity: 0.9;
}

.zgr-vembed-attribution { margin-top: 0.5rem; }