/* ===========================================================================
   testimonials.css — slider of testimonials (powered by js/slider.js)
   Agent 20 (2026-06-01): aligned to actual #testimonials markup
   (.testimonials__track > .testimonial > .testimonial__quote +
   .testimonial__author > cite + .testimonial__meta).
   Section frame uses [data-reveal="clip-reveal"] (top→bottom wipe).
   ========================================================================= */


.testimonials {
  padding-block: var(--section-pad);
  padding-inline: var(--gutter);
  background: var(--bg-tint);
  /* Clip slider overflow so off-screen slides don't expand the layout. */
  overflow-x: clip;
}

/* The section-header inside #testimonials lives in the gutter-padded zone */
.testimonials > .section-header {
  max-inline-size: var(--container-narrow);
  margin-inline: auto;
}

.testimonials__track {
  /* Slider track: horizontal flex; each child = one slide at 100% width.
     RTL is auto-handled by flex; slider.js applies translate3d(±N%, 0, 0).
     Section-level `overflow-x: clip` keeps off-screen slides from expanding
     layout. */
  max-inline-size: var(--container-narrow);
  margin-inline: auto;
  margin-block-start: var(--space-12);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  /* Initial transition is set by JS — the visual default keeps slides snapped. */
  will-change: transform;
}

.testimonial {
  flex: 0 0 100%;
  width: 100%;
  background: var(--bg);
  padding: var(--space-12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  /* Only the active slide is interactive; others are visually hidden by track translate. */
}

.testimonial__quote {
  font-family: var(--font-display-he);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--space-6) 0;
  font-style: italic;
}

.testimonial__quote p { margin: 0; }

.testimonial__quote::before { content: "\201C"; color: var(--accent); margin-inline-end: 0.2em; }
.testimonial__quote::after  { content: "\201D"; color: var(--accent); margin-inline-start: 0.2em; }

.testimonial__author {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.testimonial__author cite {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--cocoa);
  font-style: normal;
}

.testimonial__meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.testimonials__controls {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-block-start: var(--space-8);
}

/* .testimonials__btn skin removed 2026-06-15 (unify pass) — the prev/next
   arrows now use the canonical `.btn .btn--icon` (css/components/buttons.css):
   44×44 circle, one focus ring, unified press-scale(0.98). Only the arrow
   glyph size is section-specific layout. */
.testimonials__btn { font-size: var(--text-lg); }

/* Slider dots (rendered programmatically by js/slider.js) ---------------- */
.testimonials__dots {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Sit between prev / next buttons in the controls row. */
}

.testimonials__dots [data-slider-dot] {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle);
  border: 1px solid var(--border-strong);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background var(--dur-base) var(--ease-out-cinema),
              border-color var(--dur-base) var(--ease-out-cinema),
              transform var(--dur-base) var(--ease-out-cinema);
}

.testimonials__dots [data-slider-dot]:hover {
  border-color: var(--accent);
}

.testimonials__dots [data-slider-dot].is-active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.2);
}

@media (max-width: 600px) {
  .testimonial { padding: var(--space-8); }
}

/* Honor reduced-motion: null the dot transforms. (The arrow buttons' press
   feedback is nulled in css/components/buttons.css alongside .btn.) */
@media (prefers-reduced-motion: reduce) {
  .testimonials__dots [data-slider-dot] { transition: none; }
  .testimonials__dots [data-slider-dot].is-active { transform: none; }
}