/* montarias.css — depende de codex.css + pals-list.css (cabeçalho,
   estado vazio). Ranking de montarias por categoria. */

/* ---------- Accordion de avisos (só a casca por enquanto -- o
   conteúdo real entra depois, ver TODO em montarias.php) ---------- */
.montarias-accordion{
  margin-bottom:1.5rem;
}
.montarias-accordion .accordion-item{
  background: var(--panel);
  border:1px solid var(--hairline);
  border-radius:12px;
  overflow:hidden;
}
.montarias-accordion .accordion-button{
  background: var(--panel);
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  display:flex;
  align-items:center;
  gap:.5rem;
  box-shadow:none;
}
.montarias-accordion .accordion-button:not(.collapsed){
  background: var(--accent-soft);
  color: var(--accent);
}
.montarias-accordion .accordion-button:focus{
  box-shadow:none;
  border-color: var(--hairline);
}
.montarias-accordion .accordion-button::after{
  filter: invert(60%) sepia(10%) saturate(400%);
}
.montarias-accordion .accordion-body{
  background: var(--panel);
  color: var(--text-dim);
  font-size:.85rem;
  border-top:1px solid var(--hairline);
}

/* ---------- Abas de categoria ---------- */
.montarias-tabs{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-bottom:1.5rem;
  border-bottom:1px solid var(--hairline);
  padding-bottom:1rem;
}
.montarias-tab{
  display:flex;
  align-items:center;
  gap:.5rem;
  background: var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:999px;
  padding:.55rem 1.1rem;
  font-size:.85rem;
  font-weight:600;
  color: var(--text-dim);
  cursor:pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.montarias-tab:hover{
  border-color: var(--accent-line);
  color: var(--text-bright);
}
.montarias-tab.is-active{
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.montarias-tab-count{
  font-family: var(--font-mono);
  font-size:.72rem;
  background: var(--panel);
  border-radius:999px;
  padding:.1rem .5rem;
  opacity:.85;
}

/* ---------- Painéis ---------- */
.montarias-painel{ display:none; }
.montarias-painel.is-active{ display:block; }

/* ---------- Lista/cards ---------- */
.montarias-lista{
  display:flex;
  flex-direction:column;
  gap:.65rem;
}

.montaria-card{
  display:flex;
  align-items:center;
  gap:1rem;
  background: var(--panel);
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:.75rem 1.1rem;
}

.montaria-card-rank{
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.1rem;
  color: var(--text-dim);
  width:2.75rem;
  flex-shrink:0;
  text-align:center;
}
/* Destaca o pódio -- mesmo espírito de qualquer ranking, sem exagerar
   no efeito visual (só a cor do número). */
.montarias-lista .montaria-card:nth-child(1) .montaria-card-rank{ color: var(--gold); font-size:1.35rem; }
.montarias-lista .montaria-card:nth-child(2) .montaria-card-rank{ color: #c7cbe0; font-size:1.2rem; }
.montarias-lista .montaria-card:nth-child(3) .montaria-card-rank{ color: #cb9b6a; font-size:1.15rem; }

.montaria-card-portrait{
  width:56px; height:56px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid var(--rarity-color, var(--hairline));
  background: var(--panel-2);
  flex-shrink:0;
}

/* Envolve só o retrato -- abre a página do Pal (nova aba). `display:block`
   + `line-height:0` pra não sobrar espaço extra de linha ao redor da
   imagem (o link vira, na prática, do mesmo tamanho da imagem). */
.montaria-card-portrait-link{
  display:block;
  line-height:0;
  flex-shrink:0;
}

.montaria-card-info{
  min-width:0;
  flex:1 1 auto;
}
.montaria-card-name-row{
  display:flex;
  align-items:center;
  gap:.4rem;
}
.montaria-card-name{
  font-family: var(--font-display);
  font-weight:700;
  font-size:1rem;
  color: var(--text-bright);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.montaria-card-rarity{
  font-size:.72rem;
  color: var(--rarity-color, var(--text-dim));
  margin-top:.1rem;
}
.montaria-card-badge-hibrida{
  font-family: var(--font-mono);
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color: var(--accent);
  background: var(--accent-soft);
  border:1px solid var(--accent-line);
  border-radius:999px;
  padding:.1rem .5rem;
  flex-shrink:0;
  cursor:help;
}

.montaria-card-speeds{
  display:flex;
  gap:.6rem;
  flex-shrink:0;
}
.montaria-card-speed{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  min-width:110px;
  padding:.4rem .7rem;
  border-radius:10px;
  border:1px solid var(--hairline);
  background: var(--panel-2);
  opacity:.65;
}
/* A velocidade que de fato conta pro ranking desta lista fica destacada
   -- a outra continua visível (informativa), só menos proeminente. */
.montaria-card-speed.is-usada{
  opacity:1;
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.montaria-card-speed-label{
  font-family: var(--font-mono);
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  color: var(--text-dim);
  display:flex;
  align-items:center;
  gap:.25rem;
}
.montaria-card-speed.is-usada .montaria-card-speed-label{ color: var(--accent); }
.montaria-card-speed-value{
  font-family: var(--font-mono);
  font-weight:700;
  font-size:.95rem;
  color: var(--text-bright);
}
.montaria-card-speed.is-usada .montaria-card-speed-value{ color: var(--accent); }

@media (max-width: 700px){
  .montaria-card{ flex-wrap:wrap; }
  .montaria-card-speeds{ width:100%; justify-content:space-between; margin-top:.5rem; }
  .montaria-card-speed{ align-items:flex-start; }
}