/**
 * StreamVerse — Testimonials (WhatsApp screenshots)
 *
 * New section, built from existing, proven pieces rather than a new
 * visual language:
 *   - Header (title/subtitle) reuses Pricing's own treatment exactly:
 *     --text-h2 title (same size as every other section heading —
 *     Popular Movies/Live Sports/Live Channels/Choose Your Plan all
 *     use this same token, so this one is deliberately NOT larger),
 *     centered, with the same #A3AED0 muted-gray subtitle and the
 *     same fit-content + nowrap-above-700px technique used for the
 *     Pricing subtitle so this one also never breaks mid-sentence on
 *     desktop while still wrapping naturally on small phones.
 *   - Carousel mechanics (fixed viewport + moving track driven by
 *     testimonials-showcase.js) are the exact same architecture as
 *     Popular Movies/Live Sports/Live Channels: real-geometry center
 *     detection, continuous-drift seamless loop, drag/nudge/
 *     click-to-center. Only 3 real screenshots exist (no fake ones
 *     were created), so the rendered set repeats enough times to
 *     comfortably exceed the page's own max content width
 *     (--grid-max-width, 1280px) before doubling for the loop — the
 *     loop math itself is untouched, this only changes how much real
 *     content is laid end-to-end before the seam.
 *   - Card surface/border/radius are Live Channels' own tile
 *     treatment (solid dark glass, subtle border, --radius-sm) —
 *     already the site's "existing dark surface" for an image-only
 *     tile — with hover kept deliberately quiet (a border-color shift
 *     and a very soft shadow, no scale, no glow pulse) per request:
 *     "no excessive neon, no unnecessary animations". This is
 *     screenshots-as-evidence, not promotional artwork, so it reads
 *     calmer than the Movies/Channels hover treatment on purpose.
 *
 * Sizing: screenshots are real WhatsApp chat crops (~232x458,
 * ratio ~0.507) — much taller/narrower than a movie poster's 2:3.
 * "Same visual size as Popular Movies" is matched by HEIGHT (the
 * dimension that sets a carousel row's visual density) at each of
 * Popular Movies' own three breakpoints, with width left to derive
 * from the screenshots' own real aspect-ratio — this is what keeps
 * every screenshot fully undistorted and uncropped while still
 * sitting at the same visual scale as the Popular Movies row.
 */

.testimonials {
  position: relative;
  /* Matches Popular Movies' own top/bottom padding — same visual
     rhythm as the other carousel sections, no new spacing value. */
  padding-block: var(--space-5);
  /* Pulls this section slightly closer to Pricing above it, per explicit
     request — a targeted negative margin rather than touching
     padding-block (which would change this section's own height/design),
     so the section's box is exactly the same size and only its position
     shifts up into the empty space between the two. -24px (--space-5)
     lands inside the requested 20-30px reduction, leaving a comfortable
     gap rather than letting the sections touch. Same technique already
     used for the Guarantee Banner -> Pricing gap above. */
  margin-top: calc(-1 * var(--space-5));
}

.testimonials__inner {
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 768px) {
  .testimonials__inner {
    padding-inline: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .testimonials__inner {
    padding-inline: var(--space-7);
  }
}

/* ------------------------------------------------------------------
 * Header — centered, same title size as every other section, same
 * subtitle treatment (color/size/spacing) as the rest of the site,
 * one line on desktop per request (identical technique to Pricing's
 * own subtitle fix).
 * ------------------------------------------------------------------ */

.testimonials__header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.testimonials__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2); /* same token as Popular Movies/Live Sports/
                                 Live Channels/Choose Your Plan — never
                                 larger than the other section titles */
  line-height: var(--text-h2-line-height);
  font-weight: 700;
  color: var(--color-text-primary);
}

.testimonials__subtitle {
  /* See pricing.css for the identical technique and the reasoning
     behind each rule — reused verbatim here. */
  max-width: none;
  width: fit-content;
  margin-top: var(--space-1);
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: #A3AED0;
}

@media (min-width: 700px) {
  .testimonials__subtitle {
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------------
 * Fixed viewport — identical mechanism to Movies/Sports/Channels.
 * ------------------------------------------------------------------ */

.testimonials__track-wrap {
  position: relative;
}

.testimonials__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-block: var(--space-3);
  margin-block: calc(-1 * var(--space-3));
  touch-action: pan-y;
  cursor: grab;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 24px,
    black calc(100% - 24px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 24px,
    black calc(100% - 24px),
    transparent 100%
  );
}

.testimonials__viewport:active {
  cursor: grabbing;
}

.testimonials__track {
  display: flex;
  gap: var(--space-4); /* same gap token as Popular Movies' own track */
  width: max-content;
  will-change: transform;
  transition: opacity var(--duration-micro) var(--ease-standard);
}

.testimonials__track.is-jumping {
  transition: transform 300ms var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  .testimonials__track.is-jumping {
    transition: none;
  }
}

.testimonials__item {
  flex: 0 0 auto;
}

.testimonials__item:has(.js-testimonial-card.is-active) {
  position: relative;
  z-index: 3;
}

/* ------------------------------------------------------------------
 * Card — the screenshot IS the card (no title/caption under it, the
 * chat text is already inside the image). Solid dark glass surface +
 * subtle border + small radius — the same tile language Live
 * Channels already uses for an image-only tile, reused rather than
 * inventing a new "testimonial card" style.
 * ------------------------------------------------------------------ */

.testimonials__card {
  display: block;
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  padding: 0;
}

.testimonials__image-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Height matched to Popular Movies' own poster height at each of
     its breakpoints (140/160/200px item widths -> 210/240/300px at a
     2:3 ratio) — this is "the same visual size as Popular Movies",
     with width left to derive from the screenshot's own real ratio
     below rather than forced to match a movie poster's shape. */
  height: 210px;
  aspect-ratio: 232 / 458; /* the screenshots' own real proportions */
  background-color: rgba(22, 29, 43, 0.55); /* Live Channels' own tile fill */
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card); /* the same subtle shadow Popular Movies' own posters use */
  transition:
    border-color var(--duration-micro) var(--ease-standard),
    box-shadow var(--duration-micro) var(--ease-standard);
}

@media (min-width: 480px) {
  .testimonials__image-wrap {
    height: 240px;
  }
}

@media (min-width: 1024px) {
  .testimonials__image-wrap {
    height: 300px;
  }
}

/* Quiet hover/active — a border-color shift and a very soft lift in
   the existing shadow token, deliberately no scale/transform and no
   glow pulse (per request: "no excessive neon, no unnecessary
   animations" — these are proof screenshots, not promotional
   artwork, so they read calmer than a movie poster's hover). */
.testimonials__card:hover .testimonials__image-wrap,
.testimonials__card.is-active .testimonials__image-wrap {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-card-hover);
}

@media (prefers-reduced-motion: reduce) {
  .testimonials__image-wrap {
    transition: none;
  }
}

.testimonials__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* the wrap's aspect-ratio already matches the
                         screenshots' own real proportions, so this
                         crops nothing visible — it only absorbs the
                         sub-1% rounding difference between the three
                         source screenshots' exact pixel ratios. */
}

/* ------------------------------------------------------------------
 * Prev/Next controls — identical treatment to Popular Movies' own nav.
 * ------------------------------------------------------------------ */

.testimonials__nav {
  display: none;
}

@media (min-width: 768px) {
  .testimonials__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-primary);
    z-index: 2;
    transition: background-color var(--duration-micro) var(--ease-standard);
  }

  .testimonials__nav:hover {
    background-color: var(--color-bg-elevated-hover);
  }

  .testimonials__nav--prev {
    left: calc(-1 * var(--space-5));
  }

  .testimonials__nav--next {
    right: calc(-1 * var(--space-5));
  }
}

@media (min-width: 1024px) {
  .testimonials__nav--prev {
    left: calc(-1 * var(--space-6));
  }

  .testimonials__nav--next {
    right: calc(-1 * var(--space-6));
  }
}

.testimonials__nav-icon {
  width: 18px;
  height: 18px;
}