/* Photos & reviews — two rows that scroll continuously (photos → right, reviews → left).
   Each track holds N identical groups; moving it by exactly one group width loops seamlessly. */
.previews { overflow: hidden; }
.previews__row { position: relative; overflow: hidden; contain: paint; }
.previews__row--photos { padding-block: 1rem .5rem; }
.previews__row--reviews { margin-top: clamp(1rem, 2.5vw, 1.75rem); padding-block: .75rem; }
.previews__track { display: flex; width: max-content; }
.previews__group { display: flex; flex: none; gap: var(--gap, 1.25rem); margin: 0; padding: 0 calc(var(--gap, 1.25rem) / 2); list-style: none; }
.previews__row--photos .previews__track { --gap: clamp(.9rem, 1.6vw, 1.4rem); animation: previews-left var(--photos-dur, 45s) linear infinite; }
.previews__row--reviews .previews__track { --gap: clamp(.75rem, 1.2vw, 1rem); animation: previews-left var(--reviews-dur, 40s) linear infinite; }
.previews__row--right .previews__track { animation-direction: reverse; }
.previews__track .previews__group { --gap: inherit; }
.previews--pausable .previews__row:hover .previews__track { animation-play-state: paused; }
/* one group = 100% / number of groups; translate by one group */
@keyframes previews-left { from { transform: translateX(0); } to { transform: translateX(calc(-100% / var(--groups, 2))); } }

/* Photo cards */
.preview-photo { flex: none; width: var(--photo-w, 260px); aspect-ratio: 4 / 5; }
.preview-photo:nth-child(odd) { transform: rotate(calc(var(--photo-tilt, 2deg) * -1)); }
.preview-photo:nth-child(even) { transform: rotate(var(--photo-tilt, 2deg)); }
.preview-photo__inner {
  position: relative; display: block; width: 100%; height: 100%;
  border-radius: calc(var(--radius) + 2px); overflow: hidden;
  background: var(--photo-bg, color-mix(in srgb, var(--color-accent) 25%, var(--color-surface)));
  box-shadow: 0 16px 30px -22px rgba(18, 59, 120, .55);
}
.preview-photo img { width: 100%; height: 100%; object-fit: cover; }
.preview-photo--contain img { object-fit: contain; padding: 8%; filter: drop-shadow(0 14px 16px rgba(18, 59, 120, .2)); }
.preview-photo__caption {
  position: absolute; left: .75rem; right: .75rem; bottom: .75rem;
  padding: .45rem .7rem; border-radius: 10px;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent); color: var(--color-heading);
  font-size: .85rem; font-weight: 700;
}
.preview-photo .placeholder-media { padding: 1rem; }

/* Review cards */
.review-card {
  position: relative; flex: none; width: min(290px, 74vw);
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .95rem 1.1rem; border-radius: calc(var(--radius) * .7);
  background: var(--color-surface); border: 1px solid var(--color-border);
}
.review-card .demo-flag { top: -.6rem; left: .75rem; }
.review-card__photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.review-card__text { margin: .4rem 0 .45rem; font-size: .88rem; line-height: 1.45; }
.review-card__name { margin: 0; font-size: .82rem; font-weight: 800; color: var(--review-name, var(--color-heading)); }
.review-card__verified { font-weight: 700; color: var(--review-verified, #1f9d55); }
.review-card .stars .icon { width: .85rem; height: .85rem; }

.previews__summary { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: center; margin: 1.75rem 0 0; font-weight: 700; font-size: .9rem; }

@media (max-width: 749px) { .preview-photo { width: var(--photo-w-m, 180px); } }

/* Reduced motion: no automatic movement — rows become swipeable instead */
@media (prefers-reduced-motion: reduce) {
  .previews__track { animation: none; }
  .previews__row { overflow-x: auto; scrollbar-width: none; }
  .previews__group[aria-hidden="true"] { display: none; }
  .preview-photo { transform: none; }
}
