/* CLASSES E HABILIDADES
   pages/wiki/classes.html e pages/wiki/habilidades.html:
   cartao de classe, barras de atributo, tabela comparativa e grade de skills.
   Carregado por ultimo, depois de 16-artigo.css. */

/* ---------- agrupamento por tribo ---------- */
.tribo {
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 6px
}
.tribo h2 {
  margin:0
}
.tribo span {
  flex:1;
  height:1px;
  background:linear-gradient(90deg,var(--line),transparent)
}
.tribo small {
  font:9px var(--sans);
  font-weight:600;
  letter-spacing:.22em;
  color:#7d7478;
  white-space:nowrap
}

/* ---------- cartao de classe ---------- */
.grade-classes {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:16px;
  list-style:none;
  margin:0 0 30px;
  padding:0
}
.classe {
  display:flex;
  flex-direction:column;
  margin:0;
  border:1px solid var(--line);
  background:linear-gradient(165deg,#151318,#0f0e12);
  transition:border-color .25s ease
}
.classe:hover {
  border-color:#c5a77359
}
.classe-topo {
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-bottom:1px solid var(--line)
}
.classe-topo img {
  width:62px;
  height:62px;
  flex:none;
  border:1px solid #c5a77333
}
.classe-topo h3 {
  margin:0 0 4px;
  font-family:var(--serif);
  font-weight:600;
  font-size:17px;
  color:var(--text)
}
.classe-topo p {
  margin:0;
  font:10px var(--sans);
  font-weight:500;
  letter-spacing:.12em;
  color:#7d7478;
  text-transform:uppercase
}
.classe-corpo {
  padding:14px 16px 16px
}

/* barras de atributo */
.atributos {
  list-style:none;
  margin:0;
  padding:0
}
.atributos li {
  display:grid;
  grid-template-columns:78px 1fr 26px;
  align-items:center;
  gap:9px;
  margin:0 0 7px;
  font-size:11px
}
.atributos li:last-child {
  margin-bottom:0
}
.atributos span:first-child {
  color:#9a9297;
  font:9px var(--sans);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase
}
.barra {
  height:6px;
  background:#ffffff0d;
  overflow:hidden
}
.barra i {
  display:block;
  height:100%;
  background:linear-gradient(90deg,#8d2b36,var(--red))
}
.atributos b {
  font-family:var(--condensed);
  font-size:14px;
  font-weight:700;
  color:var(--gold-light);
  text-align:right
}
/* destaca o atributo mais alto da classe */
.atributos li.principal .barra i {
  background:linear-gradient(90deg,#b98a3f,var(--gold-light))
}
.atributos li.principal b {
  color:var(--gold-light)
}

/* ---------- tabela comparativa ---------- */
.tabela-dados .mini-classe {
  display:flex;
  align-items:center;
  gap:10px
}
.tabela-dados .mini-classe img {
  width:30px;
  height:30px;
  flex:none;
  border:1px solid #c5a77333
}
.num {
  font-family:var(--condensed);
  font-size:15px;
  font-weight:700;
  text-align:right
}
.num.topo {
  color:var(--gold-light)
}

/* ---------- grade de skills ---------- */
.classe-skills {
  scroll-margin-top:112px
}
.classe-skills + .classe-skills {
  margin-top:46px;
  padding-top:40px;
  border-top:1px solid var(--line)
}
.classe-skills header {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px
}
.classe-skills header img {
  width:52px;
  height:52px;
  border:1px solid #c5a77333;
  flex:none
}
.classe-skills h2 {
  margin:0 !important;
  font-size:22px
}
.classe-skills header p {
  margin:2px 0 0;
  font:9px var(--sans);
  font-weight:600;
  letter-spacing:.2em;
  color:#7d7478
}

.grade-skills {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:10px;
  list-style:none;
  margin:0;
  padding:0
}
.grade-skills li {
  margin:0;
  padding:11px 8px 10px;
  text-align:center;
  border:1px solid var(--line);
  background:#121115;
  transition:border-color .2s ease
}
.grade-skills li:hover {
  border-color:#c5a77347
}
.grade-skills img {
  width:49px;
  height:46px;
  image-rendering:pixelated
}
.grade-skills b {
  display:block;
  margin-top:7px;
  font-size:11px;
  font-weight:600;
  line-height:1.35;
  color:var(--text)
}
.grade-skills small {
  display:block;
  margin-top:4px;
  font:9px var(--condensed);
  font-weight:700;
  letter-spacing:.1em;
  color:var(--gold)
}

@media(max-width:600px) {
  .grade-classes {
    grid-template-columns:1fr
  }
  .grade-skills {
    grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
    gap:8px
  }
  .classe-skills header img {
    width:42px;
    height:42px
  }
}