/*
 * Base stylesheet for the server-rendered listings widget (org/widget_listings.html).
 *
 * These are the structural defaults. Per-org appearance settings (accent colour, heading
 * size/weight, body colour, font) are layered on top by a small generated <style> block
 * in the template, and staff can override anything here via the widget's custom_css. The
 * class names below are that override API — .job, .title, .meta, .meta-icon, .desc —
 * renaming one is a breaking change for customers' custom CSS.
 *
 * font-size: 0.875rem is the body size. The document root is scaled to font_size * 1.1429
 * (inline on <html>) so this lands back on the configured font_size — matching the app's
 * text-sm. line-height 1.5 is a readable default; custom_css can retune it.
 */

body {
  margin: 0;
  font-family: var(--font-sans, system-ui, sans-serif);
  color: #3f3f46;
  font-size: 0.875rem;
  line-height: 1.5;
}

.jobs {
  list-style: none;
  margin: 0;
  padding: 0;
}

.job {
  padding: 12px 8px;
  border-top: 1px solid rgb(0 0 0 / 8%);

  /* Positioning context for the stretched link below. */
  position: relative;
  border-radius: 4px;
  transition: background-color 150ms;
}

.job:first-child {
  border-top: 0;
}

.job:hover {
  background-color: rgb(0 0 0 / 2.5%);
}

.job-link {
  text-decoration: none;
}

/* Stretched link: the whole row is the click target, not just the title — matching the
   app's search results. The overlay covers the row, so hovering the meta or description
   tints the row and underlines the title too. */
.job-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.title {
  font-weight: 600;
  font-size: 1rem;
  color: #1d4ed8;
}

.job:hover .title {
  text-decoration: underline;
}

.meta {
  margin: 4px 0 0;
  color: #52525b;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.desc {
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}
