/* v7.214 - public listing pages: job detail extras, ZamaSwap hub / item, shop products hub / product.
   Light public identity (style.css tokens). Everything is scoped with .pl- so nothing here can leak into the signed-in app
   (gotcha 34: style.css re-declares rules late and unscoped - check computed styles in a browser, not just this file). */

.pl-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  min-width: 0; margin: 0 0 1rem;
  font-size: var(--t-sm); color: var(--c-ink-soft);
}
.pl-public .public-hero .pl-crumbs { justify-content: center; margin-bottom: 1.25rem; }
.pl-public .public-hero h1 { text-wrap: balance; }   /* no one-word last line ("you.") in the hub headings */
.pl-crumbs a { color: var(--c-ink-soft); text-decoration: none; }
.pl-crumbs a:hover { color: var(--c-primary-strong); text-decoration: underline; }
.pl-crumb-here {
  min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--c-ink);
}

.pl-note {
  margin: 0 0 1rem; padding: .7rem 1rem;
  border-radius: var(--r-3);
  background: var(--c-primary-soft); color: var(--c-primary-strong);
  font-size: var(--t-sm); font-weight: 600;
}
.pl-note--sold { background: var(--c-surface-2); color: var(--c-ink-2); }

.pl-related { margin-top: 2.5rem; }
.pl-related h2 { font-size: 1.2rem; margin-bottom: 1rem; }

/* category chips (hubs) */
.pl-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.pl-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .85rem; border-radius: var(--r-pill);
  border: 1.5px solid var(--c-line); background: var(--c-surface);
  color: var(--c-ink-2); font-size: var(--t-sm); font-weight: 600; text-decoration: none;
}
.pl-chip:hover { border-color: var(--c-primary); color: var(--c-primary-strong); }
.pl-chip[aria-current="page"] { background: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-primary-strong); }
.pl-chip small { color: var(--c-ink-soft); font-weight: 600; }

/* Small grey text on the light surface: style.css's --c-muted (#7a8a7d) is only 3.6:1 on white (WCAG AA needs 4.5:1), so the meta lines of the
   job / item / product cards use --c-ink-soft (5.7:1). This also fixes the existing /browse job cards. */
.public-job-card .pjc-meta, .pjd-card .pjc-meta, .public-job-card .pjc-poster { color: var(--c-ink-soft); }
/* the text link inside the green call-to-action box ("Already a member? Sign in") was the .success green on a light green fill */
.pjd-cta-banner a:not(.btn), .cta-box a:not(.btn) { color: var(--c-primary-strong); font-weight: 600; text-decoration: underline; }

/* cards (hubs) - the base look is .public-job-card; these add price / stock lines */
.pl-card .pl-price { font-size: 1.1rem; font-weight: 800; color: var(--c-primary-strong); }
.pl-card .pl-shop { font-size: var(--t-xs); color: var(--c-ink-soft); }
.pl-card .pl-stock { font-size: var(--t-xs); font-weight: 700; color: var(--c-ink-soft); }
.pl-card h3 { overflow-wrap: anywhere; }

/* detail pages */
.pl-detail-price { margin: .25rem 0 1rem; font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 800; color: var(--c-primary-strong); }
.pl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin: 1rem 0 1.25rem; padding: 0; list-style: none; }
.pl-facts li { padding: .6rem .8rem; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-surface-2); min-width: 0; }
.pl-facts b { display: block; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-soft); }
.pl-facts span { display: block; overflow-wrap: anywhere; color: var(--c-ink); font-weight: 600; }
.pl-hero-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; background: var(--c-surface-2); }
.pl-detail h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.pl-cta-row { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1rem; }
.pl-fine { margin-top: .75rem; font-size: var(--t-xs); color: var(--c-ink-soft); }
.pl-empty { padding: 3rem 1rem; text-align: center; color: var(--c-ink-soft); grid-column: 1 / -1; }