/* Page-owned styles for /heros/ */

.heros-intro,
.heros-roles,
.heros-choose,
.heros-upgrade,
.heros-synergy,
.heros-deck,
.heros-events,
.heros-advanced,
.heros-conclusion,
.heros-independence {
  padding-block: var(--space-3xl);
}

.heros-intro__header,
.heros-roles__header,
.heros-choose__header,
.heros-upgrade__header,
.heros-synergy__header,
.heros-deck__header,
.heros-events__header,
.heros-advanced__header,
.heros-independence__header {
  max-width: 72ch;
  margin-inline: auto;
  margin-block-end: var(--space-2xl);
  padding-inline: var(--space-md);
  text-align: left;
}

.heros-intro__kicker,
.heros-roles__kicker,
.heros-choose__kicker,
.heros-upgrade__kicker,
.heros-synergy__kicker,
.heros-deck__kicker,
.heros-events__kicker,
.heros-advanced__kicker,
.heros-conclusion__kicker,
.heros-independence__kicker {
  color: var(--color-olive);
  margin-block-end: var(--space-sm);
}

.heros-intro__lead {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-leading);
  font-weight: 400;
  margin-block-start: var(--space-md);
}

.heros-intro__grid,
.heros-choose__grid,
.heros-upgrade__grid,
.heros-deck__grid,
.heros-advanced__grid,
.heros-independence__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.heros-intro__copy,
.heros-choose__copy,
.heros-upgrade__copy,
.heros-deck__copy,
.heros-advanced__copy,
.heros-independence__copy {
  max-width: 65ch;
  min-width: 0;
}

.heros-intro__aside,
.heros-choose__aside,
.heros-upgrade__aside,
.heros-deck__aside,
.heros-advanced__aside,
.heros-independence__aside {
  min-width: 0;
}

.heros-roles__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.heros-role-card {
  position: relative;
  background-color: var(--surface-sand);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  padding-block-start: var(--space-xl);
  transition: border-color var(--transition-fast);
  min-width: 0;
}

.heros-role-card:hover {
  border-color: rgba(58, 63, 69, 0.4);
}

.heros-role-card__number {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
}

.heros-role-card h3 {
  margin-block-end: var(--space-sm);
}

.heros-role-card p,
.heros-role-card ul {
  max-width: 38ch;
}

.heros-synergy__copy,
.heros-events__copy {
  max-width: 65ch;
  margin-inline: auto;
  padding-inline: var(--space-md);
  margin-block-end: var(--space-lg);
}

.heros-synergy__quote {
  max-width: 72ch;
  margin-inline: auto;
  margin-block-start: var(--space-lg);
  padding-inline: var(--space-md);
}

.heros-conclusion {
  background-color: var(--surface-olive);
  color: var(--color-paper);
}

.heros-conclusion__inner {
  max-width: 72ch;
  margin-inline: auto;
  padding-inline: var(--space-md);
  text-align: center;
}

.heros-conclusion__kicker {
  color: var(--color-paper);
}

.heros-conclusion h2 {
  color: var(--color-paper);
  margin-block-end: var(--space-lg);
}

.heros-conclusion__copy {
  max-width: 65ch;
  margin-inline: auto;
  text-align: left;
  margin-block-end: var(--space-xl);
}

.heros-conclusion__cta {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-lg);
}

.heros-conclusion__cta .btn {
  min-width: 280px;
}

@media (min-width: 768px) {
  .heros-intro__grid,
  .heros-choose__grid,
  .heros-upgrade__grid,
  .heros-deck__grid,
  .heros-advanced__grid,
  .heros-independence__grid {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: var(--space-xl);
    padding-inline: var(--space-xl);
  }

  .heros-roles__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
    padding-inline: var(--space-xl);
  }

  .heros-intro__header,
  .heros-roles__header,
  .heros-choose__header,
  .heros-upgrade__header,
  .heros-synergy__header,
  .heros-deck__header,
  .heros-events__header,
  .heros-advanced__header,
  .heros-independence__header {
    padding-inline: var(--space-xl);
  }

  .heros-synergy__copy,
  .heros-events__copy {
    padding-inline: var(--space-xl);
  }

  .heros-synergy__quote {
    padding-inline: var(--space-xl);
  }

  .heros-conclusion__inner {
    padding-inline: var(--space-xl);
  }
}

@media (min-width: 1024px) {
  .heros-intro__grid,
  .heros-choose__grid,
  .heros-upgrade__grid,
  .heros-deck__grid,
  .heros-advanced__grid,
  .heros-independence__grid {
    padding-inline: var(--space-2xl);
  }

  .heros-roles__grid {
    padding-inline: var(--space-2xl);
  }

  .heros-intro__header,
  .heros-roles__header,
  .heros-choose__header,
  .heros-upgrade__header,
  .heros-synergy__header,
  .heros-deck__header,
  .heros-events__header,
  .heros-advanced__header,
  .heros-independence__header {
    padding-inline: var(--space-2xl);
  }

  .heros-synergy__copy,
  .heros-events__copy {
    padding-inline: var(--space-2xl);
  }

  .heros-synergy__quote {
    padding-inline: var(--space-2xl);
  }

  .heros-conclusion__inner {
    padding-inline: var(--space-2xl);
  }
}

@media (max-width: 767px) {
  .heros-intro,
  .heros-roles,
  .heros-choose,
  .heros-upgrade,
  .heros-synergy,
  .heros-deck,
  .heros-events,
  .heros-advanced,
  .heros-conclusion,
  .heros-independence {
    padding-block: var(--space-2xl);
  }

  .heros-intro__header,
  .heros-roles__header,
  .heros-choose__header,
  .heros-upgrade__header,
  .heros-synergy__header,
  .heros-deck__header,
  .heros-events__header,
  .heros-advanced__header,
  .heros-independence__header {
    margin-block-end: var(--space-xl);
  }

  .heros-intro__grid,
  .heros-choose__grid,
  .heros-upgrade__grid,
  .heros-deck__grid,
  .heros-advanced__grid,
  .heros-independence__grid,
  .heros-roles__grid {
    gap: var(--space-md);
  }

  .heros-conclusion__cta .btn {
    width: 100%;
    min-width: 0;
  }
}