/*
 * 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__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%;
  transition: opacity 0.2s var(--lib-motion-ease-standard, ease), transform 0.2s var(--lib-motion-ease-standard, ease);
  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 Joe's Roofing: 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-color-border, #d9d4d2);
  border-radius: 999px;
  background: var(--lib-color-panel, #fff);
  color: var(--lib-color-primary);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-50%);
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.lib-reviews-carousel__nav:hover {
  background: var(--lib-color-panel-soft, #f6f2f0);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}

.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: 0.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--lib-color-ink) 78%, transparent);
    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); }

  /* Neither this project nor the library's own swipe-hint.css (not loaded
     here) set a color for the hand path, so it was falling back to the
     browser's default black SVG fill. Brand red for both parts. */
  .lib-swipe-hint-icon__hand,
  .lib-swipe-hint-icon__lines {
    fill: var(--jr-color-primary);
  }

  .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;
  }
}