/* ============ HERO ============ */
.careers-hero {
  background-color: var(--color-primary);
  color: white;
  padding-top: var(--space-3);
  padding-bottom: var(--space-6);
}

.careers-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  margin-bottom: var(--space-3);
}

.careers-hero__breadcrumb a { color: white; opacity: 0.85; font-weight: 600; }
.careers-hero__breadcrumb i { font-size: 9px; opacity: 0.6; }
.careers-hero__breadcrumb span { opacity: 0.7; }

.careers-hero__inner { max-width: 640px; }

.careers-hero__eyebrow {
  display: inline-block;
  color: #ffe8d6;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

.careers-hero__title { color: white; line-height: 1.2; margin-bottom: var(--space-2); }
.careers-hero__title-accent { color: #a3e635; }
.careers-hero__text { color: rgba(255, 255, 255, 0.85); margin-bottom: var(--space-3); }

/* ============ SHARED SECTION HEADERS ============ */
.section-eyebrow {
  display: inline-block;
  color: var(--color-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-sm);
  margin-bottom: 4px;
}

/* ============ OPENINGS ============ */
.openings { padding-block: var(--space-6); }
.openings__header { text-align: center; margin-bottom: var(--space-3); }
.openings__header h2 { color: var(--color-text); }

.openings__filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--space-4);
}

.openings-tab {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background-color: var(--color-bg);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: all var(--transition);
}

.openings-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.openings-tab.is-active { background-color: var(--color-primary); border-color: var(--color-primary); color: white; }

.job-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  box-shadow: var(--shadow-sm);
}

.job-card__main h3 { font-size: var(--text-lg); margin-bottom: 6px; }

.job-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: 8px;
}

.job-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.job-card__meta i { color: var(--color-primary); }
.job-card__main p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 60ch; }

/* === Empty state === */
.openings__empty {
  text-align: center;
  max-width: 520px;
  margin-inline: auto;
  padding: var(--space-6) var(--space-3);
  background-color: var(--color-bg-soft);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.openings__empty-icon {
  width: 72px;
  height: 72px;
  margin-inline: auto;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
}

.openings__empty h3 { color: var(--color-text); margin-bottom: var(--space-1); }
.openings__empty p { color: var(--color-text-muted); margin-bottom: var(--space-3); }

.openings__empty-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

/* ============ DEPARTMENTS ============ */
.hiring-departments { padding-block: var(--space-6); background-color: var(--color-bg-soft); }
.hiring-departments__header { text-align: center; max-width: 620px; margin-inline: auto; margin-bottom: var(--space-4); }
.hiring-departments__header h2 { color: var(--color-text); margin-block: 4px var(--space-1); }
.hiring-departments__header p { color: var(--color-text-muted); font-size: var(--text-sm); }

.hiring-departments__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

.hiring-dept {
  background-color: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.hiring-dept:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

.hiring-dept__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.hiring-dept[data-accent="orange"] .hiring-dept__icon { background-color: rgba(249,115,22,0.12); color: var(--color-accent); }
.hiring-dept[data-accent="blue"] .hiring-dept__icon { background-color: #e0edfb; color: #2563eb; }
.hiring-dept[data-accent="pink"] .hiring-dept__icon { background-color: #fce7f3; color: #db2777; }
.hiring-dept[data-accent="purple"] .hiring-dept__icon { background-color: #ede9fe; color: #7c3aed; }

.hiring-dept h4 { font-size: var(--text-base); margin-bottom: 4px; }
.hiring-dept p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ============ WHY WORK WITH US ============ */
.why-work { padding-block: var(--space-6); }
.why-work__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.why-work__item { text-align: center; }

.why-work__item i {
  font-size: var(--text-2xl);
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}

.why-work__item h4 { font-size: var(--text-base); margin-bottom: 4px; }
.why-work__item p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ============ FORMS ============ */
.careers-forms { padding-block: var(--space-6); background-color: var(--color-bg-soft); }
.careers-forms__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-4); align-items: start; }

.careers-form-panel, .job-alert-panel {
  background-color: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.careers-form-panel h2 { color: var(--color-text); font-size: var(--text-xl); }
.careers-form-panel__underline { display: block; width: 40px; height: 3px; background-color: var(--color-accent); border-radius: 2px; margin-block: var(--space-1) var(--space-2); }
.careers-form-panel > p { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-3); }

.careers-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.careers-form__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-2); }
.careers-form__field label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }

.careers-form__field input,
.careers-form__field select,
.careers-form__field textarea {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  background-color: var(--color-bg);
  resize: vertical;
}

.careers-form__field input:focus-visible,
.careers-form__field select:focus-visible,
.careers-form__field textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.careers-form__field.is-invalid input,
.careers-form__field.is-invalid select,
.careers-form__field.is-invalid textarea {
  border-color: var(--color-danger);
}

.careers-form__cv-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background-color: var(--color-primary-light);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  font-size: 12px;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.careers-form__cv-note i { color: var(--color-primary); margin-top: 2px; }
.careers-form__cv-note a { color: var(--color-primary); font-weight: 700; }

.careers-form__submit { width: 100%; justify-content: center; }

.careers-form__status {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-top: var(--space-2);
  min-height: 1.2em;
}

.careers-form__status.is-success { color: var(--color-primary); }
.careers-form__status.is-error { color: var(--color-danger); }

/* === Job alert panel === */
.job-alert-panel { text-align: center; }

.job-alert-panel__icon {
  width: 56px;
  height: 56px;
  margin-inline: auto;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
}

.job-alert-panel h3 { color: var(--color-text); margin-bottom: 4px; }
.job-alert-panel > p { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-3); }

.job-alert-form { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-2); }

.job-alert-form input {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  text-align: center;
}

.job-alert-form input:focus-visible { outline: 2px solid var(--color-primary); }
.job-alert-form .btn { justify-content: center; }

.job-alert-panel__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-text-muted);
}

.job-alert-panel__note i { color: var(--color-primary); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .hiring-departments__grid { grid-template-columns: repeat(2, 1fr); }
  .why-work__grid { grid-template-columns: 1fr 1fr; }
  .careers-forms__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .hiring-departments__grid { grid-template-columns: 1fr; }
  .why-work__grid { grid-template-columns: 1fr; }
  .careers-form__row { grid-template-columns: 1fr; }
  .job-card { flex-direction: column; align-items: stretch; text-align: left; }
  .job-card .btn { justify-content: center; }
}