/*
 * Testimonials page styles
 */

/* .page-hero--dark now lives in components.css (shared by all inner pages). */

/* ── Grouped context sections ─────────────────────────────────────── */

/* Consecutive groups share the same background, so their full section padding
   reads as one large gap (bottom + top). Drop the top padding on every group
   after the first to halve the space between groups. The hero→first-group and
   last-group→CTA boundaries (real color changes) keep their full spacing. */
.testimonials-group + .testimonials-group {
  padding-top: 0;
}

.testimonials-group__intro {
  max-width: var(--measure-sm);
  margin: var(--space-3) auto 0;
  color: var(--color-text-muted);
}

.testimonials-group__intro a {
  text-decoration: underline;
}

.testimonials-group__intro img {
  border-radius: var(--radius-md);
}

/* ── Masonry (2 columns) ──────────────────────────────────────────── */

/* CSS multi-column masonry keeps cards compact (no stretched empty cells the way
   a grid leaves under short cards). Two columns — rather than three — also stays
   consistent: any group of 2+ cards fills both columns, so groups don't collapse
   to differing counts the way a 3-column balance could. */
.testimonials-masonry {
  columns: 2;
  column-gap: var(--space-6);
}

.testimonials-masonry .testimonial-card {
  break-inside: avoid;
  display: inline-block;   /* avoids column top-margin quirks */
  width: 100%;
  margin-bottom: var(--space-6);
}

/* A lone testimonial shouldn't sit half-width on the left — span the row and
   center it at a comfortable reading width. */
.testimonials-masonry .testimonial-card:only-child {
  column-span: all;
  display: block;
  max-width: 640px;
  margin-inline: auto;
}

/* Card variant modifiers (--purple, --light) now live in components.css, with
   the shared testimonial-card base, so every page using the shared partial gets
   them (this page loads them globally either way). */

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .testimonials-masonry {
    columns: 1;
  }
}