.videoframe-wrapper{width:100%;padding:var(--d-pad,0px 50px 0px 50px);background:#fff}.videoframe-grid{grid-template-columns:repeat(var(--grid-cols,2), 1fr);gap:30px;display:grid}.videoframe-item{flex-direction:column;gap:16px;display:flex}.videoframe-container{aspect-ratio:16/9;background:#000;border-radius:12px;width:100%;position:relative;overflow:hidden}.videoframe-thumbnail-preview{object-fit:cover;width:100%;height:100%;display:block}.videoframe-iframe-preview{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.videoframe-iframe-preview iframe{object-fit:cover;border:none;width:100%;height:100%}.videoframe-overlay{z-index:10;cursor:pointer;background:#0000001a;justify-content:center;align-items:center;width:100%;height:100%;transition:all .3s;display:flex;position:absolute;top:0;left:0}.glass-play-button{-webkit-backdrop-filter:blur(20px)saturate(160%);background:linear-gradient(135deg,#ffffff4d 0%,#ffffff0d 100%);border:1px solid #ffffff26;border-color:#fff6 #ffffff26 #ffffff26 #fff6;border-radius:45px;justify-content:center;align-items:center;width:90px;height:90px;padding:0;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden;box-shadow:0 10px 30px #00000026,inset 0 1px #fff9,inset 0 -1px #ffffff1a}.glass-play-button:before{content:"";z-index:0;background:linear-gradient(135deg,#fff6 0%,#ffffff1a 100%);border:1px solid #fff3;border-color:#ffffff80 #fff3 #fff3 #ffffff80;border-radius:45px;width:60px;height:60px;transition:all .4s cubic-bezier(.4,0,.2,1);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 2px 10px #fff6}.play-icon{color:#fff;filter:drop-shadow(0 2px 4px #0003);z-index:1;flex-shrink:0;width:28px;height:28px;transition:margin .4s cubic-bezier(.4,0,.2,1);position:relative}.play-text{opacity:0;white-space:nowrap;color:#fff;text-shadow:0 2px 4px #0003;z-index:1;max-width:0;font-size:1.1rem;font-weight:500;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.videoframe-overlay:hover .glass-play-button{background:linear-gradient(135deg,#fff6 0%,#ffffff1a 100%);border:1px solid #fff3;border-color:#ffffff80 #fff3 #fff3 #ffffff80;width:150px;padding:0 20px;box-shadow:0 15px 40px #0003,inset 0 1px #ffffffb3,inset 0 -1px #ffffff26}.videoframe-overlay:hover .glass-play-button:before{background:linear-gradient(135deg,#ffffff80 0%,#ffffff26 100%);width:124px}.videoframe-overlay:hover .play-icon{margin-left:0}.videoframe-overlay:hover .play-text{opacity:1;max-width:60px;margin-left:8px}.videoframe-info{flex-direction:column;gap:6px;padding:0 4px;display:flex}.videoframe-title{color:#222;margin:0;font-size:1.1rem;font-weight:500;line-height:1.4}.videoframe-desc{color:#666;margin:0;font-size:.9rem;line-height:1.5}.videoframe-modal-overlay{z-index:9999;-webkit-backdrop-filter:blur(4px);background:#000000b3;justify-content:center;align-items:center;width:100vw;height:100vh;padding:20px;animation:.3s fadeIn;display:flex;position:fixed;top:0;left:0}.videoframe-modal-content{aspect-ratio:16/9;background:#000;border-radius:12px;width:100%;max-width:900px;animation:.3s scaleUp;position:relative;overflow:hidden;box-shadow:0 20px 50px #00000080}.videoframe-modal-close{color:#fff;cursor:pointer;z-index:10000;background:0 0;border:none;font-size:2rem;transition:color .2s;position:absolute;top:-40px;right:0}.videoframe-modal-close:hover{color:#ccc}@media (max-width:768px){.videoframe-modal-close{background:#00000080;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:1.5rem;display:flex;top:10px;right:10px}}.videoframe-modal-iframe-container{width:100%;height:100%}.videoframe-modal-iframe-container iframe{border:none;width:100%;height:100%}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleUp{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (max-width:768px){.videoframe-grid{grid-template-columns:1fr;gap:32px}.videoframe-wrapper{padding:var(--m-pad,20px 15px)}.glass-play-button{width:60px;height:60px}.play-icon{width:24px;height:24px}.videoframe-title{font-size:1.05rem}.videoframe-desc{font-size:.85rem}}