/* -------------------------------------------------------------------------
   Halaman statis per hero (/hero/<slug>/) dan per item (/item/<slug>/).

   Sengaja kecil: sebagian besar penampilan halaman itu memakai kelas yang
   sudah ada (`.panel`, `.counter-row`, `.stat-tiles`, `.item-mini`,
   `.item-block`, `.guide-*`) supaya tidak ada dua gaya untuk satu komponen.
   Yang ditambahkan di sini hanya potongan yang belum pernah ada: tabel
   bracket, baris build, tanggal data, dan sakelar dua bahasa untuk isi
   panduan item (teksnya tersimpan dalam dua bahasa sekaligus).
   ------------------------------------------------------------------------- */

.ent-portrait {
  display: block;
  width: 196px;
  max-width: 100%;
  height: auto;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.ent-portrait--item {
  width: 128px;
}

.ent-pills {
  margin-top: 14px;
}

.ent-table {
  width: 100%;
  margin-top: 6px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.ent-table th,
.ent-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
  text-align: left;
}

.ent-table thead th {
  padding-top: 0;
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ent-table tbody th {
  color: var(--text-soft);
}

.ent-table th:not(:first-child),
.ent-table td:not(:first-child) {
  text-align: right;
}

.ent-table tbody tr:last-child th,
.ent-table tbody tr:last-child td {
  border-bottom: 0;
}

.ent-build {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.ent-build:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ent-build a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}

.ent-build a:hover,
.ent-build a:focus-visible {
  color: var(--amber);
  border-color: var(--amber);
}

.ent-dim {
  color: var(--muted);
  font-size: 0.82rem;
}

.ent-meta {
  margin-top: 20px;
  color: var(--dim);
  font-size: 0.8rem;
}

.entity-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.entity-index {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.entity-index summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.entity-index summary:hover {
  color: var(--text-soft);
}

.entity-index ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.entity-index a {
  color: var(--text-soft);
  font-size: 0.88rem;
  text-decoration: none;
}

.entity-index a:hover,
.entity-index a:focus-visible {
  color: var(--amber);
}

/* /rank/: delapan medali sebagai kartu kecil, urut dari Herald ke Immortal. */
.rank-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.rank-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.rank-item img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.rank-name {
  color: var(--text);
  font-weight: 600;
}

.rank-sub {
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

/* Teks penjelas + FAQ statis di /heroes/ dan /item/. Bagian ini ada supaya
   dua halaman itu punya isi yang terbaca tanpa JavaScript, bukan hanya
   "Memuat roster…". */
.seo-guide {
  margin-top: 28px;
}

.seo-guide p {
  max-width: 78ch;
  margin: 10px 0 0;
  color: var(--text-soft);
  line-height: 1.62;
}

.seo-guide-example {
  font-size: 0.86rem;
}

.seo-guide-example a {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 162, 90, 0.35);
}

.seo-guide-example a:hover,
.seo-guide-example a:focus-visible {
  border-bottom-color: var(--amber);
}

.seo-faq {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.seo-faq summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
}

.seo-faq summary:hover,
.seo-faq summary:focus-visible {
  color: var(--amber);
}

.seo-faq p {
  margin-top: 8px;
}

/* Item: blok yang bukan lagi di dalam `.item-detail` tetap butuh jarak. */
.item-page > .item-block {
  margin-top: 18px;
}

/*
 * Isi panduan item tersimpan dalam dua bahasa sekaligus (data-nya memang
 * begitu), sedangkan label UI berganti lewat i18n. Menyembunyikan salah satu
 * blok dengan CSS berarti teks aslinya tetap ada di HTML untuk mesin pencari,
 * dan pembaca tanpa JavaScript tetap melihat versi Indonesia.
 */
html[lang='id'] .ent-en {
  display: none;
}

html[lang='en'] .ent-id {
  display: none;
}

@media (max-width: 640px) {
  .ent-portrait {
    width: 148px;
  }

  .ent-table th,
  .ent-table td {
    padding: 8px 6px;
  }
}