/*
 * 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, .kicker, .title, .meta, .meta-icon,
 * .desc, .empty on the list; .back, .detail, .picture, .section-title, .prose, .apply,
 * .apply-button, .gone on the detail — renaming one is a breaking change for customers'
 * custom CSS. .kicker, .title and .meta appear on BOTH documents: on the list they style a
 * row's kicker/title/meta line, on the detail they style the <h1> headline and its lines —
 * a customer writing e.g. a row-truncation rule against .title will also hit the detail
 * headline.
 *
 * The accent colour marks what is interactive or branded — the row links and the apply
 * button — so the detail's headings stay in the text colour. See .detail .title below.
 *
 * 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;
}

/* "Initiativbewerbung" above a job profile's title. Text colour rather than the accent,
   so it reads as a label and not a second title line, and looks right with whatever
   accent the org picked. Uppercase and letter spacing make it stand out. */
.kicker {
  display: block;
  margin: 0 0 2px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #52525b;
}

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

/* The per-org heading_size/heading_weight/accent all target .title for the list's rows,
   where the accent reads as "this row is a link". The detail's <h1> is not a link, so this
   more specific rule takes it back out of the accent and puts it at heading scale. The
   colour is inherit rather than a repeat of the body default, so that anything recolouring
   the text around it — the generated per-org body_color, or a custom_css body rule for a
   dark embed — carries the headline along instead of leaving it stranded. */
.detail .title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
}

.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;
}

/* ---- Listing detail (org/widget_listing.html) ---------------------------------------- */

.back {
  display: inline-block;
  margin: 0 8px 12px;
  color: #52525b;
  text-decoration: none;
}

.back:hover {
  text-decoration: underline;
}

.detail {
  padding: 0 8px;
}

.detail .meta {
  margin-top: 6px;
}

.picture {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 16px;
  border-radius: 4px;
}

.section-title {
  margin: 24px 0 8px;
  font-size: 1rem;
  font-weight: 600;
}

.prose {
  margin: 0;
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 0.75em;
}

.prose ul,
.prose ol {
  padding-left: 1.25em;
}

.prose > :last-child {
  margin-bottom: 0;
}

.apply {
  margin-top: 24px;
}

.apply-button {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 6px;
  background-color: #1d4ed8;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.apply-button:hover {
  filter: brightness(1.1);
}

/* ---- Nothing to show (both documents) ------------------------------------------------ */

/* .empty is the list with nothing published, .gone a listing archived after someone linked
   to it. Same line of muted text either way. */
.empty,
.gone {
  margin: 0 8px;
  color: #52525b;
}