/* ============================================================
   JOBS — Listing + detail
   Simple, functional. Reuses the design tokens from style.css.
   ============================================================ */

.jobs-hero {
  background: linear-gradient(135deg, var(--clr-brand-deep) 0%, var(--clr-brand-violet) 60%, var(--clr-brand-purple) 100%);
  padding-block: var(--space-12);
  text-align: center;
}
.jobs-hero__breadcrumb {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-size: var(--fs-sm); color: rgba(255,255,255,0.55);
  margin-bottom: var(--space-4);
}
.jobs-hero__breadcrumb a { color: rgba(255,255,255,0.55); text-decoration: none; }
.jobs-hero__breadcrumb a:hover { color: var(--clr-white); }
.jobs-hero__breadcrumb i { font-size: 10px; }
.jobs-hero__label {
  display: block; font-family: 'Roboto Mono', monospace;
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--clr-orange); margin-bottom: var(--space-3);
}
.jobs-hero__title {
  font-size: var(--fs-4xl); font-weight: var(--fw-black);
  color: var(--clr-white); line-height: 1.1;
  margin-bottom: var(--space-4); max-width: 700px; margin-inline: auto;
}
.jobs-hero__subtitle {
  font-size: var(--fs-md); color: rgba(255,255,255,0.7);
  line-height: 1.7; max-width: 560px; margin-inline: auto;
}

.jobs-section {
  background: var(--clr-page-bg);
  padding-block: var(--space-12) var(--space-16);
}

.jobs-list { display: grid; gap: var(--space-4); }

.job-card {
  background: var(--clr-white);
  border: 1px solid #eef0f4;
  border-radius: 0.85rem;
  padding: 1.25rem 1.5rem;
  display: flex; align-items: center; gap: 1rem;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.job-card:hover {
  border-color: var(--clr-brand-purple);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
  transform: translateY(-1px);
}
.job-card__body { flex: 1 1 auto; min-width: 0; }
.job-card__title {
  font-size: var(--fs-lg); font-weight: var(--fw-bold);
  color: var(--clr-text-dark); margin: 0 0 .25rem;
}
.job-card__title a { color: inherit; text-decoration: none; }
.job-card__title a:hover { color: var(--clr-brand-purple); }
.job-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  font-size: var(--fs-sm); color: #6b7a93;
}
.job-card__meta i { color: var(--clr-brand-purple); margin-right: 0.3rem; }
.job-card__chip {
  display: inline-flex; align-items: center;
  padding: 0.25rem 0.75rem;
  background: rgba(124, 58, 237, 0.10);
  color: var(--clr-brand-purple);
  border-radius: 999px;
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.job-card__chip--urgent {
  background: rgba(239, 68, 68, 0.12); color: #b91c1c;
}
.job-card__actions { flex: 0 0 auto; }

.jobs-empty { text-align: center; color: #8094ae; padding-block: var(--space-12); }
.jobs-empty i { font-size: 3rem; opacity: .3; }

/* Detail */
.job-detail {
  background: var(--clr-page-bg);
  padding-block: var(--space-12) var(--space-16);
}
.job-detail__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 900px) { .job-detail__grid { grid-template-columns: 1fr; } }

.job-detail__card {
  background: var(--clr-white);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
}
.job-detail__title {
  font-size: var(--fs-3xl); font-weight: var(--fw-black);
  color: var(--clr-text-dark);
  margin: 0 0 .75rem;
}
.job-detail__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  font-size: var(--fs-sm); color: #6b7a93;
  margin-bottom: 1.5rem;
}
.job-detail__meta i { color: var(--clr-brand-purple); margin-right: .3rem; }
.job-detail__summary {
  font-size: 1.0625rem; color: #1c2b46;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.job-detail__prose { color: var(--clr-text-dark); line-height: 1.85; }
.job-detail__prose p { margin-bottom: 1rem; }
.job-detail__prose ul, .job-detail__prose ol { margin: 0 0 1rem 1.25rem; }
.job-detail__prose h2, .job-detail__prose h3 { margin: 1.5rem 0 .75rem; font-weight: 700; }

/* Apply form */
.apply-card {
  background: var(--clr-white);
  border-radius: 1rem;
  padding: 1.75rem;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
  position: sticky; top: 1.5rem;
}
.apply-card__title {
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  margin: 0 0 1.25rem;
  color: var(--clr-text-dark);
}
.apply-card .form-label { font-weight: 600; font-size: 0.85rem; }
.apply-card .form-control,
.apply-card .form-select { border-color: #e0e3e8; }
.apply-card__success {
  background: #dcfce7;
  color: #166534;
  border-left: 4px solid #16a34a;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}
.apply-card__success strong { display: block; margin-bottom: .15rem; }
.apply-card__closed {
  background: #fef3c7; color: #92400e;
  border-left: 4px solid #f59e0b;
  padding: 1rem 1.25rem; border-radius: 0.5rem;
}