/* ============================================================
   TESTIMONIALS — brand-green wall of video + quote cards
   (reference layout: mixed video/quote grid, green play buttons)
   ============================================================ */
/* whole section = one white shell card */
.tst {
  --tst-ivory: #F4F1E8;
  --tst-ivory-60: rgba(244, 241, 232, .6);
  width: var(--shell);
  margin-inline: auto;
  background: #fff;
  border: 1px solid rgba(16, 24, 32, .06);
  border-radius: clamp(22px, 2vw, 34px);
  box-shadow: var(--card-shadow);
  padding: clamp(2rem, 3.4vw, 3.4rem) clamp(1.4rem, 3.4vw, 3.4rem) clamp(2.6rem, 4vw, 4rem);
  color: var(--ink);
  overflow: hidden;
}
.tst > .container { width: 100%; }
.tst__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.6rem, 2.6vw, 2.4rem);
}
.tst__head .eyebrow--dot { color: var(--ink-60); }
.tst__head h2 { color: var(--ink); margin-top: .7rem; max-width: 16ch; }
.tst__all {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .55rem .5rem 1.3rem;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: transform .3s var(--ease), background .3s;
}
.tst__all:hover { transform: translateY(-2px); background: #2E8A1E; color: #fff; }
.tst__all .arr {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--green);
  display: grid; place-items: center;
  font-size: .78rem;
}

.tst__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.9rem, 1.2vw, 1.1rem);
  align-items: stretch;
}

/* ---- video card ---- */
.tcard { display: flex; flex-direction: column; gap: .9rem; }
.tcard__media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 3.6;
  background: #06140E;
  cursor: pointer;
}
.tcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease), opacity .4s;
}
.tcard__media:hover img { transform: scale(1.04); }
.tcard__media iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.tcard__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 66px; height: 66px;
  border-radius: 50%;
  background: var(--green);
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: transform .35s var(--ease), background .3s;
  z-index: 2;
}
.tcard__media:hover .tcard__play { transform: scale(1.08); background: #4CC238; }
.tcard__play svg { width: 22px; height: 22px; margin-left: 3px; }
.tcard__badge {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem 1.2rem .8rem 1rem;
  background: #0A1F16;
  border-radius: 0 16px 0 22px;
}
.tcard__badge .av {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green);
  color: var(--ink);
  font-weight: 800;
  font-size: .82rem;
  flex: none;
}
.tcard__badge b { display: block; font-size: .95rem; color: var(--tst-ivory); }
.tcard__badge span { display: block; font-size: .78rem; color: var(--tst-ivory-60); }
.tcard.playing .tcard__play,
.tcard.playing .tcard__badge { display: none; }
.tcard__quote {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.32;
  color: var(--ink);
  text-wrap: pretty;
}

/* ---- quote (text) card — brand green, white text ---- */
.qcard {
  background: linear-gradient(158deg, #37991f 0%, #2a7d1a 100%);
  color: #fff;
  border-radius: 18px;
  padding: clamp(1.4rem, 2vw, 1.8rem);
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.qcard__stars {
  display: flex;
  gap: .2rem;
  color: #fff;
  margin-bottom: .9rem;
}
.qcard__stars svg { width: 16px; height: 16px; }
.qcard p {
  font-size: .98rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .94);
  text-wrap: pretty;
}
.qcard__who {
  margin-top: auto;
  padding-top: 1.2rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.qcard__who .av {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  font-weight: 800;
  font-size: .88rem;
  flex: none;
}
.qcard__who b { display: block; font-size: .96rem; letter-spacing: -0.01em; color: #fff; }
.qcard__who span { display: block; font-size: .8rem; color: rgba(255, 255, 255, .75); }

@media (max-width: 900px) {
  .tst__grid { grid-template-columns: repeat(2, 1fr); }
  .tst__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .tst__grid { grid-template-columns: 1fr; }
  .qcard { min-height: 0; }
}