/* ==========================================================================
   Section: video-testimonials — video testimonial cards
   Figma "Home Page" y 5890→6521 (1920 frame) · "Mobile Home" y 4466→5105 (402)
   Layout notes (desktop): intro paragraph (368 wide) + green CTA sit in a
   435px column at x=100; the card row starts at x=535 (354×552 cards, 20px
   gaps) and runs off the right edge of the frame, so it is a horizontal
   scroll-snap track that bleeds to the viewport edge.
   Mobile swaps the paragraph for the "Results people…" heading, shrinks the
   cards to 257×400 (13px gaps) and moves the CTA (green outline) below them.
   ========================================================================== */

.section--video-testimonials {
  padding: 27px 0 77px; /* (5890−5836)/2 above; (6684−6521)/2 = 81.5 below, less the 4.8px the
                           24.8px company line box extends past the Figma text box (h=20) */
}

/* ---- Grid: intro column (100→535) | card carousel (535→edge) -------------- */
.section--video-testimonials .vt {
  display: grid;
  grid-template-columns: 435px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  align-items: start;
}

/* Heading exists only in the mobile frame (desktop keeps it in the previous section) */
.section--video-testimonials .vt__title { display: none; }

.section--video-testimonials .vt__lede {
  grid-column: 1;
  grid-row: 1;
  max-width: 368px;
  font-size: 20px;
  line-height: 1.22;
}

/* Green pill "Book a Discovery call": Rectangle 132 is 341×46 at x=100 */
.section--video-testimonials .vt__cta {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  margin-top: 24px;    /* paragraph line boxes end ≈6036 → button 6060 */
  padding-right: 21px; /* 17 + text + 12 gap + 26 arrow + 21 = 341 */
  text-transform: none; /* the label as typed: "Book a Discovery Call", lowercase "a" like every book pill (#23) */
}
.section--video-testimonials .vt__cta svg { flex: 0 0 auto; width: 26px; height: 15px; }

/* ---- Carousel (scroll-snap track, no prev/next in this design) ----------- */
.section--video-testimonials .vt__carousel {
  grid-column: 2;
  grid-row: 1 / 4;
  min-width: 0;
  margin-right: calc(var(--gutter) * -1); /* cards run past x=1820 to the frame edge */
}
.section--video-testimonials .vt__track {
  display: flex;
  align-items: flex-start; /* a wrapped caption must not stretch every card */
  gap: 20px;
  padding-right: var(--gutter); /* gutter after the last card when scrolled to the end */
  padding-bottom: 28px;         /* room for the 28px reveal rise (js/main.js) so nothing clips */
  margin-bottom: -28px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;   /* stop the back-scroll sticking when returning to earlier videos (req #7) */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.section--video-testimonials .vt__track::-webkit-scrollbar { display: none; }

.section--video-testimonials .vt__card {
  flex: 0 0 354px;
  width: 354px;
  scroll-snap-align: start;
}
/* FIGMA-FIDELITY (order-dependent, safe to drop on the CMS): the Figma leaves
   24px after the first card and 20px between the rest (913 − 889 vs the gap) */
.section--video-testimonials .vt__card:first-child { margin-right: 4px; }
.section--video-testimonials .vt__figure { margin: 0; }

/* ---- Video card: poster 354×552, 21px radius (.card-img) --------------------
   Layers, bottom to top: .vt__photo (the Figma still, always laid out so the
   card keeps its size without JS) → .vt__video (same box, object-fit: cover,
   opacity 0 until js/video-cards.js marks the card .is-live, i.e. the video
   is actually rendering frames — so there is never a black or frame-0 flash)
   → .vt__play, ONE button covering the whole card (click / tap anywhere,
   one Tab stop). Inside the button: .vt__disc is the Figma play disc (67px
   black, green triangle, centred; hidden while .is-playing) and .vt__sound
   the small sound badge that replaces it while playing (glyph follows
   data-state="sound" / anything else = muted).
   State classes / attributes are set by js/video-cards.js on .vt__media:
     .is-live      video layer visible (playing, or paused on a frame)
     .is-playing   disc hidden, badge shown
     .is-unavailable  the mp4 failed to load: disc hidden, card is a still
     data-state    idle | preview (muted) | sound | paused
   -------------------------------------------------------------------------- */
.section--video-testimonials .vt__media {
  position: relative;
  width: 100%;
  aspect-ratio: 354 / 552;
  background: var(--black);
}
.section--video-testimonials .vt__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section--video-testimonials .vt__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease; /* FADE_MS in js/video-cards.js waits this long before pausing */
}
.section--video-testimonials .vt__media.is-live .vt__video { opacity: 1; }

/* The whole card is the button: keyboard focus ring is drawn just inside the
   rounded edge (base.css puts it 3px outside, where .card-img would clip it) */
.section--video-testimonials .vt__play {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.section--video-testimonials .vt__play:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -5px;
}
.section--video-testimonials .vt__media.is-unavailable .vt__play { cursor: default; }

/* Play disc: Figma Ellipse (67px black) + Polygon (17px green triangle) */
.section--video-testimonials .vt__disc {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 67px;
  height: 67px;
  border-radius: 50%;
  background: var(--black);
  color: var(--accent);
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .25s ease;
}
.section--video-testimonials .vt__play:hover .vt__disc { transform: translate(-50%, -50%) scale(1.08); }
.section--video-testimonials .vt__disc svg { width: 17px; height: 17px; }
.section--video-testimonials .vt__media.is-playing .vt__disc,
.section--video-testimonials .vt__media.is-unavailable .vt__disc {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8);
}

/* Sound badge (bottom right, same black-disc language as the play disc):
   white speaker + cross while muted, green speaker + waves with sound on */
.section--video-testimonials .vt__sound {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--black);
  color: var(--fg);
  opacity: 0;
  transform: scale(.8);
  transition: transform .25s ease, opacity .25s ease;
}
.section--video-testimonials .vt__media.is-playing .vt__sound { opacity: 1; transform: none; }
.section--video-testimonials .vt__sound svg { width: 18px; height: 18px; }
.section--video-testimonials .vt__sound-on { display: none; }
.section--video-testimonials .vt__media[data-state="sound"] .vt__sound { color: var(--accent); }
.section--video-testimonials .vt__media[data-state="sound"] .vt__sound-on { display: block; }
.section--video-testimonials .vt__media[data-state="sound"] .vt__sound-off { display: none; }

/* Name (24px display caps) + company (20px body) under each card */
.section--video-testimonials .vt__caption {
  margin-top: 31px; /* card bottom 6442 → name 6473 */
}
.section--video-testimonials .vt__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 0.98;
  text-transform: uppercase;
}
.section--video-testimonials .vt__company {
  margin-top: 5px; /* name line box ends ≈6496.5 → company 6501 */
  font-size: 20px;
  line-height: 1.24;
}

/* ---- Single column: paragraph → CTA → cards ------------------------------- */
@media (max-width: 1024px) {
  .section--video-testimonials .vt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .section--video-testimonials .vt__carousel {
    align-self: stretch;
    margin-top: 40px;
  }
  .section--video-testimonials .vt__card:first-child { margin-right: 0; }
}

/* ---- Mobile (402 frame, 20px gutters): heading → cards → outline CTA ------- */
@media (max-width: 640px) {
  .section--video-testimonials { padding: 31px 0 38px; } /* (4466−4404)/2 above, (5181−5105)/2 below */

  .section--video-testimonials .vt__title {
    display: block;
    order: 1;
    max-width: 325px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 36px;
    line-height: 0.95;
  }
  .section--video-testimonials .vt__lede { display: none; }

  .section--video-testimonials .vt__carousel {
    order: 2;
    margin-top: 23px; /* heading (2 lines) ends ≈4534 → cards 4557 */
  }
  .section--video-testimonials .vt__track { gap: 13px; }
  .section--video-testimonials .vt__card { flex-basis: 257px; width: 257px; }
  .section--video-testimonials .vt__media { aspect-ratio: 257 / 400; }
  .section--video-testimonials .vt__disc { width: 48px; height: 48px; }
  .section--video-testimonials .vt__disc svg { width: 12px; height: 12px; }
  .section--video-testimonials .vt__sound { right: 10px; bottom: 10px; width: 30px; height: 30px; }
  .section--video-testimonials .vt__sound svg { width: 15px; height: 15px; }
  .section--video-testimonials .vt__caption { margin-top: 19px; } /* card bottom 4957 → name 4976 */
  /* Figma keeps names on one line even when wider than the 257px card ("ANDREW ARMSTRONG" is 301px);
     wrapping would add a line and push the CTA below the mock. Overflow may run into the 13px gap
     but is clipped there, so it can never collide with the next caption (same guard as team.css). */
  .section--video-testimonials .vt__name {
    white-space: nowrap;
    width: calc(100% + 13px);   /* card + gap */
    overflow: hidden;
  }

  /* Group 71: 315×47 green-outline pill, text left, arrow right (x=290) */
  .section--video-testimonials .vt__cta {
    order: 3;
    width: 315px;
    max-width: 100%;
    height: 47px;
    margin-top: 29px; /* company line box ends ≈5029 → button 5058 */
    padding: 0 20px 0 30px;
    justify-content: space-between;
    font-size: 20px;
    background: transparent;
    color: var(--accent);
    box-shadow: inset 0 0 0 2px var(--accent);
  }
  .section--video-testimonials .vt__cta:hover { color: var(--accent); }
}
/* Small phones (320–359): the pill is capped at the 280–319px column, too narrow for the 20px label + arrow
   (the arrow ran over the right edge at 320) — the ≤359 pill scale of css/base.css: 18px label, 16/20px ends */
@media (max-width: 359px) {
  .section--video-testimonials .vt__cta { padding: 0 16px 0 20px; font-size: 18px; }
}

/* Hover: reverse fill like the header Contact pill (green → black, green outline + arrow). Uses .btn--wipe. */
.section--video-testimonials .vt__cta { --wipe-fill: var(--bg); --wipe-txt: var(--accent); }
.section--video-testimonials .vt__cta:hover,
.section--video-testimonials .vt__cta:focus-visible { --wipe-edge: var(--accent); }
.section--video-testimonials .vt__cta:hover svg,
.section--video-testimonials .vt__cta:focus-visible svg { color: var(--accent); }