/*
 * Video embed (16:9) + caption — SD-84
 * Figma: content modules / video embed (node 6403-66635)
 * Click-to-load facade: 16:9 poster + centered play button; caption below.
 */

.dk-video-embed {
  margin: 0;
}

.dk-video-embed-frame {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--dk-color-black);
}

.dk-video-embed-poster {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Once the iframe is injected by JS it fills the frame */
.dk-video-embed-frame iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

.dk-video-embed-play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* Consent gate overlay (SD-120): shown when play is clicked without accept */
.dk-video-embed-consent {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--dk-space-04); /* 16px */
  padding: var(--dk-space-05); /* 24px */
  background-color: color-mix(in srgb, var(--dk-color-black) 75%, transparent);
  color: var(--dk-color-white);
  text-align: center;
}

.dk-video-embed-consent-text {
  margin: 0;
  max-inline-size: 28rem;
  color: var(--dk-color-white);
}

.dk-video-embed-consent-btn {
  /* Primary CTA is black/white — invert for contrast on dark overlay */
  background-color: var(--dk-color-white);
  color: var(--dk-color-black);
}

.dk-video-embed-caption {
  margin-block-start: var(--dk-space-03); /* 12px */
  color: var(--dk-color-black);
}