/* /lediga-jobb/* — "jobb per ort" and "yrke × ort" (docs/site/LANDING-SPEC.md).
   Prefix: lj-. Tokens only, same rule as jobb.css and employer.css: no colour, radius,
   shadow or motion literal here, so dark mode is free and the page reads as the same
   design system as /jobb/ and /arbetsgivare/. Narrow-first; no horizontal overflow at
   375 px (single column, wrapping chip lists, no fixed widths). */

.lj-page, .lj-page * { box-sizing: border-box; }

.lj-content {
  font-size: var(--text-md);
  line-height: var(--lh-md);
  padding: var(--s-8) var(--st-chrome-gutter) var(--st-section);
  max-width: 860px;
  margin: 0 auto;
}
.lj-content :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
.lj-content a { color: var(--accent-ink); text-decoration: none; }
.lj-content a:hover { text-decoration: underline; text-underline-offset: 2px; }
.lj-content p { margin: 0; }

/* ---- Breadcrumbs -------------------------------------------------------------------- */
.lj-crumbs { font-size: var(--text-sm); color: var(--ink-3); margin-bottom: var(--s-4); }
.lj-crumbs a { color: var(--ink-3); }
.lj-crumbs a:hover { color: var(--accent-ink); }
.lj-crumb-sep { padding: 0 var(--s-1); }

/* ---- Heading + lede ------------------------------------------------------------------ */
.lj-h1 {
  font-family: var(--font-display);
  font-size: var(--st-h2, var(--text-2xl));
  line-height: 1.15;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0 0 var(--s-3);
}
.lj-h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--ink); margin: 0 0 var(--s-3); }
.lj-lede { color: var(--ink-2); margin-bottom: var(--s-6); }
.lj-salary { color: var(--ink-2); margin-bottom: var(--s-6); }

/* ---- Figure row ------------------------------------------------------------------ */
.lj-figs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  padding: var(--s-5);
  margin: 0 0 var(--s-6);
  background: var(--canvas-tint);
  border-radius: var(--r-md);
}
.lj-fig { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.lj-fig dt { font-size: var(--text-sm); color: var(--ink-3); font-weight: var(--weight-medium); }
.lj-fig dd { margin: 0; color: var(--ink); font-weight: var(--weight-semibold); font-size: var(--text-lg); }

/* ---- Sections + chip lists -------------------------------------------------------- */
.lj-section, .lj-related { margin-bottom: var(--s-8); }
.lj-empty { color: var(--ink-3); }
.lj-chip-list { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.lj-chip-list li a, .lj-chip-list li {
  display: inline-flex;
  padding: var(--s-1) var(--s-3);
  background: var(--canvas-tint);
  border-radius: var(--r-full, 999px);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.lj-chip-list li a:hover { background: var(--accent-soft); color: var(--accent-ink); text-decoration: none; }

/* ---- Ad list ----------------------------------------------------------------------- */
.lj-ad-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); list-style: none; margin: 0; padding: 0; }
.lj-ad { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.lj-ad-title { display: block; font-weight: var(--weight-semibold); color: var(--ink); }
.lj-ad-title:hover { color: var(--accent-ink); }
.lj-ad-meta { margin-top: var(--s-1); }
.lj-more { margin-top: var(--s-4); }

/* ---- /lediga-jobb/ index: one block per län ---------------------------------------- */
.lj-lan-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-8); }
.lj-lan-block h2 a { color: var(--ink); }
.lj-lan-block h2 a:hover { color: var(--accent-ink); }

@media (min-width: 640px) {
  .lj-figs { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 900px) {
  .lj-lan-grid { grid-template-columns: 1fr 1fr; }
}

/* Review fix (2026-09-18): `.lj-content p { margin: 0 }` outranks the single-class rules
   above it, so the lede, the salary line and "Visa alla" lost their spacing and sat on the
   next heading. Same specificity as the reset, later in the file. */
.lj-content p.lj-lede, .lj-content p.lj-salary { margin-bottom: var(--s-6); }
.lj-content p.lj-more { margin-top: var(--s-4); }
.lj-content p.lj-ad-meta { margin-top: var(--s-1); }
/* The empty state: one sentence, then the alternatives. */
.lj-content p.lj-empty-next { margin-bottom: var(--s-6); color: var(--ink-2); }