/* Testimonials, second row (sections.css draws the cards): two quote cards that fade between
   quotes (testimonials-row.js) around a 9:16 video testimonial, then the client-results card. */

.quotes:has(> .quotes__row) { grid-auto-rows: auto; }
/* The video column is only as wide as the 9:16 card. */
.quotes__row { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr 1fr; gap: 20px; }

/* Rotating quotes: every quote sits in the same cell, so the card keeps the tallest one's height.
   The outgoing quote fades out before the next fades in, so the two never show at once. */
.quote--rotator { display: grid; }
.quote__slide { grid-area: 1 / 1; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.quote__slide.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease .5s, visibility 0s .5s; }

/* Video testimonial: the card plays and pauses it; the pill, caption and shade stay on screen. */
.quote--video { position: relative; overflow: hidden; width: 196px; aspect-ratio: 9 / 16; padding: 0; background: #0c1220; cursor: pointer; }
.quote--video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(8 12 24 / 0%) 45%, rgb(8 12 24 / 85%) 100%); pointer-events: none; }
.quote-video__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.quote-video__play {
  position: absolute; top: 14px; right: 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 14 24 / 55%); backdrop-filter: blur(6px); color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.quote-video__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f5c842; color: #141416; transition: transform .25s ease; }
.quote--video:hover .quote-video__icon { transform: scale(1.08); }
.quote-video__icon .is-play { margin-left: 2px; }
.quote-video__icon .is-pause,
.quote--video.is-playing .quote-video__icon .is-play { display: none; }
.quote--video.is-playing .quote-video__icon .is-pause { display: block; }
.quote figcaption.quote-video__cap { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; pointer-events: none; }

@media (max-width: 1100px) {
  /* Tablets: the two rotating quotes stack on the left, the video stands beside them. */
  .quotes__row { grid-template-columns: minmax(0, 1fr) min(300px, 42%); }
  .quotes__row > .quote--rotator { grid-column: 1; }
  .quotes__row > .quote--video { grid-column: 2; grid-row: 1 / span 2; width: 100%; }
  .quotes__row > .video-quote--violet { grid-column: 1 / -1; justify-self: center; width: min(100%, 420px); }
}

@media (max-width: 720px) {
  .quotes__row { grid-template-columns: 1fr; }
  .quotes__row > * { grid-column: 1 !important; grid-row: auto !important; }
}

/* Who said it, under each rotating quote (as .quote figcaption in sections.css). */
.quote__by { display: flex; align-items: center; gap: 12px; }
.quote__by > span:last-child { display: flex; flex-direction: column; }