/* cgpt/testimonials — Figma node 1400:5158.
   840px column; 74px avatar with 24px gaps; quote 24/400; stats 44/500 over
   16/400 #565656, 40px apart with 32px above; 56px arrows at radius 8. */

.cgpt-quotes {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-inline-size: 840px;
  margin-inline: auto;
}

.cgpt-quotes__slide {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin: 0;
}

.cgpt-quotes__head {
  display: flex;
  align-items: center;
  gap: 24px;
}

.cgpt-quotes .cgpt-quotes__avatar {
  inline-size: 74px;
  block-size: 74px;
  flex: none;
  border-radius: var(--cgpt-radius-pill);
  object-fit: cover;
}

.cgpt-quotes__who {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-inline-size: 0;
  /* The name and role read from the left even where the slide around them is
     centred (Jose, 2026-09-21). */
  align-items: flex-start;
  text-align: start;
}

.cgpt-quotes__name {
  font-size: var(--wp--preset--font-size--lead);
  font-weight: 500;
  line-height: 1.4;
  color: var(--cgpt-ink);
}

.cgpt-quotes__role {
  font-size: var(--wp--preset--font-size--body);
  line-height: var(--cgpt-lh-body);
  color: var(--cgpt-ink-soft);
}

/* An anonymous customer's descriptor, where the mark would have been. */
.cgpt-quotes__org {
  font-size: var(--wp--preset--font-size--body);
  line-height: var(--cgpt-lh-body);
  color: var(--cgpt-ink-soft);
}

/* Pushed to the far edge, opposite the author. */
.cgpt-quotes .cgpt-quotes__logo {
  margin-inline-start: auto;
  max-inline-size: min(244px, 100%);
  max-block-size: 74px;
  block-size: auto;
  object-fit: contain;
}

/* An anonymous customer's mark: the icon their story card carries on
   /customers/, a 64 circle in the subtle accent, in the same far-end slot. */
.cgpt-quotes__badge {
  display: grid;
  flex: none;
  place-items: center;
  margin-inline-start: auto;
  inline-size: 64px;
  block-size: 64px;
  border-radius: 50%;
  background-color: var(--cgpt-accent-subtle);
  color: var(--cgpt-accent);
}

.cgpt-quotes__badge-icon {
  inline-size: 32px;
  block-size: 32px;
}

/* Text/2XL/Italic, 24/32 (3095:20610, 3612:27021). */
.cgpt-quotes__quote {
  margin: 0;
  font-size: var(--wp--preset--font-size--heading);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3333;
  color: var(--cgpt-ink);
}

.cgpt-quotes__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

/*
 * Four figures go two and two rather than four across (56:3506–56:3514). Keyed
 * off the fourth child existing, so three still share one row and nothing has
 * to be set on the block.
 */
.cgpt-quotes__stats:has(> :nth-child(4)) > .cgpt-quotes__stat {
  flex: 1 1 calc((100% - 40px) / 2);
  /* Each figure and caption centred in its half (56:3506: every Stat block is
     counterAxisAlignItems CENTER). */
  align-items: center;
  text-align: center;
}

.cgpt-quotes__stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block-start: 32px;
  border-block-start: 1px solid var(--cgpt-rule);
  min-inline-size: 0;
  flex: 1 1 180px;
}

/* Heading/L, 44/54. */
.cgpt-quotes__stat-value {
  font-size: var(--wp--preset--font-size--display);
  font-weight: 500;
  line-height: 1.2273;
  color: var(--cgpt-ink);
}

.cgpt-quotes__stat-label {
  font-size: var(--wp--preset--font-size--body);
  line-height: var(--cgpt-lh-body);
  color: var(--cgpt-ink-soft);
}

/* --- arrows ------------------------------------------------------------- */

/* Centred under the slide: the Arrows container sits 660 from each edge of the
   1440 frame, and its parent is counterAxisAlignItems=CENTER. */
.cgpt-quotes__arrows { display: flex; gap: 8px; justify-content: center; }

.cgpt-quotes__arrow {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  padding: 0;
  border: 1px solid var(--cgpt-rule);
  border-radius: var(--cgpt-radius-md);
  background-color: transparent;
  color: var(--cgpt-ink);
  cursor: pointer;
  transition:
    background-color var(--cgpt-duration-fast) var(--cgpt-ease),
    border-color var(--cgpt-duration-fast) var(--cgpt-ease),
    box-shadow var(--cgpt-duration-fast) var(--cgpt-ease);
}
/*
 * Figma draws the pair in both states at once: the left arrow resting with a
 * 1px #DFDFDF edge, the right one lifted — white, no border, and three stacked
 * shadows. That is the hover state, and it is the same shadow trio the
 * tertiary button uses, so the two controls lift identically.
 */
.cgpt-quotes__arrow:hover:not([disabled]) {
  border-color: transparent;
  background-color: var(--cgpt-surface);
  box-shadow:
    0 1px 3px rgb(18 18 18 / 10%),
    0 0 0 1px rgb(18 18 18 / 7%),
    0 1px 1px rgb(18 18 18 / 10%);
}
.cgpt-quotes__arrow:focus-visible {
  outline: var(--cgpt-focus-width) solid var(--cgpt-focus-color);
  outline-offset: var(--cgpt-focus-offset);
}
.cgpt-quotes__arrow[disabled] { opacity: .4; cursor: default; }

.cgpt-quotes__chev {
  inline-size: 10px;
  block-size: 10px;
  border-inline-end: 2px solid currentcolor;
  border-block-start: 2px solid currentcolor;
  rotate: 45deg;
  translate: -2px 0;
}
.cgpt-quotes__chev--prev { rotate: -135deg; translate: 2px 0; }

.cgpt-quotes__placeholder {
  padding: var(--cgpt-space-4);
  border: 1px dashed var(--cgpt-border-strong);
  border-radius: var(--cgpt-radius-md);
  color: var(--cgpt-fg-muted);
}

/* Without JavaScript every slide is visible and simply stacks — the content is
   never hidden behind a control that is not running. */
.cgpt-quotes:not([data-cgpt-ready]) .cgpt-quotes__arrows { display: none; }

/* The block takes the height of the slide showing, not the tallest one: a
   figures-only slide after a quote left some 270px blank above the arrows
   (bug 141). Outranks the layouts' own display, portrait's grid included. */
.cgpt-quotes .cgpt-quotes__slide[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Mobile — Figma "Home mobile" (343x717 slide).

   One centred column throughout: 60px avatar, name, role, logo, quote, the
   three stats stacked rather than in a row, then the arrows. Every container
   in that frame is counterAxisAlignItems=CENTER.
--------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .cgpt-quotes { gap: var(--cgpt-space-6); }
  .cgpt-quotes__slide { gap: 24px; align-items: center; text-align: center; }

  /* The head stops being a row: avatar over name over role. */
  .cgpt-quotes__head {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .cgpt-quotes .cgpt-quotes__avatar { inline-size: 60px; block-size: 60px; }

  /* name and role need no size overrides: `lead` already steps 20 -> 18 and
     `body` stays 16, which is what the mobile frame specifies. */
  .cgpt-quotes__who { gap: 2px; align-items: center; text-align: center; }

  /* Out of the head row and onto its own line, under the role. */
  .cgpt-quotes .cgpt-quotes__logo,
  .cgpt-quotes .cgpt-quotes__badge { margin-inline: auto; }

  .cgpt-quotes__quote {
    font-size: var(--wp--preset--font-size--body-lg);
    line-height: var(--cgpt-lh-sm);
  }

  /* Stacked. The rule becomes a separator between blocks rather than a cap
     above each: Figma's mobile frame leaves the first Stat block without a
     stroke and gives the other two #DFDFDF. */
  .cgpt-quotes__stats { flex-direction: column; gap: 24px; }

  .cgpt-quotes__stat {
    flex: 1 1 auto;
    align-items: center;
    gap: 4px;
    padding-block-start: 0;
    border-block-start: 0;
  }

  .cgpt-quotes__stat + .cgpt-quotes__stat {
    padding-block-start: 24px;
    border-block-start: 1px solid var(--cgpt-rule);
  }

  /* Stat number is 36 here, which is what `display` already steps down to. */

  /* 44, not the 40 this used to be: the SRS holds carousel controls to at
     least 44x44 CSS px at every width (HOME-06, "Responsive and
     accessibility"). 40 cleared WCAG 2.5.8's 24px floor but not the spec. */
  .cgpt-quotes__arrow { inline-size: 44px; block-size: 44px; }
}

/* Accent words in the quote (100:27799). */
.cgpt-quotes__mark { color: var(--cgpt-accent); }

.cgpt-quotes__cta { flex: none; }

/* Without a mark, the link takes the far edge instead (bug 116). */
@media (min-width: 768px) {
  .cgpt-quotes__who + .cgpt-quotes__cta { margin-inline-start: auto; }
}

/* --- centred ---------------------------------------------------------------
   Figma 2596:21844 (GEMA on Member Associations): the author row as usual
   with the mark at the far end at 61x74 and 4 between name and role, the
   24/400 italic quote, the four figures centred two and two on 400px halves
   40 apart with no rules, then the story link as the 58px pill. */
.cgpt-quotes--centered .cgpt-quotes__who { gap: 4px; }

.cgpt-quotes--centered .cgpt-quotes__cta,
.cgpt-quotes--link-foot .cgpt-quotes__cta { align-self: center; }

@media (min-width: 768px) {
  .cgpt-quotes--centered .cgpt-quotes__head { align-items: flex-start; }

  .cgpt-quotes--centered .cgpt-quotes__quote {
    font-style: italic;
    text-align: center;
  }

  .cgpt-quotes--centered .cgpt-quotes__stats {
    gap: 40px;
    text-align: center;
  }

  .cgpt-quotes--centered .cgpt-quotes__stat {
    align-items: center;
    padding-block-start: 0;
    border-block-start: 0;
    gap: 12px;
  }
}

@media (max-width: 767.98px) {
  .cgpt-quotes__cta { align-self: center; }

  .cgpt-quotes--centered .cgpt-quotes__avatar { inline-size: 74px; block-size: 74px; }

  .cgpt-quotes--centered .cgpt-quotes__head { gap: 24px; }

  .cgpt-quotes--centered .cgpt-quotes__stats { align-self: stretch; }

  .cgpt-quotes--centered .cgpt-btn.cgpt-btn--lg {
    min-block-size: 40px;
    padding: 8px 24px;
    font-size: var(--wp--preset--font-size--body);
    font-weight: 400;
    line-height: var(--cgpt-lh-body);
  }
}

/* --- centred quote ----------------------------------------------------------
   Figma 60:11346 (Live Demo): the author row as usual — photo, name and role,
   the mark at the far end — then the quote centred in italic and each figure
   centred in its half. */
.cgpt-quotes--quote-centered .cgpt-quotes__quote { text-align: center; }

.cgpt-quotes--quote-centered .cgpt-quotes__stat {
  align-items: center;
  text-align: center;
}

/* The mark sits in grey in this layout: Figma masks a #A8AAAE rectangle with
   the logo (120:31315 on the homepage, 60:11353 on Live Demo). brightness(0)
   takes it to black, invert(67%) lifts it to that grey. */
.cgpt-quotes--quote-centered .cgpt-quotes__logo { filter: brightness(0) invert(67%); }

/* On a phone the figures run the full width of the column, each ruled off
   from the last (193:17210 at 375: 343x95 blocks). The slide centres its
   children there, which had shrunk the list to its widest figure. */
@media (max-width: 767.98px) {
  .cgpt-quotes--quote-centered .cgpt-quotes__stats { align-self: stretch; }
}

/* Unless the page draws it in its own colour (193:17210, GEMA's red). */
.cgpt-quotes--quote-centered.cgpt-quotes--logo-colour .cgpt-quotes__logo { filter: none; }

/* 1:264, mobile 1:534 */

.cgpt-quotes--portrait .cgpt-quotes__slide {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 40px 60px;
  align-items: start;
}

.cgpt-quotes--portrait .cgpt-quotes__head { display: contents; }

.cgpt-quotes--portrait .cgpt-quotes__avatar {
  grid-column: 1;
  grid-row: 1 / span 2;
  inline-size: 160px;
  block-size: 160px;
}

.cgpt-quotes--portrait .cgpt-quotes__quote {
  grid-column: 2;
  grid-row: 1;
  font-style: italic;
}

.cgpt-quotes--portrait .cgpt-quotes__who {
  grid-column: 2;
  grid-row: 2;
  gap: 12px;
}

.cgpt-quotes--portrait .cgpt-quotes__logo {
  grid-column: 2;
  grid-row: 3;
  margin-inline-start: 0;
}

/* Placed, not auto-placed: the free cell under the portrait is the first one
   the grid offers, which put the link beside the mark instead of under it. */
.cgpt-quotes--portrait .cgpt-quotes__cta {
  grid-column: 2;
  grid-row: 4;
  justify-self: start;
  margin-inline-start: 0;
}

/* An empty logo row still costs a row gap. */
.cgpt-quotes--portrait .cgpt-quotes__slide:not(:has(.cgpt-quotes__logo)) .cgpt-quotes__cta { grid-row: 3; }

@media (max-width: 767.98px) {
  .cgpt-quotes--portrait .cgpt-quotes__slide {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    justify-items: center;
  }

  .cgpt-quotes--portrait .cgpt-quotes__avatar {
    grid-column: 1;
    grid-row: 1;
    inline-size: 120px;
    block-size: 120px;
  }

  /* justify-items centres the box, not the words inside it, so the name and
     role sat left under a centred photograph. */
  .cgpt-quotes--portrait .cgpt-quotes__who {
    grid-column: 1;
    grid-row: 2;
    align-items: center;
    text-align: center;
  }

  .cgpt-quotes--portrait .cgpt-quotes__quote { grid-column: 1; grid-row: 3; }
  /* The desktop rule zeroes the start margin and outranks the mobile
     `margin-inline: auto` that centres every other mark. */
  .cgpt-quotes--portrait .cgpt-quotes__logo {
    grid-column: 1;
    grid-row: 4;
    margin-inline: auto;
  }

  /* Column 2 would open an implicit second column on a one-column grid. */
  .cgpt-quotes--portrait .cgpt-quotes__cta {
    grid-column: 1;
    grid-row: 5;
    justify-self: center;
  }

  .cgpt-quotes--portrait .cgpt-quotes__slide:not(:has(.cgpt-quotes__logo)) .cgpt-quotes__cta { grid-row: 4; }
}