/*
  src/styles/industry.css
  ------------------------------------------------------------------
  Styles owned by the industry-pages agent (Phase 5): the breadcrumb
  trail (new to the site — no earlier phase needed one), the
  "What this covers" / "Before you hire" lists on an industry page, and
  the open-seat notice. Everything else an industry or member page needs
  (`.wrap`, `.page-head-center`, `.page-h1-md`, `.split`, `.prose`,
  `.sidecard`, `.sec-head`, `.chip`/`.chipwrap`, `.btn*`) already exists in
  base.css/layout.css and is reused as-is — see those files' own headers.
  The member-card markup a "Who holds this seat" box reuses
  (`.cards`/`.card`/`.tag`/`.av`/etc.) is directory.css's; industry.mjs
  links that stylesheet itself the same way directory.mjs does (see that
  file's own "Why inline?" comment) rather than duplicating any of it here.

  No literal colour, radius or spacing value below — every declaration
  reads from src/styles/tokens.css, per design-system's "one source of
  truth" rule.
  ------------------------------------------------------------------
*/

/* ==========================================================
   1. BREADCRUMBS
   ========================================================== */
.crumbs {
  margin-bottom: var(--space-10);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-family: var(--font-heading-alt);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

.crumbs li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.crumbs li:not(:first-child)::before {
  content: "/";
  color: var(--text-muted);
  opacity: 0.6;
}

.crumbs a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.crumbs a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.crumbs li[aria-current="page"] {
  color: var(--text-secondary);
}

/* ==========================================================
   2. INDUSTRY PAGE — "What this covers" / "Before you hire"
   ========================================================== */
.covers-list,
.ask-list {
  margin: 0 0 var(--space-10);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-4);
}

.covers-list li,
.ask-list li {
  position: relative;
  padding-left: var(--space-10);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.covers-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: var(--r-circle);
  background: var(--accent);
}

/* "Before you hire" is a checklist of questions, not a plain feature
   list — a distinct mark (a question-adjacent check glyph, not a dot)
   signals that these are the earn-the-page questions the brief calls
   out, not more of the same "what this covers" bullets. */
.ask-list li::before {
  content: "?";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--r-circle);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-heading-alt);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  display: grid;
  place-items: center;
  line-height: 1;
}

/* ==========================================================
   3. "WHO HOLDS THIS SEAT" — member card + note, or the open-seat box
   ========================================================== */
.seat-card {
  margin: 0 0 var(--space-8);
}

/* A single card inside the narrower sidecard column, not the wide
   directory grid it's normally laid out in — force one column so it
   never tries to squeeze a second, non-existent card beside it. */
.seat-card.cards {
  grid-template-columns: 1fr;
}

.seat-card .card:hover {
  transform: none;
}

.seat-note {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: 0;
}

.seat-open {
  background: var(--surface-alt);
  border: 1.5px dashed var(--border);
  border-radius: var(--r-md);
  padding: var(--space-9);
}

.seat-open-kicker {
  font-family: var(--font-heading-alt);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--highlight-text);
  margin: 0 0 var(--space-3);
}

.seat-open h3 {
  font-size: 1.05rem;
  margin-bottom: var(--space-4);
}

.seat-open p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: 0;
}

.seat-open a {
  color: var(--accent);
}

/* ==========================================================
   4. PROSE LISTS SHARED WITH member.mjs
   (none currently — member.mjs's body is entirely paragraphs/dl, styled
   by .prose/.sidecard already; this section intentionally left as a
   marker for the next list this stylesheet needs to own)
   ========================================================== */