/*
==================================================================
VIDEO TESTIMONIALS SLIDER  (index.html)
Replaces the old text-quote testimonial grid. A horizontal slider of
testimonial videos that preview muted while on screen and play with
sound on click. Reuses brand-orange + dark tokens from style.css.
The clips are YouTube embeds behind a thumbnail facade - see the
shared "YOUTUBE FACADE" block at the bottom of this file and
assets/js/video-testimonials.js.
==================================================================
*/

.tt-vtest-section {
  position: relative;
  overflow: hidden;
  padding: 5rem 0;
  background:
    var(--tt-gradient-dark);
}

.tt-vtest-head { max-width: 640px; margin-bottom: 2.5rem; }
.tt-vtest-eyebrow {
  display: inline-block;
  font-family: var(--tt-font-primary);
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tt-accent-light, #FFC178);
  background: rgba(var(--tt-primary-rgb), 0.16);
  border: 1px solid rgba(var(--tt-primary-rgb), 0.32);
  border-radius: 999px; padding: 0.4rem 0.9rem; margin-bottom: 1rem;
}
.tt-vtest-heading {
  font-family: var(--tt-font-heading, var(--tt-font-primary));
  font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.15;
  color: #fff; margin-bottom: 0.75rem;
}
.tt-vtest-heading .fw-bold { color: var(--tt-accent-light, #FFC178); }
.tt-vtest-sub { color: rgba(255, 255, 255, 0.72); font-size: 1.02rem; margin: 0; }

/* ---------- Slider shell ----------
   The arrows get their own GUTTERS either side of the track rather than
   floating over the first and last card. They used to sit at left/right:-12px,
   which parked a 48px control on top of the thumbnail in the same vertical
   band as the 58px play button - two competing round buttons on one image.

   Reserving the space with padding (rather than pushing the arrows outside
   with negative offsets) is deliberate: .tt-vtest-section has
   `overflow: hidden`, and the slider sits inside a max-width container, so at
   ~1366px there is barely 20px of page gutter left - anything positioned out
   there would be clipped. Padding keeps the arrows inside the layout at every
   width, and the track simply starts after them.

   Gutter = 48px arrow + 16px breathing room. */
.tt-vtest-slider {
  position: relative;
  padding-left: 64px;
  padding-right: 64px;
}

.tt-vtest-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.5rem 0.25rem 1.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;               /* Firefox */
}
.tt-vtest-track::-webkit-scrollbar { display: none; } /* WebKit */

.tt-vtest-card {
  scroll-snap-align: start;
  flex: 0 0 clamp(260px, 30%, 340px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.tt-vtest-card:hover {
  border-color: rgba(var(--tt-primary-rgb), 0.5);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.6);
}

/* ---------- Video area ---------- */
.tt-vtest-video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0e1014;
  overflow: hidden;
}
/* Flat bottom scrim so the badge/name stay legible over any frame. Kept as a
   solid tint rather than a fade - the site carries no gradients. */
.tt-vtest-video-wrap::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  background: rgba(14, 16, 20, 0.55);
  pointer-events: none;
}
.tt-vtest-badge {
  position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 11px;
  background: #fff; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5);
  padding: 6px;
}
.tt-vtest-badge img { max-width: 100%; max-height: 100%; object-fit: contain; }

.tt-vtest-meta { position: absolute; left: 1rem; right: 1rem; bottom: 0.9rem; z-index: 2; }
.tt-vtest-name { color: #fff; font-weight: 700; font-size: 1.05rem; margin: 0 0 0.1rem; }
.tt-vtest-role { color: rgba(255, 255, 255, 0.78); font-size: 0.85rem; margin: 0; }

/* ---------- Arrows ---------- */
.tt-vtest-arrow {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 5;
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tt-gradient-primary);
  color: #fff; border: none; cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(var(--tt-primary-rgb), 0.6);
  transition: filter 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}
.tt-vtest-arrow:hover { filter: brightness(1.08); }
.tt-vtest-arrow:active { transform: translateY(-50%) scale(0.94); }
.tt-vtest-arrow[disabled] { opacity: 0.35; cursor: default; }
/* Seated in the gutters the slider reserves - never over a thumbnail. */
.tt-vtest-prev { left: 0; }
.tt-vtest-next { right: 0; }

@media (max-width: 991.98px) {
  .tt-vtest-card { flex-basis: clamp(240px, 45%, 300px); }
  /* Tighter gutters so the cards keep their width on tablets. */
  .tt-vtest-slider { padding-left: 56px; padding-right: 56px; }
}
@media (max-width: 575.98px) {
  .tt-vtest-section { padding: 3.5rem 0; }
  .tt-vtest-card { flex-basis: 80%; }
  .tt-vtest-arrow { display: none; }   /* swipe to scroll on phones */
  /* Arrows are gone here, so give the reserved space back to the cards -
     otherwise 128px of empty gutter eats a phone screen. */
  .tt-vtest-slider { padding-left: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-vtest-track { scroll-behavior: auto; }
  .tt-vtest-card { transition: none; }
}

/* ---------- "View all" link in the slider header ---------- */
.tt-vtest-viewall {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.9rem;
  color: var(--tt-accent-light, #FFC178); font-weight: 600; text-decoration: none;
}
.tt-vtest-viewall:hover { color: #fff; }

/* ==================================================================
   DEDICATED TESTIMONIALS PAGE (grid of click-to-play videos)
   ================================================================== */
.tt-vt-section {
  position: relative; overflow: hidden;
  padding: calc(var(--tt-header-height, 96px) + var(--tt-fold-gap)) 0 5rem;
  background:
    var(--tt-gradient-dark);
}
.tt-vt-head { max-width: 680px; margin: 0 auto 2.75rem; text-align: center; position: relative; z-index: 1; }
.tt-vt-eyebrow {
  display: inline-block;
  font-family: var(--tt-font-primary); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tt-accent-light, #FFC178);
  background: rgba(var(--tt-primary-rgb), 0.16); border: 1px solid rgba(var(--tt-primary-rgb), 0.32);
  border-radius: 999px; padding: 0.4rem 0.9rem; margin-bottom: 1rem;
}
.tt-vt-title {
  font-family: var(--tt-font-heading, var(--tt-font-primary)); font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.14; color: #fff; margin-bottom: 0.75rem;
}
.tt-vt-title .tt-vt-accent { color: var(--tt-accent-light, #FFC178); }
.tt-vt-sub { color: rgba(255, 255, 255, 0.72); font-size: 1.02rem; margin: 0; }

.tt-vt-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.tt-vt-card {
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px; overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.tt-vt-card:hover {
  border-color: rgba(var(--tt-primary-rgb), 0.5); transform: translateY(-4px);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.6);
}
.tt-vt-media { position: relative; aspect-ratio: 16 / 9; background: #0e1014; overflow: hidden; }
/* NOTE: there is deliberately no .tt-vt-video rule any more. Every testimonial
   on every page is a YouTube facade (see the bottom of this file); the
   self-hosted .mp4 cards this grid once held are gone, along with 5.49 GB of
   video. Re-add the rule if a local <video> card ever returns. */
.tt-vt-info { padding: 0.9rem 1rem 1.1rem; }
.tt-vt-name { color: #fff; font-weight: 700; font-size: 1.02rem; margin: 0 0 0.15rem; }
.tt-vt-company { color: rgba(255, 255, 255, 0.72); font-size: 0.85rem; margin: 0; }

@media (max-width: 991.98px) { .tt-vt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) {
  .tt-vt-grid { grid-template-columns: 1fr; }
  .tt-vt-section { padding-top: calc(var(--tt-header-height, 96px) + var(--tt-fold-gap)); }
}

/* ---------- Testimonials pagination ---------- */
.tt-vt-pagination {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.5rem; margin-top: 2.75rem;
}
.tt-vt-page {
  min-width: 42px; height: 42px; padding: 0 0.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; cursor: pointer;
  font-family: var(--tt-font-primary); font-weight: 600; font-size: 0.95rem;
  color: #fff; background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.tt-vt-page:hover:not([disabled]):not(.is-active) { border-color: var(--tt-primary); color: var(--tt-accent-light, #FFC178); }
.tt-vt-page.is-active {
  background: var(--tt-gradient-primary);
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 20px -6px rgba(var(--tt-primary-rgb), 0.6);
}
.tt-vt-page[disabled] { opacity: 0.35; cursor: default; }

/* ==================================================================
   YOUTUBE FACADE
   Shared by the index slider (.tt-vtest-video-wrap) and the dedicated
   grid (.tt-vt-media). A thumbnail plus a play button stands in for
   the player; the <iframe> is only created on click, by
   assets/js/video-testimonials.js. Both host elements are already
   position: relative with aspect-ratio 16/9, so everything here just
   fills them.

   The thumbnail is YouTube's hqdefault.jpg - the one derivative that
   is generated for every public video. It is a 480x360 4:3 canvas
   with the 16:9 frame letterboxed inside it, so `object-fit: cover`
   on a 16/9 box crops off exactly the black bars and nothing else.
   (maxresdefault.jpg is sharper but is not generated for every
   upload, and a missing one renders as a broken image.)
   ================================================================== */
.tt-yt-play {
  position: absolute; inset: 0;
  width: 100%; height: 100%; padding: 0;
  display: block; border: none; background: #0e1014;
  cursor: pointer;
}
.tt-yt-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.tt-yt-play-icon {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tt-gradient-primary);
  color: #fff; font-size: 1.1rem;
  padding-left: 3px;                 /* optical centring of the play glyph */
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.7);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.tt-yt-play:hover .tt-yt-play-icon { transform: translate(-50%, -50%) scale(1.08); filter: brightness(1.08); }
.tt-yt-play:focus-visible { outline: 3px solid var(--tt-accent-light, #FFC178); outline-offset: -3px; }

.tt-yt-frame {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%;
  border: 0; display: block;
}

/* Once the real player is in, drop the facade and every overlay that would
   otherwise sit on top of YouTube's own controls. */
.is-playing .tt-yt-play { display: none; }
.is-playing .tt-vtest-meta { display: none; }
.tt-vtest-video-wrap.is-playing::after { display: none; }

/* ---------- file:// notice ----------
   Dev-only. Shown in place of the player when the page was opened off disk,
   where YouTube refuses to embed at all. Never appears on a served page. */
.tt-yt-notice {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.45rem; padding: 1rem 1.25rem; text-align: center;
  background: rgba(14, 16, 20, 0.94);
}
.tt-yt-notice-head {
  margin: 0; color: var(--tt-accent-light, #FFC178);
  font-weight: 700; font-size: 0.95rem;
}
.tt-yt-notice-text {
  margin: 0; color: rgba(255, 255, 255, 0.76);
  font-size: 0.78rem; line-height: 1.45;
}
.tt-yt-notice-link {
  color: #fff; font-size: 0.78rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.tt-yt-notice-link:hover { color: var(--tt-accent-light, #FFC178); }
.is-noticed .tt-yt-play { display: none; }

/* ---------- Ambient preview (index slider) ----------
   A muted, looping, controls-less player standing in for the thumbnail while
   the card is on screen. It must stay non-interactive so the card still reads
   as one clickable surface: the facade button sits ON TOP of it and a click
   swaps the silent preview for the real player.

   The iframe is oversized and offset so YouTube's own furniture - title bar,
   watch-later button, channel avatar, the end-screen grid - falls outside the
   visible box. The host wrap already has overflow: hidden. Cost of the trick
   is a ~1.32x zoom on the footage, which is fine for talking-head clips and
   is why it is only used for the silent preview, never the real player. */
.is-ambient .tt-yt-frame {
  top: -16%; left: -16%; right: auto; bottom: auto;
  width: 132%; height: 132%;
  pointer-events: none;
}
.is-ambient .tt-yt-thumb { opacity: 0; }
.is-ambient .tt-yt-play {
  z-index: 4;                    /* above the preview, so the card stays clickable */
  background: transparent;
}
/* The play badge stays visible over the preview - it is the only affordance
   telling the visitor there is sound and controls a click away. */
.is-ambient .tt-yt-play-icon { opacity: 0.82; }
.is-ambient .tt-yt-play:hover .tt-yt-play-icon { opacity: 1; }

@media (max-width: 575.98px) {
  .tt-yt-play-icon { width: 48px; height: 48px; font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-yt-play-icon { transition: none; }
  .tt-yt-play:hover .tt-yt-play-icon { transform: translate(-50%, -50%); }
}

/* ===================================================================
   LIGHTBOX  (added August 2026)
   Testimonials no longer play inside their card - a click opens the
   clip over the page. z-index 2300 sits above the album viewer (2200)
   and drawer (1020) but BELOW the webinar modal (2500), so a
   registration flow is never covered by a video.
   =================================================================== */
.tt-vt-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background-color: rgba(0, 0, 0, 0.85);
}

.tt-vt-lightbox.is-open { display: flex; }

.tt-vt-lightbox-inner {
  position: relative;
  width: min(1100px, 100%);
}

/* 16:9 shell so the overlay reserves the player's space before the
   iframe loads and nothing jumps when it arrives. */
.tt-vt-lightbox-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000000;
  border-radius: var(--tt-radius-lg, 12px);
  overflow: hidden;
}

.tt-vt-lightbox-frame .tt-yt-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.tt-vt-lightbox-close {
  position: absolute;
  top: -3rem;
  right: 0;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  font-size: 1.15rem;
  cursor: pointer;
  transition: var(--tt-transition-standard);
}

.tt-vt-lightbox-close:hover,
.tt-vt-lightbox-close:focus-visible {
  background-color: var(--tt-primary);
}

/* Stops the page scrolling behind the overlay. Deliberately a class, not an
   inline style: live-chat.js must key its widget guard off the dialog
   element, never off body.style.overflow. */
body.tt-vt-lock { overflow: hidden; }

@media (max-width: 575.98px) {
  .tt-vt-lightbox-close { top: -2.75rem; width: 38px; height: 38px; }
}