/* ═══════════════════════════════════════════════════════════
   VIDEO VOICES — testimonial video cards + lightbox player
   Threshold design vocabulary · used on index, life-activation,
   empower-thyself, healers-academy
   ═══════════════════════════════════════════════════════════ */

.vv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.5vw, 28px); }
.vv-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-left: auto; margin-right: auto; }
@media (max-width: 1020px) { .vv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .vv-grid, .vv-grid.cols-2 { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } }

.vv-card {
  display: flex; flex-direction: column; gap: 0; text-align: left;
  font-family: inherit; background: rgba(255,255,255,0.35);
  border: 1px solid var(--hairline); padding: 0; cursor: pointer;
  transition: border-color .3s, background .3s, transform .3s;
}
.vv-card:hover { border-color: var(--hairline-gold); background: rgba(255,255,255,0.55); transform: translateY(-3px); }
.threshold .vv-card { background: rgba(255,255,255,0.04); border-color: rgba(244,239,228,0.16); }
.threshold .vv-card:hover { background: rgba(255,255,255,0.07); border-color: var(--hairline-gold); }

.vv-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.vv-thumb img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.15) contrast(1.02); transition: transform .5s cubic-bezier(.2,.6,.2,1), filter .4s; }
.vv-card:hover .vv-thumb img { transform: scale(1.04); filter: sepia(0.05) contrast(1.03); }
.vv-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,20,17,0.35), transparent 45%); }

.vv-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23,20,17,0.55); border: 1px solid var(--gold);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background .3s, transform .3s;
}
.vv-card:hover .vv-play { background: var(--gold); transform: translate(-50%, -50%) scale(1.06); }
.vv-play svg { width: 18px; height: 18px; display: block; margin-left: 3px; }
.vv-play svg polygon { fill: var(--gold-bright); }
.vv-card:hover .vv-play svg polygon { fill: #171411; }

.vv-meta { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.vv-cat { font-family: 'EB Garamond', serif; font-size: 12px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); }
.vv-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.05; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); }
.threshold .vv-title { color: var(--parchment); }
.vv-dur { font-size: 14px; color: var(--muted); }

/* ── Lightbox ── */
.vv-lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(13,11,9,0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.vv-lightbox.open { display: flex; }
.vv-lightbox .vv-frame {
  position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9;
  background: #000; border: 1px solid var(--hairline-gold);
  box-shadow: 0 40px 120px rgba(0,0,0,0.7);
}
.vv-lightbox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vv-lightbox .vv-close {
  position: absolute; top: -52px; right: 0;
  font-family: 'EB Garamond', serif; font-size: 13px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  background: none; border: 1px solid rgba(244,239,228,0.4); color: #F4EFE4;
  padding: 10px 18px; cursor: pointer; transition: border-color .3s, color .3s;
}
.vv-lightbox .vv-close:hover { border-color: var(--gold); color: var(--gold-bright); }
.vv-lightbox .vv-caption {
  position: absolute; bottom: -44px; left: 0; right: 0;
  font-family: 'EB Garamond', serif; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(244,239,228,0.55); text-align: center;
}
@media (max-width: 640px) {
  .vv-lightbox .vv-close { top: auto; bottom: -56px; right: 50%; transform: translateX(50%); }
  .vv-lightbox .vv-caption { display: none; }
}