/* ============================================================
   Testimonials Showcase (Option 3) - Video Hero + Letters Shelf
   Vikas Collectives - uses global variables from style.css
   ============================================================ */

/* ---------- Featured video hero ---------- */
.tst-hero{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--ink);
  border:1px solid var(--brass);
  box-shadow:0 18px 44px rgba(15,26,46,.28);
  margin-top:1.6rem;
}
.tst-hero .stage{
  position:relative;
  aspect-ratio:16/9;
  background:#000;
}
.tst-hero .stage iframe,
.tst-hero .stage img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  object-fit:cover;
  display:block;
}
.tst-hero .stage::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(15,26,46,.6), rgba(15,26,46,0) 45%);
  pointer-events:none;
}
.tst-hero.playing .stage::after{display:none}
.tst-hero-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:74px;
  height:74px;
  border-radius:50%;
  background:rgba(15,26,46,.7);
  border:2px solid var(--gold-l);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .25s ease, transform .25s ease;
  z-index:3;
}
.tst-hero-play svg{width:28px;height:28px;fill:var(--gold-l);margin-left:4px}
.tst-hero-play:hover{background:var(--brass);transform:translate(-50%,-50%) scale(1.07)}
.tst-hero-play:hover svg{fill:#fff}
.tst-hero.playing .tst-hero-play{display:none}
.tst-hero-meta{
  position:absolute;
  left:1.1rem;
  bottom:.9rem;
  z-index:2;
  color:#fff;
  pointer-events:none;
}
.tst-hero-meta strong{
  display:block;
  font-family:'Marcellus',serif;
  font-size:1.25rem;
  line-height:1.25;
}
.tst-hero-meta small{
  display:block;
  margin-top:.15rem;
  color:var(--gold-l);
  font-size:.88rem;
}
.tst-hero.playing .tst-hero-meta{display:none}

/* ---------- Video thumbnail strip ---------- */
.tst-strip-wrap{
  position:relative;
  margin-top:1rem;
}
.tst-strip{
  display:flex;
  gap:.9rem;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding:.5rem .2rem .9rem;
  scroll-snap-type:x proximity;
  cursor:grab;
}
.tst-strip::-webkit-scrollbar{display:none}
.tst-strip.dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.tst-clip{
  flex:0 0 200px;
  scroll-snap-align:start;
  border-radius:10px;
  overflow:hidden;
  background:var(--ivory);
  border:1px solid var(--line);
  cursor:pointer;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.tst-clip:hover{
  transform:translateY(-4px);
  border-color:var(--brass);
  box-shadow:0 10px 24px rgba(15,26,46,.2), 0 0 0 3px rgba(198,161,91,.25);
}
.tst-clip.active{
  border-color:var(--brass);
  box-shadow:0 0 0 3px rgba(198,161,91,.45);
}
.tst-clip .thumb{
  position:relative;
  aspect-ratio:16/9;
  background:var(--ink);
  overflow:hidden;
}
.tst-clip .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}
.tst-clip:hover .thumb img{transform:scale(1.06)}
.tst-clip .thumb .mini-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(15,26,46,.7);
  border:1.5px solid var(--gold-l);
  display:flex;
  align-items:center;
  justify-content:center;
}
.tst-clip .thumb .mini-play svg{width:13px;height:13px;fill:var(--gold-l);margin-left:2px}
.tst-clip.active .thumb .mini-play{background:var(--brass)}
.tst-clip.active .thumb .mini-play svg{fill:#fff}
.tst-clip .meta{padding:.5rem .65rem .65rem}
.tst-clip .meta strong{
  display:block;
  font-family:'Marcellus',serif;
  font-size:.88rem;
  color:var(--ink);
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tst-clip .meta small{
  display:block;
  color:var(--muted);
  font-size:.74rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tst-strip-nav{
  position:absolute;
  top:38%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--ivory);
  color:var(--brass);
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
  z-index:4;
  box-shadow:0 4px 12px rgba(15,26,46,.16);
  transition:background .25s ease, color .25s ease;
}
.tst-strip-nav:hover{background:var(--brass);color:#fff;border-color:var(--brass)}
.tst-strip-prev{left:-14px}
.tst-strip-next{right:-14px}

/* ---------- Filter chips ---------- */
.tst-chips{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  margin:1.2rem 0 1.6rem;
}
.tst-chip{
  font-family:'Mulish',sans-serif;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.05em;
  color:var(--ink);
  background:var(--tint);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.5rem 1.05rem;
  cursor:pointer;
  transition:all .25s ease;
}
.tst-chip:hover{border-color:var(--brass);color:var(--brass)}
.tst-chip[aria-pressed="true"]{
  background:var(--ink);
  color:var(--gold-l);
  border-color:var(--ink);
}
.tst-chip .cnt{margin-left:.35rem;font-weight:600;opacity:.65;font-size:.72rem}

/* ---------- Letters shelf ---------- */
.tst-letter-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:1.5rem;
}
.tst-letter{
  position:relative;
  cursor:pointer;
  background:#fff;
  border:5px solid #fff;
  outline:1px solid var(--line);
  border-radius:6px;
  padding:0 0 2.1rem;
  box-shadow:0 6px 16px rgba(15,26,46,.12);
  transition:transform .3s ease, box-shadow .3s ease, outline-color .3s ease;
}
.tst-letter:nth-child(odd){transform:rotate(-1.1deg)}
.tst-letter:nth-child(even){transform:rotate(1.1deg)}
.tst-letter:hover{
  transform:rotate(0) translateY(-6px) scale(1.02);
  outline-color:var(--brass);
  box-shadow:0 16px 36px rgba(15,26,46,.24), 0 0 0 4px rgba(198,161,91,.3);
  z-index:2;
}
.tst-letter.hidden{display:none}
.tst-letter img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:top;
  display:block;
  border-radius:2px;
  background:var(--tint);
}
.tst-letter figcaption{
  position:absolute;
  left:.4rem;
  right:.4rem;
  bottom:.45rem;
  font-family:'Mulish',sans-serif;
  font-size:.78rem;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
}
.tst-letter .seal{
  position:absolute;
  top:-12px;
  right:-12px;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--brass);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  box-shadow:0 3px 8px rgba(15,26,46,.3);
  z-index:2;
}
.tst-empty{color:var(--muted);padding:1rem 0}

/* ---------- Letter lightbox ---------- */
.tst-lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(10,16,30,.9);
  padding:1.2rem;
}
.tst-lightbox.open{display:flex;animation:tstFade .25s ease}
@keyframes tstFade{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
.tst-lb-body{
  position:relative;
  max-width:min(860px,94vw);
  width:100%;
}
.tst-lb-body .frame{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  background:#fff;
}
.tst-lb-body .frame img{
  display:block;
  width:100%;
  max-height:84vh;
  object-fit:contain;
  background:#fff;
}
.tst-lb-caption{
  margin-top:.8rem;
  text-align:center;
  color:var(--gold-l);
  font-family:'Marcellus',serif;
  font-size:1.05rem;
}
.tst-lb-close{
  position:absolute;
  top:-46px;
  right:0;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:1.15rem;
  line-height:1;
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
}
.tst-lb-close:hover{background:var(--brass);border-color:var(--brass)}
.tst-lb-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(15,26,46,.55);
  color:var(--gold-l);
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
  transition:background .25s ease;
  z-index:3;
}
.tst-lb-nav:hover{background:var(--brass);color:#fff}
.tst-lb-prev{left:-14px}
.tst-lb-next{right:-14px}
.tst-lb-nav[hidden]{display:none}

@media (max-width:640px){
  .tst-hero-play{width:58px;height:58px}
  .tst-hero-meta strong{font-size:1.02rem}
  .tst-clip{flex:0 0 160px}
  .tst-strip-prev{left:2px}
  .tst-strip-next{right:2px}
  .tst-letter-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1.1rem}
  .tst-lb-prev{left:4px}
  .tst-lb-next{right:4px}
  .tst-lb-close{top:-44px;right:4px}
}