/* =========================================================
   Nuni — Testimonials widget
   Ports Hero v3.html .v3-testimonials section. BEM-scoped to
   .nuni-testimonials so it never collides with other widgets.
   ========================================================= */

/* Break out of the parent Elementor column to full viewport width.
   Same pattern Hero Stage uses. Horizontal-overflow clipping is
   handled by the hero-stage.css :has() rule so a vertical scrollbar
   on Windows doesn't produce a 15px horizontal scroll. */
.elementor-widget-nuni-testimonials,
.elementor-widget-nuni-testimonials > .elementor-widget-container {
  width: 100%;
  max-width: none;
}
.elementor-widget-nuni-testimonials > .elementor-widget-container { padding: 0; }
.elementor-widget-nuni-testimonials > .elementor-widget-container > .nuni-testimonials {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
}
/* Inside Elementor's editor preview, the iframe handles its own
   horizontal overflow — match the live breakout so the preview is
   accurate. The editor body already clips overflow-x via the
   hero-stage editor rules. */
.elementor-editor-active .elementor-widget-nuni-testimonials > .elementor-widget-container > .nuni-testimonials {
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
}
/* Strip parent padding/margin AND any min-height at every nesting depth.
   `min-height: 0` is the critical bit — a parent column/section with
   Elementor's "Min Height" setting otherwise stays taller than the
   widget content and leaks the body bg below the widget. */
.e-con:has(.elementor-widget-nuni-testimonials),
.e-con-inner:has(.elementor-widget-nuni-testimonials),
.elementor-section:has(.elementor-widget-nuni-testimonials),
.elementor-container:has(.elementor-widget-nuni-testimonials),
.elementor-row:has(.elementor-widget-nuni-testimonials),
.elementor-column:has(.elementor-widget-nuni-testimonials),
.elementor-widget-wrap:has(.elementor-widget-nuni-testimonials) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  /* Kill any flex/grid gap — Elementor's modern .e-con containers
     default to flex column with a small gap between children, which
     shows as a thin strip of page bg between adjacent full-bleed
     Nuni sections. */
  gap: 0 !important;
  row-gap: 0 !important;
  overflow: visible !important;
  max-width: none !important;
  min-height: 0 !important;
}
.elementor-widget.elementor-widget-nuni-testimonials {
  margin: 0 !important;
  padding: 0 !important;
}
.elementor-widget-nuni-testimonials,
.elementor-widget-nuni-testimonials + .elementor-widget,
.elementor-widget + .elementor-widget-nuni-testimonials {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

.nuni-testimonials {
  /* Tokens (with sensible defaults; theme/Elementor can override) */
  --nuni-page:        var(--e-global-color-7, #FAF7F1);
  --nuni-card-bg:     #F4ECDD;
  --nuni-ink:         var(--e-global-color-text,    #2A1F14);
  --nuni-ink-2:       #4A3C2C;
  --nuni-muted:       var(--e-global-color-accent,  #6B5B47);
  --nuni-sand-deep:   var(--e-global-color-secondary, #8A765C);
  --nuni-line:        rgba(28, 20, 12, 0.12);
  --nuni-line-2:      rgba(28, 20, 12, 0.2);
  /* Eyebrow/accent on the warm cream backgrounds. --nuni-sand-deep
     (#8A765C) fails WCAG AA at the 11px eyebrow size (~3.6:1), so the
     accent token resolves to the darker muted ink (~6:1 on #FAF7F1). */
  --nuni-testimonials-accent: var(--nuni-muted);

  background: var(--nuni-page);
  color: var(--nuni-ink);
  padding: clamp(72px, 7vw, 112px) 56px;
}

.nuni-testimonials__inner {
  max-width: 1280px;
  margin: 0 auto;
}

.nuni-testimonials__header {
  text-align: center;
  margin-bottom: clamp(40px, 4.5vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.nuni-testimonials__eyebrow {
  font-family: 'Gilroy', 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--nuni-testimonials-accent);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.nuni-testimonials__eyebrow::before,
.nuni-testimonials__eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--nuni-line-2);
}

.nuni-testimonials__title {
  font-family: 'Camello Rough', 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--nuni-ink);
  margin: 0;
  max-width: 28ch;
  text-wrap: pretty;
}

/* Trustpilot aggregate row — green star squares + meta */
.nuni-testimonials__tp {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  text-decoration: none;
  color: inherit;
  flex-wrap: wrap;
  justify-content: center;
}
a.nuni-testimonials__tp { transition: opacity .2s ease; }
a.nuni-testimonials__tp:hover { opacity: 0.75; }

.nuni-testimonials__tp-stars {
  display: inline-flex;
  gap: 2px;
}
.nuni-testimonials__tp-stars .star {
  width: 18px;
  height: 18px;
  background: #00B67A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}
.nuni-testimonials__tp-stars .star svg { width: 12px; height: 12px; fill: #FFFFFF; }

.nuni-testimonials__tp-meta {
  font-family: 'Gilroy', 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: var(--nuni-ink-2);
  margin: 0;
  line-height: 1.3;
}
.nuni-testimonials__tp-meta strong { color: var(--nuni-ink); font-weight: 600; }
.nuni-testimonials__tp-logo {
  height: 14px;
  width: auto;
  display: inline-block;
  margin-left: 4px;
  vertical-align: -2px;
}
.nuni-testimonials__tp-wordmark {
  font-weight: 700;
  /* Trustpilot brand green darkened to clear WCAG AA (4.5:1) on the
     warm cream page bg. Original #00B67A was ~2.3:1. */
  color: #006E45;
  margin-left: 4px;
  font-family: 'Gilroy', 'Inter', system-ui, sans-serif;
}

/* Carousel wrapper — when ≤3 reviews we just see the row flat; when >3
   the parent gets .nuni-testimonials__carousel--active and a fade
   appears on the right edge to hint at more content. */
.nuni-testimonials__carousel {
  position: relative;
}
.nuni-testimonials__carousel--active::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 56px;
  background: linear-gradient(90deg, transparent 0%, var(--nuni-page, #FAF7F1) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 2;
}
.nuni-testimonials__carousel--active.has-overflow-end::after { opacity: 1; }

/* Track: grid-auto-flow column makes the items lay out horizontally.
   3 visible per "page" by default; overflow scrolls horizontally with
   snap. When there are only 3 items the row fits exactly and no
   scrollbar appears. */
.nuni-testimonials__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--tm-gap)) / 3);
  gap: var(--tm-gap, clamp(20px, 2.4vw, 36px));
  --tm-gap: clamp(20px, 2.4vw, 36px);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* rAF tween in testimonials.js drives the animation manually; native
     smooth-scroll would fight per-frame scrollLeft writes. */
}
.nuni-testimonials__grid::-webkit-scrollbar { display: none; }
.nuni-testimonials__grid > * {
  scroll-snap-align: start;
  min-width: 0;
}

/* Nav buttons — same outlined-circle treatment as Bestsellers. Shown
   only when carousel mode is active (more than 3 reviews). */
.nuni-testimonials__nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(28px, 3vw, 40px);
}
.nuni-testimonials__nav-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--nuni-line-2);
  background: transparent;
  border-radius: 50%;
  color: var(--nuni-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
/* Lock down all interactive states so the theme's default button colors
   (often pink/red on :active) can't override. */
.nuni-testimonials__nav-btn:hover:not(:disabled),
.nuni-testimonials__nav-btn:focus:not(:disabled),
.nuni-testimonials__nav-btn:focus-visible:not(:disabled),
.nuni-testimonials__nav-btn:active:not(:disabled) {
  background: var(--nuni-ink) !important;
  border-color: var(--nuni-ink) !important;
  color: var(--nuni-page) !important;
  outline: 0 !important;
}
.nuni-testimonials__nav-btn:disabled,
.nuni-testimonials__nav-btn:disabled:hover,
.nuni-testimonials__nav-btn:disabled:focus,
.nuni-testimonials__nav-btn:disabled:focus-visible,
.nuni-testimonials__nav-btn:disabled:active {
  background: transparent !important;
  border-color: var(--nuni-line-2) !important;
  color: var(--nuni-ink) !important;
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  outline: 0 !important;
  transform: none !important;
}
.nuni-testimonials__nav-btn svg { width: 16px; height: 16px; }

.nuni-testimonials__card {
  position: relative;
  padding: 28px 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.nuni-testimonials__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--nuni-testimonials-accent);
}
.nuni-testimonials__stars svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.nuni-testimonials__quote {
  font-family: 'Gilroy', 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--nuni-ink);
  margin: 0;
  text-wrap: pretty;
}

.nuni-testimonials__author {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: auto;
  padding-top: 6px;
}

.nuni-testimonials__name {
  font-family: 'Gilroy', 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--nuni-ink);
  margin: 0;
  letter-spacing: 0.02em;
}

.nuni-testimonials__meta {
  font-family: 'Gilroy', 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nuni-muted);
  margin: 0;
}

/* Tablet (≤1024): show 2 cards per page. */
@media (max-width: 1024px) {
  .nuni-testimonials__grid {
    grid-auto-columns: calc((100% - 1 * var(--tm-gap)) / 2);
  }
}

/* Phone (≤720): single card per page, snap-friendly with side gutter.
   The 3-up grid-style stacked-with-hairlines from the original Hero v3
   only made sense for static layouts; in carousel mode the snap behavior
   does the work and the hairlines become visual clutter. */
@media (max-width: 720px) {
  .nuni-testimonials {
    padding: clamp(56px, 8vw, 80px) 0;
  }
  .nuni-testimonials__carousel--active::after {
    display: none;
  }
  .nuni-testimonials__inner {
    padding: 0 20px;
  }
  .nuni-testimonials__grid {
    --tm-gap: 16px;
    grid-auto-columns: 86%;
    padding: 0 20px;
    scroll-padding-left: 20px;
    margin: 0 -20px;
  }
  .nuni-testimonials__nav {
    margin-top: 24px;
  }
}

@media (max-width: 480px) {
  .nuni-testimonials__grid { grid-auto-columns: 92%; }
  .nuni-testimonials__nav { display: none; }
  .nuni-testimonials__card { padding-inline: 24px; }
}