/* Generic aspect-ratio wrapper for embeds/videos. */
.ds-embed {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  /* Landscape default: no black background */
  background: transparent;
  /* Default is standard */
  aspect-ratio: 16 / 9;
}

/* Supported ratios */
.ds-embed[data-aspect="16:9"] { aspect-ratio: 16 / 9; }
/* Back-compat: treat old "wide" as standard 16:9 in the feed */
.ds-embed[data-aspect="19:6"] { aspect-ratio: 16 / 9; }
.ds-embed[data-aspect="9:16"] { aspect-ratio: 9 / 16; }

/* On larger screens, use a more feed-friendly portrait frame (Facebook-style). */
@media (min-width: 768px) {
  .ds-embed[data-aspect="9:16"] {
    aspect-ratio: 4 / 5;
    max-height: 690px;
  }
}

/* Portrait background fill (blurred poster) */
.ds-embed[data-aspect="9:16"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ds-embed-bg);
  background-size: cover;
  background-position: center;
  filter: blur(22px);
  transform: scale(1.12);
  opacity: 0.9;
  pointer-events: none;
}
.ds-embed[data-aspect="9:16"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* Make common children fill the wrapper */
.ds-embed iframe,
.ds-embed video,
.ds-embed .plyr-video-container,
.ds-embed .video-container,
.ds-embed .ds-video-play-wrap,
.ds-embed .plyr {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border: 0;
}

/* Avoid distortion: keep video’s intrinsic aspect inside chosen frame */
.ds-embed video {
  /* Default: fill (no pillar/letterbox bars) */
  object-fit: cover;
  background: transparent;
}

/* Landscape: fill the frame (no black bars) */
.ds-embed[data-aspect="16:9"] video,
.ds-embed[data-aspect="19:6"] video {
  object-fit: cover;
  background: transparent;
}

/* Portrait: keep video fully visible; blur handles the sides */
.ds-embed[data-aspect="9:16"] {
  background: #000;
}
.ds-embed[data-aspect="9:16"] video {
  object-fit: contain;
  background: transparent;
}

/* Ensure portrait content stays above blur layers */
.ds-embed[data-aspect="9:16"] iframe,
.ds-embed[data-aspect="9:16"] video,
.ds-embed[data-aspect="9:16"] .plyr-video-container,
.ds-embed[data-aspect="9:16"] .video-container,
.ds-embed[data-aspect="9:16"] .ds-video-play-wrap,
.ds-embed[data-aspect="9:16"] .plyr {
  z-index: 1;
}

/* Back-compat: if any templates still use ds-embed-16x9, map it to ds-embed behavior */
.ds-embed-16x9 {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  background: transparent;
  aspect-ratio: 16 / 9;
}
.ds-embed-16x9 iframe,
.ds-embed-16x9 video,
.ds-embed-16x9 .plyr-video-container,
.ds-embed-16x9 .video-container,
.ds-embed-16x9 .ds-video-play-wrap,
.ds-embed-16x9 .plyr {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border: 0;
}
.ds-embed-16x9 video {
  object-fit: cover;
  background: transparent;
}