/*!
 * Shared testimonial rotator styles + progress bar
 */

.vu-testimonial-rotator {
  position: relative;
  display: grid;
  gap: 10px;
  --vu-testimonial-accent: var(--vu-gold, #ffd900);
}

.vu-testimonial-rotator__slides {
  position: relative;
  display: grid;
  gap: 10px;
  overflow: hidden;
}

[data-testimonial-slide][hidden] {
  display: none;
}

.vu-testimonial-slide {
  position: relative;
  display: grid;
  gap: 8px;
  color: var(--vu-ink, #1f2c57);
}

.vu-testimonial-slide__quote {
  margin: 0;
  line-height: 1.6;
}

.vu-testimonial-quote-text {
  display: inline;
}

.vu-testimonial-slide__meta {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  color: var(--vu-slate, #141d3b);
  font-weight: 500;
  opacity: 0.72;
}

.vu-testimonial-slide__role,
.vu-testimonial-slide__company {
  font-weight: 400;
  opacity: 0.72;
}

.vu-testimonial-progress {
  position: relative;
  height: 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  overflow: hidden;
}

.vu-testimonial-progress-bar {
  width: 0%;
  height: 100%;
  background: var(--vu-testimonial-accent);
  transform-origin: left center;
  transition: width 120ms linear;
}

.vu-testimonial-rotator__nav {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.vu-testimonial-rotator__btn {
  width: 36px;
  height: 36px;
  border-radius: 30%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--grad-surface-1, linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(245, 248, 255, 0.9)));
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.vu-testimonial-rotator__btn:hover,
.vu-testimonial-rotator__btn:focus-visible {
  background: rgba(254, 254, 254, 0.90);
  border-color: rgba(0, 0, 0, 0.16);
  transform: translateY(-1px);
}

.vu-testimonial-rotator__btn--prev::before,
.vu-testimonial-rotator__btn--next::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  margin: auto;
  transform: rotate(45deg);
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
}

.vu-testimonial-rotator__btn--prev::before {
  transform: rotate(-45deg);
}

.vu-testimonial-rotator__btn--next::before {
  transform: rotate(135deg);
}

.vu-testimonial-rotator--clients-hero {
  --vu-testimonial-accent: var(--vu-gold, #ffd900);
}

.vu-testimonial-rotator--clients-hero .vu-testimonial-progress {
  background: rgba(0, 0, 0, 0.05);
}

.vu-testimonial-rotator--clients-hero .vu-testimonial-progress-bar {
  background: linear-gradient(135deg, #ffc600, #ffd900);
}

/* --- Sidebar Widget Styles --- */

.vu-testimonial-rotator--sidebar {
  gap: 8px;
}

.vu-testimonial-rotator--sidebar .vu-testimonial-rotator__slides {
  display: block;
  /* Strict collapsed height (with room to grow when expanded) */
  min-height: 248px;
  max-height: 248px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.5s ease;
}

/* Grid Layout for Slide (locks footer to bottom) */
.vu-testimonial-rotator--sidebar .vu-testimonial-slide:not([hidden]) {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  row-gap: 8px;
  height: 100%;
  min-height: 0;
}

/* Content Area (Quote): Shrinks to fit */
.vu-testimonial-rotator--sidebar .vu-testimonial-slide__content {
  position: relative;
  min-height: 0; /* Allows shrinking within the fixed height */
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
  transition: mask-image 0.4s ease, -webkit-mask-image 0.4s ease;
}

.vu-testimonial-rotator--sidebar .vu-testimonial-slide__quote {
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

/* Footer Area (Meta): Never shrinks, solid background */
.vu-testimonial-rotator--sidebar .vu-testimonial-slide__footer {
  padding-top: 6px;
  z-index: 2; /* Sits above masked content if overlap occurs */
}

.vu-testimonial-rotator--sidebar .vu-testimonial-slide__meta {
  font-size: 0.88rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 1;
  /* Full opacity */
}

.vu-testimonial-rotator--sidebar .vu-testimonial-slide__role,
.vu-testimonial-rotator--sidebar .vu-testimonial-slide__company {
  opacity: 1;
  /* Full opacity */
}

/* --- Expansion State (Controlled by JS) --- */

.vu-testimonial-rotator--sidebar.is-expanded .vu-testimonial-rotator__slides {
  max-height: 1400px; /* Allow expansion */
  overflow: visible;
}

.vu-testimonial-rotator--sidebar.is-expanded .vu-testimonial-slide__content {
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}

/* --- Widget Wrapper Styles --- */

.vu-testimonial-widget {
  --tr-surface: var(--grad-surface-1, linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(245, 248, 255, 0.9)));
  --tr-outline: rgba(12, 24, 48, 0.12);
  --tr-shadow: var(--vu-shadow-soft, 0 16px 28px rgba(5, 7, 19, 0.12));
  position: relative;
  padding: clamp(14px, 3vw, 18px);
  border-radius: 18px;
  background: transparent;
  color: var(--vu-ink, #1f2c57);
  overflow: visible;
}

.vu-testimonial-widget::before {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -2;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.1));
  border-radius: 22px;
  pointer-events: none;
}

.vu-testimonial-widget::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  background: var(--tr-surface);
  border: 1px solid var(--tr-outline);
  border-radius: 18px;
  box-shadow: var(--tr-shadow);
  pointer-events: none;
}

.vu-testimonial-widget .vu-testimonial-slide__quote,
.vu-testimonial-widget .vu-testimonial-slide__meta {
  color: var(--vu-ink, #1f2c57);
}

.vu-testimonial-widget .vu-testimonial-progress {
  background: rgba(12, 24, 48, 0.08);
}

.vu-testimonial-widget .vu-testimonial-progress-bar {
  background: linear-gradient(135deg, #ffc600, #ffd900);
}

@media (max-width: 600px) {
  .vu-testimonial-rotator__btn {
    width: 32px;
    height: 32px;
  }
}