/* ==========================================================================
   Hiring — v1 "Problems worth solving" (engineering-led, editorial)
   Extends css/site.css (the shared Salla Developers chrome + component set).
   ========================================================================== */

/* ---------- hero stat panel (replaces the terminal on this page) --------- */
.hi-panel {
  border-radius: var(--rounded-xl); overflow: hidden;
  background: hsl(193 74% 9%); color: hsl(0 0% 92%);
  border: 1px solid hsl(var(--primary-700));
  box-shadow: 0 30px 60px -20px hsl(191 60% 12% / .5);
  padding: 1.6rem 1.7rem;
}
.hi-panel__row { display: flex; align-items: baseline; gap: 1rem; padding-block: .85rem; border-top: 1px solid hsl(0 0% 100% / .1); }
.hi-panel__row:first-child { border-top: 0; padding-top: 0; }
.hi-panel__num { flex: none; width: 4.2rem; font-weight: 800; font-size: 1.6rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.hi-panel__label { font-size: .9rem; color: hsl(0 0% 100% / .78); line-height: 1.5; }
.hi-panel__foot { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid hsl(0 0% 100% / .1); font-size: .82rem; color: hsl(0 0% 100% / .5); }

/* ---------- open roles ---------------------------------------------------- */
.dept { margin-top: clamp(2rem, 4vw, 2.75rem); }
.dept:first-of-type { margin-top: 0; }
.dept__head { display: flex; align-items: center; gap: .65rem; margin-bottom: .9rem; }
.dept__head .hgi { font-size: 1.2rem; color: hsl(var(--primary-400)); }
.dept__head h3 { font-size: 1.05rem; }

.role {
  position: relative; display: grid; grid-template-columns: 1fr auto 1.4rem; align-items: center; gap: 1rem;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--rounded-lg);
  padding: 1.1rem 1.3rem; margin-bottom: .7rem;
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.role:last-child { margin-bottom: 0; }
.role:hover { transform: translateX(3px); border-color: hsl(var(--primary-300)); box-shadow: var(--shadow-xs); text-decoration: none; }
.role__title { font-weight: 700; color: var(--heading); }
.role__meta { font-size: .84rem; color: var(--text-muted); white-space: nowrap; }
.role__go { color: hsl(var(--primary-400)); font: 700 1.05rem/1 var(--s-font-mono); text-align: right; }
.role__go::after { content: "\2192"; }
@media (max-width: 640px) {
  .role { grid-template-columns: 1fr; gap: .3rem; }
  .role__go { display: none; }
}