/* ============================================================
   WebNative Video Testimonials
   Grid: one tall card left, two stacked right.
   Left card height = right card + gap + right card, always.
   ============================================================ */
.wvt-grid{
  --wvt-h:580px; --wvt-gap:20px; --wvt-radius:12px;
  --wvt-icon:64px; --wvt-icon-bg:#E0004D; --wvt-icon-fg:#fff; --wvt-ratio:9/16;
  --wvt-left:1.13fr; --wvt-right:.87fr;
  display:grid;
  grid-template-columns:var(--wvt-left) var(--wvt-right);
  grid-template-rows:1fr 1fr;
  gap:var(--wvt-gap);
  height:var(--wvt-h);
}
/* first card spans both rows, so its height is exactly 2 cards + gap */
.wvt-grid > .wvt-card:first-child{grid-row:1 / span 2}

/* ------------------------------------------------------------------
   Hard reset. The cards are <button> elements, so themes and Elementor
   global button styles land on them — often with !important. Everything
   a button skin normally sets is forced back here.
   ------------------------------------------------------------------ */
.wvt-grid .wvt-card,
.wvt-grid .wvt-card:hover,
.wvt-grid .wvt-card:focus,
.wvt-grid .wvt-card:active,
.wvt-grid .wvt-card:visited{
  -webkit-appearance:none !important;appearance:none !important;
  background:#0d0d0d !important;
  background-image:none !important;
  background-color:#0d0d0d !important;
  border:0 !important;
  border-radius:var(--wvt-radius) !important;
  box-shadow:none !important;
  text-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  width:100% !important;
  height:100% !important;
  line-height:0 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  text-decoration:none !important;
  transform:none !important;
  filter:none !important;
  opacity:1 !important;
  color:inherit !important;
  font:inherit !important;
  text-align:left !important;
  display:block !important;
  position:relative !important;
  overflow:hidden !important;
  cursor:pointer !important;
  isolation:isolate;
}
/* same treatment for the close button */
.wvt-lightbox .wvt-close,
.wvt-lightbox .wvt-close:hover,
.wvt-lightbox .wvt-close:focus,
.wvt-lightbox .wvt-close:active{
  -webkit-appearance:none !important;appearance:none !important;
  background:#fff !important;
  background-color:#fff !important;
  background-image:none !important;
  color:#0d0620 !important;
  border:0 !important;
  border-radius:50% !important;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.5) !important;
  padding:0 !important;
  margin:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  width:42px !important;
  height:42px !important;
  line-height:1 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  font:inherit !important;
  display:grid !important;
  cursor:pointer !important;
}
.wvt-thumb,.wvt-thumb img,.wvt-noimg{display:block;width:100%;height:100%}
.wvt-thumb img{object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.wvt-noimg{background:linear-gradient(135deg,#241138,#0d0620)}
.wvt-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%);
  opacity:0;transition:opacity .35s ease;
}
.wvt-card:hover .wvt-thumb img,
.wvt-card:focus-visible .wvt-thumb img{transform:scale(1.04)}
.wvt-card:hover::after,
.wvt-card:focus-visible::after{opacity:1}
.wvt-card:focus-visible{outline:3px solid var(--wvt-icon-bg);outline-offset:3px}

/* play button */
.wvt-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:var(--wvt-icon);height:var(--wvt-icon);border-radius:50%;
  background:var(--wvt-icon-bg);color:var(--wvt-icon-fg);
  display:grid;place-items:center;pointer-events:none;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.55);
  transition:transform .3s cubic-bezier(.34,1.4,.64,1);
}
.wvt-play svg{width:44%;height:44%;fill:currentColor;margin-left:6%}
.wvt-card:hover .wvt-play,
.wvt-card:focus-visible .wvt-play{transform:translate(-50%,-50%) scale(1.09)}
/* pulse ring */
.wvt-play::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--wvt-icon-bg);opacity:.55;
  animation:wvt-pulse 2.4s ease-out infinite;
}
@keyframes wvt-pulse{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.45);opacity:0}
  100%{transform:scale(1.45);opacity:0}
}

/* name / role */
.wvt-meta{line-height:1.3;
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:18px 20px;display:flex;flex-direction:column;gap:2px;
  color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.wvt-name{font-weight:700;font-size:16px;line-height:1.25 !important}
.wvt-role{font-size:13px;line-height:1.4 !important;opacity:.8}

/* ============================================================
   Lightbox
   ============================================================ */
.wvt-lightbox[hidden]{display:none}
.wvt-lightbox{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.wvt-backdrop{
  position:absolute;inset:0;background:rgba(4,0,16,.88);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s ease;
}
.wvt-lightbox.is-open .wvt-backdrop{opacity:1}
.wvt-dialog{
  position:relative;z-index:2;
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .32s ease,transform .32s cubic-bezier(.2,.7,.2,1);
}
.wvt-lightbox.is-open .wvt-dialog{opacity:1;transform:none}

/* the player itself — vertical by default, shorts/reels shape */
.wvt-player{
  aspect-ratio:var(--wvt-ratio,9/16);
  height:min(88vh,900px);
  width:auto;
  max-width:calc(100vw - 48px);
  background:#000;border-radius:14px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
}
.wvt-player iframe,.wvt-player video{
  display:block;width:100%;height:100%;border:0;object-fit:cover;background:#000;
}
.wvt-close{
  position:absolute;top:-14px;right:-14px;z-index:3;
  width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:#fff;color:#0d0620;display:grid;place-items:center;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.5);transition:.22s ease;
}
.wvt-close svg{width:20px;height:20px}
.wvt-lightbox .wvt-close:hover{background:var(--wvt-icon-bg,#E0004D) !important;background-color:var(--wvt-icon-bg,#E0004D) !important;color:#fff !important;transform:rotate(90deg) !important}
.wvt-close:focus-visible{outline:3px solid #fff;outline-offset:2px}
body.wvt-open{overflow:hidden}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:900px){
  .wvt-grid{
    grid-template-columns:1fr;
    grid-template-rows:none;
    height:auto;
  }
  .wvt-grid > .wvt-card:first-child{grid-row:auto}
  .wvt-card{aspect-ratio:16/10;height:auto}
  .wvt-grid > .wvt-card:first-child{aspect-ratio:4/3}
}
@media(max-width:600px){
  .wvt-lightbox{padding:14px}
  .wvt-player{height:min(82vh,760px);max-width:calc(100vw - 28px)}
  .wvt-close{top:-10px;right:-6px;width:38px;height:38px}
  .wvt-play{--wvt-icon:54px}
}
@media(prefers-reduced-motion:reduce){
  .wvt-play::before{animation:none}
  .wvt-thumb img,.wvt-card::after,.wvt-play,.wvt-dialog,.wvt-backdrop,.wvt-close{transition:none}
}