/* ════════════════════════════════════════════════════════════════
   PTLAB — Catálogo de Itens (ptlab.com.br/itens)

   Visual: dark escuro, verde #3FB950 como accent, cards com borda
   sutil e highlight no hover. Inspirado em Codex Age mas com nossa
   identidade (PTLAB verde).

   Tokens compartilhados com /agelab/ via :root (abaixo).
   ════════════════════════════════════════════════════════════════ */

/* Tokens, reset, body background, header e footer vivem no
   chrome.css compartilhado (site/assets/chrome.css). Este arquivo
   mantém apenas estilos específicos do catálogo /itens/.
   body.pt-itens é só namespace semântico; sem overrides globais. */

/* ── Main container ───────────────────────────────────────────── */
/* Reseta o grid de 3 colunas do chrome.css shared (que serve
   home/agelab). Catálogo usa fluxo normal com largura confortável
   pra conteúdo denso (cards, tabelas, página de item).
   Seletor com body.pt-itens dobra a especificidade pra vencer o
   chrome.css shared sem depender da ordem de carga do CSS. */
body.pt-itens .pt-main {
  --pt-maxwidth: 1120px;
  display: block;
  grid-template-columns: none;
  gap: 0;
  max-width: var(--pt-maxwidth);
  margin: 0 auto;
  padding: 32px 20px 48px;
  width: 100%;
  flex: 1;
}

/* ── Hero (topo das páginas) ──────────────────────────────────── */
.pt-hero {
  text-align: center;
  padding: 48px 0 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--pt-border);
}
.pt-hero--compact {
  padding: 24px 0 20px;
  margin-bottom: 24px;
}
.pt-hero__eyebrow {
  color: var(--pt-muted);
  font-size: 0.72rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.pt-hero__title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
  line-height: 1.15;
  color: var(--pt-text);
}
.pt-hero--compact .pt-hero__title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: 10px;
}
.pt-hero__lead {
  color: var(--pt-muted);
  font-size: 1rem;
  max-width: 760px;
  margin: 0 auto;
}
.pt-hero__lead strong { color: var(--pt-text); }

/* ── Breadcrumbs ──────────────────────────────────────────────── */
.pt-breadcrumb {
  margin: 0 0 20px;
  font-size: 0.82rem;
  text-align: left;
}
.pt-breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.pt-breadcrumb li {
  color: var(--pt-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pt-breadcrumb li + li::before {
  content: '›';
  color: var(--pt-muted);
  opacity: 0.6;
}
.pt-breadcrumb li[aria-current] { color: var(--pt-green); font-weight: 500; }
.pt-breadcrumb a { color: var(--pt-muted); }
.pt-breadcrumb a:hover { color: var(--pt-text); text-decoration: none; }

/* ── Bloco (seção com título + grid) ──────────────────────────── */
.pt-bloco { margin-bottom: 48px; }
.pt-bloco__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--pt-border);
  gap: 16px;
}
.pt-bloco__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pt-text);
}
.pt-bloco__icon {
  display: inline-flex;
  color: var(--pt-green);
  width: 22px;
  height: 22px;
}
.pt-bloco__icon svg { width: 100%; height: 100%; }
.pt-bloco__meta {
  color: var(--pt-muted);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Grid de subcategorias ────────────────────────────────────── */
.pt-grid { display: grid; gap: 14px; }
.pt-grid--tipos {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.pt-grid--large { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.pt-tipo-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--pt-bg-2);
  border: 1px solid var(--pt-card-border);
  border-radius: var(--pt-radius);
  padding: 20px 16px;
  min-height: 100px;
  color: var(--pt-text);
  transition: border-color .15s, transform .15s, background .15s;
}
.pt-tipo-card:hover {
  border-color: var(--pt-green);
  background: var(--pt-green-soft);
  transform: translateY(-2px);
  text-decoration: none;
}
.pt-tipo-card__name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--pt-text);
}
.pt-tipo-card__count {
  font-size: 0.75rem;
  color: var(--pt-muted);
  margin-top: 10px;
  letter-spacing: 0.5px;
}
.pt-tipo-card--featured {
  min-height: 120px;
  padding: 24px 18px;
}
.pt-tipo-card--featured .pt-tipo-card__name { font-size: 1.1rem; }

/* ── Grid de itens (subcategoria) ─────────────────────────────── */
.pt-grid--itens {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.pt-item-card {
  background: var(--pt-bg-2);
  border: 1px solid var(--pt-card-border);
  border-radius: var(--pt-radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  color: var(--pt-text);
  transition: border-color .15s, transform .15s, box-shadow .15s;
  position: relative;
}
.pt-item-card:hover {
  border-color: var(--pt-green);
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px -8px var(--pt-green-glow);
}
.pt-item-card__header {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
}
.pt-item-card__level {
  font-size: 0.68rem;
  letter-spacing: 1px;
  padding: 3px 8px;
  background: var(--pt-green-soft);
  color: var(--pt-green);
  border-radius: 4px;
  font-weight: 700;
}
.pt-item-card__image {
  background: #000;
  border: 1px solid var(--pt-border);
  border-radius: 6px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  overflow: hidden;
}
.pt-item-card__image img {
  max-height: 90px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.pt-item-card__placeholder {
  color: var(--pt-muted);
  font-size: 2rem;
  opacity: 0.4;
}
.pt-item-card__name {
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 10px;
  color: var(--pt-green);
  letter-spacing: 0.3px;
}
.pt-item-card__stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  margin-top: auto;
}
.pt-item-card__stat {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  color: var(--pt-muted);
  border-top: 1px dashed var(--pt-border);
}
.pt-item-card__stat:first-child { border-top: none; }
.pt-item-card__stat strong {
  color: var(--pt-text);
  font-weight: 600;
}

/* ── Item individual (detalhe) ────────────────────────────────── */
.pt-item-detail {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  background: var(--pt-bg-2);
  border: 1px solid var(--pt-card-border);
  border-radius: var(--pt-radius);
  padding: 28px;
  margin-bottom: 32px;
}
.pt-item-detail__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pt-item-detail__image {
  background: #000;
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius);
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pt-item-detail__image img {
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.pt-item-detail__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--pt-green);
  color: var(--pt-bg);
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 1px;
}
.pt-item-detail__body { min-width: 0; }
.pt-item-detail__title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--pt-green);
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}
.pt-item-detail__sub {
  color: var(--pt-muted);
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.pt-item-detail__stats { margin-bottom: 24px; }
.pt-item-detail__stats h2 {
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pt-muted);
  margin-bottom: 12px;
  font-weight: 600;
}
.pt-item-detail__stats table {
  width: 100%;
  border-collapse: collapse;
  background: var(--pt-surface);
  border: 1px solid var(--pt-border);
  border-radius: 6px;
  overflow: hidden;
}
.pt-item-detail__stats th,
.pt-item-detail__stats td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--pt-border);
  font-size: 0.9rem;
}
.pt-item-detail__stats tr:last-child th,
.pt-item-detail__stats tr:last-child td { border-bottom: none; }
.pt-item-detail__stats th {
  color: var(--pt-muted);
  font-weight: 500;
  width: 45%;
}
.pt-item-detail__stats td {
  color: var(--pt-text);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pt-item-detail__hint {
  color: var(--pt-muted);
  font-size: 0.78rem;
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid var(--pt-green);
  border-radius: 4px;
}
.pt-item-detail__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Botões ──────────────────────────────────────────────────── */
.pt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s;
  letter-spacing: 0.3px;
}
.pt-btn--primary {
  background: var(--pt-green);
  color: var(--pt-bg);
  border-color: var(--pt-green);
}
.pt-btn--primary:hover {
  background: var(--pt-green-hover);
  color: var(--pt-bg);
  border-color: var(--pt-green-hover);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px var(--pt-green-glow);
}
.pt-btn--ghost {
  background: transparent;
  color: var(--pt-text);
  border-color: var(--pt-border-strong);
}
.pt-btn--ghost:hover {
  border-color: var(--pt-green);
  color: var(--pt-green);
  text-decoration: none;
}

/* ── Texto SEO (parágrafo com H2 + texto) ────────────────────── */
.pt-seo-text {
  background: var(--pt-bg-2);
  border: 1px solid var(--pt-card-border);
  border-radius: var(--pt-radius);
  padding: 24px 28px;
  margin-top: 40px;
}
.pt-seo-text h2 {
  font-size: 1.1rem;
  margin-bottom: 12px;
  color: var(--pt-text);
}
.pt-seo-text p {
  color: var(--pt-muted);
  margin-bottom: 12px;
  font-size: 0.92rem;
  line-height: 1.7;
}
.pt-seo-text p:last-child { margin-bottom: 0; }
.pt-seo-text strong { color: var(--pt-text); }

.pt-empty {
  padding: 48px;
  text-align: center;
  color: var(--pt-muted);
  background: var(--pt-bg-2);
  border: 1px dashed var(--pt-card-border);
  border-radius: var(--pt-radius);
}

/* ══════════════════════════════════════════════════════════════════
   Home do /itens/ — 3 colunas (Ataque | Defesa | Acessórios)
   Cada coluna: cabeçalho (ícone + título + contagem) e lista vertical
   de subcategorias (uma linha por tipo com nome à esquerda e
   quantidade de itens à direita).
   ══════════════════════════════════════════════════════════════════ */
.pt-itens-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}
.pt-itens-columns.pt-itens-columns--with-essences { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1100px) { .pt-itens-columns.pt-itens-columns--with-essences { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pt-itens-columns.pt-itens-columns--with-essences { grid-template-columns: minmax(0, 1fr); } }

.pt-itens-col {
  display: flex;
  flex-direction: column;
}
.pt-itens-col__header {
  padding-bottom: 14px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--pt-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pt-itens-col__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pt-text);
  margin: 0;
}
.pt-itens-col__icon {
  display: inline-flex;
  color: var(--pt-green);
  width: 22px;
  height: 22px;
}
.pt-itens-col__icon svg { width: 100%; height: 100%; }
.pt-itens-col__meta {
  color: var(--pt-muted);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.pt-itens-col__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pt-itens-col__list li { padding: 0; margin: 0; }
.pt-itens-col__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--pt-bg-2);
  border: 1px solid var(--pt-card-border);
  color: var(--pt-text);
  transition: border-color .15s, background .15s, color .15s, transform .15s, box-shadow .15s;
}
.pt-itens-col__link:hover {
  border-color: var(--pt-green);
  background: var(--pt-green-soft);
  color: var(--pt-green);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px var(--pt-green-glow);
}
.pt-itens-col__name {
  font-size: 0.95rem;
  font-weight: 500;
}
.pt-itens-col__count {
  font-size: 0.75rem;
  color: var(--pt-muted);
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.pt-itens-col__link:hover .pt-itens-col__count { color: var(--pt-green); }

@media (max-width: 900px) {
  .pt-itens-columns { grid-template-columns: 1fr; gap: 28px; }
}

/* Footer vive no chrome.css compartilhado. */

/* ── Responsivo ───────────────────────────────────────────────── */
@media (max-width: 720px) {
  .pt-item-detail {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 20px;
  }
  .pt-item-detail__visual { max-width: 240px; margin: 0 auto; }
  .pt-grid--itens { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .pt-item-card { padding: 10px; }
  .pt-item-card__image { height: 90px; }
  .pt-bloco__header { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ══════════════════════════════════════════════════════════════════
   Wiki-style cards (lista subcategoria + página individual)
   Replicam visualmente o card da wiki Priston Tale oficial:
   fundo preto, borda dourada, cores por tipo de linha.
   ══════════════════════════════════════════════════════════════════ */

.pt-grid--wiki {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.pt-wiki-card {
  display: flex;
  flex-direction: column;
  background: var(--pt-bg-2);
  border: 1px solid var(--pt-card-border);
  border-radius: 8px;
  padding: 12px 10px 14px;
  color: #fff;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.78rem;
  line-height: 1.55;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  position: relative;
}
.pt-wiki-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(63, 185, 80, 0.15);
  border-color: rgba(63, 185, 80, 0.4);
  text-decoration: none;
}
.pt-wiki-card, .pt-wiki-card:hover, .pt-wiki-card *, .pt-wiki-card:hover * {
  text-decoration: none;
}

.pt-wiki-card__header { display: none; } /* LV já aparece como req no corpo */

.pt-wiki-card__image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: 6px 0;
  background: #000;
  border-radius: 6px;
  margin-bottom: 10px;
}
.pt-wiki-card__image--large { min-height: 180px; padding: 16px 0; }
.pt-wiki-card__image img {
  max-width: 90%;
  max-height: 100px;
  object-fit: contain;
  image-rendering: pixelated;
}
.pt-wiki-card__image--large img { max-height: 160px; }
.pt-wiki-card__placeholder {
  color: #444;
  font-size: 2.5rem;
  font-weight: 700;
}

.pt-wiki-card__name {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: #3fb950;
  margin: 0 0 6px;
}
.pt-wiki-card__name--large { font-size: 1.4rem; margin-bottom: 14px; }

.pt-wiki-card__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.pt-wiki-line {
  display: block;
  padding: 1px 0;
  font-size: 0.78rem;
}

/* Cores por tipo — fiel ao card wiki Priston */
.pt-wiki-line--base         { color: #ffffff; }
.pt-wiki-line--req          { color: #D5B346; }
.pt-wiki-line--bonus_header { color: #8a8a8a; }
.pt-wiki-line--bonus        { color: #8a8a8a; }
.pt-wiki-line--adic         { color: #3fb950; }

/* ──────────────────────────────────────────────────────────────────
   Página individual: layout 2 colunas (sidebar + conteúdo).
   ────────────────────────────────────────────────────────────────── */

.pt-item-page {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  align-items: start;
}
.pt-item-page__sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 20px;
}
.pt-item-page__sidebar .pt-btn { width: 100%; text-align: center; }

.pt-adslot {
  background: var(--pt-bg-2);
  border: 1px dashed var(--pt-card-border);
  border-radius: 6px;
  padding: 14px;
  text-align: center;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--muted, #8a8a8a);
}
.pt-adslot__label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  opacity: 0.7;
}
.pt-adslot__body { font-size: 0.85rem; }
.pt-adslot__body small { font-size: 0.72rem; opacity: 0.6; }

.pt-item-page__source {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0;
}
.pt-item-page__source a { color: var(--accent, #3fb950); }

.pt-item-page__banner {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
  transition: transform .15s, box-shadow .15s;
}
.pt-item-page__banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(63, 185, 80, 0.2);
}
.pt-item-page__banner img { width: 100%; height: auto; display: block; }

.pt-item-page__main .pt-wiki-card--large {
  max-width: 340px;
  margin: 0 auto 24px;
}

/* Página de item: colapsa pra coluna única em telas <= 1024px
   (notebooks pequenos, tablets, mobile) — sidebar vai pro final. */
@media (max-width: 1024px) {
  .pt-item-page {
    grid-template-columns: 1fr;
  }
  .pt-item-page__sidebar {
    position: static;
    order: 2;
  }
  .pt-item-page__main { order: 1; }
}
@media (max-width: 760px) {
  .pt-grid--wiki { grid-template-columns: 1fr; gap: 14px; }
  .pt-wiki-card { font-size: 0.82rem; }
}