/* ============================================================
   CAREERS PAGE — JUJO CHEMICAL
   ============================================================ */

.careers-why { background: var(--c-surface); }

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.benefit-card {
  background: var(--c-bg);
  border-radius: var(--r-2xl);
  padding: var(--sp-8);
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: all var(--dur-normal) var(--ease-out);
}
.benefit-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); background: var(--c-surface); }

.benefit-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sz-2xl);
  background: var(--c-surface-3);
  color: var(--c-secondary);
  transition: all var(--dur-normal) var(--ease-spring);
}
.benefit-card:hover .benefit-icon { background: var(--c-secondary); color: white; transform: rotate(-8deg) scale(1.1); }

.benefit-title { font-size: var(--sz-xl); font-weight: var(--fw-bold); color: var(--c-text); }
.benefit-desc  { font-size: var(--sz-sm); color: var(--c-text-muted); line-height: var(--lh-relaxed); flex: 1; }

/* Open Positions */
.jobs-section { background: var(--c-bg); }

.job-filters {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
  flex-wrap: wrap;
}

.jobs-list { display: flex; flex-direction: column; gap: var(--sp-4); }

.job-card {
  background: var(--c-surface);
  border-radius: var(--r-xl);
  border: 1px solid var(--c-border);
  overflow: hidden;
  transition: all var(--dur-normal) var(--ease-out);
}
.job-card:hover { border-color: var(--c-secondary); box-shadow: var(--sh-md); }

.job-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-6);
  cursor: pointer;
}
.job-dept-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-xl);
  background: var(--c-surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sz-xl);
  color: var(--c-secondary);
  flex-shrink: 0;
}
.job-info { flex: 1; }
.job-title { font-size: var(--sz-lg); font-weight: var(--fw-bold); color: var(--c-text); margin-bottom: var(--sp-2); }
.job-tags  { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.job-tag {
  padding: 2px var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--sz-xs);
  font-weight: var(--fw-semibold);
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
}
.job-tag.new { background: rgba(16,185,129,0.1); color: #059669; border-color: rgba(16,185,129,0.2); }

.job-arrow {
  font-size: var(--sz-lg);
  color: var(--c-text-muted);
  transition: transform var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}
.job-card.is-open .job-arrow { transform: rotate(180deg); color: var(--c-secondary); }

.job-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out);
}
.job-card.is-open .job-body { max-height: 800px; }

.job-body-inner {
  padding: 0 var(--sp-6) var(--sp-6) var(--sp-6);
  padding-left: calc(var(--sp-6) + 48px + var(--sp-5));
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-5);
}

.job-section-title { font-size: var(--sz-sm); font-weight: var(--fw-semibold); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sp-3); margin-top: var(--sp-5); }
.job-section-title:first-child { margin-top: 0; }

.job-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.job-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--sz-sm);
  color: var(--c-text-2);
  line-height: var(--lh-relaxed);
}
.job-list li::before { content: '→'; color: var(--c-accent); font-weight: var(--fw-bold); margin-top: 2px; flex-shrink: 0; }

.job-apply { margin-top: var(--sp-6); }

/* No openings */
.no-jobs {
  text-align: center;
  padding: var(--sp-16);
  background: var(--c-surface);
  border-radius: var(--r-2xl);
  border: 2px dashed var(--c-border);
}
.no-jobs i { font-size: var(--sz-6xl); color: var(--c-border-mid); margin-bottom: var(--sp-5); display: block; }
.no-jobs h3 { font-size: var(--sz-2xl); color: var(--c-text); margin-bottom: var(--sp-3); }
.no-jobs p  { font-size: var(--sz-base); color: var(--c-text-muted); margin-bottom: var(--sp-6); }

/* Empty state */
.jobs-empty {
  text-align: center;
  padding: var(--sp-16) var(--sp-8);
  background: var(--c-surface);
  border-radius: var(--r-2xl);
  border: 2px dashed var(--c-border);
}
.jobs-empty-icon {
  font-size: 56px;
  color: var(--c-border-mid);
  margin-bottom: var(--sp-5);
}
.jobs-empty-title {
  font-size: var(--sz-2xl);
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: var(--sp-3);
}
.jobs-empty-desc {
  font-size: var(--sz-base);
  color: var(--c-text-muted);
  max-width: 480px;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 1024px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .benefits-grid { grid-template-columns: 1fr; }
  .job-body-inner { padding-left: var(--sp-6); }
}