/* ============================================================
   SUCCESS STORIES — Video Testimonial Slider
   Drop-in component styles. Uses the site's existing CSS
   variables (--border, --radius-lg, --radius-pill, --blue,
   --blue-light, --blue-mid, --text, --text-muted) — make sure
   those are already defined on :root in the main stylesheet.
   ============================================================ */

/* Slider shell */
.testi-slider{position:relative;}
.testi-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
.testi-track::-webkit-scrollbar{display:none;}
.testi-track .testi-card{flex:0 0 100%;scroll-snap-align:start;min-width:0;}

/* Nav bar: prev arrow · dots · next arrow · play/pause */
.testi-nav-bar{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px;}
.testi-nav{width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0;}
.testi-nav:hover{background:var(--blue-light);border-color:var(--blue-mid);}
.testi-nav svg{width:14px;height:14px;stroke:var(--blue);}
.testi-dots{display:flex;justify-content:center;align-items:center;gap:8px;}
.testi-dot{width:8px;height:8px;border-radius:50%;background:#d1d5db;border:none;padding:0;cursor:pointer;transition:all .2s;}
.testi-dot.active{background:var(--blue);width:22px;border-radius:4px;}

/* Card: video left / content right (row layout, one story per slide) */
.testi-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:row;align-items:stretch;gap:22px;transition:border-color .15s;}
.testi-card-media{flex:0 0 320px;max-width:320px;}
.testi-card-body{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0;}

.testi-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.testi-badge{font-size:11px;font-weight:500;padding:3px 8px;border-radius:var(--radius-pill);background:var(--blue-light);color:var(--blue);border:1px solid var(--blue-mid);}

.testi-quote{font-family:'DM Sans',sans-serif;font-style:normal;font-size:14px;color:var(--text-muted);line-height:1.7;flex:1;position:relative;padding-left:16px;}
.testi-quote::before{content:'"';position:absolute;left:0;top:-2px;font-family:'Fraunces',serif;font-size:24px;color:var(--blue);line-height:1;}

.testi-footer{padding-top:14px;margin-top:auto;border-top:1px solid var(--border);}
.testi-role{font-size:13px;color:var(--text-muted);margin:0;}

/* Video thumbnail (click to open popup) */
.testi-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;cursor:pointer;background:#0d1117;}
.testi-video-thumb{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;}
.testi-video-thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.testi-video-overlay{position:absolute;inset:0;background:rgba(0,0,0,.18);transition:background .25s ease;}
.testi-video:hover .testi-video-overlay{background:rgba(0,0,0,.32);}
.testi-video-play{position:relative;width:54px;height:54px;border-radius:50%;background:rgba(20,20,20,.62);display:flex;align-items:center;justify-content:center;transition:all .25s ease;z-index:2;}
.testi-video-play svg{width:18px;height:18px;fill:#fff;margin-left:3px;}
.testi-video:hover .testi-video-play{background:#FF0000;transform:scale(1.12);}

/* Mobile: stack video on top, content below */
@media(max-width:700px){
  .testi-card{flex-direction:column !important;}
  .testi-card-media{flex:1 1 auto !important;max-width:none !important;}
}

/* ============================================================
   VIDEO POPUP MODAL
   ============================================================ */
.video-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9999;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;}
.video-modal-overlay.open{display:flex;}
.video-modal-box{background:#111827;border-radius:16px;position:relative;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.6);width:100%;max-width:1200px;}
.video-modal-close{position:absolute;top:12px;right:14px;width:32px;height:32px;background:rgba(255,255,255,.15);border:none;border-radius:50%;color:#fff;font-size:14px;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;}
.video-modal-close:hover{background:rgba(255,255,255,.3);}
.video-modal-screen{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.video-modal-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}