/* Shared review cards and native scrolling work before the optional loop starts. */
[data-review-loop] { min-width: 0; margin-top: 2rem; }
[data-review-loop] .review-collection-heading { margin: 0 .25rem 1rem; }
[data-review-loop] .review-collection-heading h3 { margin: 0; font: 500 1.0625rem/1.4 var(--font-body); letter-spacing: -.01em; }
[data-review-track] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2rem) / 3);
  gap: 1rem;
  min-width: 0;
  margin: 0;
  padding: .25rem .25rem .875rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: .25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-input-border) transparent;
}
[data-review-track] > li { min-width: 0; scroll-snap-align: start; }
[data-review-track]:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; border-radius: 8px; }
[data-review-track].is-review-loop { scroll-snap-type: none; scroll-behavior: auto; scrollbar-width: none; }
[data-review-track].is-review-loop::-webkit-scrollbar { display: none; }
[data-review-clone] { pointer-events: none; user-select: none; }
[data-review-loop] .review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 248px;
  min-width: 0;
  margin: 0;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-bg);
}
[data-review-loop] .review-quote-mark { display: block; height: 24px; margin-bottom: 1rem; color: var(--color-action); font: 600 3.5rem/.7 var(--font-display); }
[data-review-loop] .review-card blockquote { margin: 0 0 1.5rem; }
[data-review-loop] .review-card blockquote p { margin: 0; font: 400 1rem/1.65 var(--font-body); }
[data-review-loop] .review-card figcaption { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
[data-review-loop] .review-initial { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-link); font: 500 1rem/1 var(--font-body); }
[data-review-loop] .review-card figcaption strong { display: block; color: var(--color-text-primary); font: 500 .9375rem/1.4 var(--font-body); }
[data-review-loop] .review-role { display: block; margin-top: .125rem; color: var(--color-text-secondary); font: 400 .8125rem/1.4 var(--font-body); }
[data-review-loop] .rail-hint { display: flex; align-items: center; gap: .5rem; margin: .375rem .25rem 0; color: var(--color-text-secondary); font: 400 .75rem/1.5 var(--font-body); }
@media (max-width: 50rem) {
  [data-review-track] { grid-auto-columns: calc((100% - 1rem) / 2); }
}
@media (max-width: 37.5rem) {
  [data-review-track] { grid-auto-columns: max(240px, calc(100% - 2rem)); gap: .75rem; }
  [data-review-loop] .review-card { min-height: 240px; padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  [data-review-track].is-review-loop { scroll-snap-type: x mandatory; scrollbar-width: thin; }
  [data-review-clone] { display: none; }
}
