:root {
  --faction-people: linear-gradient(135deg, rgba(59,130,246,0.35), rgba(16,185,129,0.35));
  --faction-orc: linear-gradient(135deg, rgba(220,38,38,0.45), rgba(234,179,8,0.35));
  --faction-elf: linear-gradient(135deg, rgba(56,189,248,0.45), rgba(34,197,94,0.4));
  --faction-dwarf: linear-gradient(135deg, rgba(249,115,22,0.5), rgba(250,204,21,0.4));
  --faction-goblin: linear-gradient(135deg, rgba(132,204,22,0.5), rgba(14,165,233,0.4));
  --faction-undead: linear-gradient(135deg, rgba(147,51,234,0.55), rgba(15,23,42,0.9));
}

.faction-hero {
  max-width: 44rem;
  margin-inline: auto;
}

.faction-hero__grid {
  margin-top: var(--space-6);
}

.faction-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.faction-hero__figure {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(148,163,184,0.7);
}

.faction-hero__meta {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.faction-grid {
  align-items: stretch;
}

.faction-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: radial-gradient(circle at top left, rgba(15,23,42,0.96), rgba(15,23,42,0.98));
}

.faction-card__image img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.faction-battle-figure {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(148,163,184,0.7);
  box-shadow: var(--shadow-lg);
  background: radial-gradient(circle at top, rgba(168,85,247,0.4), rgba(15,23,42,0.98));
}

.faction-battle-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.faction-links-grid .faction-link-card {
  background: radial-gradient(circle at top left, rgba(59,130,246,0.18), rgba(15,23,42,0.96));
}

.cta__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}

@media (min-width: 768px) {
  .faction-hero {
    max-width: none;
  }
}