/* =============================================================================
   D'Cal — video testimonials (homepage + /partner/)

   Two card shapes share one player:
     .vt-card--reel  9:16 phone videos (end customers)
     .vt-card--wide  16:9 videos      (distributors)

   Each card is a real <a href="…mp4">, so with no JS a click still plays the
   video. js/video-testimonials.js upgrades it to the modal player and the
   muted in-card preview. Everything is prefixed .vt- so it cannot collide with
   the homepage (premium-custom.css) or the partner page (styles.css).
   ============================================================================= */

.vt-sec{
  --vt-accent:#00B4D8;
  --vt-accent-2:#0077B6;
  --vt-ink:#0B1220;
  --vt-muted:#5B6B82;
  --vt-line:rgba(11,18,32,.08);
  --vt-radius:20px;
  --vt-ease:cubic-bezier(.2,.7,.2,1);
  position:relative;
}
.vt-sec--dark{
  --vt-ink:#fff;
  --vt-muted:rgba(226,240,255,.72);
  --vt-line:rgba(255,255,255,.12);
  background:
    radial-gradient(900px 420px at 12% 0%,rgba(0,180,216,.22),transparent 70%),
    radial-gradient(700px 380px at 95% 100%,rgba(72,202,228,.14),transparent 70%),
    linear-gradient(180deg,#03045E 0%,#012A4A 100%);
  color:#fff;
}

/* ---------- section head (homepage variant; the partner page uses its own) --- */
.vt-head{text-align:center;max-width:780px;margin:0 auto 40px}
.vt-sec--dark .vt-head .eyebrow{background:rgba(144,224,239,.12);color:#90E0EF}
.vt-sec--dark .vt-head .h-section{color:#fff;margin:18px 0}
.vt-sec--dark .vt-head .grad-text{background:linear-gradient(135deg,#90E0EF 0%,#48CAE4 50%,#00B4D8 100%);-webkit-background-clip:text;background-clip:text}
.vt-sec--dark .vt-head .lead{color:var(--vt-muted);margin:0 auto}

/* factual proof strip under the heading */
.vt-proof{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.vt-proof li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--vt-ink);background:rgba(0,180,216,.08);border:1px solid var(--vt-line)}
.vt-sec--dark .vt-proof li{background:rgba(255,255,255,.06)}
.vt-proof svg{width:15px;height:15px;color:var(--vt-accent);flex-shrink:0}

/* ---------- group (one per audience) ---------- */
.vt-group + .vt-group{margin-top:56px}
.vt-group-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.vt-group-title{font-family:'Montserrat','Inter',sans-serif;font-size:clamp(20px,2vw,24px);font-weight:800;letter-spacing:-.01em;color:var(--vt-ink);margin:0;line-height:1.2}
.vt-group-sub{font-size:14px;color:var(--vt-muted);margin:6px 0 0;line-height:1.5}
.vt-group-hint{display:none;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--vt-muted);letter-spacing:.04em;text-transform:uppercase}
.vt-group-hint svg{width:16px;height:16px}

/* ---------- grids ---------- */
.vt-grid{display:grid;gap:20px;margin:0;padding:0;list-style:none}
.vt-grid > li{min-width:0}
.vt-grid--reels{grid-template-columns:repeat(4,minmax(0,1fr))}
.vt-grid--wide{grid-template-columns:repeat(4,minmax(0,1fr))}
.vt-grid--wide.vt-grid--2up{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}

/* ---------- card ---------- */
.vt-card{
  position:relative;display:block;overflow:hidden;isolation:isolate;
  border-radius:var(--vt-radius);background:#0B1220;color:#fff;text-decoration:none;
  box-shadow:0 22px 44px -22px rgba(2,20,60,.55),0 0 0 1px rgba(255,255,255,.06) inset;
  transform:translateZ(0);
  transition:transform .5s var(--vt-ease),box-shadow .5s var(--vt-ease);
  -webkit-tap-highlight-color:transparent;
}
.vt-card--reel{aspect-ratio:9/16}
.vt-card--wide{aspect-ratio:16/9}
.vt-card:hover{transform:translateY(-6px);box-shadow:0 34px 60px -24px rgba(0,119,182,.6),0 0 0 1px rgba(144,224,239,.35) inset}
.vt-card:focus-visible{outline:3px solid #90E0EF;outline-offset:4px}

.vt-card img,.vt-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vt-card img{transition:transform 1.2s var(--vt-ease)}
.vt-card:hover img{transform:scale(1.04)}
.vt-card video{opacity:0;transition:opacity .5s ease}
.vt-card.is-previewing video{opacity:1}

.vt-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,8,30,.45) 0%,rgba(3,8,30,0) 24%,rgba(3,8,30,0) 50%,rgba(3,8,30,.9) 100%)}
.vt-card--wide .vt-scrim{background:linear-gradient(180deg,rgba(3,8,30,.35) 0%,rgba(3,8,30,0) 30%,rgba(3,8,30,0) 45%,rgba(3,8,30,.88) 100%)}

.vt-top{position:absolute;z-index:2;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.vt-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:rgba(3,8,30,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);white-space:nowrap}
.vt-chip svg{width:12px;height:12px}
.vt-chip--time{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.vt-chip--verified{background:rgba(0,180,216,.28);border-color:rgba(144,224,239,.45)}

/* play button */
.vt-play{position:absolute;z-index:2;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#0077B6;background:rgba(255,255,255,.94);
  box-shadow:0 12px 30px -8px rgba(0,0,0,.5);transition:transform .4s var(--vt-ease),opacity .4s ease}
.vt-play svg{width:24px;height:24px;margin-left:3px}
.vt-play::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:vt-ring 2.4s var(--vt-ease) infinite}
.vt-card:hover .vt-play{transform:scale(1.1)}
.vt-card.is-previewing .vt-play{opacity:0;transform:scale(.8)}
/* landscape cards are short: the play button sits bottom-right so it never covers the name */
.vt-card--wide .vt-play{left:auto;top:auto;right:14px;bottom:16px;width:48px;height:48px;margin:0}
.vt-card--wide .vt-play svg{width:18px;height:18px}
.vt-card--wide .vt-body{padding-right:72px}
.vt-grid--2up .vt-card--wide .vt-play{right:20px;bottom:22px;width:56px;height:56px}
@keyframes vt-ring{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}

/* "tap for sound" appears while the muted preview runs */
.vt-sound{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font-size:13px;font-weight:700;color:#fff;
  background:rgba(3,8,30,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.22);
  transition:opacity .4s ease,transform .4s var(--vt-ease);white-space:nowrap}
.vt-sound svg{width:16px;height:16px}
.vt-card.is-previewing .vt-sound{opacity:1;transform:translate(-50%,-50%) scale(1)}

.vt-body{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:16px 16px 18px}
.vt-name{display:block;font-family:'Montserrat','Inter',sans-serif;font-size:17px;font-weight:800;line-height:1.25;letter-spacing:-.01em;color:#fff}
.vt-meta{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:13px;line-height:1.4;color:rgba(255,255,255,.8)}
.vt-meta svg{width:13px;height:13px;flex-shrink:0;opacity:.85}
.vt-card--wide .vt-body{padding:14px 16px 16px}
.vt-grid--2up .vt-name{font-size:20px}
.vt-grid--2up .vt-card--wide .vt-body{padding:20px 92px 22px 22px}

/* ---------- closing CTA ---------- */
.vt-cta{margin-top:48px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.vt-cta p{margin:0;font-size:15px;color:var(--vt-muted)}
.vt-cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.vt-sec--dark .vt-cta .btn-ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);color:#fff}
.vt-sec--dark .vt-cta .btn-ghost:hover{background:rgba(255,255,255,.14)}
.vt-cta .btn svg{width:16px;height:16px}
.vt-cta .btn,.vt-caption .btn{text-decoration:none}
#video-stories,#dealer-videos{scroll-margin-top:84px}

/* ---------- small "watch" link used in heroes ---------- */
.vt-jump{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:6px 16px 6px 6px;border-radius:999px;text-decoration:none;
  font-size:14px;font-weight:600;color:#023E8A;background:#fff;box-shadow:0 10px 24px -12px rgba(2,62,138,.45);border:1px solid rgba(2,62,138,.1);
  transition:transform .3s var(--vt-ease),box-shadow .3s var(--vt-ease)}
.vt-jump:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(2,62,138,.55)}
.vt-jump:focus-visible{outline:3px solid #00B4D8;outline-offset:3px}
.vt-jump-faces{display:inline-flex}
.vt-jump-faces img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 25%;border:2px solid #fff;margin-left:-8px;background:#CAF0F8}
.vt-jump-faces img:first-child{margin-left:0}
.vt-jump-play{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#00B4D8,#0077B6);color:#fff}
.vt-jump-play svg{width:10px;height:10px;margin-left:1px}

/* ---------- modal player (native <dialog>) ---------- */
.vt-modal{padding:0;border:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:transparent;color:#fff;overflow:hidden}
.vt-modal::backdrop{background:rgba(2,6,23,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.vt-modal[open]{display:flex;align-items:center;justify-content:center;animation:vt-fade .3s ease}
@keyframes vt-fade{from{opacity:0}to{opacity:1}}
.vt-modal-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;padding:64px 80px 24px;max-width:100%;max-height:100%}
.vt-stage{position:relative;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 40px 80px -20px rgba(0,0,0,.7);animation:vt-rise .4s var(--vt-ease,cubic-bezier(.2,.7,.2,1))}
@keyframes vt-rise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.vt-stage video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
/* size the stage from its aspect ratio so it never overflows the viewport */
.vt-modal[data-shape="reel"] .vt-stage{aspect-ratio:9/16;height:min(78vh,78dvh);max-width:calc(100vw - 32px)}
.vt-modal[data-shape="wide"] .vt-stage{aspect-ratio:16/9;width:min(1040px,calc(100vw - 160px));max-height:70vh}

.vt-caption{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;flex-wrap:wrap}
.vt-modal[data-shape="reel"] .vt-caption{max-width:min(520px,calc(100vw - 32px))}
.vt-caption-name{font-family:'Montserrat','Inter',sans-serif;font-size:17px;font-weight:800;line-height:1.2}
.vt-caption-meta{font-size:13px;color:rgba(255,255,255,.7);margin-top:3px}
.vt-caption .btn{padding:12px 20px;font-size:14px;text-decoration:none;white-space:nowrap}
.vt-caption .btn svg{width:15px;height:15px}

.vt-counter{position:absolute;top:22px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums;white-space:nowrap}
.vt-btn{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);color:#fff;cursor:pointer;transition:background .25s ease,transform .25s ease;-webkit-tap-highlight-color:transparent}
.vt-btn:hover{background:rgba(255,255,255,.18)}
.vt-btn:focus-visible{outline:3px solid #90E0EF;outline-offset:3px}
.vt-btn svg{width:22px;height:22px}
.vt-btn[disabled]{opacity:.25;cursor:default;pointer-events:none}
.vt-close{top:12px;right:16px;width:44px;height:44px}
.vt-prev,.vt-next{top:50%;margin-top:-24px}
.vt-prev{left:16px}
.vt-next{right:16px}
.vt-prev:hover{transform:translateX(-2px)}
.vt-next:hover{transform:translateX(2px)}

html.vt-locked,html.vt-locked body{overflow:hidden !important}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .vt-grid--wide{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* phones & small tablets: swipeable rows, like the reels people already know */
@media (max-width:820px){
  .vt-group-hint{display:inline-flex}
  .vt-grid--reels,.vt-grid--wide,.vt-grid--wide.vt-grid--2up{
    display:grid;grid-auto-flow:column;grid-template-columns:none;gap:14px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    /* bleed to the screen edge but keep the first card aligned to the content */
    margin:0 -24px;padding:4px 24px 12px;scroll-padding-inline:24px;
  }
  .vt-grid--reels{grid-auto-columns:min(62vw,260px)}
  .vt-grid--wide,.vt-grid--wide.vt-grid--2up{grid-auto-columns:min(82vw,420px)}
  .vt-grid::-webkit-scrollbar{display:none}
  .vt-grid > li{scroll-snap-align:start}
  .vt-card:hover{transform:none}
  .vt-group + .vt-group{margin-top:44px}
  .vt-modal-inner{padding:60px 16px 16px;gap:14px}
  .vt-modal[data-shape="reel"] .vt-stage{height:min(72vh,72dvh)}
  .vt-modal[data-shape="wide"] .vt-stage{width:calc(100vw - 32px)}
  .vt-prev,.vt-next{top:auto;bottom:max(16px,env(safe-area-inset-bottom));margin:0;width:44px;height:44px}
  .vt-modal-inner{padding-bottom:76px}
  .vt-caption{justify-content:center;text-align:center}
}
/* the partner page's container is 92% wide, not 24px-padded */
@media (max-width:820px){
  .vt-sec--partner .vt-grid--reels,.vt-sec--partner .vt-grid--wide{margin:0 -4.35%;padding-left:4.35%;padding-right:4.35%;scroll-padding-inline:4.35%}
}
@media (max-width:480px){
  .vt-name{font-size:16px}
  .vt-play{width:56px;height:56px;margin:-28px 0 0 -28px}
  .vt-caption .btn{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .vt-play::before{animation:none}
  .vt-card,.vt-card img,.vt-stage,.vt-modal[open]{transition:none;animation:none}
  .vt-card:hover{transform:none}
  .vt-card:hover img{transform:none}
}