/* Хаб «Перевод персонажей» + ссылка «назад» на страницах калькуляторов */

.shards-hub h1 {
  color: #fff;
  margin: 0 0 0.5rem;
  font-size: clamp(1.2rem, 4vw, 1.55rem);
}

.shards-hub-lead {
  color: azure;
  max-width: 42em;
  line-height: 1.55;
  font-size: clamp(14px, 3.2vw, 16px);
  margin: 0 0 0.25rem;
}

.shards-hub-note {
  color: rgba(240, 255, 255, 0.75);
  font-size: 0.9rem;
  max-width: 42em;
  line-height: 1.45;
  margin: 0 0 1.25rem;
}

.shards-hub-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  margin-top: 0.5rem;
}

a.shards-hub-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(170, 188, 254, 0.28);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  min-height: 108px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease;
}

a.shards-hub-card:hover,
a.shards-hub-card:focus-visible {
  border-color: rgba(220, 155, 61, 0.75);
  background: rgba(0, 0, 0, 0.42);
  outline: none;
}

.shards-hub-card-title {
  font-size: 1.08rem;
  font-weight: 600;
  color: #fff;
}

.shards-hub-card-desc {
  font-size: 0.92rem;
  color: azure;
  line-height: 1.45;
}

.shards-back {
  margin: 0 0 10px;
  font-size: 15px;
}

.shards-back a {
  color: #dc9b3d;
  font-weight: 600;
  text-decoration: none;
}

.shards-back a:hover {
  text-decoration: underline;
}