/* ==========================================================================
   Reviews page — page-specific styles.
   Normal flowing content page (no scroll-snap), same architecture as
   marks.css/paradigm.css. Shared button/nav/footer/cookie styles live in
   components.css; global .pg-col/.pg-title/.pg-headline/.pg-body type-scale
   primitives in base.css.
   ========================================================================== */

.rv-sec {
  background: linear-gradient(var(--colour-bg), var(--colour-bg)) center / 100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: min(56px, 8dvh) 20px;
}

.rv-sec--accent {
  background: linear-gradient(var(--colour-accent), var(--colour-accent)) center / 100% 100% no-repeat;
}

.rv-back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(0.8rem, 3.6cqw, 2.1dvh);
  letter-spacing: 0.08em;
  color: var(--colour-ink);
  text-transform: uppercase;
}

.rv-back:hover { color: var(--colour-accent); }

/* Testimonial grid — flex columns filled in round-robin reading order by
   reviews.js (card 1 -> col 1, card 2 -> col 2, card 3 -> col 3, card 4 ->
   col 1, ...), so cards read left-to-right/top-to-bottom while each column
   still stacks to its own natural height (true masonry, not equal rows).
   Mobile has a single column, so JS leaves cards in their flat source order. */
.rv-grid {
  width: 100%;
  margin-top: min(28px, 3.4dvh);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rv-grid-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 0;
  min-width: 0;
}

.rv-card {
  background: var(--colour-card);
  border-radius: 16px;
  padding: min(26px, 3.2dvh) min(24px, 5.4cqw);
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(58, 63, 67, 0.05);
}

.rv-quote-mark {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(55px + 2pt);
  line-height: 0.6;
  color: var(--colour-accent);
  height: 30px;
}

.rv-punch {
  margin-top: 16px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(min(1.2rem, 5.4cqw, 2.5dvh) + 2pt);
  letter-spacing: 0.3pt;
  line-height: 1.1;
  color: var(--colour-ink);
}

.rv-quote {
  margin: calc(12px + 1em) 0 25px 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(0.9rem, 4.2cqw, 2.1dvh);
  line-height: 1.45;
  color: #5C646B;
}

.rv-person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.rv-avatar {
  width: 51px;
  height: 51px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--colour-bg);
  border: 1px solid var(--colour-ink-12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rv-avatar img { width: 100%; height: 100%; object-fit: cover; }

.rv-person-meta { min-width: 0; }

.rv-name {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(min(0.84rem, 3.7cqw, 2dvh) + 2pt);
  color: var(--colour-ink);
}

.rv-role,
.rv-company {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: calc(min(0.74rem, 3.2cqw, 1.8dvh) + 1pt);
  color: #5C646B;
}

@media (min-width: 760px) {
  .rv-sec { background-size: 100% 100%; padding-top: min(40px, 5dvh); padding-bottom: min(40px, 5dvh); }
  .rv-sec .pg-col { max-width: min(1200px, calc(100vw - 48px)); }
  .rv-sec .pg-title { font-size: min(16pt, 3dvh); }
  .rv-sec .pg-headline { font-size: min(44px, 5.2dvh); max-width: 760px; }
  .rv-sec .pg-body { font-size: min(12pt, 2.4dvh); line-height: 1.3; max-width: 640px; }

  .rv-grid { flex-direction: row; gap: 18px; }
  .rv-grid-col { gap: 18px; }
}