/* CT Video Card */
.ct-video-card-wrap{width:100%}
.ct-video-card-wrap--center{margin-left:auto;margin-right:auto}
.ct-video-card-wrap--right{margin-left:auto}

.ct-video-card{
    --ct-accent:#f0bb3b;--ct-accent-fg:#0a0909;--ct-border:#2f2d2e;--ct-soft:#1a1818;
    position:relative;display:block;width:100%;padding:0;margin:0;cursor:pointer;text-align:left;overflow:hidden;
    border:1px solid var(--ct-border);border-radius:16px;background:var(--ct-soft);
    box-shadow:0 18px 44px -26px rgba(15,23,42,.35);transition:transform .15s,box-shadow .15s;
    font:inherit;line-height:normal;
}
.ct-video-card:hover{transform:translateY(-2px);box-shadow:0 24px 56px -26px rgba(15,23,42,.45)}
.ct-video-card:focus{outline:none}
.ct-video-card:focus-visible{outline:2px solid var(--ct-accent);outline-offset:2px}

.ct-video-card__media{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden}
.ct-video-card .ct-video-card__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;margin:0;transition:transform .7s}
.ct-video-card:hover .ct-video-card__img{transform:scale(1.04)}
.ct-video-card__shade{position:absolute;inset:0;background:linear-gradient(to top right,rgba(3,2,2,.55),rgba(3,2,2,.2),transparent)}

.ct-video-card__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.ct-video-card__ping{position:absolute;width:64px;height:64px;border-radius:50%;background:rgba(240,187,59,.3);animation:ct-video-ping 1s cubic-bezier(0,0,.2,1) infinite}
.ct-video-card__ring{position:absolute;width:48px;height:48px;border-radius:50%;background:rgba(240,187,59,.2)}
.ct-video-card__btn{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
    background:var(--ct-accent);color:var(--ct-accent-fg);box-shadow:0 10px 15px -3px rgba(0,0,0,.2);transition:transform .3s}
.ct-video-card__btn svg{transform:translateX(1px)}
.ct-video-card:hover .ct-video-card__btn{transform:scale(1.1)}

.ct-video-card__caption{position:absolute;left:0;right:0;bottom:0;display:block;padding:16px}
.ct-video-card__label{display:block;font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ct-accent);line-height:1.4}
.ct-video-card__title{display:block;margin-top:4px;font-family:"Fraunces",Georgia,serif;font-size:14px;color:#fff;line-height:1.4}

@keyframes ct-video-ping{75%,100%{transform:scale(2);opacity:0}}

/* Popup */
.ct-video-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px}
.ct-video-modal[hidden]{display:none}
.ct-video-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.8)}
.ct-video-modal__dialog{position:relative;width:100%;max-width:1100px;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.ct-video-modal__frame,.ct-video-modal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ct-video-modal__close{position:absolute;top:10px;right:10px;z-index:2;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;
    border:0;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;cursor:pointer}
.ct-video-modal__close:hover{background:rgba(0,0,0,.75)}
.ct-video-modal__close:focus-visible{outline:2px solid #f0bb3b;outline-offset:2px}
body.ct-video-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
    .ct-video-card__ping{animation:none}
    .ct-video-card,.ct-video-card .ct-video-card__img,.ct-video-card__btn{transition:none}
}
