/* ============================================
   CZ Supply — Reviews Page Styles
   ============================================ */

/* --- Reviews Hero --- */

.reviews-hero::before {
  background: radial-gradient(
    ellipse at 50% 60%,
    rgba(var(--lavender-rgb), 0.12) 0%,
    transparent 55%
  );
}

.reviews-hero-stars {
  display: flex;
  justify-content: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
}

.star-lg {
  font-size: 2.5rem;
}

/* --- Featured Review Card --- */

.featured-review-card {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--sp-2xl);
  background: var(--surface-elevated);
  border-left: 4px solid var(--lavender);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.featured-review-card .quote-mark {
  margin-bottom: var(--sp-md);
}

.featured-review-text p {
  font-size: var(--fs-body-lg);
  color: var(--text-secondary);
  line-height: 1.8;
  font-style: italic;
}

.featured-review-attribution {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin-top: var(--sp-xl);
}

.featured-review-author {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text);
  letter-spacing: var(--ls-wide);
}

/* --- Reviews Grid (masonry-like with CSS columns) --- */

.reviews-grid {
  columns: 3;
  column-gap: var(--sp-xl);
}

/* --- Review Cards --- */

.review-card {
  break-inside: avoid;
  margin-bottom: var(--sp-xl);
  padding: var(--sp-xl);
  background: var(--surface-elevated);
  border-left: 3px solid var(--lavender);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.review-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.review-card .stars {
  margin-bottom: var(--sp-md);
}

.review-card p {
  color: var(--text-secondary);
  line-height: var(--lh-body);
  font-size: var(--fs-body);
  margin-bottom: var(--sp-lg);
}

.review-card-author {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

/* --- CTA Section --- */

.reviews-cta {
  position: relative;
  overflow: hidden;
}

.reviews-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(var(--lavender-rgb), 0.1) 0%,
    transparent 60%
  );
  pointer-events: none;
}

.reviews-cta h2 {
  margin-bottom: var(--sp-md);
}

.reviews-cta-text {
  font-size: var(--fs-body-lg);
  color: rgba(250, 247, 242, 0.7);
  max-width: 560px;
  margin: 0 auto var(--sp-2xl);
  line-height: var(--lh-body);
}

.reviews-cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-lg);
  flex-wrap: wrap;
}

/* ============================================
   Responsive Breakpoints
   ============================================ */

@media (max-width: 900px) {
  .reviews-grid {
    columns: 2;
  }

  .featured-review-card {
    padding: var(--sp-xl);
  }

  .star-lg {
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .reviews-grid {
    columns: 1;
  }

  .featured-review-card {
    padding: var(--sp-lg);
  }

  .featured-review-text p {
    font-size: var(--fs-body);
  }

  .star-lg {
    font-size: 1.75rem;
  }

  .reviews-cta-buttons {
    flex-direction: column;
    gap: var(--sp-md);
  }

  .reviews-cta-buttons .btn {
    width: 100%;
  }
}