/* Concrete Jungle Radio — shared styles for the two new pages
   (Job Board: jobs.html · Solutions: solutions.html)
   ==================================================================
   This file is SHARED by both new pages. It is loaded AFTER the house
   stylesheet (styles.css) and reuses the house classes wherever they
   exist (.block, .wrap, .eyebrow, .station-form, .btn, .card, .tag,
   .grid, .filters) — it only adds what the new pages need on top.
   House tokens (--bg, --ink, --amber, --line, --serif, --sans) come
   from styles.css; do not redefine them here.

   SECTIONS
     1. Job board — category chips (extends .filters)
     2. Job board — listing cards
     3. Job board — empty state / no-results note
     4. Job board — form extras (character counter, field notes)
     5. (reserved) Solutions page — the solutions worker appends its
        styles BELOW this line, under its own numbered section header.
        Do not edit sections 1–4 when appending.
   ================================================================== */

/* ---------- 1. Job board — category chips ---------- */
/* Same look as the merch .filters buttons; the pressed state is the
   house amber. Chips are <button type="button"> with aria-pressed. */
.job-filters { margin-bottom: 8px; }
.job-filters button[aria-pressed="true"] {
  background: var(--amber);
  color: #171106;
  border-color: var(--amber);
}

/* ---------- 2. Job board — listing cards ---------- */
/* A listing is a house .card with job-specific rows. Keep the card
   readable at one glance: title, org, then the meta line. */
.job-card { gap: 8px; }
.job-card .job-org {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.job-card .job-meta {
  font-size: 14px;
  color: var(--ink-mute);
  margin: 0;
}
.job-card .job-meta strong { color: var(--ink-soft); }
.job-card .job-salary {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--amber);
  margin: 0;
}
.job-card .job-apply { margin-top: auto; padding-top: 10px; font-weight: 700; }
.job-card .job-source { font-size: 13.5px; color: var(--ink-mute); margin: 0; }

/* ---------- 3. Job board — empty state / no-results note ---------- */
/* The honest empty state: used when the board holds no listings at
   all, and the no-results note when a filter matches nothing. Both
   reuse the .player-box frame from the community board pattern. */
.jobs-empty { text-align: center; padding: 38px 22px; }
.jobs-empty .jobs-empty-title {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ink);
  margin: 0 0 8px;
}
.jobs-empty p { margin: 0; }
.jobs-count { font-size: 14.5px; color: var(--ink-mute); margin: 0 0 18px; }

/* ---------- 4. Job board — form extras ---------- */
/* Character counter under the description box; field notes stay
   small and muted, house style. */
.char-count { font-size: 13.5px; color: var(--ink-mute); margin: -6px 0 0; }
.field-note { font-size: 14px; color: var(--ink-mute); font-weight: 400; }

/* ==================================================================
   5. (reserved) Solutions page styles — appended by the solutions
      worker. Keep the same pattern: one numbered section header per
      concern, house tokens only, no redefined variables.
   ================================================================== */
/* ============================================================
   SOLUTIONS PAGE — extra styles for solutions.html
   (Solutions Provider / Umbrella Station page)
   APPEND VERBATIM into jobs-solutions.css (one section, after the
   job-board styles). Uses only house variables already defined in
   styles.css (--amber, --amber-hi, --amber-deep, --line-soft,
   --ink, --serif). Nothing here redefines a house class.
   ============================================================ */

/* Founding-partners band — the honest "new offering" frame at the
   top of solutions.html. A bordered callout, not a hero. */
.sol-founding {
  border: 1px solid var(--amber-deep);
  border-radius: 14px;
  padding: 22px 24px;
  background: rgba(233, 168, 60, 0.06);
}
.sol-founding h2 { margin-top: 6px; }
.sol-founding p:last-child { margin-bottom: 0; }

/* Onboarding flow — five numbered steps, one plain sentence each.
   Numbered with a counter so the order reads without the digits
   being typed into the copy. Falls back to a plain stacked list. */
.sol-steps {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  counter-reset: sol-step;
  display: grid;
  gap: 14px;
}
.sol-steps li {
  counter-increment: sol-step;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 16px;
  align-items: start;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 16px 18px;
}
.sol-steps li::before {
  content: counter(sol-step);
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--amber-deep);
  color: var(--amber-hi);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sol-steps h3 { margin: 0; }
.sol-steps p { margin: 0; }

/* DIY vs done-for-you — two cards side by side, one column on
   narrow screens. The done-for-you card gets the amber edge so the
   umbrella reads as the page's offer, not the equal twin. */
.sol-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 20px;
}
.sol-compare .card:last-child {
  border-color: var(--amber-deep);
}
@media (max-width: 600px) {
  .sol-compare { grid-template-columns: 1fr; }
  .sol-steps li { grid-template-columns: 36px 1fr; }
  .sol-steps li::before { width: 36px; height: 36px; font-size: 17px; }
}