/* No existing equivalent elsewhere on the site, built fresh rather than reusing a card recipe. */
.testimonial {
    max-width: 880px;
    margin: 0 auto;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background-color: rgba(var(--white), 1);
    border: 1px solid rgba(var(--dark-green), 0.15);
    border-radius: 4px;
}

/* Editor-only, scoped under .editor-styles-wrapper so this can never reach the front end — see
   the full comment on .wp-block-tt360-section in components/section.css. tt360/testimonial is
   nested inside tt360/section's own InnerBlocks, same situation as tt360/lifecycle-stages and
   tt360/card-grid, but this one needed restating the real 880px value, not just "none": a
   single-class selector (.testimonial) loses a cascade tie against GeneratePress's own
   `body .wp-block { max-width: var(--content-width) }` rule — body+class (2 selector parts)
   beats a lone class (1 part) at the same specificity tier comparison, regardless of which
   file loads later. Confirmed directly: measured max-width: 1120px in the editor before this. */
.editor-styles-wrapper .block-editor-block-list__layout .wp-block-tt360-testimonial {
    max-width: 880px;
}

/* GeneratePress gives a bare <blockquote> padding: 20px, border-left: 5px solid
   rgba(0,0,0,.05), font-size: 1.2em, and font-style: italic by default (main.min.css). Our own
   margin/font-size/line-height/color above already won on specificity, but those four were
   never touched, so the real rendered page (not this file's own fragment-only test harness)
   showed an italic quote with a gray left border and a 40px-taller card. Reset all four. */
.testimonial .quote {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--font-headline);
    font-size: 28px;
    font-style: normal;
    line-height: 1.35;
    letter-spacing: -0.5px;
    text-align: center;
    color: rgba(var(--terra-green), 1);
}

.testimonial .attribution {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.testimonial .name {
    font-size: 14px;
    font-weight: 500;
    color: rgba(var(--charcoal), 1);
}

.testimonial .role {
    font-size: 13px;
    color: rgba(var(--warm-gray), 1);
}

/* sm */
@media (max-width: 575.98px) {
    .testimonial {
        padding: 28px;
    }

    .testimonial .quote {
        font-size: 20px;
    }
}