/* testimonial-pair — two teal cards over a photograph.
 * Measured: cards 812x601 within the 1640 container, band 828 tall. */

.tpair {
  position: relative;
  isolation: isolate;
  /* Top only. This carried 120px on both sides, which stacked with the
   * next section's own top padding into ~208px of dead space — the single
   * worst offender on the page. */
  padding-block: var(--space-2xl) 0;
  overflow: hidden;
}
.tpair__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The mockup has no scrim here either. The cards are opaque so the quotes are
 * legible regardless, but the band reads muddy against a busy photo without
 * it. Deliberate — see handoff/design-decisions.md. */
.tpair::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(20 30 40 / 0.35);
}

.tpair__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xs);
}

.tpair__card {
  height: 100%;
  margin: 0;
  padding: var(--space-xl);
  background: var(--color-accent);
  color: var(--color-text-inv);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-xs);   /* measured ~22 */
}

.tpair__quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-quote);
  line-height: var(--leading-snug);
}
.tpair__attr { font-size: var(--step-1); font-weight: var(--fw-regular); }

@media (max-width: 992px) {
  .tpair__list { grid-template-columns: 1fr; gap: var(--space-md); }
  .tpair__card { padding: var(--space-lg); }
}

/* -- Enclosure ---------------------------------------------------------- */
.tpair__card {
  border-radius: var(--radius-core);
  padding: clamp(1.5rem, 1rem + 1.667vw, 2.5rem);
  box-shadow: var(--shadow-md), var(--shadow-inner);
}
.tpair__list { gap: var(--space-md); }