/* =========================================================================
   HOME REVIEWS — "Client Stories" carousel
   Loaded on index.php via theme_head()'s $extraCss. Shows 3 testimonial
   cards per view on desktop, 2 on tablet, 1 on mobile, with prev/next
   arrows. Reuses theme.css's existing .quote card styling untouched —
   this file only adds the horizontal-scroll carousel mechanics.

   Sizing technique: .reviews-track-inner is a CSS Grid with
   grid-auto-flow:column — as a block-level box it takes its width from its
   containing block (.reviews-track, a normal-flow child of the section),
   so percentage grid-auto-columns values resolve against a stable width
   even though the grid's total content overflows and scrolls. (A flex row
   here would hit a circular sizing problem: percentage flex-basis values
   would resolve against the flex container's own content-based width.)
   ========================================================================= */

.reviews-carousel { display: flex; align-items: stretch; gap: 1rem; }

.reviews-track {
  flex: 1 1 auto; min-width: 0; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reviews-track::-webkit-scrollbar { display: none; }

.reviews-track-inner {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 1.5rem) / 3);
  column-gap: 1.5rem;
  padding-block: .3rem; /* room for the card's hover lift + shadow */
}
@media (max-width: 991.98px) {
  .reviews-track-inner { grid-auto-columns: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 767.98px) {
  .reviews-track-inner { grid-auto-columns: 100%; }
}

/* Bottom-anchor the avatar row so it lines up across cards regardless of
   how many lines each blockquote wraps to. */
.reviews-slide { scroll-snap-align: start; display: flex; flex-direction: column; }
.reviews-slide .who { margin-top: auto; }

.reviews-arrow {
  flex: 0 0 auto; align-self: center;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--wa-surface); border: 1px solid var(--wa-line);
  color: var(--wa-teal); font-size: 1.05rem;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.reviews-arrow:hover {
  background: var(--wa-green); border-color: var(--wa-green); color: #fff;
}

@media (max-width: 575.98px) {
  .reviews-arrow { width: 38px; height: 38px; font-size: .95rem; }
}