/* sections/reviews.css */
/* Reviews section styles — horizontal scroll mobile, grid desktop, screenshot cards */
/* No other section styles. Reviews only. */

/* ============================================================
   REVIEWS SECTION
   ============================================================ */

.reviews {
  background: var(--gradient-reviews);
}


/* ============================================================
   REVIEWS HEADING
   ============================================================ */

.reviews__heading {
  padding: 0 var(--space-4);
  margin-bottom: var(--space-8);
  color: var(--color-background);
  font-size: clamp(var(--font-size-4xl), 6vw, var(--font-size-5xl));
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}

@media (min-width: 1120px) {
  .reviews__heading {
    font-size: var(--font-size-5xl);
  }
}

/* ============================================================
   REVIEWS LIST — Horizontal scroll on mobile, grid on desktop
   ============================================================ */

.reviews__list {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--space-4) var(--space-4);
  scrollbar-width: none;
  list-style: none;
}

.reviews__list::-webkit-scrollbar {
  display: none;
}

@media (min-width: 1024px) {
  .reviews__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
    padding: 0 var(--space-12);
    gap: var(--space-8);
  }
}

/* ============================================================
   REVIEW ITEM — Snap point on mobile, auto on desktop
   ============================================================ */

.reviews__item {
  scroll-snap-align: start;
  flex: 0 0 80vw;
  max-width: 320px;
}

@media (min-width: 1024px) {
  .reviews__item {
    flex: unset;
    max-width: unset;
  }
}

/* ============================================================
   REVIEW CARD
   ============================================================ */

.reviews__card {
  overflow: hidden;
}

/* ============================================================
   SCREENSHOT WRAPPER
   ============================================================ */

.reviews__screenshot-wrapper {
  width: 100%;
  overflow: hidden;
  border-radius: var(--border-radius-smd) var(--border-radius-lg) 0 0;
}

/* ============================================================
   SCREENSHOT IMAGE
   ============================================================ */

.reviews__screenshot {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(180, 80, 40, 0.35));
}

@media (min-width: 1024px) {
  .reviews__screenshot {
    filter: drop-shadow(0 10px 8px rgba(180, 80, 40, 0.4));
  }
}

/* ============================================================
   CAPTION
   ============================================================ */

.reviews__caption {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-4);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .reviews__list {
    scroll-behavior: auto;
  }
}