/* Vystopia Diagnostic - Profile Types Grid
 * Powers [vystopia_profile_types_grid]. Static reference grid (no
 * participant data, no query string) - just the 9 profile type names and
 * their one-line taglines, laid out as cards. Deliberately reuses the
 * same palette/spacing language as reveal-v2-page-b163.css (the results
 * page) so a card here and the profile-type heading on a result page
 * read as the same visual system, even though this is a separate
 * shortcode/plugin file.
 */

.vystopia-types-grid-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #2b2b2b;
  line-height: 1.65;
}

.vystopia-types-grid-heading {
  text-align: center;
  margin: 0 0 1.75rem;
}

.vystopia-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.vystopia-type-card {
  background: #faf9f6;
  border: 1px solid #e2ded3;
  border-radius: 10px;
  padding: 1.5rem;
  text-align: left;
}

.vystopia-type-card-icon-wrap {
  text-align: center;
  margin-bottom: 0.85rem;
}

.vystopia-type-card-icon {
  width: 84px;
  height: auto;
  display: inline-block;
}

.vystopia-type-card-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: #2b2b2b;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.vystopia-type-card-tagline {
  font-size: 0.95rem;
  font-style: italic;
  color: #4a5d6b;
  line-height: 1.55;
  margin: 0;
}