/* card-base clips overflow by default; the expand button must not be clipped. */
.lib-testimonial-card.has-lib-expandable-quote {
  overflow: visible;
}

.lib-testimonial-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  padding: var(--lib-space-5) var(--lib-space-6) var(--lib-space-1);
  text-align: center;
}

.lib-testimonial-card__name {
  /* !important: a real host page (e.g. a WordPress theme's
     .entry-content h3 { margin: ... } typography default) is a class+tag
     selector, which beats a single-class selector like this one on
     specificity alone -- confirmed live on Joe's Roofing, Kadence's own
     heading reset silently added 7px this rule couldn't override. Never
     visible in the isolated library preview, since that has no ambient
     page styles to collide with. */
  margin: 0 !important;
  font-family: var(--lib-font-heading);
  font-size: var(--lib-font-size-subheading);
  line-height: 1.25;
  /* The card is always its own white/light surface regardless of the
     page around it -- without an explicit color this inherits the
     ambient page color instead, which goes invisible (white-on-white)
     the moment the card sits inside a dark/inverse-colored container
     like the reviews band. Every other text element on this card
     already self-colors the same way (__quote, __when); this was the
     one gap. */
  color: var(--lib-color-ink);
}

.lib-testimonial-card__name cite {
  font-style: inherit;
}

.lib-testimonial-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--lib-size-testimonial-avatar);
  height: var(--lib-size-testimonial-avatar);
  margin-block: var(--lib-space-1);
  border-radius: var(--lib-radius-pill);
  color: var(--lib-color-inverse);
  background: var(--lib-gradient-accent);
  font-weight: 800;
}

/* Real avatar photo instead of initials — same box, no background/font styling needed. */
img.lib-testimonial-card__avatar {
  background: none;
  object-fit: cover;
}

.lib-testimonial-card__avatar--alt {
  background: var(--lib-gradient-success);
}

.lib-testimonial-card__accent {
  width: 36%;
  min-width: 4rem;
  max-width: 8rem;
  margin: 0 0 var(--lib-space-2);
  border: 0;
  border-top: 3px solid var(--lib-testimonial-accent-color, var(--lib-color-accent));
}

/* Quote wrap holds the text and the expand toggle so the fade overlay can anchor to it.
   No flex-grow: sizes to its (clamped) content so cards in the same flex
   row don't inherit a taller sibling's height into empty quote space. */
.lib-testimonial-card__quote-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

.lib-testimonial-card__quote {
  /* !important: this is a <blockquote>, and a real host page's own
     ".entry-content blockquote { margin: ... }" (a WordPress content-area
     typography default, present on most themes) is class+tag --
     genuinely higher specificity than this single-class selector, so it
     wins without !important. Confirmed live: Kadence's own rule added
     32px of unwanted bottom margin here, invisible in the isolated
     library preview since nothing there provides an ".entry-content"
     ancestor to collide with. */
  margin: 0 !important;
  color: var(--lib-testimonial-quote-color, var(--lib-color-muted));
  text-align: left;
}

/* Long-quote state: clamp to exactly 3 lines (not a rem guess) with a
   fade-out cue -- precise regardless of font-size/line-height tuning. */
.has-lib-expandable-quote .lib-testimonial-card__quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.has-lib-expandable-quote.is-expanded .lib-testimonial-card__quote {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.lib-testimonial-card__expand-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  gap: var(--lib-space-1);
  min-height: 44px; /* WCAG 2.5.8 target size -- do not shrink further */
  margin-top: var(--lib-space-2);
  padding-inline: var(--lib-space-2);
  border: none;
  background: transparent;
  font-family: var(--lib-font-ui, var(--lib-font-body));
  font-size: var(--lib-font-size-small);
  font-weight: 700;
  color: var(--lib-testimonial-expand-color, var(--lib-color-primary));
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.lib-testimonial-card__expand-btn svg {
  width: var(--lib-size-testimonial-expand-icon);
  height: var(--lib-size-testimonial-expand-icon);
  pointer-events: none;
  transition: transform var(--lib-transition-base);
}

.is-expanded .lib-testimonial-card__expand-btn svg {
  transform: rotate(180deg);
}

.lib-testimonial-card .lib-rating-stars {
  width: 100%;
  margin-top: var(--lib-space-1);
}

@media (max-width: 767px) {
  .lib-testimonial-card__body {
    padding: var(--lib-space-4) var(--lib-space-5) var(--lib-space-1);
  }

  .lib-testimonial-card__avatar {
    width: var(--lib-size-testimonial-avatar-mobile);
    height: var(--lib-size-testimonial-avatar-mobile);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lib-testimonial-card__expand-btn svg {
    transition: none;
  }
}

/*
 * Google review layout -- replicates Google's own review card structure
 * exactly: small circular avatar top-left, name + rating row stacked to
 * its right (stars small, review age to their right), quote below full
 * width. Scoped under .testimonial-card--google so the default centered
 * layout above stays untouched for any non-Google use of this component.
 */
.testimonial-card--google .lib-testimonial-card__body {
  align-items: stretch;
  text-align: left;
}

.testimonial-card--google .lib-testimonial-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--lib-space-3);
  width: 100%;
}

.testimonial-card--google .lib-testimonial-card__avatar {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  flex-shrink: 0;
}

.testimonial-card--google .lib-testimonial-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  padding-top: 0.1rem;
}

.testimonial-card--google .lib-testimonial-card__name {
  font-size: var(--lib-font-size-base);
  line-height: 1.3;
}

.testimonial-card--google .lib-testimonial-card__rating-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.testimonial-card--google .lib-rating-stars {
  width: auto;
  margin-top: 0;
}

.testimonial-card--google .lib-rating-stars__item {
  width: 0.8rem;
  height: 0.8rem;
}

.testimonial-card--google .lib-testimonial-card__when {
  margin: 0;
  font-size: var(--lib-font-size-small);
  color: var(--lib-color-muted);
  white-space: nowrap;
}

.testimonial-card--google .lib-testimonial-card__accent {
  display: none;
}

.testimonial-card--google .lib-testimonial-card__quote-wrap {
  margin-top: var(--lib-space-4);
}

.testimonial-card--google .lib-testimonial-card__quote {
  text-align: left;
}

.testimonial-card--google .lib-testimonial-card__footer {
  display: flex;
  align-items: center;
  margin-top: var(--lib-space-2);
  min-height: 1.25rem;
}

.testimonial-card--google .lib-testimonial-card__expand-btn {
  align-self: center;
  margin: 0;
}

/* margin-inline-start: auto (not justify-content on the footer) so the mark
   still pushes to the right even when there's no expand button to pair
   with -- a lone flex child ignores justify-content:space-between. */
.testimonial-card--google .lib-testimonial-card__google-mark {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  margin-inline-start: auto;
}