/* Customer testimonial videos + quote walls. Ported from the Opkald-AI/testimonials
   mockups (PR #1). Used by templates/macros/testimonials.html. */

#vwide{display:grid;grid-template-columns:1fr;gap:22px;max-width:1000px;margin:0 auto}
@media(min-width:900px){#vwide{grid-template-columns:1fr 1fr}}
#vwide .vcard{width:100%;aspect-ratio:16/9}
#vwide .vquote{font-size:1.05rem;bottom:48px}
.qwall{columns:300px 3;column-gap:20px;max-width:1100px;margin:0 auto}
.qcard{break-inside:avoid;background:#fff;border:1px solid rgba(0,7,23,.08);border-radius:16px;padding:24px;margin-bottom:20px;box-shadow:0 2px 10px rgba(0,7,23,.04)}
.qcard .qt{color:#1B2540;font-size:15px;line-height:1.6;font-weight:500}
.qcard .qt::before{content:'\201D';display:block;font-family:'Satoshi',Manrope,sans-serif;font-weight:900;font-size:2.2rem;line-height:1;color:#2D69FF;margin-bottom:6px}
.qcard .qw{margin-top:14px;font-size:12.5px;font-weight:800;color:#2D69FF}
.qcard .qc{font-size:12px;color:#8A93A6;font-weight:600;margin-top:2px}
.qwall:not(.open) .qextra{display:none}
.qwall-btn{display:inline-flex;border-radius:999px;background:#fff;color:#1B2540;font-weight:700;font-size:.9rem;padding:12px 26px;border:1px solid rgba(0,7,23,.12);cursor:pointer;transition:all .15s}
.qwall-btn:hover{border-color:rgba(45,105,255,.4);color:#2D69FF}
.qwall.single{columns:1;max-width:620px}

.vrail-wrap{position:relative}
.vrail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 26px;scrollbar-width:none}
.vrail::-webkit-scrollbar{display:none}
.vcard{position:relative;flex:0 0 auto;width:236px;aspect-ratio:9/16;border-radius:20px;overflow:hidden;cursor:pointer;scroll-snap-align:start;background:#000717;box-shadow:0 10px 30px rgba(0,7,23,.14);transition:transform .22s ease,box-shadow .22s ease;outline:none}
.vcard:hover,.vcard:focus-visible{transform:translateY(-6px) scale(1.015);box-shadow:0 18px 44px rgba(0,7,23,.22)}
.vcard video{width:100%;height:100%;object-fit:cover;display:block}
.vshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,7,23,.18) 0%,rgba(0,7,23,0) 30%,rgba(0,7,23,0) 46%,rgba(0,7,23,.78) 100%);pointer-events:none}
.vclinic{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);color:#1B2540;font-size:11px;font-weight:800;padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px)}
.vquote{position:absolute;left:14px;right:14px;bottom:44px;color:#fff;font-weight:700;font-size:.95rem;line-height:1.32;text-shadow:0 1px 10px rgba(0,7,23,.5)}
.vwho{position:absolute;left:14px;right:14px;bottom:16px;color:rgba(255,255,255,.75);font-size:11.5px;font-weight:600}
.vplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}
.vcard:hover .vplay{opacity:1}
.vplay svg{width:20px;height:20px;fill:#fff;margin-left:3px}
.vdur{position:absolute;top:12px;right:12px;background:rgba(0,7,23,.55);color:#fff;font-size:10.5px;font-weight:700;padding:4px 8px;border-radius:999px;font-variant-numeric:tabular-nums}
.vrail-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid rgba(0,7,23,.12);box-shadow:0 6px 20px rgba(0,7,23,.14);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}
.vrail-btn:hover{border-color:rgba(45,105,255,.4);transform:translateY(-50%) scale(1.06)}
.vrail-btn svg{width:18px;height:18px;stroke:#1B2540;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.vrail-btn.vprev{left:-10px}.vrail-btn.vnext{right:-10px}
@media (max-width:720px){.vrail-btn{display:none}}
.vmodal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(2,10,31,.88);backdrop-filter:blur(10px)}
.vmodal.open{display:flex}
.vplayer{position:relative;width:min(920px,92vw);display:flex;flex-direction:column;align-items:center}
.vframe{position:relative;width:100%;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.vframe video{width:100%;aspect-ratio:16/9;display:block;background:#000}
.vprogress{position:absolute;left:0;right:0;top:0;height:4px;background:rgba(255,255,255,.22);cursor:pointer;z-index:3}
.vbar{height:100%;width:0%;background:#FF5E25;border-radius:0 99px 99px 0;transition:width .12s linear}
.vmeta{margin-top:18px;text-align:center;max-width:60ch}
.vmeta .vclin{display:inline-flex;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:12px;font-weight:800;padding:6px 14px;border-radius:999px}
.vmeta .vq{color:#fff;font-weight:700;font-size:1.35rem;line-height:1.3;margin-top:12px;text-wrap:balance}
.vmeta .vw{color:#80A4FE;font-size:.9rem;font-weight:600;margin-top:8px}
.vclose{position:absolute;top:-52px;right:0;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);cursor:pointer;display:flex;align-items:center;justify-content:center}
.vclose svg{width:16px;height:16px;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.vnav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.vnav:hover{background:rgba(255,255,255,.22)}
.vnav svg{width:20px;height:20px;stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.vnav.vprev{left:-70px}.vnav.vnext{right:-70px}
@media (max-width:1080px){.vnav.vprev{left:8px}.vnav.vnext{right:8px}.vnav{background:rgba(2,10,31,.5)}}
.vcount{position:absolute;top:-46px;left:0;color:rgba(255,255,255,.65);font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums}
.vmute{position:absolute;bottom:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%;background:rgba(2,10,31,.55);border:1px solid rgba(255,255,255,.25);cursor:pointer;display:flex;align-items:center;justify-content:center}
.vmute svg{width:18px;height:18px;fill:#fff}