/* ==========================================================================
   sitoJOB — archive.css (career articles, salary guides, blog, contact page)
   Note: .sj-articles-grid intentionally omitted — use .sj-grid .sj-grid--articles
   from base.css. Meta separators are generated via ::marker-free ::before —
   templates (3-g) must NOT output manual "•" separators inside
   .sj-article-single__meta.
   ========================================================================== */

/* ---- Article single (career) ---- */
.sj-article-single { padding: 16px; }
@media (min-width: 768px) { .sj-article-single { padding: 24px 32px; } }
.sj-article-single__title { margin-block: 0 8px; }
.sj-article-single__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: .8rem; color: var(--sj-muted); margin-block-end: 16px; }
.sj-article-single__meta > * + *::before { content: "•"; color: var(--sj-border-strong); }
.sj-article-single__thumb { border-radius: var(--sj-radius-lg); overflow: hidden; margin-block-end: 20px; }
.sj-article-single__thumb img { width: 100%; max-height: 420px; object-fit: cover; }

/* ---- Share row ---- */
.sj-share { margin-block: 24px; padding-block-start: 16px; border-block-start: 1px solid var(--sj-border); }
.sj-share__links { display: flex; flex-wrap: wrap; gap: 8px; }
.sj-share__links svg { width: 16px; height: 16px; vertical-align: middle; }

/* ---- Related articles ---- */
.sj-article-related { margin-block: 16px; }

/* ---- Salary guide cards (archive /companies/ style listing) ---- */
.sj-salary-card { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.sj-salary-card__title { margin: 0; font-size: .95rem; }
.sj-salary-card__range {
  font-size: .8rem;
  font-weight: 700;
  color: var(--sj-primary-ink);
  background: var(--sj-primary-soft);
  padding: 2px 10px;
  border-radius: 999px;
  align-self: flex-start;
}
.sj-salary-card .sj-btn { align-self: flex-start; margin-block-start: auto; }

/* ---- Salary single facts ---- */
.sj-salary-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-block: 16px;
}
.sj-salary-facts__item { background: var(--sj-surface); border-radius: var(--sj-radius); padding: 12px 16px; display: flex; flex-direction: column; }
.sj-salary-facts__label { font-size: .7rem; color: var(--sj-muted); }
.sj-salary-facts__value { font-size: .95rem; font-weight: 700; color: var(--sj-ink); }
.sj-salary-cta { margin-block: 8px 20px; }

/* ---- Contact page ---- */
.sj-contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-block: 8px 24px;
}
@media (min-width: 768px) { .sj-contact-layout { grid-template-columns: 1.4fr 1fr; } }
.sj-contact-form { padding: 20px 24px; }
.sj-contact-form__grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .sj-contact-form__grid { grid-template-columns: 1fr 1fr; } }
.sj-contact-info { display: flex; flex-direction: column; gap: 16px; }

/* ---- Salary single page ---- */
.sj-salary-single { padding: 24px; }
@media (max-width: 640px) { .sj-salary-single { padding: 16px; } }
.sj-salary-single__title { margin-block: 0 10px; }
.sj-salary-related { margin-block: 16px 4px; }