/* Biomes section (/biomes/ index + biome detail pages). Scoped under body.section-biomes.
   Reuses the wiki tokens from ../wiki.css - contract: apps/hub/wiki/DESIGN.md. Prefix: bi- */

/* ---- index: biome cards ---- */

body.section-biomes .bi-index-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
body.section-biomes .bi-index-card { padding: 18px 18px 16px; }
body.section-biomes .bi-index-card h3 { margin: 10px 0 4px; }
body.section-biomes .bi-index-card p { margin: 0; color: var(--ink-faint); font-size: .85rem; }

/* Small color dot per biome, reusing the same --biome-<slug> tokens ctx.biome_chip() reads - the card
   itself is the click target (an <a>), so this is a plain decorative span, never a nested link. */
body.section-biomes .bi-swatch {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  background: var(--bi-accent, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bi-accent, var(--accent)) 20%, transparent);
}

/* ---- detail: hero (a colored top rule keyed to the biome's own token) ---- */

body.section-biomes .bi-hero {
  border-top: 3px solid var(--bi-accent, var(--accent));
  padding-top: 22px; border-radius: 3px;
}
body.section-biomes .bi-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
body.section-biomes .bi-hero > p { max-width: 68ch; }
body.section-biomes .bi-hero .wk-btn { margin-top: 6px; }

/* ---- detail: creature grid ---- */

body.section-biomes .bi-creature-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
body.section-biomes .bi-creature-card {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; position: relative;
}
body.section-biomes .bi-creature-card .wk-tile,
body.section-biomes .bi-creature-card .wk-tile-fallback { width: 40px; height: 40px; font-size: .95rem; flex: 0 0 auto; }
body.section-biomes .bi-creature-name { font-size: .87rem; color: var(--ink-dim); line-height: 1.3; }
body.section-biomes .bi-boss-badge {
  margin-left: auto; flex: 0 0 auto; font: 700 .66rem/1 var(--font-body); letter-spacing: .04em;
  text-transform: uppercase; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 12%, transparent); padding: 3px 7px; border-radius: 999px;
}

/* ---- detail: events table + restricted pieces ---- */

body.section-biomes .bi-events-table { max-width: 620px; }
body.section-biomes .bi-piece-grid { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- responsive ---- */

@media (max-width: 720px) {
  body.section-biomes .bi-creature-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  body.section-biomes .bi-index-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}