/* ============================================================
   template-testimonials-grid.css  v3.0
   SSP TOURS "What Our Guests Are Saying" (Emerald Daylight, white theme)
   main.css v7.1 tokens only. Scoped to #testimonials.

   Single-row carousel of Kandyan-arch cards (same arch language as the
   other homepage templates): silver ring, gold inner hairline, emerald
   initials medallion at the crown, gold stars, ink text.
   The row slides to the left one page at a time. Silver round arrows
   turn emerald on hover; the active dot is a gold-sheen pill.
   ============================================================ */

#testimonials.tst { position: relative; background: var(--bg-primary); padding: var(--spacing-24) 0; overflow: hidden; }
#testimonials.tst[hidden] { display: none; }
#testimonials .tst__inner { max-width: var(--tt-max); margin: 0 auto; padding: 0 var(--spacing-8); }

/* ---------- Head ---------- */
#testimonials .tst__head { text-align: center; max-width: 760px; margin: 0 auto var(--spacing-12); }
#testimonials .tst__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-gold-dark);
}
#testimonials .tst__eyebrow::before,
#testimonials .tst__eyebrow::after { content: ''; width: 24px; height: 2px; border-radius: var(--radius-full); background: var(--sheen-gold); }
#testimonials .tst__title { font-size: clamp(2rem, 3.8vw, 3.1rem); line-height: 1.05; margin: 0 0 var(--spacing-4); }
#testimonials .tst__title em { font-style: italic; color: var(--color-navy); }
#testimonials .tst__lead { margin: 0 auto var(--spacing-6); max-width: 60ch; font-size: var(--text-md); color: var(--text-secondary); }

#testimonials .tst__trust {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-3) var(--spacing-5);
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: var(--radius-full);
  background: var(--color-pearl);
  border: 1px solid var(--border-primary);
}
#testimonials .tst__trust:empty { display: none; }
#testimonials .tst__trust-item { display: inline-flex; align-items: center; gap: var(--spacing-2); font-size: var(--text-sm); color: var(--text-secondary); }
#testimonials .tst__trust-item svg { width: 16px; height: 16px; color: var(--color-gold); }
#testimonials .tst__trust-item b { font-family: var(--font-display); font-weight: var(--font-weight-normal); font-size: var(--text-lg); color: var(--text-primary); }
#testimonials .tst__trust-sep { width: 1px; height: 18px; background: var(--color-royal); }

/* ---------- Carousel shell ---------- */
#testimonials .tst__shell { display: flex; align-items: center; gap: var(--spacing-4); }
#testimonials .tst__viewport { flex: 1; min-width: 0; overflow: hidden; padding: var(--spacing-4) 10px var(--spacing-8); margin: calc(-1 * var(--spacing-4)) -10px calc(-1 * var(--spacing-8)); touch-action: pan-y; }
#testimonials .tst__track {
  --tst-gap: var(--spacing-6);
  display: flex;
  gap: var(--tst-gap);
  transition: transform .7s cubic-bezier(.25, .8, .25, 1);
  will-change: transform;
}
#testimonials .tst__track.is-dragging { transition: none; }

#testimonials .tst__arrow {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sheen-silver);
  box-shadow: var(--shadow-royal);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-base);
}
#testimonials .tst__arrow svg { width: 18px; height: 18px; transition: transform .2s ease; }
#testimonials .tst__arrow:hover,
#testimonials .tst__arrow:focus-visible { background: var(--sheen-emerald); box-shadow: var(--shadow-metal); color: var(--text-white); outline: none; }
#testimonials .tst__arrow--prev:hover svg { transform: translateX(-2px); }
#testimonials .tst__arrow--next:hover svg { transform: translateX(2px); }
#testimonials .tst__arrow[hidden] { display: none; }

#testimonials .tst__loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-3); padding: var(--spacing-12) 0; color: var(--text-muted); }
#testimonials .tst__spinner { width: 28px; height: 28px; border: 2px solid var(--color-royal-light); border-top-color: var(--color-navy); border-radius: 50%; animation: tst-spin .9s linear infinite; }
@keyframes tst-spin { to { transform: rotate(360deg); } }

/* ---------- Card: Kandyan arch doorway ----------
   Same arch language as the hero, Why Book With Us, holiday styles,
   packages and destinations: a rounded arch top with a white gap and a
   satin-silver ring, an inner gold hairline arch, and the guest's
   initials in an emerald medallion at the crown. */
#testimonials .tst-card {
  /* per-view width is set by --tst-per (1-4) on the track */
  flex: 0 0 calc((100% - (var(--tst-per, 4) - 1) * var(--tst-gap)) / var(--tst-per, 4));
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  margin: 8px 0;
  padding: var(--spacing-10) var(--spacing-6) var(--spacing-7);
  background: var(--bg-primary);
  border-radius: var(--radius-arch-card);
  box-shadow: 0 0 0 6px var(--bg-primary), 0 0 0 7px var(--color-royal), var(--shadow-md);
  transition: transform .35s ease, box-shadow .35s ease;
}
#testimonials .tst__track[data-per="1"] { --tst-per: 1; }
#testimonials .tst__track[data-per="2"] { --tst-per: 2; }
#testimonials .tst__track[data-per="3"] { --tst-per: 3; }
#testimonials .tst__track[data-per="4"] { --tst-per: 4; }

/* Inner gold hairline arch (doorway frame) */
#testimonials .tst-card::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: var(--radius-arch-card);
  border: 1px solid var(--color-gold-pale);
  pointer-events: none;
  transition: border-color .35s ease;
}
#testimonials .tst-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 6px var(--bg-primary), 0 0 0 7px var(--color-gold), var(--shadow-lg);
}
#testimonials .tst-card:hover::before { border-color: var(--color-gold-light); }

/* Faint quote mark behind the review */
#testimonials .tst-card::after {
  content: '\201C';
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 9rem;
  line-height: 1;
  color: var(--color-pearl);
  pointer-events: none;
  z-index: 0;
}
#testimonials .tst-card > * { position: relative; z-index: 1; }

/* Crown medallion */
#testimonials .tst-card__crown { margin-bottom: var(--spacing-5); }
#testimonials .tst-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sheen-emerald);
  box-shadow: 0 0 0 4px var(--bg-primary), 0 0 0 5px var(--color-gold), var(--shadow-metal);
  color: var(--text-white);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: .02em;
}

/* ── Arch door reveal ──────────────────────────────────────
   Incoming cards open from the base of the arch upward, like a temple
   doorway, then the content inside settles in. The clip keeps 14px of
   room outside the card so the silver ring is never cut off; the
   animation fills backwards only, so no clip remains afterwards. */
@keyframes tst-door {
  0%   { clip-path: inset(100% -14px -14px -14px round 9999px 9999px 16px 16px); opacity: .2; }
  35%  { opacity: 1; }
  100% { clip-path: inset(-14px -14px -14px -14px round 9999px 9999px 16px 16px); opacity: 1; }
}
@keyframes tst-settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#testimonials .tst-card.is-in { animation: tst-door .85s cubic-bezier(.22, 1, .36, 1) backwards; }
#testimonials .tst-card.is-in > * { animation: tst-settle .6s cubic-bezier(.22, 1, .36, 1) backwards; }
#testimonials .tst-card.is-in > .tst-card__crown { animation-delay: .30s; }
#testimonials .tst-card.is-in > .tst-card__stars { animation-delay: .38s; }
#testimonials .tst-card.is-in > .tst-card__text { animation-delay: .46s; }
#testimonials .tst-card.is-in > .tst-card__author { animation-delay: .54s; }
/* stagger across the row */
#testimonials .tst-card.is-in.tst-d1 { animation-delay: .10s; }
#testimonials .tst-card.is-in.tst-d2 { animation-delay: .20s; }
#testimonials .tst-card.is-in.tst-d3 { animation-delay: .30s; }
#testimonials .tst-card.is-in.tst-d1 > .tst-card__crown { animation-delay: .40s; }
#testimonials .tst-card.is-in.tst-d1 > .tst-card__stars { animation-delay: .48s; }
#testimonials .tst-card.is-in.tst-d1 > .tst-card__text { animation-delay: .56s; }
#testimonials .tst-card.is-in.tst-d1 > .tst-card__author { animation-delay: .64s; }
#testimonials .tst-card.is-in.tst-d2 > .tst-card__crown { animation-delay: .50s; }
#testimonials .tst-card.is-in.tst-d2 > .tst-card__stars { animation-delay: .58s; }
#testimonials .tst-card.is-in.tst-d2 > .tst-card__text { animation-delay: .66s; }
#testimonials .tst-card.is-in.tst-d2 > .tst-card__author { animation-delay: .74s; }
#testimonials .tst-card.is-in.tst-d3 > .tst-card__crown { animation-delay: .60s; }
#testimonials .tst-card.is-in.tst-d3 > .tst-card__stars { animation-delay: .68s; }
#testimonials .tst-card.is-in.tst-d3 > .tst-card__text { animation-delay: .76s; }
#testimonials .tst-card.is-in.tst-d3 > .tst-card__author { animation-delay: .84s; }

/* ── Gold shine across the medallion ─────────────────────── */
#testimonials .tst-avatar { position: relative; overflow: hidden; }
#testimonials .tst-avatar::after {
  content: '';
  position: absolute;
  top: -20%;
  left: 0;
  width: 45%;
  height: 140%;
  background: var(--sheen-sweep);
  transform: translateX(-180%) skewX(-18deg);
  pointer-events: none;
}
@keyframes tst-shine { 0% { transform: translateX(-180%) skewX(-18deg); } 100% { transform: translateX(320%) skewX(-18deg); } }
#testimonials .tst-card.is-in .tst-avatar::after { animation: tst-shine 1.1s ease .75s both; }
#testimonials .tst-card.is-in.tst-d1 .tst-avatar::after { animation-delay: .85s; }
#testimonials .tst-card.is-in.tst-d2 .tst-avatar::after { animation-delay: .95s; }
#testimonials .tst-card.is-in.tst-d3 .tst-avatar::after { animation-delay: 1.05s; }
#testimonials .tst-card:hover .tst-avatar::after { animation: tst-shine 1s ease both; }

/* ── Drag ─────────────────────────────────────────────────── */
#testimonials .tst__viewport { cursor: grab; user-select: none; -webkit-user-select: none; }
#testimonials .tst__viewport.is-grabbing { cursor: grabbing; }
#testimonials .tst__viewport.is-grabbing .tst-card { transform: none; }

#testimonials .tst-card__stars { display: flex; justify-content: center; gap: 3px; margin-bottom: var(--spacing-4); }
#testimonials .tst-card__stars svg { width: 15px; height: 15px; }
#testimonials .tst-star--full { color: var(--color-gold); }
#testimonials .tst-star--empty { color: var(--color-royal); }

#testimonials .tst-card__text {
  flex: 1;
  margin: 0 0 var(--spacing-5);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#testimonials .tst-card__author { width: 100%; padding-top: var(--spacing-4); border-top: 1px solid var(--border-primary); }
#testimonials .tst-card__name { margin: 0; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); letter-spacing: .02em; color: var(--text-primary); }
#testimonials .tst-card__loc { margin: 3px 0 0; display: flex; justify-content: center; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--text-muted); }
#testimonials .tst-card__loc svg { width: 12px; height: 12px; color: var(--color-gold-dark); }

/* ---------- Dots ---------- */
#testimonials .tst__dots { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: var(--spacing-8); }
#testimonials .tst__dots:empty { display: none; }
#testimonials .tst__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-royal);
  cursor: pointer;
  transition: width .3s ease, background .3s ease;
}
#testimonials .tst__dot:hover { background: var(--color-royal-dark); }
/* Active dot: a silver pill that fills with gold until the next slide.
   6.5s here must match CONFIG.INTERVAL in the JS. Pauses on hover. */
#testimonials .tst__dot { position: relative; overflow: hidden; }
#testimonials .tst__dot.is-active { width: 40px; background: var(--color-royal-light); box-shadow: inset 0 0 0 1px var(--color-royal); }
#testimonials .tst__dot.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sheen-gold);
  transform-origin: left;
  transform: scaleX(1);
}
@keyframes tst-countdown { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#testimonials .tst__dots.is-counting .tst__dot.is-active::after,
#testimonials .tst__dots.is-counting .tst__count-fill { animation: tst-countdown 6.5s linear both; }
#testimonials.is-paused .tst__dots .tst__dot.is-active::after,
#testimonials.is-paused .tst__count-fill { animation-play-state: paused; }

/* Phone counter mode: a thin gold progress line under the numbers */
#testimonials .tst__dots:has(.tst__count) { flex-direction: column; gap: 8px; }
#testimonials .tst__count-bar { display: block; width: 120px; height: 2px; border-radius: var(--radius-full); background: var(--color-royal-light); overflow: hidden; }
#testimonials .tst__count-fill { display: block; height: 100%; background: var(--sheen-gold); transform-origin: left; transform: scaleX(0); }
#testimonials .tst__dot:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

#testimonials .tst__count { font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--ls-wider); color: var(--text-muted); font-variant-numeric: tabular-nums; }
#testimonials .tst__count b { color: var(--text-primary); }

/* ---------- Foot ---------- */
#testimonials .tst__foot { text-align: center; margin-top: var(--spacing-10); }
#testimonials .tst__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
  min-height: 48px;
  padding: 0 var(--spacing-8);
  border-radius: var(--radius-full);
  background: var(--sheen-silver);
  box-shadow: var(--shadow-royal);
  color: var(--text-primary);
  font-size: .78rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}
#testimonials .tst__cta svg { width: 16px; height: 16px; color: var(--color-navy); }
#testimonials .tst__cta:hover { color: var(--color-navy); background: var(--sheen-silver-hover); }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  #testimonials.tst { padding: var(--spacing-16) 0; }
  #testimonials .tst__inner { padding: 0 var(--spacing-4); }
  #testimonials .tst__shell { gap: var(--spacing-2); }
  #testimonials .tst__arrow { width: 38px; height: 38px; }
  #testimonials .tst__track { --tst-gap: var(--spacing-4); }
  #testimonials .tst-card { padding: var(--spacing-10) var(--spacing-6) var(--spacing-6); }
  #testimonials .tst__trust { border-radius: var(--radius-xl); }
  #testimonials .tst__trust-sep { display: none; }
}
@media (max-width: 480px) {
  #testimonials .tst__shell > .tst__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #testimonials .tst__track { transition: none; }
  #testimonials .tst-card.is-in,
  #testimonials .tst-card.is-in > *,
  #testimonials .tst-avatar::after { animation: none !important; }
  #testimonials .tst-card:hover { transform: none; }
}