/**
 * Fluid Framework - Testimonial Sections
 * @layer components
 *
 * Social proof sections with customer quotes, avatars, and logo walls.
 * Three layout variants via data-type attribute.
 *
 * Usage:
 *   <!-- Single centered (default) -->
 *   <section class="testimonials">
 *     <header class="testimonials__header">
 *       <h2>What people say</h2>
 *     </header>
 *     <figure class="testimonial">
 *       <blockquote class="testimonial__quote" cite="https://...">
 *         <p>"This changed everything for our team."</p>
 *       </blockquote>
 *       <figcaption class="testimonial__author">
 *         <img class="avatar" src="..." alt="Jane Doe">
 *         <div>
 *           <cite class="testimonial__name">Jane Doe</cite>
 *           <span class="testimonial__role">CEO, Acme Corp</span>
 *         </div>
 *       </figcaption>
 *     </figure>
 *   </section>
 *
 *   <!-- Grid -->
 *   <section class="testimonials" data-type="grid">
 *     <div class="testimonials__grid">
 *       <figure class="testimonial">...</figure>
 *       <figure class="testimonial">...</figure>
 *       <figure class="testimonial">...</figure>
 *     </div>
 *   </section>
 *
 *   <!-- Logo wall -->
 *   <section class="testimonials" data-type="logos">
 *     <header class="testimonials__header">
 *       <p>Trusted by leading companies</p>
 *     </header>
 *     <div class="testimonials__logos">
 *       <img src="logo1.svg" alt="Company 1">
 *       <img src="logo2.svg" alt="Company 2">
 *     </div>
 *   </section>
 */

@layer components {

  /* The band's padding and edges, and the header (a section head), are in
     src/fluid.css (layouts). */

  .testimonials__header p:not(.eyebrow, .lede) { color: var(--color-text-muted); }   /* the label voice owns the eyebrow's colour */

  /* A testimonial is a serif quote and a label-voice attribution. No box. */
  .testimonial {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    margin: 0;
  }

  .testimonial__quote {
    margin: 0;
    padding: 0;
    border: 0;
    font-style: normal;
  }

  .testimonial__quote p {
    font-family: var(--font-heading);
    font-size: var(--step-2);
    font-weight: calc(var(--weight-light) + var(--_dark-weight));
    line-height: 1.3;
    letter-spacing: var(--tracking-heading);
    text-wrap: balance;
    max-inline-size: 32em;
    margin: 0;
  }

  .testimonial__quote p::before { content: "\201C"; }
  .testimonial__quote p::after { content: "\201D"; }

  .testimonial__author {
    display: flex;
    align-items: center;
    gap: var(--space-s);
  }

  .testimonial__author .avatar { flex-shrink: 0; }

  .testimonial__name {
    display: block;
    font-style: normal;
    font-weight: 600;
    font-size: var(--step--1);
  }

  .testimonial__role {
    display: block;
    font-size: var(--step--1);
    color: var(--color-text-muted);
  }

  /* Grid: smaller quotes under ink hairlines, like cards. */
  .testimonials__grid {
    display: grid;
    gap: var(--space-l) var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  }

  .testimonials[data-type="grid"] .testimonial {
    padding-block-start: var(--space-s);
    border-block-start-color: var(--color-border-strong);
  }

  .testimonials[data-type="grid"] .testimonial__quote p { font-size: var(--step-1); }

  /* Logo wall */
  .testimonials__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-l);
  }

  .testimonials__logos :is(img, svg) {
    block-size: 2.5rem;
    inline-size: auto;
    object-fit: contain;
    opacity: 0.7;
    transition: opacity var(--duration-fast) var(--ease-fluid);
  }

  .testimonials__logos :is(img, svg):hover { opacity: 1; }
}