/**
 * Section: Real Homes
 * Ported from .docs/mockup/css/sections.css lines 631–682 (REAL HOMES block)
 * plus the .testimonial-grid rule from the shared responsive block (980px).
 * Tokens only — no hardcoded colours. Font-size and letter-spacing values on
 * .testi-card blockquote/cite are kept literal because the mockup fixes them
 * rather than using the fluid --text-small/--text-h3 clamps, matching the
 * precedent set by hero.css (.hero-image-caption keeps a literal 11px rather
 * than substituting --text-eyebrow).
 */

.real-homes {
  padding-block: var(--section-space-m);
  padding-inline: var(--space-gutter);
  background: var(--pebble);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m);
}

.testi-card {
  background: var(--off-white);
  border-radius: var(--radius-lg);
  padding: var(--space-l) var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.testi-card blockquote {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--deep-ocean);
}

.testi-card cite {
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--terracotta);
}

.testi-card cite small {
  display: block;
  color: var(--graphite);
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: none;
  font-size: 13px;
  margin-top: var(--space-3xs);
}


/* === RESPONSIVE === */
@media (max-width: 980px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
}