.youtube-gallery{position:relative}.youtube-gallery__grid{display:grid;width:100%}.youtube-video-item{position:relative;width:100%}.youtube-video-card{background:rgb(var(--color-background));border-radius:var(--media-radius);overflow:hidden;box-shadow:rgba(var(--color-shadow),var(--shadow-opacity)) var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius);border:var(--media-border-width) solid rgba(var(--color-border),var(--media-border-opacity));transition:transform .3s ease,box-shadow .3s ease}.youtube-video-card:hover{transform:translateY(-2px);box-shadow:rgba(var(--color-shadow),calc(var(--shadow-opacity) + .1)) var(--shadow-horizontal-offset) calc(var(--shadow-vertical-offset) + 2px) calc(var(--shadow-blur-radius) + 5px)}.youtube-video-thumbnail{position:relative;width:100%;aspect-ratio:16 / 9;overflow:hidden;cursor:pointer;background:rgba(var(--color-foreground),.04)}.youtube-thumbnail-image{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .3s ease}.youtube-video-thumbnail:hover .youtube-thumbnail-image{transform:scale(1.05)}.youtube-play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:48px;transition:transform .3s ease,opacity .3s ease;z-index:2}.youtube-video-thumbnail:hover .youtube-play-button{transform:translate(-50%,-50%) scale(1.1)}.youtube-play-icon{width:100%;height:100%;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}.youtube-duration{position:absolute;bottom:8px;right:8px;background:#000c;color:#fff;padding:2px 6px;border-radius:3px;font-size:.75rem;font-weight:500;line-height:1.2;z-index:2}.youtube-video-info{padding:1.5rem}.youtube-video-title{margin:0 0 .5rem;color:rgb(var(--color-foreground));line-height:1.3}.youtube-video-title:hover{color:rgb(var(--color-link))}.youtube-video-description{margin:.5rem 0;color:rgba(var(--color-foreground),.75);font-size:.875rem;line-height:1.4}.youtube-channel-name{margin-top:.75rem;color:rgba(var(--color-foreground),.6);font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.youtube-gallery__footer{margin-top:3rem}.youtube-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;overflow:hidden}.youtube-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000e6;opacity:0;transition:opacity .3s ease}.youtube-modal.active .youtube-modal__backdrop{opacity:1}.youtube-modal__content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:2rem;box-sizing:border-box}.youtube-modal__close{position:absolute;top:2rem;right:2rem;width:40px;height:40px;background:#ffffff1a;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .3s ease;z-index:10}.youtube-modal__close:hover{background:#fff3}.youtube-modal__close .icon{width:20px;height:20px}.youtube-modal__video-container{width:100%;max-width:1200px;aspect-ratio:16 / 9;background:#000;border-radius:8px;overflow:hidden;transform:scale(.8);opacity:0;transition:transform .3s ease,opacity .3s ease}.youtube-modal.active .youtube-modal__video-container{transform:scale(1);opacity:1}#youtube-player{width:100%;height:100%}.youtube-video-thumbnail.loading:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border:3px solid rgba(255,255,255,.3);border-top:3px solid rgb(var(--color-accent-1));border-radius:50%;animation:youtube-spinner 1s linear infinite;z-index:3}@keyframes youtube-spinner{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.youtube-video-thumbnail:focus{outline:2px solid rgb(var(--color-accent-1));outline-offset:2px}.youtube-modal__close:focus{outline:2px solid white;outline-offset:2px}@media screen and (max-width: 749px){.youtube-video-info{padding:1rem}.youtube-video-title{font-size:1rem}.youtube-video-description{font-size:.8rem}.youtube-play-button{width:56px;height:40px}.youtube-modal__content{padding:1rem}.youtube-modal__close{top:1rem;right:1rem;width:36px;height:36px}}@media screen and (max-width: 480px){.youtube-modal__video-container{width:100%;height:56.25vw;max-height:calc(100vh - 4rem)}}@media (prefers-contrast: high){.youtube-video-card{border-width:2px}.youtube-duration{background:#000;border:1px solid #fff}}@media (prefers-reduced-motion: reduce){.youtube-video-card,.youtube-thumbnail-image,.youtube-play-button,.youtube-modal__backdrop,.youtube-modal__video-container{transition:none}.youtube-video-thumbnail:hover .youtube-thumbnail-image,.youtube-video-card:hover{transform:none}}@media (prefers-color-scheme: dark){.youtube-duration{background:#ffffffe6;color:#000}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/component-youtube-gallery.css.map */