/* ============================================================
   JOB LISTINGS PAGE
   Loaded on the listings template, search and job archives.
   Depends on home.css for .nrh-hero-search and .nrh-hero-type,
   which the filter bar reuses deliberately: the control a
   visitor learned on the homepage behaves identically here.
   ============================================================ */

/* ---- head ---------------------------------------------------- */
.nrh-jobs-head { margin: 4px 0 20px; }
.nrh-jobs-head h1 {
  font-size: clamp(26px, 3.6vw, 36px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
}
.nrh-jobs-intro {
  max-width: 68ch;
  margin-top: 8px;
  font-size: 16.5px;
  color: var(--nrh-ink-muted);
}
.nrh-jobs-intro p:last-child { margin-bottom: 0; }

/* ---- filter bar ---------------------------------------------
   Navy panel so the white search card reads the same as it does
   in the homepage hero. Without it the card would float on the
   page background with nothing to sit against.
   ------------------------------------------------------------- */
.nrh-jobs-filters {
  padding: 18px 20px 20px;
  margin-bottom: 22px;
  background: linear-gradient(135deg, var(--nrh-primary) 0%, var(--nrh-secondary) 100%);
  border-radius: var(--nrh-radius-lg);
}
.nrh-jobs-filters .nrh-hero-search { box-shadow: 0 14px 34px -22px rgba(3, 20, 51, .6); }
.nrh-jobs-types { margin-top: 12px; }

/* ---- active filter chips ------------------------------------- */
.nrh-jobs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.2);
}
.nrh-jobs-chips-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.nrh-jobs-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px 6px 13px;
  background: #fff;
  border-radius: var(--nrh-radius-pill);
  color: var(--nrh-primary);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.nrh-jobs-chip:hover { background: var(--nrh-surface-alt); color: var(--nrh-primary); text-decoration: none; }
.nrh-jobs-chip-x { font-size: 16px; line-height: 1; color: var(--nrh-ink-soft); }
.nrh-jobs-chip:hover .nrh-jobs-chip-x { color: #b91c1c; }
.nrh-jobs-clear {
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nrh-jobs-clear:hover { color: #fff; }

/* ---- results bar --------------------------------------------- */
.nrh-shell--jobs { align-items: start; }
.nrh-jobs-main { min-width: 0; }

.nrh-jobs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--nrh-line);
}
.nrh-jobs-count {
  margin: 0;
  font-size: 16px;
  color: var(--nrh-ink-muted);
}
.nrh-jobs-count strong { color: var(--nrh-ink); font-weight: 800; }

.nrh-jobs-sort { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.nrh-jobs-sort-label {
  margin-right: 3px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nrh-ink-faint);
}
.nrh-jobs-sort-opt {
  padding: 5px 11px;
  border-radius: var(--nrh-radius-pill);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--nrh-ink-muted);
  text-decoration: none;
}
.nrh-jobs-sort-opt:hover { background: var(--nrh-surface-alt); color: var(--nrh-secondary); text-decoration: none; }
.nrh-jobs-sort-opt.is-active {
  background: var(--nrh-primary);
  color: #fff;
}

/* ---- the listing card ---------------------------------------
   A row, not a tile: at this width a grid of tiles would truncate
   the long NGO job titles this site is full of.
   ------------------------------------------------------------- */
.nrh-jobs-list { display: flex; flex-direction: column; gap: 12px; }

.nrh-listing {
  display: grid;
  grid-template-columns: var(--nrh-logo-size, 52px) minmax(0, 1fr) auto;
  gap: 16px;
  padding: 18px 20px;
  background: var(--nrh-surface);
  border: 1px solid var(--nrh-line);
  border-radius: var(--nrh-radius-lg);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.nrh-listing:hover {
  border-color: #c3d4ee;
  box-shadow: 0 14px 30px -20px rgba(11, 61, 145, .4);
  transform: translateY(-1px);
}
.nrh-listing--featured {
  border-color: #bfe3cd;
  background: linear-gradient(180deg, #f4fdf7 0%, var(--nrh-surface) 78px);
}

.nrh-listing-logo { --nrh-logo-size: 52px; }
.nrh-listing-body { min-width: 0; }

.nrh-listing-flag {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 9px;
  background: var(--nrh-apply-ink);
  border-radius: var(--nrh-radius-pill);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.nrh-listing-title {
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.01em;
  margin: 0;
}
.nrh-listing-title a { color: var(--nrh-ink); text-decoration: none; }
.nrh-listing-title a:hover { color: var(--nrh-secondary); text-decoration: underline; text-underline-offset: 2px; }

.nrh-listing-company {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin: 5px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--nrh-ink-body);
}
.nrh-listing-verified {
  padding: 1px 8px;
  background: #e7f8ee;
  border: 1px solid #bfe3cd;
  border-radius: var(--nrh-radius-pill);
  color: #15803d;
  font-size: 12px;
  font-weight: 700;
}

.nrh-listing-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  color: var(--nrh-ink-soft);
}
.nrh-listing-meta li { display: flex; align-items: center; }
.nrh-listing-meta li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  margin-right: 14px;
  border-radius: 50%;
  background: var(--nrh-ink-faint);
}
.nrh-listing-cats {
  margin: 7px 0 0;
  font-size: 13.5px;
  color: var(--nrh-ink-faint);
}

/* Top-aligned, not centred: the deadline should sit on the same line as
   the title, and a featured card's flag would otherwise push it out of
   alignment with every unflagged card beside it. */
.nrh-listing-aside {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
  justify-content: flex-start;
  padding-top: 2px;
  text-align: right;
  white-space: nowrap;
}
.nrh-listing--featured .nrh-listing-aside { padding-top: 28px; }
.nrh-listing-deadline {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--nrh-ink-muted);
}
.nrh-listing-deadline--soon { color: #a86504; }
.nrh-listing-deadline--closed { color: var(--nrh-ink-faint); }
.nrh-listing-posted { font-size: 13px; color: var(--nrh-ink-faint); }

/* ---- empty state --------------------------------------------- */
.nrh-jobs-empty { text-align: center; padding: 34px 26px; }
.nrh-jobs-empty h2 { font-size: 20px; font-weight: 700; margin: 0; }
.nrh-jobs-empty p {
  max-width: 46ch;
  margin: 9px auto 16px;
  font-size: 15.5px;
  color: var(--nrh-ink-muted);
}

/* ---- facets --------------------------------------------------
   Deliberately links, not checkboxes: each one is a crawlable URL
   for a taxonomy that currently has no archive of its own.
   ------------------------------------------------------------- */
/* Facet widgets sit tighter than a prose widget: the rows carry their own
   padding, so the card does not need to pad them again at the edges. */
.nrh-facet { padding: 18px 18px 8px; }
.nrh-facet h2 { margin-bottom: 4px; }

.nrh-facet-list { margin: 0; padding: 0; list-style: none; }
.nrh-facet-list li + li { border-top: 1px solid var(--nrh-line-soft); }

.nrh-facet-link {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 9px 2px;
  font-size: 14.5px;
  color: var(--nrh-ink-body);
  text-decoration: none;
}
.nrh-facet-link:hover { color: var(--nrh-secondary); text-decoration: none; }
.nrh-facet-link:hover .nrh-facet-name { text-decoration: underline; text-underline-offset: 2px; }
.nrh-facet-name { min-width: 0; }
.nrh-facet-count {
  flex: 0 0 auto;
  min-width: 30px;
  padding: 2px 8px;
  background: var(--nrh-surface-alt);
  border-radius: var(--nrh-radius-pill);
  color: var(--nrh-ink-soft);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}
.nrh-facet-link.is-active { font-weight: 700; color: var(--nrh-primary); }
.nrh-facet-link.is-active .nrh-facet-count {
  background: var(--nrh-primary);
  color: #fff;
}

.nrh-alert-card {
  background: linear-gradient(150deg, var(--nrh-primary) 0%, var(--nrh-secondary) 100%);
  border: 0;
  color: #fff;
}
.nrh-alert-card h2 { color: #fff; }
.nrh-alert-card p {
  margin: 6px 0 14px;
  font-size: 14.5px;
  color: rgba(255,255,255,.9);
}

/* ---- narrow --------------------------------------------------- */
@media (max-width: 900px) {
  .nrh-listing { grid-template-columns: var(--nrh-logo-size, 44px) minmax(0, 1fr); }
  .nrh-listing { --nrh-logo-size: 44px; }
  /* the deadline moves under the body rather than squeezing a third column */
  .nrh-listing-aside,
  .nrh-listing--featured .nrh-listing-aside {
    grid-column: 2;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding-top: 10px;
    border-top: 1px solid var(--nrh-line-soft);
  }
}

@media (max-width: 760px) {
  .nrh-jobs-filters { padding: 15px 15px 17px; border-radius: var(--nrh-radius); }
  .nrh-jobs-bar { gap: 8px; }
  .nrh-jobs-sort { gap: 3px; }
  .nrh-jobs-sort-label { display: none; }
  .nrh-jobs-sort-opt { padding: 5px 9px; font-size: 13px; }
  .nrh-listing { padding: 15px 16px; }
  .nrh-listing-title { font-size: 17px; }
}