/* ==========================================
   KVS / Rich Embed Fix (SNGINE OVERRIDE v2)
   - Fix black bg
   - Keep 16:9 looking normal
   - Reduce extra spacing
   ========================================== */

/* --- A) Remove black backgrounds everywhere around embeds --- */
.post .embed-iframe-wrapper,
.post .post-media,
.post .post-media .ratio,
.post .post-media .ratio::before,
.post .embed-iframe-wrapper::before {
  background: transparent !important;
}

/* Some themes set black on the iframe itself */
.post .embed-iframe-wrapper iframe,
.post .post-media iframe,
.post .post-media .ratio iframe {
  background: transparent !important;
}

/* --- B) Tighten spacing between post text and embed --- */
.post .post-media,
.post .embed-iframe-wrapper {
  margin-top: 8px !important;     /* reduce gap */
}

.post .post-media + .post-media,
.post .post-text + .post-media,
.post .post-text + .embed-iframe-wrapper {
  margin-top: 8px !important;     /* reduce big gap after text */
}

/* If your theme uses plr15 wrappers, reduce padding around embeds */
.post .plr15 > .post-media,
.post .plr15 > .embed-iframe-wrapper {
  margin-top: 8px !important;
}

/* --- C) Make embeds fill properly --- */
.post .embed-iframe-wrapper iframe,
.post .post-media iframe,
.post .post-media .ratio iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
}

/* --- D) Default behavior: ALWAYS keep 16:9 ratio (don’t turn everything into tall) --- */
.post .post-media .ratio,
.post .embed-iframe-wrapper {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  overflow: hidden !important;
}

/* --- E) Mobile: match Sngine look (no rounded corners) --- */
@media (max-width: 576px) {
  .post .embed-iframe-wrapper,
  .post .post-media,
  .post .post-media .ratio,
  .post .embed-iframe-wrapper iframe,
  .post .post-media iframe,
  .post .post-media .ratio iframe {
    border-radius: 0 !important;
  }
}

/* --- F) OPTIONAL: Tall/9:16 mode ONLY when you opt-in with a class --- */
/* If you wrap the KVS iframe in <div class="embed-iframe-wrapper kvs-tall"> ... */
@media (max-width: 576px) {
  .post .embed-iframe-wrapper.kvs-tall,
  .post .post-media .ratio.kvs-tall {
    aspect-ratio: 9 / 16 !important;
    max-height: 70vh !important;
  }
}