/* =========================================================
   PUBLIC REVIEW PAGE
   Page-specific structure only; shared presentation comes
   from global.css.
   ========================================================= */

.review-page {
  max-width: var(--container-width);
  margin-inline: auto;
}

.review-hero-note {
  max-width: var(--header-width);
  margin: var(--card-gap) auto 0;
  padding: var(--card-padding);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
}

.review-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.review-principle {
  padding: var(--card-padding);
  border: 1px solid var(--inner-card-border);
  border-radius: var(--card-radius);
  background: var(--inner-card-bg);
  box-shadow: var(--shadow-card);
}

.review-principle:nth-child(1) {
  border-top: 6px solid var(--mist-blue);
}

.review-principle:nth-child(2) {
  border-top: 6px solid var(--accent-soft);
}

.review-principle:nth-child(3) {
  border-top: 6px solid var(--sun-wash);
}

.review-principle h3 {
  margin-bottom: var(--heading-intro-gap);
  font-size: var(--card-title-size);
}

.review-principle p {
  font-size: var(--card-text-size);
}

.review-feedback-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.review-feedback-card {
  padding: var(--card-padding);
  border: 1px solid var(--inner-card-border);
  border-radius: var(--card-radius);
  background: var(--inner-card-bg);
}

.review-feedback-card h3 {
  margin-bottom: var(--heading-intro-gap);
  font-size: var(--card-title-size);
}

.review-feedback-card strong {
  color: var(--ink);
}

.review-disclaimer {
  padding: var(--card-padding);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  background: var(--paper-bg);
}

.review-disclaimer h2 {
  margin-bottom: var(--heading-intro-gap);
  font-size: var(--card-title-size);
}

@media (max-width: 900px) {
  .review-principles,
  .review-feedback-grid {
    grid-template-columns: 1fr;
  }
}