/* ==========================================================================
   11 REVIEWS — card row with accent stars and mono dates, anchored by one tall
   field photograph. 1 image.
   ========================================================================== */

.reviews { background: var(--surface-page); }

.reviews__inner { display: grid; gap: var(--space-stack); align-items: start; }

.reviews__fig {
  aspect-ratio: var(--ratio-card);
  border-radius: var(--radius-card);
  clip-path: var(--chamfer-clip);
}
.reviews__fig::after { background: var(--chamfer-edge), var(--overlay-media); }

.reviews__cards {
  display: grid;
  gap: var(--grid-gap-tight);
}

.review {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--card-pad);
  background: var(--chamfer-edge), var(--surface-raised);
  border: var(--border-width-hair) solid var(--border-hairline);
  border-radius: var(--radius-card);
  clip-path: var(--chamfer-clip);
  transition: border-color var(--dur-fast) var(--ease-state), transform var(--dur-fast) var(--ease-lift);
}
.review:hover { border-color: var(--border-accent-soft); transform: translate3d(0, var(--lift-tile), 0); }

.review__stars { display: flex; gap: var(--space-3xs); color: var(--text-accent); }
.review__stars .icon { width: var(--icon-sm); height: var(--icon-sm); }

.review__quote {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.review__by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-sm);
  margin-block-start: auto;
  padding-block-start: var(--space-sm);
  background: var(--tick-rule-fine);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.review__name { color: var(--text-primary); font-weight: var(--weight-medium); }
.review__src { margin-inline-start: auto; color: var(--text-secondary); }

.reviews__note {
  margin-block-start: var(--space-md);
  font-size: var(--text-caption);
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .reviews__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .reviews__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--space-2xl); }
  .reviews__fig { aspect-ratio: var(--ratio-portrait); position: sticky; inset-block-start: calc(var(--header-h) + var(--space-lg)); }
}