/* REVIX video display refinement. Portrait Reels should NEVER be forced into a 16:9 iframe. */
/* Three matching cards on large screens, and the established single card on phones. */
body.revix-v7 .videos-grid,
body.revix-v7 .rev9-home-videos {
 display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
 gap:clamp(14px,2vw,22px)!important;align-items:stretch!important;
}
body.revix-v7 .videos-grid>.video-card,
body.revix-v7 .rev9-home-videos>.video-card{
 display:flex!important;flex-direction:column!important;align-items:stretch!important;
 min-width:0!important;width:100%!important;height:100%!important;
 overflow:hidden!important;background:#fff!important;border-radius:22px!important;
}
body.revix-v7 .videos-grid>.video-card>.video-thumb,
body.revix-v7 .rev9-home-videos>.video-card>.video-thumb{
 position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;
 width:100%!important;height:auto!important;min-height:0!important;flex:0 0 auto!important;
 aspect-ratio:16/9!important;overflow:hidden!important;background:linear-gradient(145deg,#e7f5fe,#c8e6f8)!important;
}
/* Reels use their natural portrait composition in the horizontal cover area: no crop. */
body.revix-v7 .videos-grid>.revix-social-video-card>.video-thumb>img,
body.revix-v7 .rev9-home-videos>.revix-social-video-card>.video-thumb>img{
 width:100%!important;height:100%!important;object-fit:contain!important;
 object-position:center center!important;position:absolute!important;inset:0!important;
 filter:none!important;transform:none!important;
}
body.revix-v7 .videos-grid>.revix-social-video-card>.video-thumb>.play-btn,
body.revix-v7 .rev9-home-videos>.revix-social-video-card>.video-thumb>.play-btn{
 position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;
 width:60px!important;height:60px!important;display:grid!important;place-items:center!important;
 background:#1188dce8!important;border:2px solid #fff!important;border-radius:50%!important;
 box-shadow:0 10px 28px #0b4b7652!important;z-index:2!important;pointer-events:none!important;
}
body.revix-v7 .videos-grid>.video-card>h3,
body.revix-v7 .rev9-home-videos>.video-card>h3{
 font-size:clamp(13px,1.1vw,17px)!important;line-height:1.7!important;
 margin:12px 0 7px!important;padding-inline:17px!important;overflow-wrap:anywhere;
}
body.revix-v7 .videos-grid>.video-card>p,
body.revix-v7 .rev9-home-videos>.video-card>p{
 margin:0 0 8px!important;padding-inline:17px!important;font-size:12px!important;
 line-height:1.9!important;color:#647f95!important;overflow-wrap:anywhere;
}
/* The iframe within a Reel gets its own 9:16 window, not the old forced widescreen viewport. */
body.revix-v7 #video-modal.revix-video-portrait:not([hidden]) {
 padding:env(safe-area-inset-top) 10px env(safe-area-inset-bottom)!important;
 align-items:center!important;
}
body.revix-v7 #video-modal.revix-video-portrait>.video-modal{
 display:flex!important;flex-direction:column!important;align-items:stretch!important;
 width:min(460px,calc(100vw - 20px))!important;max-width:460px!important;
 max-height:calc(100dvh - max(24px,env(safe-area-inset-top)) - max(24px,env(safe-area-inset-bottom)))!important;
 padding:15px 14px 14px!important;overflow-y:auto!important;overflow-x:hidden!important;
 border-radius:22px!important;background:#092846!important;
}
body.revix-v7 #video-modal.revix-video-portrait #video-title{
 padding:0 46px!important;margin:4px 0 10px!important;
 font-size:clamp(15px,3.7vw,20px)!important;line-height:1.6!important;
 text-align:center!important;color:#fff!important;overflow-wrap:anywhere;
}
body.revix-v7 #video-modal.revix-video-portrait .modal-close{
 z-index:3!important;left:12px!important;top:12px!important;width:40px!important;height:40px!important;
}
body.revix-v7 #video-modal.revix-video-portrait #video-frame{
 display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:start!important;
 width:100%!important;height:auto!important;max-height:none!important;
 min-height:0!important;overflow:visible!important;aspect-ratio:auto!important;
 gap:9px!important;margin:0!important;border-radius:13px!important;background:transparent!important;
}
body.revix-v7 #video-modal.revix-video-portrait #video-frame>iframe.revix-instagram-embed{
 display:block!important;flex:0 0 auto!important;
 width:auto!important;max-width:100%!important;
 height:min(68dvh,675px)!important;max-height:none!important;min-height:0!important;
 aspect-ratio:9/16!important;object-fit:contain!important;
 border:0!important;border-radius:12px!important;
 background:#061a2e!important;
}
body.revix-v7 #video-modal.revix-video-portrait .revix-ig-fallback{
 width:100%!important;max-width:370px!important;font-size:12px!important;
 padding:9px!important;text-align:center!important;line-height:1.7!important;
}
/* All desktop cards remain three in a row, tablet gracefully becomes two, phone one. */
@media (max-width:950px){
 body.revix-v7 .videos-grid,body.revix-v7 .rev9-home-videos{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media (max-width:640px){
 body.revix-v7 .videos-grid,body.revix-v7 .rev9-home-videos{grid-template-columns:minmax(0,1fr)!important;gap:14px!important;}
 body.revix-v7 #video-modal.revix-video-portrait>.video-modal{width:calc(100vw - 18px)!important;padding:12px 10px 11px!important;}
 body.revix-v7 #video-modal.revix-video-portrait #video-title{font-size:16px!important;padding-inline:44px!important;}
 body.revix-v7 #video-modal.revix-video-portrait #video-frame>iframe.revix-instagram-embed{height:min(64dvh,585px)!important;}
}
@media (max-height:660px){
 body.revix-v7 #video-modal.revix-video-portrait #video-frame>iframe.revix-instagram-embed{height:56dvh!important;}
}
