/* ====================================================================
   ION MODEL — Reviews page styles (loads after styles.css)
==================================================================== */

.rev-main { padding-block: var(--sp-12) var(--sp-16); }

.rev-head { max-width: 760px; margin: 0 auto var(--sp-8); text-align: center; }
.rev-head h1 {
  font-size: var(--fs-1);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: var(--sp-3);
}
.rev-head p { font-size: var(--fs-4); color: var(--c-muted); line-height: 1.7; }

.rev-label { text-align: center; margin: 0 auto var(--sp-6); }

/* Featured 4 */
.rev-featured {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  max-width: 1000px;
  margin: 0 auto var(--sp-16);
}

/* Masonry for the rest — pure CSS columns, zero JS */
.rev-grid {
  max-width: 1120px;
  margin: 0 auto;
  column-count: 3;
  column-gap: var(--sp-4);
}

.rcard {
  break-inside: avoid;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.rev-featured .rcard { margin-bottom: 0; border-top: 2px solid var(--c-gold); }

.stars {
  color: var(--c-gold);
  letter-spacing: 3px;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}

.rcard blockquote {
  font-size: var(--fs-5);
  color: #cdd2d8;
  line-height: 1.7;
  margin: 0 0 var(--sp-2);
}

.rcard .rname { font-size: var(--fs-6); font-weight: 700; color: var(--c-gold); }
.rcard .rmeta { font-size: 0.82rem; color: var(--c-muted); }

.badge-verified {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gold);
  border: 1px solid var(--c-border);
  padding: 0.14rem 0.5rem;
  margin-top: 0.55rem;
}

/* Closing CTA (reuses .faq-cta look) */
.rev-cta { text-align: center; padding-block: var(--sp-12); border-top: 1px solid var(--c-border); background: var(--c-surface); }
.rev-cta h2 { font-size: var(--fs-2); font-weight: 900; letter-spacing: -0.02em; margin-bottom: var(--sp-2); }
.rev-cta p { color: var(--c-muted); margin-bottom: var(--sp-6); }
.rev-cta .btn { margin: 0.4rem; }

@media (max-width: 1024px) { .rev-grid { column-count: 2; } }
@media (max-width: 760px) {
  .rev-featured { grid-template-columns: 1fr; }
  .rev-grid { column-count: 1; }
}