/* wgf-farm-nodes.css - the /farm/ family only (hub + material pages).
 *
 * Owned by farming_node_app / farming_node_render; linked through their extra_css.
 * Every colour is a palette token from static/css/_tokens.css (docs/ui-ux/17-blizzard-palette.md):
 * slate panels, bronze rules, gold headings, parchment text. No hex, no gradient, no glow,
 * no green - the one exception the palette allows is the uncommon-quality token, and this
 * sheet does not use it either. Frames and textures come from wgf-blizzard-textures.css;
 * tiles come from wgf-collection-journal.css. Nothing here restyles a shared class.
 */

/* ── Hero: framed icon beside the title ─────────────────────────────────────── */
.wgf-farm-hero__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.wgf-farm-hero__frame {
  flex: 0 0 auto;
}

.wgf-farm-hero__text {
  flex: 1 1 320px;
  min-width: 0;
}

.wgf-farm-hero__h1 {
  margin: 2px 0 6px;
}

/* Type colouring: herb and ore are the two gathering families the catalog covers, and
   the label is the only place the distinction is worth a colour. Bronze trim and muted
   gold are both palette tokens - this is type, not item quality, so no q- token here. */
.wgf-farm-hero__eyebrow[data-farm-type="herb"] { color: var(--wgf-gold-muted); }
.wgf-farm-hero__eyebrow[data-farm-type="ore"]  { color: var(--wgf-gold-accent); }

/* ── Hub art band ───────────────────────────────────────────────────────────── */
.wgf-farm-strip {
  margin: 0 0 20px;
  border: 1px solid var(--wgf-border);
  background: var(--wgf-panel-1);
  overflow: hidden;
}

.wgf-farm-strip img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: center 38%;
}

.wgf-farm-strip__cap {
  margin: 0;
  padding: 7px 12px;
  border-top: 1px solid var(--wgf-border);
  color: var(--wgf-neutral-text);
  font-size: 12px;
}

@media (max-width: 700px) {
  .wgf-farm-strip img { height: 130px; }
}

/* ── Zone block link ────────────────────────────────────────────────────────
 * The zone plate itself (.wgf-farm-zone / __name / __notes) is styled by
 * assets/wgf-farming.css under .wgf-farm-page - one home, not two. Only the link this
 * lane added is new, and it is scoped the same way so the two sheets cannot fight. */
.wgf-farm-page .wgf-farm-zone__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--wgf-border-strong);
}

.wgf-farm-page .wgf-farm-zone__link:hover,
.wgf-farm-page .wgf-farm-zone__link:focus-visible {
  border-bottom-color: var(--wgf-gold-primary);
}

/* ── Zone map ───────────────────────────────────────────────────────────────── */
.wgf-farm-page .wgf-farm-map {
  margin: 0;
  border: 1px solid var(--wgf-metal);
  background: var(--wgf-bg-2);
  padding: 6px;
}

.wgf-farm-page .wgf-farm-map img {
  display: block;
  width: 100%;
  height: auto;
}

.wgf-farm-page .wgf-farm-map .rd-section-caption {
  margin: 8px 2px 2px;
  color: var(--wgf-neutral-text);
  font-size: 12px;
}

/* ── Sibling-material chips ─────────────────────────────────────────────────── */
.wgf-farm-page .wgf-farm-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  margin: 0 8px 8px 0;
  border: 1px solid var(--wgf-border);
  background: var(--wgf-panel-2);
  color: var(--wgf-text);
  text-decoration: none;
  font-size: 14px;
}

.wgf-farm-page .wgf-farm-chip:hover,
.wgf-farm-page .wgf-farm-chip:focus-visible {
  border-color: var(--wgf-gold-accent);
  color: var(--wgf-gold-primary);
}

/* ── Hub section intros ─────────────────────────────────────────────────────── */
.wgf-farm-intro {
  margin: 0 0 14px;
  color: var(--wgf-text);
  max-width: 68ch;
}

.wgf-farm-lede {
  margin: 0 0 10px;
  color: var(--wgf-muted);
  max-width: 72ch;
}