/* Universal Media runtime styles. Owned separately from the critical bundle. */
.v-cmp-embed {
  inline-size: 100%;
  margin: 0;
}

.v-cmp-embed__frame {
  position: relative;
  overflow: hidden;
  inline-size: 100%;
  background: var(--vsb-media-background, #000);
}

.v-cmp-embed__frame > :is(iframe, video),
.v-media-poster__video :is(iframe, video) {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

.v-video-self-hosted {
  object-fit: var(--vsb-media-object-fit, contain);
}

.v-media-poster {
  position: absolute;
  inset: 0;
  display: grid;
  inline-size: 100%;
  block-size: 100%;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: var(--vsb-media-background, #000);
  color: var(--vsb-media-poster-color, #fff);
}

/* Poster + modal sizes from the relative poster and its Tailwind aspect utility. */
.v-cmp-embed-poster_modal .v-media-poster {
  position: relative;
  inset: auto;
  display: grid;
  inline-size: 100%;
  block-size: auto;
  min-block-size: 0;
}

.v-media-poster__image,
.v-media-poster__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.v-media-poster__image {
  object-fit: cover;
}

.v-media-poster__video {
  overflow: hidden;
  pointer-events: none;
}

.v-media-poster__video .v-cmp-embed,
.v-media-poster__video .v-cmp-embed__frame {
  inline-size: 100%;
  block-size: 100%;
}

.v-media-poster__label {
  z-index: 1;
  grid-area: 1 / 1;
  place-self: center;
  min-block-size: 2.75rem;
  padding: var(--spacing-sm, 0.75rem) var(--spacing-lg, 1.5rem);
  border-radius: var(--border-radius-full, 9999px);
  background: var(--vsb-media-poster-label-background, rgb(0 0 0 / 75%));
}

.v-media-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  inline-size: fit-content;
  block-size: fit-content;
  max-inline-size: 90vi;
  max-block-size: 90vb;
  border: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  color: #fff;
}

.v-media-dialog::backdrop {
  background: rgb(0 0 0 / 85%);
}

.v-media-dialog__close {
  position: absolute;
  z-index: 2;
  inset-block-start: 0;
  inset-inline-end: 0;
  display: grid;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  translate: 35% -35%;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 1.5rem;
}

.v-media-dialog__frame {
  max-inline-size: 90vi;
  max-block-size: calc(90vb - 3.5rem);
}

.v-media-dialog__frame.v-media-ratio-16-9 {
  inline-size: min(90vi, calc((90vb - 3.5rem) * 16 / 9));
}

.v-media-dialog__frame.v-media-ratio-4-3 {
  inline-size: min(90vi, calc((90vb - 3.5rem) * 4 / 3));
}

.v-media-dialog__frame.v-media-ratio-1-1 {
  inline-size: min(90vi, calc(90vb - 3.5rem));
}

.v-media-dialog__frame.v-media-ratio-9-16 {
  inline-size: min(90vi, calc((90vb - 3.5rem) * 9 / 16));
}

@media (prefers-reduced-motion: reduce) {
  .v-video[autoplay],
  .v-media-poster__video {
    visibility: hidden;
  }
}