/* =========================================================
   Homepage Testimonials slider
   Loaded only on the front page, and only when at least one
   testimonial exists (see inc/testimonials.php).
   Reuses the theme's carousel script (js/carousel.js) — native
   scroll-snap track, so touch/swipe works without any library.
   ========================================================= */

.testimonial-carousel{ position:relative; width:100%; max-width:100%; box-sizing:border-box; }

.testimonial-carousel .carousel-track{
  display:flex; flex-wrap:nowrap; align-items:stretch;
  overflow-x:auto; overflow-y:hidden; width:100%; max-width:100%; box-sizing:border-box;
  gap: var(--carousel-gap); margin:0; padding:.5rem .25rem 1rem; list-style:none;
  scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain; scrollbar-width:none;
}
.testimonial-carousel .carousel-track::-webkit-scrollbar{ display:none; height:0; }
.testimonial-carousel .carousel-track:focus-visible{ outline:3px solid var(--color-secondary); outline-offset:2px; }

/* Cards per view: 1 on mobile, 2 on tablet (>=640px), 3 on desktop
   (>=1024px). Widths come from the same --carousel-gap the track's own
   `gap` uses, so exactly N cards fit with no partial peek or overflow. */
.testimonial-item{
  flex:0 0 auto; min-width:0; box-sizing:border-box; display:flex;
  width:100%; scroll-snap-align:start;
}
@media(min-width:640px){
  .testimonial-item{ width: calc((100% - var(--carousel-gap)) / 2); }
}
@media(min-width:1024px){
  .testimonial-item{ width: calc((100% - (2 * var(--carousel-gap))) / 3); }
}

/* --- Card --- */
.testimonial-card{
  position:relative; display:flex; flex-direction:column; width:100%; box-sizing:border-box;
  background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.testimonial-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-3px); }

.testimonial-header{ display:flex; align-items:center; gap:.9rem; margin-bottom:1rem; }
.testimonial-avatar{
  flex:0 0 auto; width:56px; height:56px; border-radius:50%; object-fit:cover; display:block;
  border:3px solid var(--color-primary-light);
}
.testimonial-avatar--placeholder{
  display:flex; align-items:center; justify-content:center;
  background: var(--color-primary); color:#fff;
  font-family: var(--font-heading); font-weight:700; font-size:1.35rem;
}
.testimonial-meta{ min-width:0; }
.testimonial-name{
  margin:0 0 .2rem; font-size:1.05rem; line-height:1.3; color: var(--color-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.testimonial-stars{ display:inline-flex; gap:2px; line-height:0; }
.testimonial-star{ fill: var(--color-neutral); }
.testimonial-star.is-filled{ fill: var(--color-secondary); }

.testimonial-quote{
  position:relative; flex:1; margin:0; padding:.25rem 0 0 0; border:0; background:none;
  font-style:normal; color: var(--color-text); line-height:1.75;
}
.testimonial-quote::before{
  content:"\201C"; display:block; height:1.4rem; margin-bottom:.15rem;
  font-family: var(--font-heading); font-size:3rem; line-height:1; color: var(--color-secondary); opacity:.9;
}
.testimonial-quote p{ margin:0 0 .75em; }
.testimonial-quote p:last-child{ margin-bottom:0; }

/* --- Controls: Prev / dots / Next, centered under the track ---
   (Self-contained: the product carousels' side-arrow button rules live in
   woocommerce.css, which isn't loaded without WooCommerce, and which hides
   arrows on mobile — touch users still get these controls.) */
.testimonial-controls{
  display:flex; align-items:center; justify-content:center; gap:.9rem; margin-top:.5rem;
}
.testimonial-carousel.has-single-page .testimonial-controls{ display:none; }

.testimonial-controls .carousel-btn{
  position:static; transform:none; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:#fff; border:1px solid var(--color-border); color: var(--color-text);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), color var(--transition), border-color var(--transition), opacity var(--transition);
}
.testimonial-controls .carousel-btn:hover,
.testimonial-controls .carousel-btn:focus-visible{ background: var(--color-primary); border-color: var(--color-primary); color:#fff; }
.testimonial-controls .carousel-btn.is-disabled{ opacity:.35; pointer-events:none; }

.testimonial-controls .carousel-dots{ display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:0; }
/* 24px tap target around a 10px visual dot */
.carousel-dot{
  position:relative; width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer;
}
.carousel-dot::after{
  content:""; position:absolute; inset:7px; border-radius:50%;
  background: var(--color-neutral); transition: background var(--transition), transform var(--transition);
}
.carousel-dot:hover::after{ background: var(--color-primary); }
.carousel-dot:focus-visible{ outline:3px solid var(--color-secondary); outline-offset:-2px; border-radius:50%; }
.carousel-dot.is-active::after{ background: var(--color-primary); transform: scale(1.35); }

@media (prefers-reduced-motion: reduce){
  .testimonial-carousel .carousel-track{ scroll-behavior:auto; }
  .testimonial-card{ transition:none; }
  .testimonial-card:hover{ transform:none; }
}