/* PI Testimonials v1.9.0 — testimonials.css
   All colour values come from CSS custom properties set inline from Settings → Colours.
   Override per instance with: #your-wrapper-id { --t7ts-accent: #yourcolour; }
*/

/* ── Design tokens (defaults — overridden by inline style from PHP) ───── */
.t7ts {
  --t7ts-gap:               24px;
  --t7ts-accent:            #1d6fc4;
  --t7ts-text:              #30343b;
  --t7ts-muted:             #69707d;
  --t7ts-card-bg:           #ffffff;
  --t7ts-card-border:       #e4e7eb;
  --t7ts-card-radius:       12px;
  --t7ts-card-padding:      28px;
  --t7ts-content-size:      16px;
  --t7ts-image-size:        58px;
  --t7ts-star:              #f4b400;
  --t7ts-quote-color:       #1d6fc4;
  --t7ts-arrow-bg:          #ffffff;
  --t7ts-arrow-icon:        #30343b;
  --t7ts-arrow-bg-hover:    #1d6fc4;
  --t7ts-arrow-icon-hover:  #ffffff;
  --t7ts-dot-inactive:      #c6cad0;
  --t7ts-dot-active:        #1d6fc4;
  --t7ts-btn-size:          44px;
  --t7ts-dot-size:          9px;

  color:     var(--t7ts-text);
  max-width: 100%;
  outline:   none;
}

.t7ts * { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  .t7ts *, .t7ts *::before, .t7ts *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ── Base card ─────────────────────────────────────────────────────────── */
.t7ts__card {
  position:      relative;
  height:        100%;
  padding:       var(--t7ts-card-padding);
  border-radius: var(--t7ts-card-radius);
  background:    var(--t7ts-card-bg);
  transition:    box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

/* ── Card style variants ────────────────────────────────────────────────── */
.t7ts--card-bordered .t7ts__card {
  border:     1px solid var(--t7ts-card-border);
  box-shadow: 0 2px 8px rgba(22, 31, 45, .05);
}
.t7ts--card-shadow .t7ts__card {
  border:     none;
  box-shadow: 0 8px 24px rgba(22, 31, 45, .10);
}
.t7ts--card-flat .t7ts__card {
  border:     none;
  box-shadow: none;
  background: color-mix(in srgb, var(--t7ts-card-bg) 92%, var(--t7ts-card-border));
}
.t7ts--card-glass .t7ts__card {
  border:     1px solid rgba(255,255,255,.3);
  box-shadow: 0 8px 32px rgba(22, 31, 45, .12);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Hover variants ─────────────────────────────────────────────────────── */
.t7ts--hover-lift .t7ts__card:hover {
  transform:  translateY(-4px);
  box-shadow: 0 16px 40px rgba(22, 31, 45, .14);
}
.t7ts--hover-glow .t7ts__card:hover {
  box-shadow: 0 0 0 3px var(--t7ts-accent), 0 8px 24px rgba(22, 31, 45, .10);
}
.t7ts--hover-border .t7ts__card:hover {
  border-color: var(--t7ts-accent);
}
.t7ts--hover-none .t7ts__card:hover { /* no-op */ }

/* ── Quote icon ─────────────────────────────────────────────────────────── */
.t7ts__quote {
  color:       var(--t7ts-quote-color);
  margin-bottom: 4px;
  user-select: none;
  line-height: 1;
}
.t7ts__quote--typographic {
  font:    700 52px / 1 Georgia, serif;
  height:  34px;
  opacity: .25;
}
.t7ts__quote--svg-open svg,
.t7ts__quote--svg-bubble svg {
  width:   32px;
  height:  auto;
  opacity: .35;
  fill:    var(--t7ts-quote-color);
}
.t7ts--no-quote .t7ts__quote { display: none; }

/* ── Rating ─────────────────────────────────────────────────────────────── */
.t7ts__rating      { display: flex; gap: 1px; margin-bottom: 10px; font-size: 18px; line-height: 1; letter-spacing: 1px; }
.t7ts__stars-filled { color: var(--t7ts-star); }
.t7ts__stars-empty  { color: #d7dbe0; }

/* ── Content ─────────────────────────────────────────────────────────────── */
.t7ts__content { font-size: var(--t7ts-content-size); line-height: 1.75; }
.t7ts__content > :first-child { margin-top: 0; }
.t7ts__content > :last-child  { margin-bottom: 0; }
.t7ts__content-full[hidden] { display: none; }
.t7ts__read-more { appearance:none; margin:10px 0 0; padding:0; border:0; background:none; color:var(--t7ts-accent); font:inherit; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.t7ts__read-more:hover { text-decoration-thickness:2px; }
.t7ts__read-more:focus-visible { outline:2px solid var(--t7ts-accent); outline-offset:3px; border-radius:2px; }

/* ── Author row ─────────────────────────────────────────────────────────── */
.t7ts__author {
  display:     flex;
  align-items: center;
  gap:         14px;
  margin-top:  22px;
}
.t7ts--align-center .t7ts__author { justify-content:center; }
.t7ts--align-right .t7ts__author { justify-content:flex-end; }
.t7ts__photo { flex: 0 0 var(--t7ts-image-size); }

/* ── Image shape variants ───────────────────────────────────────────────── */
.t7ts__photo img {
  display:    block;
  width:      var(--t7ts-image-size);
  height:     var(--t7ts-image-size);
  object-fit: cover;
  transition: border-radius .2s;
}
.t7ts--img-circle  .t7ts__photo img { border-radius: 50%;  box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.t7ts--img-square  .t7ts__photo img { border-radius: 0; }
.t7ts--img-rounded .t7ts__photo img { border-radius: 8px; }

/* ── Author text ─────────────────────────────────────────────────────────── */
.t7ts__name {
  display:     block;
  font-style:  normal;
  font-weight: 700;
  line-height: 1.35;
  color:       var(--t7ts-text);
}
.t7ts__name a { color: inherit; text-decoration: none; }
.t7ts__name a:hover { color: var(--t7ts-accent); text-decoration: underline; }

.t7ts__position,
.t7ts__categories {
  color:       var(--t7ts-muted);
  font-size:   13px;
  line-height: 1.5;
}

/* ── Grid layout ─────────────────────────────────────────────────────────── */
.t7ts__items {
  display:               grid;
  grid-template-columns: repeat(var(--t7ts-cols), minmax(0, 1fr));
  gap:                   var(--t7ts-gap);
}
.t7ts__item { min-width: 0; margin: 0; }

/* ── List layout ─────────────────────────────────────────────────────────── */
.t7ts--list .t7ts__items { grid-template-columns: 1fr; }
.t7ts--list .t7ts__card {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 28%);
  gap:                   24px;
}
.t7ts--list .t7ts__quote--typographic { position: absolute; top: 20px; left: 20px; }
.t7ts--list .t7ts__content { padding-left: 35px; }
.t7ts--list .t7ts__author { margin: 0; border-left: 1px solid var(--t7ts-card-border); padding-left: 24px; }

/* ── Masonry layout ──────────────────────────────────────────────────────── */
.t7ts--masonry .t7ts__items {
  display:      block;
  column-count: var(--t7ts-cols);
  column-gap:   var(--t7ts-gap);
}
.t7ts--masonry .t7ts__item { display: inline-block; width: 100%; margin: 0 0 var(--t7ts-gap); break-inside: avoid; }

/* ── Carousel layout ─────────────────────────────────────────────────────── */
.t7ts--carousel .t7ts__viewport { overflow: hidden; perspective: 1200px; }
.t7ts--carousel .t7ts__items    { display: flex; gap: 0; will-change: transform; }
.t7ts--carousel .t7ts__item     { flex: 0 0 calc(100% / var(--t7ts-visible, var(--t7ts-cols))); padding-right: var(--t7ts-gap); backface-visibility: hidden; }

/* ── Controls row ────────────────────────────────────────────────────────── */
.t7ts__controls {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             16px;
  margin-top:      24px;
}

/* ── Arrow buttons — base ────────────────────────────────────────────────── */
.t7ts__prev,
.t7ts__next {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           var(--t7ts-btn-size);
  height:          var(--t7ts-btn-size);
  padding:         0;
  border:          2px solid var(--t7ts-card-border);
  background:      var(--t7ts-arrow-bg);
  color:           var(--t7ts-arrow-icon);
  cursor:          pointer;
  transition:      background .18s, color .18s, border-color .18s, transform .15s, box-shadow .18s;
  flex-shrink:     0;
}
.t7ts__prev svg, .t7ts__next svg { pointer-events: none; }

.t7ts__prev:hover, .t7ts__next:hover {
  background:   var(--t7ts-arrow-bg-hover);
  color:        var(--t7ts-arrow-icon-hover);
  border-color: var(--t7ts-arrow-bg-hover);
  transform:    scale(1.08);
  box-shadow:   0 4px 14px rgba(0,0,0,.15);
}
.t7ts__prev:focus-visible, .t7ts__next:focus-visible {
  outline:        3px solid var(--t7ts-accent);
  outline-offset: 2px;
}
.t7ts__prev:active, .t7ts__next:active { transform: scale(.94); }
.t7ts__prev:disabled, .t7ts__next:disabled {
  opacity:      .3;
  cursor:       not-allowed;
  transform:    none;
  box-shadow:   none;
  background:   var(--t7ts-arrow-bg);
  color:        var(--t7ts-arrow-icon);
  border-color: var(--t7ts-card-border);
}

/* Arrow style variants */
.t7ts--arrow-circle  .t7ts__prev,
.t7ts--arrow-circle  .t7ts__next { border-radius: 50%; }

.t7ts--arrow-square  .t7ts__prev,
.t7ts--arrow-square  .t7ts__next { border-radius: 6px; }

.t7ts--arrow-pill    .t7ts__prev,
.t7ts--arrow-pill    .t7ts__next { border-radius: 999px; width: auto; padding: 0 18px; }

.t7ts--arrow-minimal .t7ts__prev,
.t7ts--arrow-minimal .t7ts__next {
  background:   transparent;
  border-color: transparent;
  color:        var(--t7ts-muted);
  box-shadow:   none;
}
.t7ts--arrow-minimal .t7ts__prev:hover,
.t7ts--arrow-minimal .t7ts__next:hover {
  background:   transparent;
  border-color: transparent;
  color:        var(--t7ts-accent);
  box-shadow:   none;
  transform:    scale(1.15);
}

/* ── Dots — base ─────────────────────────────────────────────────────────── */
.t7ts__dots { display: flex; gap: 8px; align-items: center; }

.t7ts__dot {
  padding:    0;
  border:     0;
  background: var(--t7ts-dot-inactive);
  cursor:     pointer;
  transition: background .2s, transform .2s, width .25s, border-radius .25s, height .25s;
  flex-shrink: 0;
}
.t7ts__dot:hover { background: color-mix(in srgb, var(--t7ts-dot-active) 55%, var(--t7ts-dot-inactive)); transform: scale(1.25); }
.t7ts__dot:focus-visible { outline: 2px solid var(--t7ts-accent); outline-offset: 2px; }

.t7ts__dot[aria-current="true"],
.t7ts__dot.is-active { background: var(--t7ts-dot-active); transform: none; }

/* Dot style: pill (default) */
.t7ts--dot-pill .t7ts__dot                       { width: var(--t7ts-dot-size); height: var(--t7ts-dot-size); border-radius: 50%; }
.t7ts--dot-pill .t7ts__dot[aria-current="true"],
.t7ts--dot-pill .t7ts__dot.is-active             { width: calc(var(--t7ts-dot-size) * 2.8); border-radius: calc(var(--t7ts-dot-size) / 2); }

/* Dot style: round dot */
.t7ts--dot-dot .t7ts__dot { width: var(--t7ts-dot-size); height: var(--t7ts-dot-size); border-radius: 50%; }

/* Dot style: dash */
.t7ts--dot-dash .t7ts__dot                       { width: calc(var(--t7ts-dot-size) * 2); height: calc(var(--t7ts-dot-size) * 0.55); border-radius: 999px; }
.t7ts--dot-dash .t7ts__dot[aria-current="true"],
.t7ts--dot-dash .t7ts__dot.is-active             { width: calc(var(--t7ts-dot-size) * 3.5); }

/* Dot style: square */
.t7ts--dot-square .t7ts__dot { width: var(--t7ts-dot-size); height: var(--t7ts-dot-size); border-radius: 2px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .t7ts__items         { grid-template-columns: repeat(var(--t7ts-cols-tablet), minmax(0, 1fr)); }
  .t7ts--masonry .t7ts__items { column-count: var(--t7ts-cols-tablet); }
  .t7ts--carousel      { --t7ts-visible: var(--t7ts-cols-tablet); }
}
@media (max-width: 600px) {
  .t7ts__items         { grid-template-columns: repeat(var(--t7ts-cols-mobile), minmax(0, 1fr)); }
  .t7ts--masonry .t7ts__items { column-count: var(--t7ts-cols-mobile); }
  .t7ts--carousel      { --t7ts-visible: var(--t7ts-cols-mobile); }
  .t7ts__card          { padding: min(var(--t7ts-card-padding), 20px); }
  .t7ts--list .t7ts__card  { display: block; }
  .t7ts--list .t7ts__author { margin-top: 20px; border-left: 0; padding-left: 0; }
}

/* ── List layout: no-quote content indent ────────────────────────────────── */
.t7ts--list.t7ts--no-quote .t7ts__content { padding-left: 0; }

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .t7ts__card,
  .t7ts__prev,
  .t7ts__next,
  .t7ts__dot { transition: none; }
}