/* testimonials — several shorter voices at once, where the sibling quote band
 * is ONE large voice. A multicol wall so varied lengths stagger naturally. */

/* THE MULTICOL WALL: the cell grid's ladder re-spoken as column-count, on the same
 * rungs and the same two width caps, so the wall and the grids read a width the same
 * way. The count and the floor are NOT terms here, so --sk-columns-min does nothing. */
.sk-cell-flow {
  --sk-columns-fit: var(--sk-columns, 3);
  column-count: min(
    var(--sk-columns, 3),
    var(--sk-columns-fit),
    var(--sk-pane-fit, var(--sk-columns, 3))
  );
  column-gap: var(--kit-space-4);
}
@media (max-width: 1440px) {
  .sk-cell-flow {
    --sk-columns-fit: 4;
  }
}
@media (max-width: 1200px) {
  .sk-cell-flow {
    --sk-columns-fit: 3;
  }
}
@media (max-width: 900px) {
  .sk-cell-flow {
    --sk-columns-fit: 2;
  }
}
@media (max-width: 560px) {
  .sk-cell-flow {
    --sk-columns-fit: 1;
  }
}
@container sk-pane (max-width: 1440px) {
  .sk-cell-flow {
    --sk-pane-fit: 4;
  }
}
@container sk-pane (max-width: 1200px) {
  .sk-cell-flow {
    --sk-pane-fit: 3;
  }
}
@container sk-pane (max-width: 900px) {
  .sk-cell-flow {
    --sk-pane-fit: 2;
  }
}
@container sk-pane (max-width: 560px) {
  .sk-cell-flow {
    --sk-pane-fit: 1;
  }
}

/* CSS multicol, so rows pack vertically without a script. It rejoins a single
 * column at 640, a rung earlier than the grid's 560, because two columns of
 * body-register quotes lose their measure first. */
@media (max-width: 640px) {
  .sk-testimonials-wall {
    --sk-columns-fit: 1;
  }
}

/* Each cell keeps itself whole across column breaks and pads its own air on the
 * kit's row-air dial. */
.sk-testimonial {
  break-inside: avoid;
  margin: 0;
}
/* Uncarded posture: a carded cell wears the panel skeleton instead. */
.sk-testimonial:not(.sk-card) {
  padding-block: calc(var(--kit-air-row) * var(--kit-type-base));
  border-top: var(--sk-border-width) solid var(--sk-stroke);
}

/* The set-in quotation mark — the title face on the accent, ×-body per the
 * ratio rule. Generated here (decoration is the sheet's, never the copy's),
 * so the quote text itself stays clean for editing. */
.sk-testimonial-quote {
  margin: 0;
}
.sk-testimonial-quote::before {
  content: "\201C";
  display: block;
  font-family: var(--kit-font-title);
  font-style: var(--kit-slant-title);
  font-size: calc(var(--kit-type-base) * 2.2);
  line-height: 0.7;
  color: var(--sk-accent);
  margin-bottom: var(--kit-space-1);
}
.sk-testimonial-quote p {
  margin: 0;
}

/* The attribution — the eyebrow register for the name (quote's cite
 * verbatim — the eyebrow voice's slant dial already re-dresses the cite's
 * stock italic), the detail a muted qualifier under it. */
.sk-testimonial-attribution {
  margin: var(--kit-space-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--kit-space-1);
}
.sk-testimonial-detail {
  color: var(--sk-ink-muted);
}

/* ── The card variant — the quote/features-grid/faq card surface per row,
 * breathing room instead of hairlines. Lone panels on the band, never
 * overlapping, so they read the wash token (--sk-card), not the solid. */
/* The panel skeleton lives in the shared CARD SURFACE home; this quote
 * card takes the tighter inset through its --sk-card-pad seam. */
.sk-testimonials[data-card="true"] .sk-testimonial {
  --sk-card-pad: var(--kit-space-4);
  margin-bottom: var(--kit-space-4);
}