/* ═══════════════════════════════════════════════════════════════════
   JOB LEADER — /ats
   ───────────────────────────────────────────────────────────────────
   Není to prodejní stránka, je to odpověď na otázku „co je ATS".
   Sází se proto jako článek, ne jako landing page: jeden sloupec,
   měřítko řádku kolem 70 znaků, dostatek vzduchu mezi kapitolami.

   Vlastní CSS je tu minimum — barvy, písmo i tlačítka jsou ze
   site.css a tokens.css. Přibývá jen šířka textu a rytmus nadpisů.
   ═══════════════════════════════════════════════════════════════════ */

.clanek {
  /* 760px drží řádek kolem 70 znaků. Širší sloupec se u souvislého
     textu čte hůř — oko ztrácí začátek dalšího řádku. */
  max-width: 760px;
  padding-block: 72px 40px;
}

.clanek .lead { margin-top: 18px; }

.clanek h2 {
  font-family: var(--font-display);
  font-size: clamp(23px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--text);
  margin-top: 52px;
  margin-bottom: 14px;
  text-wrap: balance;
}

.clanek p {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--body);
  margin-bottom: 16px;
}

.clanek ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.clanek ul li {
  position: relative;
  padding-left: 26px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--body);
  margin-bottom: 11px;
}
/* Odrážka je kreslená, ne znak — znak „·" sedí na účaří a u dvou
   řádků textu vypadá, že patří k druhému. */
.clanek ul li::before {
  content: "";
  position: absolute;
  left: 6px; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--violet);
}

/* ── Závěrečný blok o JOB LEADER ─────────────────────────────────── */
/* Odliší se podkladem, aby bylo poznat, kde končí popis trhu a začíná
   naše nabídka. Slíbili jsme to v perexu, tak to musí být vidět. */
.clanek-my {
  margin-top: 56px;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--violet) 5%, var(--card)), var(--card));
}
.clanek-my h2 { margin-top: 0; }

.clanek-akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
}
.clanek-akce .odkaz {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--violet);
  text-decoration: none;
}
.clanek-akce .odkaz:hover { text-decoration: underline; }

.clanek-zaver {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}

/* ── Drobečky ────────────────────────────────────────────────────── */
.drobky {
  padding-top: 24px;
  font-size: 13px;
  color: var(--muted);
}
.drobky a { color: var(--muted); text-decoration: none; }
.drobky a:hover { color: var(--violet); }
.drobky span { margin: 0 7px; opacity: .5; }