/* ===================================================================
 * Testimonials v2 (3 variants — EXTEND of pre-v2 module)
 * A — Card Grid (light, original preserved)
 * B — Magazine Feature (12-col 5/7: hero card + supporting cards)
 * C — Card Grid on Dark (dark slab + glass cards)
 *
 * All selectors scoped under .dl-redesign (≥0,2,0). Body text colors
 * declared explicitly so the global p { color: medium } cascade
 * doesn't shift.
 *
 * Token contract: --space-1/2/3/4/6/8/10/16/20 only.
 * =================================================================== */

.dl-redesign .dl-testimonials { padding: var(--space-20) 0; position: relative; }

/* Section surface defaults per variant */
.dl-redesign .dl-testimonials[data-variant="a"] { background: var(--module-surface, var(--color-surface)); }
.dl-redesign .dl-testimonials[data-variant="b"] { background: var(--module-surface, #ffffff); }
.dl-redesign .dl-testimonials[data-variant="c"] { background: var(--module-surface, #0F172A); color: rgba(255, 255, 255, 0.92); }
.dl-redesign .dl-testimonials[data-variant="d"] { background: var(--module-surface, var(--color-surface)); }

/* ---------- Header ---------- */
.dl-redesign .dl-testimonials__header {
  max-width: 760px;
  margin: 0 0 var(--space-10);
}
.dl-redesign .dl-testimonials__header--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.dl-redesign .dl-testimonials__title {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.75rem, 3.6vw, 2.625rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-dark);
  font-weight: 700;
}
.dl-redesign .dl-testimonials__intro {
  font-size: 1.125rem;
  color: var(--color-medium);
  margin: 0;
}
/* Variant C dark header overrides */
.dl-redesign .dl-testimonials[data-variant="c"] .dl-testimonials__title { color: #ffffff; }
.dl-redesign .dl-testimonials[data-variant="c"] .dl-testimonials__intro { color: rgba(255, 255, 255, 0.78); }

/* ---------- Star row (partial fill via --pct) ---------- */
.dl-redesign .dl-testimonials__stars {
  position: relative;
  display: inline-block;
  line-height: 1;
  letter-spacing: 2px;
  font-family: 'Inter', system-ui, sans-serif;
}
.dl-redesign .dl-testimonials__stars-bg { color: var(--color-border); }
.dl-redesign .dl-testimonials__stars-fg {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-warning);
  width: var(--pct, 100%);
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
}
.dl-redesign .dl-testimonials__stars--lg { font-size: 28px; }
.dl-redesign .dl-testimonials__stars--sm { font-size: 16px; }
/* Variant C dark star background needs higher contrast against #0F172A */
.dl-redesign .dl-testimonials[data-variant="c"] .dl-testimonials__stars-bg {
  color: rgba(255, 255, 255, 0.18);
}

/* ---------- Summary block ---------- */
.dl-redesign .dl-testimonials__summary {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-10);
}
.dl-redesign .dl-testimonials__summary-left {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.dl-redesign .dl-testimonials__rating-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-dark);
  letter-spacing: -0.01em;
}
.dl-redesign .dl-testimonials__summary-meta {
  color: var(--color-medium);
  font-size: 0.9375rem;
}
.dl-redesign .dl-testimonials__meta-strong {
  color: var(--color-dark);
  font-weight: 700;
}
/* Variant C dark summary block. Background bumped from 0.04 → 0.08 so the
   block has visible substance on #0F172A even without backdrop-filter; the
   border at 0.16 reinforces the boundary. */
.dl-redesign .dl-testimonials[data-variant="c"] .dl-testimonials__summary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}
.dl-redesign .dl-testimonials[data-variant="c"] .dl-testimonials__rating-text { color: #ffffff; }
.dl-redesign .dl-testimonials[data-variant="c"] .dl-testimonials__summary-meta { color: rgba(255, 255, 255, 0.7); }
.dl-redesign .dl-testimonials[data-variant="c"] .dl-testimonials__meta-strong { color: #ffffff; }

/* =====================================================================
 * VARIANT A + C — Card Grid (shared layout)
 * ===================================================================== */
.dl-redesign .dl-testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 900px) {
  .dl-redesign .dl-testimonials__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Card */
.dl-redesign .dl-testimonials__card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.dl-redesign .dl-testimonials__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--module-primary, var(--color-primary)) 30%, var(--color-border));
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .dl-redesign .dl-testimonials__card:hover { border-color: rgba(70, 154, 173, 0.5); }
}

/* Variant C dark cards = glass */
.dl-redesign .dl-testimonials[data-variant="c"] .dl-testimonials__card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
.dl-redesign .dl-testimonials[data-variant="c"] .dl-testimonials__card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: color-mix(in srgb, var(--module-primary, var(--color-primary)) 50%, rgba(255, 255, 255, 0.12));
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .dl-redesign .dl-testimonials[data-variant="c"] .dl-testimonials__card:hover {
    border-color: rgba(70, 154, 173, 0.5);
  }
}

.dl-redesign .dl-testimonials__placeholder {
  align-self: flex-start;
  background: var(--color-warning-light);
  color: var(--color-warning);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.dl-redesign .dl-testimonials__quote {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-dark);
  font-style: italic;
}
.dl-redesign .dl-testimonials__quote p { margin: 0 0 var(--space-3); color: var(--color-dark); font-style: italic; }
.dl-redesign .dl-testimonials__quote p:last-child { margin: 0; }
/* Defensive: heading neutralization on quote richtext. */
.dl-redesign .dl-testimonials__quote h1,
.dl-redesign .dl-testimonials__quote h2,
.dl-redesign .dl-testimonials__quote h3,
.dl-redesign .dl-testimonials__quote h4 {
  font-size: 1.0625rem; font-weight: 400; font-style: italic;
  color: var(--color-dark); margin: 0 0 var(--space-3); letter-spacing: 0; line-height: 1.55;
}
/* Variant C dark quote text */
.dl-redesign .dl-testimonials[data-variant="c"] .dl-testimonials__quote,
.dl-redesign .dl-testimonials[data-variant="c"] .dl-testimonials__quote p,
.dl-redesign .dl-testimonials[data-variant="c"] .dl-testimonials__quote h1,
.dl-redesign .dl-testimonials[data-variant="c"] .dl-testimonials__quote h2,
.dl-redesign .dl-testimonials[data-variant="c"] .dl-testimonials__quote h3,
.dl-redesign .dl-testimonials[data-variant="c"] .dl-testimonials__quote h4 {
  color: rgba(255, 255, 255, 0.92);
}

/* Attribution row */
.dl-redesign .dl-testimonials__attribution {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
}
.dl-redesign .dl-testimonials__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--module-primary, var(--color-primary)) 18%, var(--color-primary-light));
  color: var(--module-primary, var(--color-primary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
  flex: 0 0 auto;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .dl-redesign .dl-testimonials__avatar { background: var(--color-primary-light); }
}
.dl-redesign .dl-testimonials__cited {
  font-size: 0.875rem;
  color: var(--color-medium);
  display: flex;
  flex-direction: column;
}
.dl-redesign .dl-testimonials__cited-name {
  color: var(--color-dark);
  font-weight: 600;
}
.dl-redesign .dl-testimonials__cited-loc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dl-redesign .dl-testimonials__cited-loc svg {
  color: var(--color-medium);
  flex: 0 0 auto;
}
/* Variant C dark attribution */
.dl-redesign .dl-testimonials[data-variant="c"] .dl-testimonials__cited { color: rgba(255, 255, 255, 0.6); }
.dl-redesign .dl-testimonials[data-variant="c"] .dl-testimonials__cited-name { color: #ffffff; }
.dl-redesign .dl-testimonials[data-variant="c"] .dl-testimonials__cited-loc svg { color: rgba(255, 255, 255, 0.5); }
.dl-redesign .dl-testimonials[data-variant="c"] .dl-testimonials__avatar {
  background: color-mix(in srgb, var(--module-primary, var(--color-primary)) 25%, rgba(255, 255, 255, 0.06));
  color: #ffffff;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .dl-redesign .dl-testimonials[data-variant="c"] .dl-testimonials__avatar {
    background: rgba(70, 154, 173, 0.4);
  }
}

/* =====================================================================
 * VARIANT B — Magazine Feature (12-col 5/7)
 * ===================================================================== */
.dl-redesign .dl-testimonials__feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 1024px) {
  .dl-redesign .dl-testimonials__feature {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-10);
  }
}
/* When only one card exists (no supports), let the hero span the full width
   so the right side doesn't render as a 7/12 gap of dead space. Centered for
   visual balance. */
.dl-redesign .dl-testimonials__feature--solo {
  grid-template-columns: 1fr !important;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero featured card (left column) */
.dl-redesign .dl-testimonials__hero-card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.dl-redesign .dl-testimonials__hero-glyph {
  position: absolute;
  top: 16px;
  right: 24px;
  font-size: 6rem;
  line-height: 0.8;
  font-family: Georgia, 'Times New Roman', serif;
  color: color-mix(in srgb, var(--module-primary, var(--color-primary)) 18%, transparent);
  pointer-events: none;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .dl-redesign .dl-testimonials__hero-glyph { color: rgba(70, 154, 173, 0.18); }
}

.dl-redesign .dl-testimonials__hero-quote {
  margin: 0;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.5;
  color: var(--color-dark);
  font-weight: 500;
  font-style: normal;
}
.dl-redesign .dl-testimonials__hero-quote p {
  margin: 0 0 var(--space-3);
  color: var(--color-dark);
  font-size: inherit;
  line-height: 1.5;
  font-weight: inherit;
}
.dl-redesign .dl-testimonials__hero-quote p:last-child { margin: 0; }
.dl-redesign .dl-testimonials__hero-quote h1,
.dl-redesign .dl-testimonials__hero-quote h2,
.dl-redesign .dl-testimonials__hero-quote h3,
.dl-redesign .dl-testimonials__hero-quote h4 {
  font-size: inherit; font-weight: inherit; line-height: inherit;
  color: var(--color-dark); margin: 0 0 var(--space-3); letter-spacing: 0;
}

.dl-redesign .dl-testimonials__attribution--hero { padding-top: var(--space-3); }
.dl-redesign .dl-testimonials__avatar--lg {
  width: 56px;
  height: 56px;
  font-size: 1.25rem;
}

/* Supporting cards stack (right column) */
.dl-redesign .dl-testimonials__supports {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.dl-redesign .dl-testimonials__support-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.dl-redesign .dl-testimonials__support-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--module-primary, var(--color-primary)) 30%, var(--color-border));
  box-shadow: var(--shadow-md);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .dl-redesign .dl-testimonials__support-card:hover { border-color: rgba(70, 154, 173, 0.5); }
}
.dl-redesign .dl-testimonials__support-quote {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-dark);
  font-style: italic;
}
.dl-redesign .dl-testimonials__support-quote p {
  margin: 0 0 var(--space-2);
  color: var(--color-dark);
  font-style: italic;
  font-size: inherit;
  line-height: inherit;
}
.dl-redesign .dl-testimonials__support-quote p:last-child { margin: 0; }
.dl-redesign .dl-testimonials__support-quote h1,
.dl-redesign .dl-testimonials__support-quote h2,
.dl-redesign .dl-testimonials__support-quote h3,
.dl-redesign .dl-testimonials__support-quote h4 {
  font-size: inherit; font-weight: 500; font-style: italic;
  color: var(--color-dark); margin: 0 0 var(--space-2); letter-spacing: 0;
}

/* =====================================================================
 * VARIANT D — Live Reviews Embed (ReviewsOnMyWebsite)
 * The third-party widget renders into [data-romw-token]. Our job is
 * to provide a polished frame around it: rounded white card, soft
 * teal-tinted ring shadow, generous padding, an optional pulsing
 * "Live" badge above, and a small caption below.
 * ===================================================================== */
.dl-redesign .dl-testimonials__romw {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* Pulsing "Live" badge */
.dl-redesign .dl-testimonials__romw-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--module-primary, var(--color-primary));
  background: color-mix(in srgb, var(--module-primary, var(--color-primary)) 10%, transparent);
  padding: 6px 14px;
  border-radius: var(--radius-full);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .dl-redesign .dl-testimonials__romw-badge { background: rgba(70, 154, 173, 0.1); }
}
.dl-redesign .dl-testimonials__romw-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--module-primary, var(--color-primary));
  display: inline-block;
  position: relative;
  animation: dl-romw-pulse 1800ms ease-in-out infinite;
}
.dl-redesign .dl-testimonials__romw-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--module-primary, var(--color-primary));
  opacity: 0.4;
  animation: dl-romw-pulse-ring 1800ms ease-out infinite;
}
@keyframes dl-romw-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}
@keyframes dl-romw-pulse-ring {
  0%   { transform: scale(0.8); opacity: 0.4; }
  100% { transform: scale(2); opacity: 0; }
}

/* Grid containing 1-2 embed frames. Layout configurable per instance. */
.dl-redesign .dl-testimonials__romw-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  width: 100%;
}
/* Side-by-side at tablet+ — stacks on mobile regardless of setting.
   Breakpoint set to 768px (not 1024px) so the layout is visible in the
   HubSpot editor preview, which often renders narrower than 1024px due
   to the surrounding editor chrome. At 768px each frame is ~360px wide
   which is tight but workable for the marquee widgets. */
@media (min-width: 768px) {
  .dl-redesign .dl-testimonials__romw-grid[data-layout="side-by-side"][data-embed-count="2"] {
    grid-template-columns: 1fr 1fr;
  }
}

/* Embed frame — gives the widget room to breathe and a polished container. */
.dl-redesign .dl-testimonials__romw-frame {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--module-primary, var(--color-primary)) 6%, transparent),
    var(--shadow-md);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* Allow the embed to define its own height; we just provide the frame. */
  min-height: 200px;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .dl-redesign .dl-testimonials__romw-frame {
    box-shadow: 0 0 0 6px rgba(70, 154, 173, 0.06), var(--shadow-md);
  }
}
@media (min-width: 768px) {
  .dl-redesign .dl-testimonials__romw-frame { padding: var(--space-8); }
}

/* Source header inside each frame (icon + label) */
.dl-redesign .dl-testimonials__romw-source {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.dl-redesign .dl-testimonials__romw-source-icon {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--module-primary, var(--color-primary));
  background: color-mix(in srgb, var(--module-primary, var(--color-primary)) 12%, transparent);
  border-radius: 50%;
  flex-shrink: 0;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .dl-redesign .dl-testimonials__romw-source-icon { background: rgba(70, 154, 173, 0.12); }
}
.dl-redesign .dl-testimonials__romw-source-icon svg { width: 18px; height: 18px; }
.dl-redesign .dl-testimonials__romw-source-label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-dark);
  letter-spacing: -0.01em;
}

/* Placeholder when no embed token is configured. */
.dl-redesign .dl-testimonials__romw-placeholder {
  padding: var(--space-8);
  text-align: center;
  color: var(--color-medium);
  font-size: 0.9375rem;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.dl-redesign .dl-testimonials__romw-placeholder code {
  background: rgba(70, 154, 173, 0.1);
  color: var(--module-primary, var(--color-primary));
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.875rem;
}

/* Caption below the frame. */
.dl-redesign .dl-testimonials__romw-caption {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-medium);
  text-align: center;
}

/* =====================================================================
 * REVEAL ANIMATION (gated on .dl-testimonials--reveal — gotcha #9)
 * ===================================================================== */
.dl-redesign .dl-testimonials--reveal .dl-testimonials__summary,
.dl-redesign .dl-testimonials--reveal .dl-testimonials__card,
.dl-redesign .dl-testimonials--reveal .dl-testimonials__hero-card,
.dl-redesign .dl-testimonials--reveal .dl-testimonials__support-card,
.dl-redesign .dl-testimonials--reveal .dl-testimonials__romw {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 500ms ease-out var(--reveal-delay, 0ms),
    transform 500ms ease-out var(--reveal-delay, 0ms),
    border-color 200ms ease,
    box-shadow 200ms ease,
    background 200ms ease;
}
.dl-redesign .dl-testimonials--reveal .is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================================
 * REDUCED MOTION
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .dl-redesign .dl-testimonials *,
  .dl-redesign .dl-testimonials *::before,
  .dl-redesign .dl-testimonials *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
  }
  .dl-redesign .dl-testimonials--reveal .dl-testimonials__summary,
  .dl-redesign .dl-testimonials--reveal .dl-testimonials__card,
  .dl-redesign .dl-testimonials--reveal .dl-testimonials__hero-card,
  .dl-redesign .dl-testimonials--reveal .dl-testimonials__support-card,
  .dl-redesign .dl-testimonials--reveal .dl-testimonials__romw {
    opacity: 1;
    transform: none;
  }
  /* Disable the "Live" badge pulse animation under reduced-motion. */
  .dl-redesign .dl-testimonials__romw-pulse,
  .dl-redesign .dl-testimonials__romw-pulse::after { animation: none; }
}