/* =========================================================
   TESTIMONIALS BLOCK — template-parts/testimonials.php
   ---------------------------------------------------------
   One block for Home, Customization Services, Upgrade Services
   and End-User Services (moved here from home.css).

   Every selector starts with `body .sp-testi` = specificity (0,1,1),
   the same as the original `body.page-template-template-home` prefix,
   so it behaves identically on home and wins over the bare
   `.testi-*` / `button` resets of the other page stylesheets.
   Loaded after the page stylesheet (functions.php, priority 21).
   The block carries its own tokens and base reset, so it does not
   depend on the page wrapper (.home-page etc.).
========================================================= */

/* ── TOKENS + SECTION ─────────────────────────────── */
body section.sp-testi {
  --blue-700: rgb(25, 39, 125);
  --blue-500: #2e5bff;
  --blue-400: #3f69ff;
  --blue-300: #c8d4ff;
  --surface-primary: #ffffff;
  --text-primary: #2d323a;
  --text-secondary: #6c7075;
  --text-brand: #2e5bff;
  --text-inverse: #ffffff;
  --border-default: #eaefff;
  --border-strong: #c8d4ff;
  --gradient-main: linear-gradient(125deg, var(--blue-700) 1%, var(--blue-500) 100%);
  --card-shadow: 0 2px 4px -2px rgba(0,0,0,.10), 0 4px 6px -1px rgba(0,0,0,.10);
  --radius-card: 14px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);


  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.625;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}
/* (0,2,1) like home's original `.testimonials` rule: beats `.home-page * { padding: 0 }` */
body .sp-testi.testimonials {
  padding: 96px 0;
  background: var(--surface-primary);
}

/* ── RESET (as .home-page on home) ─────────────────── */
body section.sp-testi,
body .sp-testi *,
body .sp-testi *::before,
body .sp-testi *::after {
  box-sizing: border-box;
}
body .sp-testi * { margin: 0; padding: 0; }
body .sp-testi img,
body .sp-testi svg { display: block; max-width: 100%; }
body .sp-testi a { color: inherit; text-decoration: none; }
body .sp-testi button { font-family: inherit; cursor: pointer; background: none; border: none; }

/* ── CONTAINER + HEADER ────────────────────────────── */
body .sp-testi .sp-testi__container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 48px;
}
body .sp-testi .sp-testi__header {
  text-align: center;
  margin-bottom: 48px;
}
body .sp-testi .sp-testi__title {
  font-family: inherit;
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  color: var(--text-primary);
  margin-bottom: 16px;
}
body .sp-testi .sp-testi__subtitle {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--text-secondary);
}

/* ── TEXT TESTIMONIALS ─────────────────────────────── */
body .sp-testi .testi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

body .sp-testi .testi-card {
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body .sp-testi .testi-card__stars {
  display: flex;
  align-items: center;
  gap: 2px;
}
body .sp-testi .testi-card__title {
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: var(--text-primary);
}
body .sp-testi .testi-card__text {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-secondary);
}
body .sp-testi .testi-card__author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
body .sp-testi .testi-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
body .sp-testi .testi-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body .sp-testi .testi-card__author-info { display: flex; flex-direction: column; gap: 2px; }
body .sp-testi .testi-card__name { font-size: 14px; font-weight: 700; line-height: 20px; color: var(--text-primary); margin: 0; }
body .sp-testi .testi-card__role { font-size: 11px; font-weight: 700; line-height: 14px; color: var(--text-brand); margin: 0; }

/* ── VIDEO TESTIMONIALS ──────────────────────────────
   Two banner cards on desktop, single-card carousel on mobile. Each
   card is a button carrying a pre-composed banner image (name and
   company baked into the artwork) plus a centered play glyph. Clicking
   opens the page's YouTube modal (.video-modal). */
body .sp-testi .video-testi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

body .sp-testi .video-testi-card {
  position: relative;
  aspect-ratio: 432 / 250;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  background: var(--gradient-main);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  font: inherit;
  text-align: left;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
body .sp-testi .video-testi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(46, 91, 255, .25);
}
body .sp-testi .video-testi-card:focus-visible {
  outline: 3px solid var(--blue-300);
  outline-offset: 2px;
}

/* Full-bleed banner image (name + company baked in) */
body .sp-testi .video-testi-card__banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 104%;
  object-fit: cover;
  object-position: center;
  display: block;
  vertical-align: top;
  pointer-events: none;
  z-index: 1;
}

/* Centered play button overlay */
body .sp-testi .video-testi-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: block;
  width: 48px;
  height: 48px;
  transition: transform .2s var(--ease-out);
  pointer-events: none;
}
body .sp-testi .video-testi-card:hover .video-testi-card__play {
  transform: translate(-50%, -50%) scale(1.1);
}

/* Override Hello Elementor parent button:hover/:focus on .video-testi-card */
body .sp-testi button.video-testi-card,
body .sp-testi button.video-testi-card:hover,
body .sp-testi button.video-testi-card:focus,
body .sp-testi button.video-testi-card:active {
  background: var(--gradient-main);
  border: 1px solid var(--border-default);
  color: var(--text-inverse);
}

/* ── CAROUSEL PAGINATION DOTS ────────────────────────
   Hidden on desktop (grid), shown on mobile where both grids become
   horizontal scroll-snap carousels; testimonials.js syncs the active dot. */
body .sp-testi .video-testi-dots,
body .sp-testi .testi-dots {
  display: none;
  justify-content: center;
  gap: 4px;
}
body .sp-testi .video-testi-dots__dot,
body .sp-testi .testi-dots__dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
  cursor: pointer;
  transition: background .2s;
}
body .sp-testi .video-testi-dots__dot--active,
body .sp-testi .testi-dots__dot--active {
  background: var(--blue-500);
}

/* ── READ MORE / LESS TOGGLE ─────────────────────────
   Same on mobile and desktop per designer's request: uniform card
   size, click-to-expand for long text. Text is clamped to 6 lines;
   testimonials.js injects .testi-card__toggle only when the text
   actually overflows. .is-expanded removes the clamp. */
body .sp-testi .testi-card__text {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body .sp-testi .testi-card__text.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
body .sp-testi .testi-card__toggle {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--text-brand);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  padding: 0;
  transition: color .15s;
}
/* JS hides the toggle while the whole text fits; Hello's
   [type=button] { display: inline-block } would override the UA [hidden] */
body .sp-testi .testi-card__toggle[hidden] { display: none; }
/* (0,4,2) + loaded after home.css: beats home's
   ".home-page button:not(.btn):hover { color: initial }" neutraliser
   and Hello Elementor's pink [type=button]:hover/:focus */
body .sp-testi .testi-card button.testi-card__toggle:hover,
body .sp-testi .testi-card button.testi-card__toggle:focus {
  background: none;
  color: var(--blue-400);
  text-decoration: underline;
}

/* ── "READ MORE REVIEWS" → Acumatica Marketplace ───── */
body .sp-testi .testi-more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
body .sp-testi .testi-more a.testi-more__btn,
body .sp-testi .testi-more a.testi-more__btn:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border: 1px solid #d6d7dc;
  border-radius: 10px;
  background: #eef0fa;
  color: #2d323a;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s, transform .15s;
}
body .sp-testi .testi-more a.testi-more__btn:hover,
body .sp-testi .testi-more a.testi-more__btn:focus-visible {
  border-color: #2e5bff;
  color: #2d323a;
  transform: translateY(-1px);
}

/* ── ≤1100px ───────────────────────────────────────── */
@media (max-width: 1100px) {
  body .sp-testi.testimonials { padding: 72px 0; }
  body .sp-testi .sp-testi__container { padding-inline: 32px; }
  body .sp-testi .video-testi-grid { gap: 16px; }
}

/* ── ≤768px: horizontal carousels (Figma 1742:18190) ──
   One full-width card per screen; 16px gap = side padding, so the
   neighbours stay off-screen; scroll-padding snaps cards to the 16px
   page margin. The scrollers keep 8px padding-bottom for the card
   shadow, so the dot margins are 8px less than the Figma spacing
   (video→dots 12px, cards→dots 16px, dots→next block 24px). */
@media (max-width: 768px) {
  body .sp-testi.testimonials { padding: 40px 0; }
  body .sp-testi .sp-testi__container { padding-inline: 16px; }
  body .sp-testi .sp-testi__header { margin-bottom: 24px; }
  body .sp-testi .sp-testi__title { font-size: 28px; line-height: 34px; margin-bottom: 12px; }
  body .sp-testi .sp-testi__subtitle { font-size: 16px; }

  body .sp-testi .video-testi-grid,
  body .sp-testi .testi-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    margin-inline: -16px;
    padding-inline: 16px;
    padding-bottom: 8px;
    scrollbar-width: none;
    grid-template-columns: none;
  }
  body .sp-testi .video-testi-grid::-webkit-scrollbar,
  body .sp-testi .testi-grid::-webkit-scrollbar { display: none; }
  body .sp-testi .video-testi-grid { margin-bottom: 0; }

  body .sp-testi .video-testi-card {
    flex: 0 0 100%;
    max-width: none;
    scroll-snap-align: start;
  }
  body .sp-testi .testi-card {
    flex: 0 0 100%;
    max-width: none;
    min-height: 380px;
    padding: 16px;
    scroll-snap-align: start;
  }
  /* Push the author to the bottom of the collapsed card so all cards
     have the same silhouette (.testi-card is a flex column). */
  body .sp-testi .testi-card__author { margin-top: auto; }
  body .sp-testi .testi-card__title { font-size: 14px; line-height: 20px; }

  body .sp-testi .video-testi-dots { display: flex; margin-top: 4px; margin-bottom: 24px; }
  body .sp-testi .testi-dots { display: flex; margin-top: 8px; }

  body .sp-testi .testi-more { margin-top: 24px; }
  body .sp-testi .testi-more a.testi-more__btn { width: 100%; justify-content: center; }
}

/* =========================================================
   VIDEO MODAL — .video-modal.sp-testi-modal (moved from home.css)
   Fixed-position lightbox over the whole viewport. Overlay dims the
   page; dialog holds a 16:9 iframe for the YouTube embed. Opened by
   testimonials.js for any [data-video-src] button on the page.
   `body .sp-testi-modal …` = (0,2,1), same as the original home rules,
   so it wins over home's `.home-page *` reset.
========================================================= */
body .sp-testi-modal.video-modal {
  --blue-150: #eef0fa;
  --blue-300: #c8d4ff;
  --text-primary: #2d323a;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* side padding leaves room for the close button outside the video */
  padding: 24px 68px;
  margin: 0;
  box-sizing: border-box;
  line-height: 1.625; /* as inside .home-page; the modal has no text, keeps parity */
}
body .sp-testi-modal.video-modal[hidden] {
  display: none;
}
body .sp-testi-modal *,
body .sp-testi-modal *::before,
body .sp-testi-modal *::after { box-sizing: border-box; }
body .sp-testi-modal svg { display: block; max-width: 100%; }
body .sp-testi-modal .video-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  cursor: pointer;
}
body .sp-testi-modal .video-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 1100px;
  border-radius: 16px;
  overflow: visible;
  filter: drop-shadow(0 12px 9px rgba(0, 0, 0, .1)) drop-shadow(0 6px 6px rgba(0, 0, 0, .1));
}
/* Figma: 4px outside the top-right corner of the video */
body .sp-testi-modal .video-modal__close {
  position: absolute;
  top: -44px;
  right: -44px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-150, #eef0fa);
  border: 1px solid #d6d7dc; /* Figma neutral/400 */
  border-radius: 8px;
  color: var(--text-primary, #2d323a);
  cursor: pointer;
  padding: 0;
  line-height: 24px;
  transition: background .2s var(--ease-out), transform .2s var(--ease-out);
}
body .sp-testi-modal .video-modal__close:hover {
  background: #fff;
  transform: scale(1.05);
}
body .sp-testi-modal .video-modal__close:focus-visible {
  outline: 3px solid var(--blue-300);
  outline-offset: 2px;
}
/* Neutralize Hello Elementor button hover on the modal close */
body .sp-testi-modal button.video-modal__close,
body .sp-testi-modal button.video-modal__close:hover,
body .sp-testi-modal button.video-modal__close:focus,
body .sp-testi-modal button.video-modal__close:active {
  color: var(--text-primary, #2d323a);
}
body .sp-testi-modal .video-modal__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}
body .sp-testi-modal .video-modal__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ≤768px: tighter padding, close button above the video's right edge */
@media (max-width: 768px) {
  body .sp-testi-modal.video-modal { padding: 16px; }
  body .sp-testi-modal .video-modal__close {
    top: -44px;
    right: 0;
    width: 36px;
    height: 36px;
  }
}