/* ============================================================
   EnaLisis — Careers Page Styles
   ============================================================ */

.careers-hero {
  background: var(--gray-900);
  padding: 120px 24px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.careers-hero::before {
  content: 'CAREERS';
  font-family: var(--font-head);
  font-size: 180px;
  font-weight: 800;
  color: rgba(255,255,255,.03);
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
}
.careers-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: -1px;
  line-height: .95;
  margin-bottom: 20px;
  position: relative;
}
.careers-hero h1 span { color: var(--blue); }
.careers-hero p { font-size: 18px; color: rgba(255,255,255,.45); max-width: 520px; margin: 0 auto 32px; font-weight: 300; position: relative; }

/* Perks */
.perks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-bottom: 56px;
}
.perk-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 28px 24px; }
.perk-icon { font-size: 28px; margin-bottom: 12px; }
.perk-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; text-transform: uppercase; color: var(--gray-900); margin-bottom: 6px; }
.perk-desc { font-size: 13px; color: var(--gray-500); line-height: 1.7; }

/* Filters */
.careers-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
.filter-btn { padding: 8px 18px; border-radius: 99px; border: 1px solid var(--gray-300); font-size: 13px; font-weight: 600; cursor: pointer; background: #fff; color: var(--gray-600); transition: .15s; font-family: var(--font-body); }
.filter-btn:hover, .filter-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }

/* Jobs list */
.jobs-list { display: flex; flex-direction: column; gap: 1px; background: var(--gray-200); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; }
.job-item { background: #fff; padding: 28px 32px; display: flex; align-items: center; gap: 24px; cursor: pointer; transition: .15s; }
.job-item:hover { background: var(--gray-50); }
.ji-info { flex: 1; }
.ji-title { font-family: var(--font-head); font-size: 20px; font-weight: 700; text-transform: uppercase; color: var(--gray-900); margin-bottom: 6px; }
.ji-meta { display: flex; gap: 16px; flex-wrap: wrap; }
.ji-meta span { font-size: 13px; color: var(--gray-500); display: flex; align-items: center; gap: 5px; }
.ji-meta svg { flex-shrink: 0; }
.ji-badge { padding: 5px 12px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
.badge-full     { background: #e8f5e9; color: #2e7d32; }
.badge-intern   { background: #e3f2fd; color: #1565c0; }
.badge-contract { background: #fff3e0; color: #e65100; }

/* Apply modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 2000; align-items: center; justify-content: center; padding: 24px; }
.modal-overlay.open { display: flex; }
.modal { background: #fff; border-radius: var(--radius-lg); padding: 48px; max-width: 540px; width: 100%; position: relative; max-height: 90vh; overflow-y: auto; }
.modal h3 { font-family: var(--font-head); font-size: 28px; font-weight: 800; text-transform: uppercase; color: var(--gray-900); margin-bottom: 4px; }
.modal .modal-role { font-size: 14px; color: var(--blue); font-weight: 600; margin-bottom: 28px; }
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-600); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
.form-row input, .form-row textarea, .form-row select { width: 100%; padding: 11px 14px; border: 1px solid var(--gray-300); border-radius: var(--radius); font-size: 15px; font-family: var(--font-body); color: var(--gray-900); outline: none; transition: .15s; background: #fff; }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,120,212,.1); }
.form-row textarea { resize: vertical; min-height: 100px; }
.modal-close { position: absolute; top: 20px; right: 20px; border: none; background: none; cursor: pointer; font-size: 22px; color: var(--gray-400); line-height: 1; padding: 4px; }
.modal-close:hover { color: var(--gray-900); }

@media (max-width: 600px) { .job-item { flex-direction: column; align-items: flex-start; } }