/* Review-only navigation and hub styles. Not required in production. */

.review-page {
  min-height: 100vh;
  background: var(--color-cream);
}

.review-main {
  padding-bottom: var(--section-space);
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--gap-lg);
}

.review-card {
  align-content: start;
  min-height: 100%;
}

.review-card .button {
  justify-self: start;
  margin-top: auto;
}

.review-status {
  color: var(--color-teal);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.review-reference {
  margin-top: var(--row-space);
  color: var(--color-muted);
}

.review-back-link {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-cream);
  box-shadow: 0 0.35rem 1rem rgb(23 54 58 / 0.16);
  color: var(--color-ink);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-decoration: none;
}

.review-back-link:hover,
.review-back-link:focus-visible {
  background: var(--color-gold);
  color: var(--color-ink);
}

@media (max-width: 62rem) {
  .review-grid {
    grid-template-columns: 1fr;
  }
}