/*
 * Reviews carousel presentation, built on top of components/content-slider
 * (UI-017) -- that component owns scroll-snap, touch/keyboard/trackpad
 * navigation, and boundary button state. This file only adds what's
 * specific to reviews: shell/frame layout, fixed card width, and the
 * center-out "is-active" highlight (content-slider has no concept of an
 * active/centered item, it's a plain scroller).
 *
 * .lib-content-slider__item is kept on each <li> so content-slider.js's
 * stepSize() can measure it (it queries that exact class) -- its own box
 * chrome (border/padding/shadow/bg) is reset to transparent here since
 * .lib-testimonial-card already provides its own card chrome.
 */
.lib-reviews-carousel__heading {
  margin-bottom: var(--lib-space-8);
}

.lib-reviews-carousel__shell {
  position: relative;
  width: 100%;
  padding-inline: var(--lib-space-8, 2.5rem);
}

.lib-reviews-carousel__frame {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  overflow: visible;
}

.lib-reviews-carousel__track {
  /* Self-contained equivalent of core/foundation/utilities.css .lib-no-list
     -- avoids pulling in the whole utilities stylesheet for one reset. */
  list-style: none;
  scroll-padding-inline: calc(50% - 9rem);
  padding-inline: calc(50% - 9rem);
  /* content-slider.css sets scrollbar-width:thin -- reviews navigate via
     the prev/next buttons, so the native scrollbar is redundant chrome. */
  scrollbar-width: none;
}

.lib-reviews-carousel__track::-webkit-scrollbar {
  display: none;
}

.lib-reviews-carousel__item {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  flex-basis: 18rem;
  scroll-snap-align: center;
  /* Without this, a fast/strong swipe can carry enough scroll momentum to
     sail past the next snap point and land two cards away in a single
     gesture -- mandatory snap type alone only guarantees landing ON a
     snap point, not stopping at the FIRST one it reaches. This forces
     the browser to stop at every card regardless of swipe speed. */
  scroll-snap-stop: always;
}

.lib-reviews-carousel__item .lib-testimonial-card {
  width: 18rem;
  min-width: 18rem;
  max-width: 18rem;
  height: 100%;
  /* Phase 6B.1B (2026-08-27): raw 0.2s -> var(--lib-transition-base)
     (already the real, established canonical duration+easing pair for
     exactly this hover/state micro-transition responsibility -- PRI-01's
     own card-lift transition already uses it). 180ms vs 200ms and a
     cubic-bezier vs "ease" keyword is a real but imperceptible delta,
     not a visual regression. */
  transition: opacity var(--lib-transition-base), transform var(--lib-transition-base);
  opacity: 0.9;
}

.lib-reviews-carousel__item .lib-testimonial-card.is-active {
  opacity: 1;
  transform: translateY(-2px);
}

.lib-reviews-carousel__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* !important on padding/width/height: this is a real <button>, and a
     host WordPress theme's own global button reset (Kadence, Elementor,
     etc. all ship one) is a real risk here specifically -- it targets
     the bare `button` tag with its own padding (e.g. 15px 34px), and
     since this rule never set padding at all, there was nothing of ours
     to out-specify it: the theme's declaration was simply the only one
     present. Confirmed live on a real client project: the nav button
     rendered at 82x42px instead of 40x40, wide enough to visibly collide
     with the cards next to it. Invisible in the isolated library preview,
     which
     has no ambient theme button styles to collide with. */
  padding: 0 !important;
  width: 3rem !important;
  height: 3rem !important;
  border: 1px solid var(--lib-border-default);
  border-radius: 999px;
  background: var(--lib-surface-elevated);
  color: var(--lib-icon-brand);
  box-shadow: var(--lib-shadow-nav-button);
  transform: translateY(-50%);
  cursor: pointer;
  /* Phase 6B.1B (2026-08-27): raw 0.2s/ease -> var(--lib-transition-base),
     same real, already-established canonical token as above. */
  transition: background var(--lib-transition-base), box-shadow var(--lib-transition-base);
}

.lib-reviews-carousel__nav:hover {
  background: var(--lib-surface-section);
  box-shadow: var(--lib-shadow-nav-button-hover);
}

.lib-reviews-carousel__nav svg {
  flex-shrink: 0;
  width: 1.25rem !important;
  height: 1.25rem !important;
  pointer-events: none;
}

.lib-reviews-carousel__nav--prev { left: 0; }
.lib-reviews-carousel__nav--next { right: 0; }

@media (max-width: 1023px) {
  .lib-reviews-carousel__frame { max-width: none; }
}

@media (min-width: 1024px) {
  .lib-reviews-carousel__shell {
    max-width: calc(72rem + 3rem * 2 + 2rem);
    margin-inline: auto;
    padding-inline: calc(3rem + 1rem);
  }
}

@media (max-width: 767px) {
  .lib-reviews-carousel__shell { padding-inline: 0; }

  .lib-reviews-carousel__track {
    padding-inline: var(--lib-space-8, 1.25rem);
    scroll-padding-inline: var(--lib-space-8, 1.25rem);
  }

  .lib-reviews-carousel__item {
    flex-basis: calc(100vw - (var(--lib-space-8, 1.25rem) * 2));
  }

  .lib-reviews-carousel__item .lib-testimonial-card {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .lib-reviews-carousel__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lib-reviews-carousel__item .lib-testimonial-card,
  .lib-reviews-carousel__nav { transition: none; }
}

/*
 * Mobile swipe hint -- nav arrows are hidden below 768px (native touch
 * swipe replaces them), so this signals swipeability once. Reuses the
 * real PAT-003 hand icon (patterns/swipe-hint/swipe-hint.css); this file
 * only owns the two-badge overlay positioning and the one-time animation,
 * matching the pattern already established at the 7 real hhdigitalstudio-
 * website call sites (see patterns/swipe-hint/README.md "Known gap").
 */
.lib-reviews-swipe-hint {
  display: none;
}

@media (max-width: 767px) {
  .lib-reviews-swipe-hint {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: block;
    pointer-events: none;
  }

  .lib-reviews-swipe-hint__badge {
    position: absolute;
    top: 50%;
    width: 2.75rem;
    height: 2.75rem;
    padding: var(--lib-space-fine-2);
    border-radius: 999px;
    background: color-mix(in srgb, var(--lib-color-ink) 78%, transparent); /* design-allow: CASE-4 matched pair with patterns/swipe-hint/swipe-hint.css's own real, documented ink/panel Canvas-inverting exception -- see that file's comment */
    opacity: 0;
    transform: translateY(-50%);
  }

  .lib-reviews-swipe-hint__badge--left { left: var(--lib-space-4); }
  .lib-reviews-swipe-hint__badge--right { right: var(--lib-space-4); }
  .lib-reviews-swipe-hint__badge--left .lib-swipe-hint-icon { transform: scaleX(-1); }

  .lib-reviews-swipe-hint.is-visible .lib-reviews-swipe-hint__badge--left {
    animation: lib-reviews-swipe-hint-left var(--lib-motion-duration-narrative) var(--lib-motion-ease-standard) forwards;
  }

  .lib-reviews-swipe-hint.is-visible .lib-reviews-swipe-hint__badge--right {
    animation: lib-reviews-swipe-hint-right var(--lib-motion-duration-narrative) var(--lib-motion-ease-standard) forwards;
    animation-delay: var(--lib-motion-duration-narrative);
  }
}

@keyframes lib-reviews-swipe-hint-left {
  0% { opacity: 0; transform: translateY(-50%) translateX(0.75rem); }
  30% { opacity: 1; transform: translateY(-50%) translateX(0); }
  70% { opacity: 1; transform: translateY(-50%) translateX(0); }
  100% { opacity: 0; transform: translateY(-50%) translateX(-0.75rem); }
}

@keyframes lib-reviews-swipe-hint-right {
  0% { opacity: 0; transform: translateY(-50%) translateX(-0.75rem); }
  30% { opacity: 1; transform: translateY(-50%) translateX(0); }
  70% { opacity: 1; transform: translateY(-50%) translateX(0); }
  100% { opacity: 0; transform: translateY(-50%) translateX(0.75rem); }
}

@media (prefers-reduced-motion: reduce) {
  .lib-reviews-swipe-hint { display: none; }

  /* Belt and suspenders: the parent's display:none already hides these,
     but QA checks each animated element's own duration regardless of
     ancestor visibility, so the animation itself must also be disabled
     here, not just hidden. */
  .lib-reviews-swipe-hint.is-visible .lib-reviews-swipe-hint__badge--left,
  .lib-reviews-swipe-hint.is-visible .lib-reviews-swipe-hint__badge--right {
    animation: none;
  }
}