/**
 * template-testimonials-grid.css  v2.0
 * Samora Ceylon — "What Our Guests Are Saying" — Emerald Daylight, emerald
 * and metallic gold, matched to template-why-book-with-us.css v11.0.
 *
 * One row of review cards (4 / 3 / 2 / 1 per row by width) that slides a
 * whole row at a time. Every value is a main.css custom property.
 *
 *   section#testimonials.tst
 *     .tst__head      eyebrow / title / lead / trust strip
 *     .tst__stage     prev arrow | .tst__viewport > #tst-track | next arrow
 *     .tst__nav       mobile arrows + page dots
 *     .tst__foot      "View All Reviews"
 */

#testimonials.tst {
  position: relative;
  background: var(--bg-secondary);
  padding: var(--spacing-24) 0 var(--spacing-20);
  overflow: hidden;
}
#testimonials.tst::before {
  content: ''; position: absolute; top: -10%; right: -8%; width: 44rem; height: 44rem;
  background: radial-gradient(circle, var(--color-gold-glow-sm), transparent 70%);
  pointer-events: none; opacity: .5; z-index: 0;
}
#testimonials .tst__inner {
  position: relative; z-index: 1;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, var(--spacing-10));
}

/* ═══ HEADER ═══ */
#testimonials .tst__head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: var(--spacing-10); }
#testimonials .tst__eyebrow {
  display: inline-flex; align-items: center; gap: var(--spacing-2);
  font-family: var(--font-label); font-size: var(--text-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--color-gold); margin-bottom: var(--spacing-4);
}
#testimonials .tst__eyebrow::before,
#testimonials .tst__eyebrow::after { content: ''; width: 22px; height: 1px; background: var(--border-gold); }
#testimonials .tst__title {
  font-family: var(--font-display); font-weight: var(--font-weight-normal);
  font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: var(--leading-tight);
  color: var(--text-white); margin: 0 0 var(--spacing-5); text-wrap: balance;
}
#testimonials .tst__title em { font-style: italic; font-family: var(--font-elegant); color: var(--color-gold-light); font-weight: var(--font-weight-medium); }
#testimonials .tst__lead {
  font-family: var(--font-primary); font-size: var(--text-md); line-height: var(--leading-relaxed);
  color: var(--text-secondary); max-width: 44rem; margin: 0 auto;
}

/* Trust strip: compact emerald pill with metallic gold figures */
#testimonials .tst__trust:empty { display: none; }
#testimonials .tst__trust {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--spacing-3) var(--spacing-5);
  margin-top: var(--spacing-6);
  padding: 12px 26px; border-radius: var(--radius-full);
  background: var(--gradient-emerald-rich);
  border: 1px solid rgba(var(--er-gold-bright-rgb), .5);
  box-shadow: 0 8px 22px rgba(var(--er-scrim-rgb), .2);
}
#testimonials .tst__trust-item { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-primary); font-size: var(--text-sm); color: rgba(255, 255, 255, .88); }
#testimonials .tst__trust-item svg { width: 15px; height: 15px; color: var(--er-gold-bright); flex: none; }
#testimonials .tst__trust-item b {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: var(--font-weight-semibold);
  background: var(--gradient-gold-metal); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
#testimonials .tst__trust-sep { width: 1px; height: 18px; background: rgba(var(--er-gold-bright-rgb), .35); }

/* ═══ STAGE: flanking arrows + one sliding row ═══ */
#testimonials .tst__stage { display: flex; align-items: center; gap: clamp(.75rem, 2vw, var(--spacing-5)); }
#testimonials .tst__viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; padding: 12px 16px 40px; margin: -12px -16px -40px; touch-action: pan-y; }
#testimonials .tst__track {
  --tst-per: 4; --tst-gap: 18px;
  display: flex; gap: var(--tst-gap);
  will-change: transform;
  transition: transform 900ms cubic-bezier(.77,0,.18,1);
}
#testimonials .tst__track.is-dragging { transition: none; }

#testimonials .tst__arrow {
  flex: none; width: 46px; height: 46px; border-radius: var(--radius-full);
  border: 1px solid rgba(var(--er-gold-bright-rgb), .6);
  background: var(--gradient-emerald-rich); color: var(--er-gold-bright);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  box-shadow: 0 4px 12px rgba(var(--er-scrim-rgb), .2);
  transition: transform 300ms ease, box-shadow 300ms ease, color 300ms ease;
}
#testimonials .tst__arrow svg { width: 17px; height: 17px; }
#testimonials .tst__arrow:hover { background: var(--gradient-gold-metal); color: var(--er-emerald-night); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--er-gold-bright-rgb), .4); }
#testimonials .tst__arrow:focus-visible { outline: 2px solid var(--er-gold-antique); outline-offset: 3px; }
#testimonials .tst__arrow--m { display: none; width: 40px; height: 40px; }

#testimonials .tst__loading {
  flex: 1 0 100%; min-height: 260px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-3);
  background: var(--gradient-emerald-rich); color: rgba(255, 255, 255, .85); border-radius: var(--radius-lg);
  font-family: var(--font-primary); font-size: var(--text-sm);
}
#testimonials .tst__loading a { color: var(--er-gold-bright); }
#testimonials .tst__spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .2); border-top-color: var(--er-gold-bright); animation: tst-spin .8s linear infinite; }
@keyframes tst-spin { to { transform: rotate(360deg); } }

/* ═══ REVIEW CARD ═══ */
#testimonials .tst-card {
  position: relative; overflow: hidden;
  flex: 0 0 calc((100% - (var(--tst-per) - 1) * var(--tst-gap)) / var(--tst-per));
  min-height: 300px;
  display: flex; flex-direction: column;
  padding: var(--spacing-6) var(--spacing-5) var(--spacing-5);
  background: var(--gradient-emerald-rich);
  border: 1px solid rgba(var(--er-gold-bright-rgb), .45);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 18px rgba(var(--er-scrim-rgb), .2);
  transition: transform 500ms cubic-bezier(.16,1,.3,1), box-shadow 500ms cubic-bezier(.16,1,.3,1);
}
#testimonials .tst-card::before {
  content: ''; position: absolute; top: -40%; right: -30%; width: 80%; height: 120%;
  background: radial-gradient(circle, rgba(var(--er-gold-bright-rgb), .13), transparent 65%);
  pointer-events: none;
}
#testimonials .tst-card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gradient-gold-metal); transform: scaleX(.25); transform-origin: left;
  transition: transform 700ms cubic-bezier(.16,1,.3,1);
}
#testimonials .tst-card:hover { transform: translateY(-4px); box-shadow: 0 14px 24px rgba(var(--er-scrim-rgb), .28); }
#testimonials .tst-card:hover::after { transform: scaleX(1); }
#testimonials .tst-card > * { position: relative; }

/* entrance when a row slides in */
#testimonials .tst-card.is-in { animation: tst-rise 800ms cubic-bezier(.16,1,.3,1) backwards; animation-delay: var(--d, 0ms); }
@keyframes tst-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

#testimonials .tst-card__quote {
  position: absolute; top: 6px; right: 18px;
  font-family: var(--font-display); font-size: 5.5rem; line-height: 1; font-weight: var(--font-weight-semibold);
  background: var(--gradient-gold-metal); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  opacity: .45; pointer-events: none; user-select: none;
}
#testimonials .tst-card__stars { display: flex; gap: 3px; margin-bottom: var(--spacing-4); }
#testimonials .tst-card__stars svg { width: 14px; height: 14px; }
#testimonials .tst-star--full { color: var(--er-gold-bright); }
#testimonials .tst-star--empty { color: rgba(255, 255, 255, .22); }
#testimonials .tst-card__text {
  flex: 1;
  font-family: var(--font-elegant); font-style: italic;
  font-size: 1.12rem; line-height: 1.6;
  color: rgba(255, 255, 255, .92);
  margin: 0 0 var(--spacing-5);
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
#testimonials .tst-card__author {
  display: flex; align-items: center; gap: var(--spacing-3);
  padding-top: var(--spacing-4);
  border-top: 1px solid rgba(var(--er-gold-bright-rgb), .22);
}
#testimonials .tst-avatar {
  flex: none; width: 44px; height: 44px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-gold-metal); color: var(--er-emerald-night);
  font-family: var(--font-label); font-size: .8rem; font-weight: var(--font-weight-semibold); letter-spacing: .05em;
  box-shadow: 0 0 0 3px rgba(var(--er-gold-bright-rgb), .18);
}
#testimonials .tst-card__name {
  margin: 0; font-family: var(--font-primary); font-weight: var(--font-weight-semibold);
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--er-gold-soft);
}
#testimonials .tst-card__loc {
  margin: 3px 0 0; display: flex; align-items: center; gap: 5px;
  font-family: var(--font-primary); font-size: .76rem; color: rgba(255, 255, 255, .7);
}
#testimonials .tst-card__loc svg { width: 12px; height: 12px; color: var(--er-gold-bright); }

/* ═══ NAV: page dots (+ arrows on mobile) ═══ */
#testimonials .tst__nav { display: flex; align-items: center; justify-content: center; gap: var(--spacing-4); margin-top: var(--spacing-8); }
#testimonials .tst__dots { display: flex; align-items: center; gap: 8px; }
#testimonials .tst__dot {
  width: 8px; height: 8px; border: 0; padding: 0; border-radius: var(--radius-full);
  background: rgba(var(--er-emerald-rgb), .22); cursor: pointer;
  transition: width 400ms cubic-bezier(.16,1,.3,1), background 300ms ease;
}
#testimonials .tst__dot:hover { background: rgba(var(--er-emerald-rgb), .5); }
#testimonials .tst__dot.is-active { width: 30px; background: var(--gradient-gold-metal); }
#testimonials .tst__dot:focus-visible { outline: 2px solid var(--er-gold-antique); outline-offset: 3px; }
/* many rows (phones): a 01 / 20 counter replaces the dots */
#testimonials .tst__count { font-family: var(--font-display); font-size: 15px; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 4.5rem; text-align: center; }
#testimonials .tst__count b {
  font-weight: var(--font-weight-semibold); font-size: 20px;
  background: var(--gradient-gold-metal); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ═══ FOOT ═══ */
#testimonials .tst__foot { display: flex; justify-content: center; margin-top: var(--spacing-8); }
#testimonials .tst__cta {
  display: inline-flex; align-items: center; gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-6); border-radius: var(--radius-full);
  border: 1px solid var(--border-gold);
  font-family: var(--font-primary); font-weight: var(--font-weight-semibold); font-size: var(--text-sm);
  color: var(--color-gold-light); text-decoration: none; transition: var(--transition-base);
}
#testimonials .tst__cta svg { width: 13px; height: 13px; transition: transform .2s ease; }
#testimonials .tst__cta:hover { background: var(--color-gold-bg); }
#testimonials .tst__cta:hover svg { transform: translateX(3px); }

/* ═══ RESPONSIVE (cards per row set here; JS reads it) ═══ */
@media (max-width: 1199px) { #testimonials .tst__track { --tst-per: 3; } }
@media (max-width: 991px) {
  #testimonials .tst__track { --tst-per: 2; }
  #testimonials .tst__stage > .tst__arrow { display: none; }
  #testimonials .tst__arrow--m { display: flex; }
}
@media (max-width: 639px) {
  #testimonials.tst { padding: var(--spacing-16) 0; }
  #testimonials .tst__track { --tst-per: 1; --tst-gap: 14px; }
  #testimonials .tst__viewport { padding: 12px 12px 36px; margin: -12px -12px -36px; }
  #testimonials .tst__trust { border-radius: var(--radius-lg); padding: 12px 18px; }
  #testimonials .tst__trust-sep { display: none; }
  #testimonials .tst-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #testimonials .tst__track, #testimonials .tst-card, #testimonials .tst__dot { transition: none !important; }
  #testimonials .tst-card.is-in, #testimonials .tst__spinner { animation: none !important; }
}