/* styles/sections/quote-band.css
 * The centred customer quote on the landing pages: the shared testimonial pattern
 * (figure > blockquote + figcaption.attribution, styles/primitives.css) with an 80px portrait
 * beside the name and role. The quote keeps the pre-swap 752px measure (an 800px card with 24px
 * padding) on the body-lg role at weight 500; the byline is the attribution primitive. */
@layer sections {
  .testimonial-section {
    padding-block: var(--space-96);
  }

  /* Before the swap the quote was 20px at every width: the body-lg
     role's 900px step. */
  .quote-band {
    --t-body-lg-size: 20px;

    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-24);
    text-align: center;
  }

  .quote-band__quote {
    position: relative;
    margin: 0 0 var(--space-32);
    font-weight: 500;
    line-height: 1.4;
  }

  /* The open quote mark hung above the first line. */
  .quote-band__quote::before {
    content: "\201C";
    position: absolute;
    top: -2rem;
    left: -2rem;
    color: var(--ink-15);
    font-family: var(--font-display);
    font-size: 4rem;
    line-height: 1;
    pointer-events: none;
  }

  .quote-band__attribution {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
    margin-top: var(--space-32);
    text-align: start;
  }

  .quote-band__portrait {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
  }
}