/* ==========================================================
   THEATRE TRIPS WITH FIONA - TESTIMONIALS CAROUSEL

   Part of the ttf-testimonials plugin. Loads on every front end
   page, at priority 5, so the WPCodeBox CSS snippet loads later
   and wins on equal specificity. Override anything here from
   there rather than editing this file, or an update to the
   plugin will undo your work.

   COLOUR AND TYPE TOKENS
   Every var() carries a literal fallback in pixels. That is
   deliberate: this site runs the Beaver Builder Theme, which
   sets html{font-size:10px}, so the --ttf-fs-* tokens in
   ttf-beaver-builder.css are rem values scaled for a 10px root.
   If this carousel is ever dropped on a page where that
   stylesheet has not loaded, a rem fallback would render 60%
   too large. Pixel fallbacks are correct either way.

   WHAT IS NOT IN HERE
   No layout rule targets a class that would be typed into a
   Beaver Builder module's Advanced > Class field. .fl-module
   carries clearfix pseudo-elements and double-wraps its content
   as .fl-module > .fl-module-content > .fl-html > markup, so a
   grid set there sees exactly one child and lays out nothing.
   Everything below targets classes emitted inside our own
   markup, whose children are direct.
   ========================================================== */

.ttf-testi {
  --ttf-testi-gap: 24px;
  position: relative;
  width: 100%;
}

/* ----------------------------------------------------------
   THE TRACK

   A grid rather than flex so the column width is stated once,
   in one calc, rather than repeated as flex-basis on the cards.

   --n is resolved here rather than from the inline
   --ttf-testi-visible directly, because that inline value sits
   on the parent element and an inline style cannot be beaten by
   a media query. Reading it into a variable on this element
   lets the breakpoints below override it. min() also means
   asking for one card across never turns into two on a tablet.
   ---------------------------------------------------------- */
.ttf-testi-track {
  --n: var(--ttf-testi-visible, 3);

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--n) - 1) * var(--ttf-testi-gap)) / var(--n));
  gap: var(--ttf-testi-gap);

  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  /* Room for the hover lift and the card shadow, which would
     otherwise be clipped by the scroll container. */
  padding: 8px 2px 20px;
  scroll-padding-left: 2px;

  /* The scrollbar is hidden but scrolling is not: touch swipe,
     trackpad and keyboard all still work. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ttf-testi-track::-webkit-scrollbar {
  display: none;
}

.ttf-testi-track:focus-visible {
  outline: 3px solid var(--ttf-pink, #CC1576);
  outline-offset: 4px;
  border-radius: 8px;
}

@media (max-width: 1023px) {
  .ttf-testi-track { --n: min(var(--ttf-testi-visible, 3), 2); }
}

@media (max-width: 767px) {
  .ttf-testi-track {
    --n: 1;
    --ttf-testi-gap: 16px;
  }
}

/* ----------------------------------------------------------
   THE CARD
   Matches the .ttf-review cards already on the homepage, so the
   carousel does not look like a different site.
   ---------------------------------------------------------- */
.ttf-testi-card {
  scroll-snap-align: start;

  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--ttf-r, 28px);
  padding: 34px;
  box-shadow: var(--ttf-shadow-sm, 0 8px 24px rgba(34, 39, 46, .07));
  transition: transform .3s, box-shadow .3s;
}

.ttf-testi-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ttf-shadow, 0 18px 50px rgba(34, 39, 46, .09));
}

@media (max-width: 767px) {
  .ttf-testi-card { padding: 28px; }
}

.ttf-testi-stars {
  margin: 0 0 18px;
  line-height: 1;
  font-size: var(--ttf-fs-stars, 16px);
  letter-spacing: .15em;
  color: var(--ttf-gold, #C8A84B);
}

/* The unearned stars, so a four star review reads as four out
   of five rather than simply as a short row. */
.ttf-testi-stars-off {
  color: var(--ttf-gold, #C8A84B);
  opacity: .26;
}

.ttf-testi-quote {
  flex: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  quotes: none;
}

.ttf-testi-quote p {
  margin: 0;
  font-size: var(--ttf-fs-md, 15px);
  line-height: 1.65;
  color: var(--ttf-ink, #22272E);
}

/* Some themes, and the Beaver Builder Theme among them, put a
   decorative mark on blockquote. We draw our own look, so any
   inherited one is removed rather than fought with. */
.ttf-testi-quote::before,
.ttf-testi-quote::after,
.ttf-testi-quote p::before,
.ttf-testi-quote p::after {
  content: none;
}

.ttf-testi-by {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-top: 24px;
}

.ttf-testi-avatar {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: var(--ttf-fs-stars, 16px);
  line-height: 1;
  background: linear-gradient(135deg, var(--ttf-pink, #CC1576), var(--ttf-pink-deep, #A8125F));
}

.ttf-testi-avatar-photo {
  object-fit: cover;
  display: block;
}

/* Three gradients, cycling by card position, matching
   .ttf-av-1/2/3 on the homepage. */
.ttf-testi-card[data-av="2"] .ttf-testi-avatar {
  background: linear-gradient(135deg, var(--ttf-sage, #5FA98C), #3d8068);
}

.ttf-testi-card[data-av="3"] .ttf-testi-avatar {
  background: linear-gradient(135deg, var(--ttf-gold, #C8A84B), var(--ttf-gold-deep, #A4862E));
}

.ttf-testi-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ttf-testi-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: var(--ttf-fs-md, 15px);
  line-height: 1.3;
  color: var(--ttf-ink, #22272E);
}

.ttf-testi-place,
.ttf-testi-meta {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--ttf-fs-xs, 13px);
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--ttf-ink-faint, #6B7680);
}

.ttf-testi-meta {
  font-style: italic;
}

/* ----------------------------------------------------------
   ARROWS AND DOTS
   ---------------------------------------------------------- */
.ttf-testi-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
}

.ttf-testi-arrow {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 2px solid #ECE6DC;
  border-radius: 50%;
  background: #fff;
  color: var(--ttf-ink, #22272E);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ttf-shadow-sm, 0 8px 24px rgba(34, 39, 46, .07));
  transition: transform .25s, border-color .25s, color .25s, opacity .25s;
}

.ttf-testi-arrow:hover:not(:disabled) {
  transform: translateY(-3px);
  border-color: var(--ttf-gold, #C8A84B);
  color: var(--ttf-pink, #CC1576);
}

.ttf-testi-arrow:focus-visible {
  outline: 3px solid var(--ttf-pink, #CC1576);
  outline-offset: 3px;
}

.ttf-testi-arrow:disabled {
  opacity: .32;
  cursor: default;
  box-shadow: none;
}

.ttf-testi-dots {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ttf-testi-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #E0D9CD;
  cursor: pointer;
  transition: width .25s, background .25s;
}

.ttf-testi-dot[aria-current="true"] {
  width: 26px;
  background: var(--ttf-pink, #CC1576);
}

.ttf-testi-dot:focus-visible {
  outline: 3px solid var(--ttf-pink, #CC1576);
  outline-offset: 3px;
}

/* ----------------------------------------------------------
   MOTION

   The audience for this site is older and reads slowly. There is
   no autoplay anywhere, and a visitor who has asked their system
   for less movement gets an instant jump rather than a glide.
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  .ttf-testi-track { scroll-behavior: auto; }

  .ttf-testi-card,
  .ttf-testi-arrow,
  .ttf-testi-dot {
    transition: none;
  }

  .ttf-testi-card:hover { transform: none; }
  .ttf-testi-arrow:hover:not(:disabled) { transform: none; }
}