/* ============================================================
   TESTIMONIALS EDITORIAL — pull-quote layout
   ------------------------------------------------------------
   Replaces the generic 3-card grid with a single large
   editorial pull-quote + a mono-font credit row.
   Loads after editorial-extras.css so token overrides apply.
   ============================================================ */

/* Section wrapper
   The .section class provides the container padding rhythm.
   We only override background here; vertical padding is handled
   by the existing .section rule in style.css. */
.testimonials-editorial {
  padding: clamp(80px, 12vh, 140px) 0;
  background: var(--ds-bone, #f4f0e8);
}

/* Pull-quote block */
.t-pullquote {
  position: relative;
  max-width: 880px;
  margin: 56px auto 64px;
  padding: 32px clamp(28px, 5vw, 80px) 32px clamp(60px, 8vw, 120px);
  text-align: left;
  border: none; /* reset browser blockquote border */
}

/* Decorative oversized opening mark — purely visual, aria-hidden */
.t-pullquote-mark {
  position: absolute;
  top: -10px;
  left: clamp(8px, 2vw, 28px);
  font-family: var(--ds-font-serif);
  font-style: italic;
  font-size: clamp(8rem, 14vw, 14rem);
  line-height: 0.7;
  color: var(--ds-oxblood, #8d2f2a);
  opacity: 0.18;
  user-select: none;
  pointer-events: none;
}

/* The quote text itself */
.t-pullquote-text {
  font-family: var(--ds-font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--ds-ink, #1a1614);
  margin: 0;
}

/* Emphasis within the quote — champagne highlight underline */
.t-pullquote-text em {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(
    180deg,
    transparent 65%,
    rgba(184, 153, 104, 0.32) 65%
  );
  padding: 0 0.1em;
}

/* Citation row */
.t-pullquote-cite {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(28px, 4vh, 40px);
  font-family: var(--ds-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ds-ink-muted, #4a4641);
}

.t-pullquote-name {
  color: var(--ds-ink, #1a1614);
  font-weight: 500;
}

/* Short oxblood rule between name and role */
.t-pullquote-rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--ds-oxblood, #8d2f2a);
  opacity: 0.6;
  flex: 0 0 32px;
}

.t-pullquote-role {
  font-weight: 400;
}

/* Credit row — list of secondary client names */
.t-credits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 3vw, 48px);
  list-style: none;
  padding: 32px 0 0;
  margin: 0 auto;
  max-width: 880px;
  border-top: 1px solid rgba(26, 22, 20, 0.10);
  font-family: var(--ds-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ds-ink, #1a1614);
}

.t-credits li {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.t-credits-role {
  color: var(--ds-ink-muted, #4a4641);
  opacity: 0.7;
}

/* ============================================================
   MOBILE — 600px and below
   ============================================================ */
@media (max-width: 600px) {
  .testimonials-editorial {
    padding: clamp(56px, 10vh, 80px) 0;
  }

  .t-pullquote {
    margin: 40px auto 48px;
    /* Collapse the large left indent — the mark is big enough at mobile */
    padding: 16px 20px 20px clamp(44px, 10vw, 64px);
  }

  /* Credit row wraps to a single column on narrow screens */
  .t-credits {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
}

/* ============================================================
   REDUCED MOTION
   ds-reveal-fade-up already respects prefers-reduced-motion via
   the animations.css + scroll-reveal.js system. No extra rules
   needed here — all transitions on this component are CSS-free
   (the quote itself has no transition property set).
   ============================================================ */