/* ==========================================================================
   Component: datpro_careers
   Page-specific styling for /tuyen-dung/ ONLY. The live page is built entirely
   from shared blocks — .dp-page-hero--center, .dp-text-image, .dp-empty-state,
   .dp-cta — so the only thing that lives here is the JOB LIST, which the
   design system has no block for.

   ⚠ THE JOB LIST IS NOT RENDERED YET. DATPRO publishes no vacancies, so the
   page shows .dp-empty-state instead and the matching markup sits commented
   out in tuyen-dung/index.html. These rules are shipped with it so a real
   vacancy can be switched on by deleting two comment markers — nothing else.

   A deliberately quiet divided list, not a grid of cards: one row per role,
   title + meta on the left, "Xem chi tiết →" on the right from 768px.
   ========================================================================== */

.dp-jobs {
  display: grid;
  max-width: 60rem;
  margin-inline: auto;
  border-top: 1px solid var(--dp-border);
}

.dp-job {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-6);
  min-width: 0;
  padding-block: clamp(1.25rem, 2.4vw, 1.75rem);
  border-bottom: 1px solid var(--dp-border);
}

.dp-job__main {
  min-width: 0;
  flex: 1 1 20rem;
}

.dp-job__title {
  font-size: var(--fs-h4);
}

/* Department · Location · Type. Deliberately NO divider glyph between the
   items: a "|" drawn with ::before dangles at the start of every wrapped line
   once a department or location name gets long, and these values wrap at 360px.
   The muted label in front of each value already separates them, so the pairs
   are held apart by the column gap alone and wrap cleanly at any width. */
.dp-job__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.5rem;
  margin-top: var(--sp-2);
  min-width: 0;
}

.dp-job__meta-item {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem;
  min-width: 0;
  color: var(--dp-text-muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.dp-job__meta-label {
  color: var(--dp-text-subtle);
}

.dp-job__meta-value {
  color: var(--dp-text-body);
  font-weight: var(--fw-medium);
}

.dp-job__link {
  flex: none;
  font-size: var(--fs-sm);
}