/* ==========================================
   KVS in Sngine
   - Legacy: iframe embeds (rawkhub.com)
   - New: native Plyr <video> rendered by Sngine
   - Goal:
       Desktop: vertical videos shown inside 16:9 box (Sngine-like)
       Mobile: vertical videos shown tall like reels (9:16 feel)
   ========================================== */


/* ======================================================
   LEGACY iframe embeds (KVS iframe / oEmbed)
   ====================================================== */

.post .embed-iframe-wrapper,
.post .post-media {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.post .embed-iframe-wrapper,
.post .embed-iframe-wrapper iframe,
.post .embed-iframe-wrapper * {
  border-radius: 0 !important;
}

.post .embed-iframe-wrapper {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  aspect-ratio: auto !important;
}

.post .embed-iframe-wrapper iframe,
iframe[src*="rawkhub.com"] {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: transparent !important;
}

.post .post-media .ratio {
  aspect-ratio: auto !important;
  height: auto !important;
}


/* ======================================================
   NEW native KVS video blocks (<video> + Plyr)
   ====================================================== */

.cf-kvs-video{
  position: relative !important;
  display: block !important;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0 !important;
  overflow: hidden;
}

.post-media .cf-kvs-video{
  margin-top: 8px;
}

.cf-kvs-video .plyr{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.cf-kvs-video .plyr__video-wrapper{
  height: 100% !important;
  padding-bottom: 0 !important;
}

.cf-kvs-video video{
  width: 100% !important;
  height: 100% !important;
  display: block;
  border-radius: 0 !important;
  background: #000;
}

.cf-kvs-skeleton,
.cf-kvs-error{
  padding: 10px;
  font-size: 14px;
  opacity: 0.85;
}


/* ======================================================
   Orientation behavior
   ====================================================== */

.cf-kvs-video.is-horz{
  aspect-ratio: 16 / 9;
}

.cf-kvs-video.is-horz video{
  object-fit: contain;
  object-position: center center;
}

@media (min-width: 769px){
  .cf-kvs-video.is-vert{
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    max-height: none !important;
    background: transparent !important;
  }

  .cf-kvs-video.is-vert video{
    object-fit: contain !important;
    object-position: center center !important;
  }
}

@media (max-width: 768px){
  .cf-kvs-video.is-vert{
    height: min(82vh, 820px) !important;
    max-height: 820px !important;
    aspect-ratio: auto !important;
    background: #000 !important;
  }

  .cf-kvs-video.is-vert video{
    object-fit: cover !important;
    object-position: center center !important;
  }
}


/* ======================================================
   Overlay poster
   ====================================================== */

.cf-kvs-poster{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 5;
  background: #000;
}

.cf-kvs-video.is-horz .cf-kvs-poster{
  object-fit: contain;
  object-position: center center;
}

@media (max-width: 768px){
  .cf-kvs-video.is-vert .cf-kvs-poster{
    object-fit: cover;
    object-position: center center;
  }
}

@media (min-width: 769px){
  .cf-kvs-video.is-vert .cf-kvs-poster{
    object-fit: contain;
    object-position: center center;
  }
}


/* ======================================================
   Prevent Sngine "Read more"
   ====================================================== */

.post:has(.cf-kvs-video) .post-text,
.post:has(.cf-kvs-video) .post_body,
.post:has(.cf-kvs-video) .post-body,
.post:has(.cf-kvs-video) .publisher-text,
.post:has(.cf-kvs-video) .post-content {
  max-height: none !important;
  overflow: visible !important;
}

.post:has(.cf-kvs-video) .read-more,
.post:has(.cf-kvs-video) .read_more,
.post:has(.cf-kvs-video) .js_readmore,
.post:has(.cf-kvs-video) .see-more,
.post:has(.cf-kvs-video) .see_more {
  display: none !important;
}

p:has(.cf-kvs-video) {
  overflow: visible !important;
  max-height: none !important;
}


/* ======================================================
   Neutralize Bootstrap ratios
   ====================================================== */

.post:has(.cf-kvs-video.is-vert) .ratio,
.post:has(.cf-kvs-video.is-vert) .ratio-16x9,
.post:has(.cf-kvs-video.is-vert) .ratio-4x3 {
  aspect-ratio: auto !important;
  height: auto !important;
}

.post:has(.cf-kvs-video.is-vert) .ratio::before,
.post:has(.cf-kvs-video.is-vert) .ratio-16x9::before,
.post:has(.cf-kvs-video.is-vert) .ratio-4x3::before {
  padding-top: 0 !important;
  content: none !important;
}


/* ======================================================
   STEP 1: Match Sngine mobile vertical sizing (SAFE)
   ====================================================== */

@media (max-width: 768px){
  .post .post-replace .cf-kvs-video.is-vert{
    height: 70vh !important;
    max-height: 640px !important;
    background: transparent !important;

    width: calc(100% - 16px) !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
}
/* KVS posts: force caption visible (some themes hide it when media exists) */
.post:has(.cf-kvs-video) .post-replace .post-text{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  height: auto !important;
  max-height: none !important;
  overflow: visible !important;

  margin-bottom: 8px !important;
  color: inherit !important;
}
.cf-kvs-tap-sound{
  user-select:none;
}