/* ==========================================================================
   Testimonials  (.pf-testimonials)                                   v0.16.0
   What colleagues say, on the home page (plan H4, locked "Centered (refined)", Louis 2026-10-13,
   from portfolio/prototypes/_explorations/home-rework-2026-10-12/). One lead quote in the
   pull-quote voice at the card-title size (h1), centred in the break-out column; two supporting
   quotes at body size under it, a hairline over each; a link to the rest on LinkedIn.

   The centring rule (research P2, 2026-10-13): centre a quote only when it is display size,
   stands alone and sets in three lines or fewer at desktop (the lead at 1040 does). Body-size
   quotes are never centred, and below 1024 the whole section goes left (Rapha's pull quote does
   the same below 992). No boxes: a hairline box is the project card's "this is a link" cue.

   <div class="pf-testimonials">
     <figure class="pf-testimonials__lead">
       <blockquote class="pf-quote"><p class="pf-quote__text">…</p></blockquote>
       <figcaption class="pf-testimonials__cite"><strong>Name</strong><span class="pf-testimonials__role">Role, former colleague</span></figcaption>
     </figure>
     <div class="pf-testimonials__pair">
       <figure class="pf-testimonials__item">
         <blockquote class="pf-testimonials__quote"><p>…</p></blockquote>
         <figcaption class="pf-testimonials__cite"><strong>Name</strong><span class="pf-testimonials__role">Role, former colleague</span></figcaption>
       </figure>
       …
     </div>
     <p class="pf-testimonials__more"><a class="pf-link" href="…">More recommendations on LinkedIn</a></p>
   </div>
   Needs quote.css (the lead's .pf-quote) and link.css.
   ========================================================================== */

.pf-testimonials { margin-top: var(--pf-space-5); }
.pf-testimonials figure { margin: 0; }

/* The lead: the pull-quote voice one step up, to the card-title size, a clear step above the 32px
   section title (at 36 it read as the same size). (0,2,0) beats blockquote.pf-quote's margins. */
.pf-testimonials__lead { max-width: var(--pf-measure-wide); margin-inline: auto; text-align: center; }
.pf-testimonials .pf-quote {
  margin: 0;
  font-size: var(--pf-text-h1);
  line-height: var(--pf-lh-heading);
  text-wrap: balance;
}

.pf-testimonials__cite {
  display: block;
  margin-top: var(--pf-space-2);
  font-family: var(--pf-font-body);
  font-size: var(--pf-text-small);
  line-height: var(--pf-lh-tight);
  color: var(--pf-ink-secondary);
}
.pf-testimonials__lead .pf-testimonials__cite { margin-top: var(--pf-space-3); }
.pf-testimonials__cite strong { color: var(--pf-ink); font-weight: var(--pf-weight-strong); }
.pf-testimonials__role::before { content: " · "; } /* literal: a hex escape eats the space after it */

/* The supporting pair: body size, the lead's width, a hairline over each. */
.pf-testimonials__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pf-space-5);
  max-width: var(--pf-measure-wide);
  margin: var(--pf-space-5) auto 0;
}
.pf-testimonials__item {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-2);
  padding-top: var(--pf-space-3);
  border-top: var(--pf-border) solid var(--pf-hairline);
}
.pf-testimonials__quote { margin: 0; }
.pf-testimonials__quote p {
  margin: 0;
  font-family: var(--pf-font-body);
  font-size: var(--pf-text-body);
  line-height: var(--pf-lh-body);
  color: var(--pf-ink);
}
.pf-testimonials__quote p::before { content: "\201C"; }
.pf-testimonials__quote p::after { content: "\201D"; }

.pf-testimonials__more { margin: var(--pf-space-5) 0 0; text-align: center; font-size: var(--pf-text-body); }

@media (max-width: 1024px) {
  .pf-testimonials__lead,
  .pf-testimonials__more { text-align: start; }
}
@media (max-width: 768px) {
  .pf-testimonials__pair { grid-template-columns: minmax(0, 1fr); gap: var(--pf-space-4); }
}