/* ============================================================
   JOBOPSLAG — blokken digirehab/jobopslag (Karriere)
   Toppen af et jobopslag (mærkat, titel, lokation) og teksten uden ledige
   stillinger. Selve opslaget står i blokken Tekst (components/text-section.css).
   Bygget ud fra den tidligere pages/karriere.css.
   ============================================================ */

.job-hero {
  background-color: var(--color-bg-card);
  padding: var(--space-3xl);
}

.job-hero__breadcrumb {
  display: block;
  font-size: var(--font-size-secondary);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.job-hero__breadcrumb a {
  color: var(--color-text-secondary);
  text-decoration: none;
  /* Klikflade på ca. 44 px til fingre; den negative margen holder layoutet uændret */
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
}

.job-hero__breadcrumb a:hover {
  color: var(--color-primary);
}

.job-hero__badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary-light);
  color: var(--color-text-white);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-md);
}

.job-hero__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  max-width: 900px;
  margin: 0 0 var(--space-sm);
  hyphens: auto;
  overflow-wrap: anywhere;
}

.job-hero__lokation {
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  margin: 0;
}

/* Flere opslag: knappen, der fører til opslagets egen side */
.job-hero__link {
  margin-top: var(--space-lg);
}

/* Uden ledige stillinger */
.job-empty {
  background-color: var(--color-bg-card);
  padding: var(--space-4xl) var(--space-xl);
  text-align: center;
}

.job-empty__text {
  font-size: var(--font-size-h4);
  color: var(--color-text-secondary);
  margin: 0;
}

@media (max-width: 1024px) {
  .job-hero {
    padding: var(--space-2xl) var(--space-xl);
  }

  .job-hero__title {
    font-size: 32px;
  }
}

@media (max-width: 640px) {
  .job-hero__title {
    /* Lange ord som "udviklingsmuligheder" skal kunne stå hele på en telefon */
    font-size: clamp(22px, 6.2vw, 32px);
  }

  .job-empty {
    padding: var(--space-3xl) var(--space-xl);
  }
}