/*
 * Video Testimonial Carousel
 * Premium SaaS carousel: wide active video card + slim vertical preview cards.
 * GPU-accelerated (transform/opacity only). Pairs with the theme design tokens.
 */

.vtc{
	--vtc-card-w:min(58vw,720px);
	--vtc-strip-w:88px;
	--vtc-gap:18px;
	position:relative;
	overflow:hidden;
	padding-block:clamp(3.5rem,8vw,6.5rem);
	background:radial-gradient(125% 80% at 50% 0%,#141a26 0%,#0a0e17 55%,#05070c 100%);
}

/* ---- Heading ---- */
.vtc__head{text-align:center;margin-bottom:clamp(2rem,5vw,3.25rem)}
.vtc__eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#93c5fd;background:rgba(37,99,235,.2);padding:.4rem .95rem;border-radius:50px;margin-bottom:1rem}
.vtc__title{margin:0;font-size:var(--fs-800,2rem);font-weight:800;letter-spacing:-.02em;color:#fff}

/* ---- Stage ---- */
.vtc__viewport{position:relative;max-width:1180px;margin:0 auto;height:clamp(340px,46vw,520px);touch-action:pan-y;outline:none}
.vtc__viewport:focus-visible{outline:3px solid var(--color-accent,#06b6d4);outline-offset:6px;border-radius:24px}
.vtc__track{position:absolute;inset:0}

/* ---- Card ---- */
.vtc__card{
	position:absolute;top:50%;left:50%;height:100%;
	border-radius:22px;overflow:hidden;background:transparent;cursor:pointer;
	border:1px solid rgba(255,255,255,.1);
	box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
	transform:translate(-50%,-50%) scale(.8);opacity:0;
	transition:transform .6s cubic-bezier(.4,.05,.2,1),width .6s cubic-bezier(.4,.05,.2,1),opacity .5s ease;
	will-change:transform,width;
}

/* Positions (set by JS) */
.vtc__card.is-active{width:var(--vtc-card-w);transform:translate(-50%,-50%) scale(1);opacity:1;z-index:5;cursor:default;border-color:rgba(255,255,255,.16);box-shadow:0 50px 95px -30px rgba(0,0,0,.85),0 0 70px -16px rgba(37,99,235,.4)}
.vtc__card.pos-l1{width:var(--vtc-strip-w);opacity:1;z-index:4;transform:translate(calc(-50% - var(--vtc-card-w) / 2 - var(--vtc-gap) - var(--vtc-strip-w) / 2),-50%)}
.vtc__card.pos-r1{width:var(--vtc-strip-w);opacity:1;z-index:4;transform:translate(calc(-50% + var(--vtc-card-w) / 2 + var(--vtc-gap) + var(--vtc-strip-w) / 2),-50%)}
.vtc__card.pos-l2{width:var(--vtc-strip-w);opacity:.9;z-index:3;transform:translate(calc(-50% - var(--vtc-card-w) / 2 - var(--vtc-gap) * 2 - var(--vtc-strip-w) * 1.5),-50%) scale(.94)}
.vtc__card.pos-r2{width:var(--vtc-strip-w);opacity:.9;z-index:3;transform:translate(calc(-50% + var(--vtc-card-w) / 2 + var(--vtc-gap) * 2 + var(--vtc-strip-w) * 1.5),-50%) scale(.94)}
.vtc__card.is-hidden{width:var(--vtc-strip-w);opacity:0;z-index:1;transform:translate(-50%,-50%) scale(.7);pointer-events:none}

/* ---- Media ---- */
.vtc__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) brightness(.5);transition:filter .6s ease}
.vtc__card.is-active .vtc__thumb{filter:none}
/* Collapsed strips stay dark; the active frame is transparent (shows the
   black section through it) so it reads as an empty video frame + play button. */
.vtc__thumb--empty{background:#10151f}
.vtc__card.is-active .vtc__thumb--empty{background:rgba(255,255,255,.04)}

.vtc__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(2,6,23,.82) 0%,rgba(2,6,23,.25) 50%,rgba(2,6,23,.4) 100%);transition:opacity .5s ease}
.vtc__card.is-active .vtc__scrim{background:linear-gradient(to top,rgba(2,6,23,.82) 0%,rgba(2,6,23,.05) 45%,transparent 68%)}

/* ---- Vertical label (preview cards) ---- */
.vtc__vlabel{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease}
.vtc__vlabel-text{writing-mode:vertical-rl;transform:rotate(180deg);color:#fff;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.9rem;white-space:nowrap}
.vtc__card.is-active .vtc__vlabel{opacity:0;pointer-events:none}

/* ---- Play button (active) ---- */
.vtc__play{position:absolute;top:50%;left:50%;z-index:3;width:80px;height:80px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-primary,#2563eb);background:#fff;cursor:pointer;box-shadow:0 14px 34px -10px rgba(0,0,0,.45);transform:translate(-50%,-50%) scale(.5);opacity:0;transition:transform .5s ease .15s,opacity .5s ease .15s,background .25s ease,color .25s ease}
.vtc__card.is-active .vtc__play{transform:translate(-50%,-50%) scale(1);opacity:1;animation:vtcPulse 2.4s ease-out infinite}
.vtc__card.is-active .vtc__play:hover{background:var(--color-primary,#2563eb);color:#fff;animation:none;transform:translate(-50%,-50%) scale(1.08)}
.vtc__play svg{margin-left:4px}
@keyframes vtcPulse{0%{box-shadow:0 14px 34px -10px rgba(0,0,0,.45),0 0 0 0 rgba(37,99,235,.5)}70%{box-shadow:0 14px 34px -10px rgba(0,0,0,.45),0 0 0 22px rgba(37,99,235,0)}100%{box-shadow:0 14px 34px -10px rgba(0,0,0,.45),0 0 0 0 rgba(37,99,235,0)}}

/* ---- Info (active) ---- */
.vtc__info{position:absolute;left:0;bottom:0;z-index:3;padding:1.5rem 1.8rem;color:#fff;max-width:80%;opacity:0;transform:translateY(14px);transition:opacity .5s ease .2s,transform .5s ease .2s}
.vtc__card.is-active .vtc__info{opacity:1;transform:translateY(0)}
.vtc__quote{margin:0 0 .85rem;font-size:1.05rem;line-height:1.5;font-weight:500;color:rgba(255,255,255,.92)}
.vtc__name{display:block;font-weight:700;font-size:1.3rem;line-height:1.15}
.vtc__role{display:block;margin-top:.2rem;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.72)}

/* ---- Controls ---- */
.vtc__controls{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
.vtc__nav{width:50px;height:50px;border:0;border-radius:50%;background:#fff;color:var(--color-primary,#2563eb);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 14px 28px -12px rgba(15,23,42,.4);transition:background .2s ease,color .2s ease,transform .2s ease}
.vtc__nav:hover{background:var(--color-primary,#2563eb);color:#fff;transform:scale(1.08)}
.vtc__dots{display:flex;align-items:center;gap:.55rem}
.vtc__dot{width:8px;height:8px;padding:0;border:0;border-radius:50px;background:rgba(255,255,255,.32);cursor:pointer;transition:background .25s ease,width .25s ease}
.vtc__dot.is-active{background:var(--color-primary,#2563eb);width:26px}

/* ---- Lightbox ---- */
.vtc__modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);background:rgba(2,6,23,.82);backdrop-filter:blur(4px)}
.vtc__modal[hidden]{display:none}
.vtc__modal-frame{position:relative;width:min(960px,100%);aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.vtc__modal-frame iframe,.vtc__modal-frame video{position:absolute;inset:0;width:100%;height:100%;border:0}
.vtc__modal-close{position:absolute;top:18px;right:24px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;transition:background .2s ease}
.vtc__modal-close:hover{background:rgba(255,255,255,.3)}

/* ---- Tablet: one preview card per side ---- */
@media(max-width:992px){
	.vtc{--vtc-card-w:min(70vw,640px);--vtc-strip-w:74px}
	.vtc__card.pos-l2,.vtc__card.pos-r2{opacity:0;pointer-events:none}
}

/* ---- Mobile: full-width swipeable single card, no side strips ---- */
@media(max-width:600px){
	.vtc{--vtc-card-w:88vw}
	.vtc__viewport{height:clamp(380px,120vw,520px)}
	.vtc__card.pos-l1,.vtc__card.pos-r1,.vtc__card.pos-l2,.vtc__card.pos-r2{opacity:0;pointer-events:none}
	.vtc__info{max-width:100%}
	.vtc__quote{font-size:.98rem}
}

/* ---- Motion preferences ---- */
@media(prefers-reduced-motion:reduce){
	.vtc__card,.vtc__thumb,.vtc__play,.vtc__nav,.vtc__info{transition:none}
	.vtc__card.is-active .vtc__play{animation:none}
}