/* wgf-creature-families.css - the /creature-families/ + /creature-family/ page family.
   Owner: creature_family_app.py / creature_family_render.py (linked through extra_css).

   Why this sheet exists: the family pages used .wgf-facts-grid and .wgf-lore-text, which are
   declared in sheets those pages never link (wgf-farming.css / wgf-professions.css / nowhere),
   so the fact ledger rendered as unstyled divs. The classes below are namespaced .wgf-cf-*
   so no other page family can inherit them by accident.

   Colour: tokens only (static/css/_tokens.css). Slate panels, bronze rules, gold headings,
   parchment text - no green chrome, no gradients, no glows. Type: FrizQuadrata, the client's
   own face, declared once in _tokens.css and linked on every page.
   -------------------------------------------------------------------------------------- */

/* --- identity header: the client icon ring beside the family name --------------------- */
.wgf-cf-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 0.75rem;
}
.wgf-cf-frame { flex: 0 0 auto; }
.wgf-cf-head__text { min-width: 0; }
/* The client's own face on the family name, with the site display face behind it. */
.wgf-cf-head .wgf-seo-h1 {
  font-family: 'FrizQuadrata', var(--font-display, 'Cinzel', serif);
  margin-bottom: 0.15rem;
}
.wgf-cf-head .wgf-seo-eyebrow { margin: 0; }
.wgf-cf-head__spec {
  display: block;
  font-size: 0.85rem;
  color: var(--wgf-muted, #b3a88f);
  margin-top: 0.15rem;
}

/* --- hub art strip: a real loading screen with its zone credit ------------------------ */
.wgf-cf-art {
  margin: 0 0 1rem;
  border: 1px solid var(--wgf-metal, #6e5a2a);
  background: var(--wgf-well, #08090c);
}
.wgf-cf-art__img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: center 38%;
}
.wgf-cf-art__credit {
  font-size: 0.72rem;
  color: var(--wgf-neutral-text, #9b9384);
  padding: 0.35rem 0.6rem;
  border-top: 1px solid var(--wgf-metal-soft, #3a3120);
}

/* --- fact ledger --------------------------------------------------------------------- */
.wgf-cf-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}
.wgf-cf-fact {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.65rem;
  background: var(--wgf-panel-1, #14161c);
  border: 1px solid var(--wgf-border-neutral-soft, #202229);
  border-left: 2px solid var(--wgf-gold-accent, #b7912f);
}
.wgf-cf-fact__k {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wgf-neutral-text, #9b9384);
}
.wgf-cf-fact__v {
  font-size: 0.95rem;
  color: var(--wgf-text, #f4ecd8);
}

/* --- pet abilities ------------------------------------------------------------------- */
.wgf-cf-abilities {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.35rem;
}
.wgf-cf-ability {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  background: var(--wgf-panel-1, #14161c);
  border: 1px solid var(--wgf-border-neutral-soft, #202229);
}
.wgf-cf-ability__icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid var(--wgf-metal, #6e5a2a);
  object-fit: cover;
}
.wgf-cf-ability__name {
  color: var(--wgf-gold-link, #ffe375);
  text-decoration: none;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wgf-cf-ability__name:hover,
.wgf-cf-ability__name:focus-visible { text-decoration: underline; }

/* --- lore paragraph ------------------------------------------------------------------ */
.wgf-cf-lore {
  color: var(--wgf-text, #f4ecd8);
  margin: 0.6rem 0 0;
  max-width: 68ch;
}

/* --- roster classification groups ----------------------------------------------------- */
/* The roster is grouped by the classification the client records carry (rare / elite /
   standard) so a hunter can find the tame they came for. Headings are a bronze rule, not a
   panel: the tiles below them are already framed by .wgf-ag-card. */
.wgf-cf-group {
  font-family: 'FrizQuadrata', var(--font-display, 'Cinzel', serif);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wgf-gold-accent, #b7912f);
  margin: 1rem 0 0.4rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--wgf-metal-soft, #3a3120);
}
.wgf-cf-group__count {
  font-family: inherit;
  color: var(--wgf-neutral-text, #9b9384);
  letter-spacing: 0.02em;
}

/* --- hub tile roster line ------------------------------------------------------------- */
/* The measured creature count under a hub tile's specialisation. Dimmer than the spec line
   so the tile still reads name-first. */
.wgf-cf-tile__roster {
  font-size: 0.72rem;
  color: var(--wgf-neutral-text, #9b9384);
}

@media (max-width: 640px) {
  .wgf-cf-art__img { height: 130px; }
  .wgf-cf-head { gap: 0.6rem; }
}