/* ============================================================
   references-redesign.css
   Supplements companies-redesign.css (loaded together on the References
   page) with the patterns Companies doesn't have: alternating
   photo+quote testimonial rows and a gradient "mid-page" CTA band.
   Still scoped entirely within .t2a-cmp — reuses its variables, buttons,
   section/form primitives as-is.
   ============================================================ */

/* ============================================================
   TESTIMONIAL ROWS — alternating photo/quote card
   ============================================================ */
.t2a-cmp .t2a-cmp-refrow {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 44px;
  align-items: center;
  background: var(--cmp-bg-soft);
  border-radius: var(--cmp-radius-lg);
  padding: 28px;
  margin-bottom: 40px;
}
.t2a-cmp .t2a-cmp-refrow:last-child { margin-bottom: 0; }
.t2a-cmp .t2a-cmp-refrow--reverse { grid-template-columns: 1.35fr 0.65fr; }
.t2a-cmp .t2a-cmp-refrow--reverse .t2a-cmp-refrow__photo { order: 2; }
.t2a-cmp .t2a-cmp-refrow--reverse .t2a-cmp-refrow__body { order: 1; }
.t2a-cmp .t2a-cmp-refrow__photo img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: 50% 20%;
  display: block; border-radius: 20px;
}
.t2a-cmp .t2a-cmp-refrow__body { display: flex; flex-direction: column; gap: 16px; padding: 12px 8px; }
.t2a-cmp .t2a-cmp-refrow__title { font-size: 40px; font-weight: 800; color: var(--cmp-ink); margin: 0; letter-spacing: -0.5px; }
.t2a-cmp .t2a-cmp-refrow__quote { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.6; color: var(--cmp-ink); text-wrap: pretty; font-style: normal; }
.t2a-cmp .t2a-cmp-refrow__attribution { display: flex; align-items: center; gap: 20px; margin-top: 6px; flex-wrap: wrap; }
.t2a-cmp .t2a-cmp-refrow__person { font-weight: 700; color: var(--cmp-ink); font-size: 16px; }
.t2a-cmp .t2a-cmp-refrow__role { font-size: 14px; color: #7b8aa5; }
.t2a-cmp .t2a-cmp-refrow__divider { width: 1px; height: 44px; background: var(--cmp-line); }
.t2a-cmp .t2a-cmp-refrow__logo { height: 40px; width: auto; display: block; }

/* ============================================================
   MID-PAGE CTA — gradient band between the two testimonial groups
   ============================================================ */
.t2a-cmp .t2a-cmp-midcta {
  background: linear-gradient(120deg, var(--cmp-blue-deep) 0%, var(--cmp-blue) 55%, var(--cmp-blue-light) 100%);
}
.t2a-cmp .t2a-cmp-midcta__inner {
  max-width: 860px; margin: 0 auto; padding: 72px 24px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.t2a-cmp .t2a-cmp-midcta__title { font-size: 40px; font-weight: 800; color: #fff; letter-spacing: -0.5px; margin: 0; text-wrap: pretty; }
.t2a-cmp .t2a-cmp-midcta__text { font-size: 16px; line-height: 1.7; max-width: 560px; color: rgba(255, 255, 255, 0.88); margin: 0; text-wrap: pretty; }
.t2a-cmp .t2a-cmp-btn--white { background: #fff; color: var(--cmp-blue); margin-top: 8px; box-shadow: 0 10px 24px rgba(10, 79, 141, 0.35); }
.t2a-cmp .t2a-cmp-btn--white:hover { background: var(--cmp-bg-soft); color: var(--cmp-blue-dark); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1199.98px) {
  .t2a-cmp .t2a-cmp-refrow { grid-template-columns: 1fr; gap: 24px; }
  .t2a-cmp .t2a-cmp-refrow--reverse .t2a-cmp-refrow__photo,
  .t2a-cmp .t2a-cmp-refrow--reverse .t2a-cmp-refrow__body { order: initial; }
  .t2a-cmp .t2a-cmp-refrow__title { text-align: center; }
}