/* Hibr v1.10.1 — vertical video / Shorts display fix */

/* Keep all embedded media inside a predictable responsive box. */
.story .media-frame{
  position:relative;
  width:min(100%,860px)!important;
  max-width:100%!important;
  aspect-ratio:16/9;
  height:auto!important;
  max-height:none!important;
  margin:20px auto!important;
  overflow:hidden;
  border-radius:18px;
  background:#101820;
}

/* Shorts, TikTok and Reels: do not stretch to article width on desktop. */
.story .media-frame.vertical{
  width:min(100%,430px)!important;
  max-width:430px!important;
  aspect-ratio:9/16!important;
  height:auto!important;
  max-height:none!important;
  margin:20px auto!important;
}

/* A previous mobile overflow rule set iframe height to auto; override it here. */
.story .media-frame > iframe{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  border:0!important;
}

/* Prevent nested rules from turning the iframe into a short horizontal strip. */
.story iframe[src*="youtube"],
.story iframe[src*="youtu.be"],
.story iframe[src*="tiktok"],
.story iframe[src*="instagram"]{
  height:100%!important;
}

@media(max-width:850px){
  .story .media-frame{
    width:100%!important;
    max-width:100%!important;
    margin:14px auto!important;
    border-radius:16px;
  }
  .story .media-frame.vertical{
    width:min(100%,390px)!important;
    max-width:390px!important;
  }
}

@media(max-width:560px){
  .story .media-frame.vertical{
    width:min(100%,360px)!important;
    max-width:360px!important;
  }
}