@charset "UTF-8";

/* ===== Page-owned styles for Slay the Spire – o essencial ===== */

/* Hero */
.sts-hero {
  padding-block: var(--space-4xl);
  border-block-end: 1px solid var(--color-line);
}

.sts-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: start;
}

.sts-hero__texto {
  grid-column: 1 / span 7;
  min-width: 0;
}

.sts-hero__acao {
  grid-column: 9 / span 4;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: flex-start;
}

.sts-hero__edicao {
  margin-block-end: var(--space-sm);
}

.sts-hero__resumo {
  max-width: 720px;
  margin-block-end: var(--space-md);
}

.sts-hero__apoio {
  max-width: 720px;
  color: var(--color-navy-soft);
  margin-block-end: 0;
}

.sts-hero__metadados {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}

.sts-hero__metadado {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.sts-hero__metadado dt {
  margin-block-end: 0;
}

.sts-hero__metadado dd {
  margin-block-end: 0;
  font-weight: 600;
}

/* Metadados da edição */
.sts-metadados {
  padding-block: var(--space-lg);
  border-block-end: 1px solid var(--color-line);
}

.sts-metadados__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}

.sts-metadados__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
  padding-inline-end: var(--space-lg);
  border-inline-end: 1px solid var(--color-line);
}

.sts-metadados__item:last-child {
  border-inline-end: none;
  padding-inline-end: 0;
}

.sts-metadados__valor {
  font-weight: 600;
  color: var(--color-navy);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* O que é Slay the Spire? */
.sts-conceito__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: start;
}

.sts-conceito__principal {
  grid-column: 1 / span 7;
  min-width: 0;
}

.sts-conceito__principal h2 {
  margin-block-end: var(--space-md);
}

.sts-conceito__principal p {
  max-width: 720px;
}

.sts-conceito__chamada {
  grid-column: 9 / span 4;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.sts-conceito__chamada h3 {
  margin-block-end: 0;
}

.sts-conceito__chamada p {
  margin-block-end: 0;
}

/* Objetivo */
.sts-objetivo__conteudo {
  max-width: 720px;
  margin-inline: auto;
}

.sts-objetivo__conteudo h2 {
  margin-block-end: var(--space-md);
}

.sts-objetivo__conteudo p {
  margin-block-end: var(--space-md);
}

.sts-objetivo__conteudo ul {
  margin-block-end: 0;
}

/* Personagens */
.sts-personagens__intro {
  max-width: 720px;
  margin-block-end: var(--space-xl);
}

.sts-personagens__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}

.sts-personagem {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
  transition: border-color var(--transition-fast);
}

.sts-personagem:hover {
  border-color: var(--color-emerald);
}

.sts-personagem h3 {
  margin-block-end: 0;
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line-height);
}

.sts-personagem__original {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-small-size);
  font-weight: 400;
  color: var(--color-navy-soft);
  margin-block-start: var(--space-2xs);
}

.sts-personagem p {
  margin-block-end: 0;
}

.sts-personagem ul {
  margin-block-end: 0;
}

.sts-personagem .data-label {
  margin-block-start: auto;
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--color-line);
}

/* Cartas */
.sts-cartas__conteudo {
  max-width: 720px;
  margin-inline: auto;
}

.sts-cartas__conteudo h2 {
  margin-block-end: var(--space-md);
}

.sts-cartas__conteudo p {
  margin-block-end: var(--space-md);
}

.sts-cartas__conteudo ul {
  margin-block-end: var(--space-md);
}

.sts-cartas__conteudo p:last-child {
  margin-block-end: 0;
}

/* Baralho */
.sts-baralho__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: start;
}

.sts-baralho__principal {
  grid-column: 1 / span 7;
  min-width: 0;
}

.sts-baralho__principal h2 {
  margin-block-end: var(--space-md);
}

.sts-baralho__principal p {
  max-width: 720px;
}

.sts-baralho__chamada {
  grid-column: 9 / span 4;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.sts-baralho__chamada .data-label {
  margin-block-end: 0;
}

.sts-baralho__chamada h3 {
  margin-block-end: 0;
}

.sts-baralho__chamada p {
  margin-block-end: 0;
}

/* Relíquias */
.sts-reliquias__conteudo {
  max-width: 720px;
  margin-inline: auto;
}

.sts-reliquias__conteudo h2 {
  margin-block-end: var(--space-md);
}

.sts-reliquias__conteudo p {
  margin-block-end: var(--space-md);
}

.sts-reliquias__conteudo ul {
  margin-block-end: var(--space-md);
}

.sts-reliquias__conteudo p:last-child {
  margin-block-end: 0;
}

/* Percursos */
.sts-percursos__conteudo {
  max-width: 720px;
  margin-inline: auto;
}

.sts-percursos__conteudo h2 {
  margin-block-end: var(--space-md);
}

.sts-percursos__conteudo p {
  margin-block-end: var(--space-md);
}

.sts-percursos__conteudo ul {
  margin-block-end: var(--space-md);
}

.sts-percursos__conteudo p:last-child {
  margin-block-end: 0;
}

/* Combates */
.sts-combates__conteudo {
  max-width: 720px;
  margin-inline: auto;
}

.sts-combates__conteudo h2 {
  margin-block-end: var(--space-md);
}

.sts-combates__conteudo p {
  margin-block-end: var(--space-md);
}

.sts-combates__conteudo ul {
  margin-block-end: var(--space-md);
}

.sts-combates__conteudo p:last-child {
  margin-block-end: 0;
}

/* Progressão */
.sts-progressao__conteudo {
  max-width: 720px;
  margin-inline: auto;
}

.sts-progressao__conteudo h2 {
  margin-block-end: var(--space-md);
}

.sts-progressao__conteudo p {
  margin-block-end: var(--space-md);
}

.sts-progressao__conteudo ul {
  margin-block-end: var(--space-md);
}

.sts-progressao__conteudo p:last-child {
  margin-block-end: 0;
}

/* Experiência em telemóvel */
.sts-mobile__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: start;
}

.sts-mobile__principal {
  grid-column: 1 / span 7;
  min-width: 0;
}

.sts-mobile__principal h2 {
  margin-block-end: var(--space-md);
}

.sts-mobile__principal p {
  max-width: 720px;
}

.sts-mobile__chamada {
  grid-column: 9 / span 4;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

.sts-mobile__chamada h3 {
  margin-block-end: 0;
}

.sts-mobile__chamada p {
  margin-block-end: 0;
}

/* CTA final e nota editorial */
.sts-cta-final {
  padding-block: var(--space-4xl);
}

.sts-cta-final__conteudo {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: center;
}

.sts-cta-final__conteudo h2 {
  margin-block-end: 0;
}

.sts-cta-final__conteudo p {
  margin-block-end: 0;
}

.sts-cta-final__nota {
  width: 100%;
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.sts-cta-final__nota .data-label {
  margin-block-end: 0;
}

.sts-cta-final__nota p {
  margin-block-end: 0;
}

/* ===== Tablet: 768px a 1023px ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  .sts-hero__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sts-hero__texto {
    grid-column: 1 / span 6;
  }

  .sts-hero__acao {
    grid-column: 1 / span 6;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-md);
  }

  .sts-hero__metadados {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .sts-hero__metadado {
    flex: 1 1 40%;
    min-width: 0;
  }

  .sts-metadados__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sts-metadados__item {
    border-inline-end: none;
    padding-inline-end: 0;
  }

  .sts-metadados__item:nth-child(odd) {
    border-inline-end: 1px solid var(--color-line);
    padding-inline-end: var(--space-lg);
  }

  .sts-conceito__grid,
  .sts-baralho__grid,
  .sts-mobile__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sts-conceito__principal,
  .sts-baralho__principal,
  .sts-mobile__principal {
    grid-column: 1 / span 6;
  }

  .sts-conceito__chamada,
  .sts-baralho__chamada,
  .sts-mobile__chamada {
    grid-column: 1 / span 6;
  }

  .sts-personagens__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== Mobile: até 767px ===== */
@media (max-width: 767px) {
  .sts-hero {
    padding-block: var(--space-2xl);
  }

  .sts-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .sts-hero__texto,
  .sts-hero__acao {
    grid-column: 1;
  }

  .sts-hero__acao {
    gap: var(--space-md);
  }

  .sts-hero__metadados {
    gap: var(--space-sm);
  }

  .sts-metadados {
    padding-block: var(--space-md);
  }

  .sts-metadados__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .sts-metadados__item {
    border-inline-end: none;
    padding-inline-end: 0;
    padding-block-end: var(--space-md);
    border-block-end: 1px solid var(--color-line);
  }

  .sts-metadados__item:last-child {
    border-block-end: none;
    padding-block-end: 0;
  }

  .sts-conceito__grid,
  .sts-baralho__grid,
  .sts-mobile__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .sts-conceito__principal,
  .sts-conceito__chamada,
  .sts-baralho__principal,
  .sts-baralho__chamada,
  .sts-mobile__principal,
  .sts-mobile__chamada {
    grid-column: 1;
  }

  .sts-personagens__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .sts-cta-final {
    padding-block: var(--space-2xl);
  }
}

/* ===== Reduzir movimento ===== */
@media (prefers-reduced-motion: reduce) {
  .sts-personagem {
    transition: none;
  }
}