/* ==========================================================================
   Job detail — /job/{slug}: title block, sidebar cards (Job Übersicht,
   Unternehmen), main column with check lists.
   ========================================================================== */

@layer components {
  /* ----- Title + "Jetzt bewerben" -------------------------------------- */

  .job-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    text-align: center;
  }

  .job-hero__title {
    font-size: var(--text-4xl);
    font-weight: var(--font-medium);
    line-height: var(--leading-tight);
    color: var(--neutral-800);
    hyphens: auto;
  }

  /* ----- Layout: sidebar | main ---------------------------------------- */

  .job-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-7) var(--space-6);
    align-items: start;
  }

  @media (max-width: 61.99rem) {
    .job-detail {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .job-detail__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .job-detail__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-7);
  }

  /* ----- Sidebar card --------------------------------------------------- */

  .job-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-5);
    background-color: var(--color-bg-subtle);
    border-radius: var(--radius-md);
  }

  .job-card__title,
  .job-block__title {
    font-size: var(--text-3xl);
    font-weight: var(--font-medium);
    line-height: var(--leading-snug);
    text-transform: uppercase;
  }

  .job-card__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: 0;
    margin: 0;
  }

  .job-card__row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    overflow-wrap: anywhere;
  }

  .job-card__row > .icon {
    --icon-size: 1.75rem;
    stroke-width: 1.5;
    color: var(--color-heading);
  }

  .job-card__row a {
    color: inherit;
    text-decoration: none;
  }

  .job-card__row a:hover {
    color: var(--color-accent);
    text-decoration: underline;
  }

  .job-card__row strong {
    font-weight: var(--font-semibold);
    color: var(--color-heading);
  }

  /* ----- Main column ---------------------------------------------------- */

  .job-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .job-block .prose {
    line-height: var(--leading-relaxed);
  }

  .check-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 0;
    margin: 0;
  }

  .check-list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .check-list__item > .icon {
    --icon-size: 1.75rem;
    margin-block-start: -0.125rem;
    color: var(--color-heading);
  }
}