/* ==========================================================
   Video Testimonials – scroller + popup player
   ========================================================== */
.video-testimonials { padding-bottom: 20px; }

.vt-wrap { position: relative; }

/* ---------- Scroller ---------- */
.vt-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding: 10px 4px 22px;
  scrollbar-width: none;
  cursor: grab;
}
.vt-track::-webkit-scrollbar { display: none; }
.vt-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.vt-track.is-dragging .vt-card { pointer-events: none; }

.vt-card {
  all: unset;
  box-sizing: border-box;
  position: relative;
  flex: 0 0 250px;
  aspect-ratio: 464 / 832;
  border-radius: 18px;
  overflow: hidden;
  scroll-snap-align: start;
  background: #111;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(32, 15, 13, .18);
  transition: transform .3s ease, box-shadow .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.vt-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(32, 15, 13, .28); }
.vt-card:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 3px; }

.vt-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
  -webkit-user-drag: none;
}
.vt-card:hover img { transform: scale(1.06); }

.vt-card::after {            /* bottom gradient for text legibility */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.05) 48%, rgba(0,0,0,.25) 100%);
  pointer-events: none;
}

.vt-play {
  position: absolute; z-index: 2;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-color);
  color: #fff; font-size: 2rem;
  box-shadow: 0 0 0 0 rgba(249, 94, 77, .55);
  animation: vtPulse 2.2s infinite;
  transition: transform .25s ease;
}
.vt-play i { margin-left: 3px; line-height: 1; }
.vt-card:hover .vt-play { transform: translate(-50%, -50%) scale(1.12); }

@keyframes vtPulse {
  0%   { box-shadow: 0 0 0 0 rgba(249, 94, 77, .55); }
  70%  { box-shadow: 0 0 0 16px rgba(249, 94, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(249, 94, 77, 0); }
}

.vt-duration {
  position: absolute; z-index: 2; top: 12px; right: 12px;
  background: rgba(0,0,0,.6);
  color: #fff; font-size: .75rem; font-weight: 500;
  padding: 3px 9px; border-radius: 20px;
  backdrop-filter: blur(4px);
}
.vt-meta {
  position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px;
  color: #fff; text-align: left;
}
.vt-meta strong { display: block; font-family: var(--heading-font); font-size: 1rem; line-height: 1.25; color: #fff; }
.vt-meta span { display: block; font-size: .78rem; opacity: .85; margin-top: 2px; }

/* ---------- Arrows & progress ---------- */
.vt-arrow {
  position: absolute; z-index: 5; top: 42%;
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--heading-color);
  font-size: 1.4rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  cursor: pointer;
  transition: background .25s, color .25s, opacity .25s, transform .25s;
}
.vt-arrow:hover { background: var(--accent-color); color: #fff; transform: scale(1.08); }
.vt-arrow[disabled] { opacity: 0; pointer-events: none; }
.vt-prev { left: -14px; }
.vt-next { right: -14px; }

.vt-progress {
  height: 4px; border-radius: 4px; margin: 0 auto; max-width: 260px;
  background: color-mix(in srgb, var(--default-color), transparent 85%);
  overflow: hidden;
}
.vt-progress span {
  display: block; height: 100%; width: 20%;
  background: var(--accent-color); border-radius: 4px;
  transform-origin: left; transition: margin-left .15s linear, width .15s linear;
}
.vt-hint { text-align: center; font-size: .85rem; margin: 12px 0 0; opacity: .7; }

/* ---------- Popup ---------- */
body.vt-lock { overflow: hidden; }

.vt-modal {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 4, 4, .88);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
  padding: 12px;
}
.vt-modal.is-open { opacity: 1; visibility: visible; }

.vt-dialog {
  position: relative;
  display: flex; flex-direction: column;
  max-width: 100%;
  transform: scale(.94) translateY(14px);
  transition: transform .3s ease;
}
.vt-modal.is-open .vt-dialog { transform: none; }

.vt-stage {
  position: relative;
  aspect-ratio: 464 / 832;
  height: min(86vh, 86dvh, calc((100vw - 24px) * 832 / 464));
  max-width: calc(100vw - 24px);
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.vt-stage video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }

.vt-caption {
  color: #fff; text-align: center; margin-top: 10px; font-size: .95rem;
}
.vt-caption small { opacity: .7; margin-left: 8px; }

.vt-close, .vt-nav {
  position: absolute; border: 0; cursor: pointer; z-index: 6;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.16); color: #fff;
  backdrop-filter: blur(6px);
  transition: background .25s, transform .25s;
}
.vt-close:hover, .vt-nav:hover { background: var(--accent-color); }
.vt-close { top: 10px; right: 10px; width: 40px; height: 40px; font-size: 1.5rem; }
.vt-nav { top: calc(50% - 34px); width: 48px; height: 48px; font-size: 1.5rem; }
.vt-nav:hover { transform: scale(1.08); }
.vt-nav-prev { left: -64px; }
.vt-nav-next { right: -64px; }

/* Narrow screens: arrows sit over the video edges */
@media (max-width: 767px) {
  .vt-card { flex-basis: 70vw; max-width: 250px; border-radius: 16px; }
  .vt-track { gap: 14px; }
  .vt-arrow { display: none; }            /* swipe on touch devices */
  .vt-nav { width: 40px; height: 40px; font-size: 1.25rem; top: calc(50% - 54px); background: rgba(0,0,0,.45); }
  .vt-nav-prev { left: 8px; }
  .vt-nav-next { right: 8px; }
  .vt-stage { height: min(80vh, 80dvh, calc((100vw - 24px) * 832 / 464)); }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .vt-card { flex-basis: 230px; }
  .vt-prev { left: -6px; } .vt-next { right: -6px; }
  .vt-nav-prev { left: 8px; } .vt-nav-next { right: 8px; }   /* keep inside viewport on tablets */
  .vt-nav { background: rgba(0,0,0,.45); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .vt-stage { height: 92vh; height: 92dvh; }
  .vt-caption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vt-play { animation: none; }
  .vt-track { scroll-behavior: auto; }
  .vt-card, .vt-card img, .vt-dialog, .vt-modal { transition: none; }
}