/* Testimonials, on the uiux.studio pattern: quote cards and narrow 9:16 video cards share
   the grid, so the videos sit at the quotes' height instead of taking over the section.
   Row 1: quote, quote, video. Row 2: quote, video, quote. Then the review-platform strip. */

.t-grid { display: grid; gap: 22px; }
.t-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 22px; }
.t-row--end { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }

/* Shared card frame: the homepage's thick border and offset shadow */
.tcard {
  border: 2px solid var(--ink);
  border-radius: 24px;
  background: #0a0a0a;
  transition: transform 0.3s, box-shadow 0.3s;
}

.tcard.c-lime { box-shadow: 6px 6px 0 var(--lime); }
.tcard.c-magenta { box-shadow: 6px 6px 0 var(--magenta); }
.tcard.c-yellow { box-shadow: 6px 6px 0 var(--yellow); }
.tcard:hover { transform: translate(-2px, -2px); }

/* Quote card (type as on the homepage) */
.qcard { padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; }
.qmark { font-family: var(--display); font-size: 56px; line-height: 0.4; height: 30px; color: var(--magenta); font-weight: 600; }
.qbody { font-family: var(--display); font-size: 19px; line-height: 1.4; flex: 1; letter-spacing: -0.01em; color: var(--ink); }
.qmeta { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.qavatar { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; object-fit: cover; border: 2px solid var(--ink); background: #fff; }
.qname { display: block; font-family: var(--display); font-size: 18px; font-weight: 500; }
.qrole { display: block; font-size: 13px; color: var(--ink-mid); margin-top: 2px; }

/* Video card: the whole card plays and pauses; the pill and caption stay on screen. */
.vcard { position: relative; overflow: hidden; width: 220px; aspect-ratio: 9 / 16; cursor: pointer; }
.vcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0%) 45%, rgb(0 0 0 / 88%) 100%);
  pointer-events: none;
}

.vcard video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }

.vplay {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px 0 4px;
  border: 0;
  border-radius: 999px;
  background: rgb(10 10 10 / 55%);
  backdrop-filter: blur(6px);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.vicon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lime); color: #0a0a0a; transition: transform 0.25s; }
.vcard:hover .vicon { transform: scale(1.08); }
.vicon .is-play { margin-left: 2px; }
.vicon .is-pause, .vcard.is-playing .vicon .is-play { display: none; }
.vcard.is-playing .vicon .is-pause { display: block; }

.vcap { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; pointer-events: none; }

/* Review platforms strip under the cards (from uiux.studio's sections.css) */
.t-reviews { margin-top: 64px; padding-top: 44px; border-top: 1px solid var(--line); }
.t-reviews__label { text-align: center; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-mid); }
.review-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 66px; margin-top: 28px; }
.review-logos img { height: 62px; object-fit: contain; opacity: 0.85; transition: opacity 0.3s; }
.review-logos img:hover { opacity: 1; }
.review-logos .review-logos__lg { height: 82px; }
.review-logos .review-logos__clutch { transform: scale(1.3); }

@media (max-width: 1100px) {
  /* Tablets: the row's two quotes stack on the left, the video stands beside them. */
  .t-row, .t-row--end { grid-template-columns: minmax(0, 1fr) min(260px, 40%); }
  .t-row > .qcard { grid-column: 1; }
  .t-row > .vcard { grid-column: 2; grid-row: 1 / span 2; width: 100%; align-self: start; }
}

@media (max-width: 720px) {
  .t-row { grid-template-columns: 1fr; }
  .t-row > * { grid-column: 1 !important; grid-row: auto !important; }
  .t-row > .vcard { width: 100%; }
  .review-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; gap: 28px 16px; }
  .review-logos img { max-width: 100%; height: 39px; }
  .review-logos .review-logos__lg, .review-logos .review-logos__clutch { height: 51px; transform: none; }
  .review-logos img:last-child:nth-child(odd) { grid-column: 1 / -1; }
}