/* /pivot-jobs/ hub. Builds on about.css sections (1080px container, 26px
 * H2s) and tokens.css. Chips and rows use the same subtle surfaces and
 * magenta accent as the product cards. */

.pj-updated { font-size: 15px !important; color: var(--muted) !important; }

/* Hiring now: compact company buttons that also filter the list */
.pj-companies {
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-3);
}
.pj-company {
  width: 100%; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-raised); color: var(--text);
  border: 1px solid var(--border-subtle); border-radius: 12px;
  font: inherit; transition: border-color 120ms ease;
}
.pj-company:hover, .pj-company[aria-pressed="true"] { border-color: var(--magenta); }
.pj-company__name { font-size: 15px; font-weight: 600; }
.pj-company__meta { font-size: 13px; color: var(--muted); }

/* Collapsed by JS to the top 12; without JS every company shows. */
.pj-companies--collapsed li:nth-child(n+13) { display: none; }
.pj-more {
  margin-top: var(--sp-4); cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
  background: none; border: 0; padding: 0; color: var(--magenta);
}
.pj-more:hover { text-decoration: underline; }

/* Filters */
.pj-filters { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.pj-filters__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pj-chip {
  cursor: pointer; font: inherit; font-size: 14px; line-height: 1;
  padding: 9px 14px; border-radius: 999px;
  background: transparent; color: var(--text);
  border: 1px solid var(--border-default);
  transition: border-color 120ms ease, background 120ms ease;
}
.pj-chip span { color: var(--muted); margin-left: 2px; }
.pj-chip:hover { border-color: var(--magenta); }
.pj-chip[aria-pressed="true"] { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.pj-chip[aria-pressed="true"] span { color: rgba(255, 255, 255, 0.8); }
.pj-chip:focus-visible, .pj-company:focus-visible, .pj-job a:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }

.pj-count { font-size: 14px !important; color: var(--muted) !important; margin-bottom: var(--sp-3) !important; }

/* Job rows */
.pj-jobs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-subtle); }
.pj-job {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--border-subtle);
}
.pj-job[hidden] { display: none; }
.pj-job__main { min-width: 0; }
.about-section a.pj-job__title { color: var(--text); font-size: 16px; font-weight: 600; line-height: 1.35; }
.about-section a.pj-job__title:hover { color: var(--magenta); text-decoration: none; }
.about-section .pj-job__meta { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); max-width: none; }
.pj-job__company { color: rgba(245, 245, 245, 0.8); }
.pj-job__fn { font-size: 12px; color: var(--muted); white-space: nowrap; }
.about-section a.pj-job__tailor {
  display: inline-flex; align-items: center; height: 40px; padding: 0 var(--sp-4);
  border-radius: 8px; background: var(--magenta); color: #fff;
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.about-section a.pj-job__tailor:hover { background: #d2197d; text-decoration: none; }

.pj-empty { color: var(--muted) !important; padding: var(--sp-5) 0; }
.about-section .pj-source { margin-top: var(--sp-5); font-size: 14px; color: var(--muted); }

@media (max-width: 640px) {
  .pj-job { grid-template-columns: 1fr; gap: var(--sp-2); }
  .pj-job__fn { display: none; }
  .about-section a.pj-job__tailor { justify-self: start; height: 44px; }
  .pj-companies { grid-template-columns: 1fr 1fr; }
}

/* Breadcrumb above list pages */
.pj-crumbs-wrap { width: 100%; box-sizing: border-box; max-width: 1080px; margin: 0 auto; padding: var(--sp-5) var(--sp-5) 0; }
.pj-crumbs { font-size: 14px; color: var(--muted); text-align: left; }
.pj-crumbs a { color: var(--muted); text-decoration: none; }
.pj-crumbs a:hover { color: var(--magenta); }
.pj-crumbs span[aria-current] { color: var(--text); }
.pj-crumbs-wrap + .about-section--lead { padding-top: var(--sp-5); }

.about-section .pj-back { margin-top: var(--sp-5); font-size: 15px; }

/* Browse block: internal links across the city and role-type pages */
.pj-browse__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-6); margin-top: var(--sp-4); }
.pj-links h3 { margin: 0 0 var(--sp-3); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--magenta); }
.pj-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.pj-links li { font-size: 15px; line-height: 1.4; color: var(--text); }
.about-section .pj-links a { color: var(--text); }
.about-section .pj-links a:hover { color: var(--magenta); text-decoration: none; }
.pj-links span[aria-current] { color: var(--magenta); }
.pj-links__n { color: var(--muted); font-size: 13px; }

/* Weekly email sign-up */
.pj-form { display: grid; grid-template-columns: minmax(220px, 2fr) 1fr 1fr auto; gap: var(--sp-3); align-items: end; margin-top: var(--sp-4); max-width: 1000px; }
.pj-form__field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; }
.pj-form input[type="email"], .pj-form select {
  height: 48px; padding: 0 var(--sp-3); border-radius: 8px; min-width: 0;
  background: var(--surface-raised); color: var(--text); border: 1px solid var(--border-default);
  font: inherit; font-size: 15px;
}
.pj-form input[type="email"]:focus, .pj-form select:focus { outline: 2px solid var(--magenta); outline-offset: 1px; border-color: transparent; }
.pj-form select option { background: #1A1A1A; }
.pj-form__btn {
  height: 48px; padding: 0 var(--sp-5); border: 0; border-radius: 8px; cursor: pointer;
  background: var(--magenta); color: #fff; font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap;
}
.pj-form__btn:hover { background: #d2197d; }
.pj-form__btn:disabled { opacity: 0.6; cursor: wait; }
.pj-form__btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.pj-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pj-form .cf-turnstile { grid-column: 1 / -1; }
.about-section .pj-form__msg { grid-column: 1 / -1; margin: 0; font-size: 14px; color: #ff8fb8; }
.about-section .pj-form__done { grid-column: 1 / -1; margin: 0; font-size: 16px; color: var(--text); }
@media (max-width: 760px) {
  .pj-form { grid-template-columns: 1fr 1fr; }
  .pj-form__field--email, .pj-form__btn { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .pj-form { grid-template-columns: 1fr; }
}