/* Small cross-section layout and identity refinements. */

/* Keep compact status and tier pills optically centered. */
.otl-patreon-state,
.otl-premium-state,
.hero-card .otl-account-launcher-state,
.premium-badge,
.premium-lock,
.trainer-tier-badge,
.event-tier-badge,
.otl-trainings-count,
.event-category-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle;
}

.otl-patreon-state,
.otl-premium-state {
  min-height: 28px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Use the same section-title scale for Trainer and Game Settings tier headings. */
#trainerPanel .trainer-tier-heading > strong,
#eventsPanel .event-tier-heading > strong,
.quick-start-tier-heading strong,
.game-settings-card .game-settings-free-heading > strong,
.game-settings-card .game-settings-premium-heading > strong {
  font-size: clamp(1.25rem, 1.45vw, 1.5rem) !important;
  font-weight: 850 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
}

/* Separate Free and Premium Trainers using the same tier divider used
   between Free and Premium Events. */
#freeTrainerGrid + .trainer-tier-heading {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(167, 139, 250, 0.17);
}

/* Keep Premium Trainer cards the same large desktop size as Free Trainer cards. */
#premiumTrainerGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Make Trainer identity text better fill the larger cards. */
.trainer-name-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.trainer-name-row strong {
  font-size: clamp(1.75rem, 2.15vw, 2.2rem);
  line-height: 1 !important;
}

.trainer-name-row .trainer-tier-badge {
  flex: 0 0 auto;
  align-self: center;
  margin-left: 0 !important;
  transform: translateY(1px);
}

.trainer-archetype {
  font-size: clamp(0.92rem, 1.05vw, 1.08rem);
  font-weight: 800;
  letter-spacing: 0.09em;
}

/* Trainer cards only show the Trainer's identity and type, not a redundant short description. */
.trainer-description {
  display: none !important;
}

@media (max-width: 560px) {
  #premiumTrainerGrid {
    grid-template-columns: 1fr;
  }

  #trainerPanel .trainer-tier-heading > strong,
  #eventsPanel .event-tier-heading > strong,
  .quick-start-tier-heading strong,
  .game-settings-card .game-settings-free-heading > strong,
  .game-settings-card .game-settings-premium-heading > strong {
    font-size: 1.15rem !important;
  }

  .trainer-name-row strong {
    font-size: 1.55rem;
  }

  .trainer-archetype {
    font-size: 0.86rem;
  }
}