/* ==========================================================================
   Hiring — v2 "Numbers + process" (data-driven, Google-style)
   Extends css/site.css (the shared Salla Developers chrome + component set).
   ========================================================================== */

.hi-hero--tight { padding-block: clamp(3rem, 7vw, 5.5rem); }
.hi-hero__copy { position: relative; z-index: 1; max-width: 42rem; }
.hi-hero__copy h1 { font-size: clamp(2rem, 4vw, 3.1rem); margin: 1.1rem 0 0; letter-spacing: -.02em; }

/* ---------- FAQ ------------------------------------------------------------ */
.faq { display: grid; gap: .75rem; max-width: 52rem; }
.faq__item {
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--rounded-lg);
  padding: 1.1rem 1.3rem;
}
.faq__item summary {
  cursor: pointer; font-weight: 700; color: var(--heading); list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; flex: none; font-size: 1.2rem; font-weight: 700; color: hsl(var(--primary-400));
  transition: transform .2s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { margin-top: .75rem; font-size: .92rem; color: var(--text-muted); }

/* ---------- role filter chips ---------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.5rem; }
.chip-btn {
  font: 700 .85rem/1 inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-soft); border-radius: var(--rounded-full);
  padding: .5rem 1rem; cursor: pointer; transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.chip-btn:hover { border-color: hsl(var(--primary-300)); }
.chip-btn.is-on { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: #fff; }
.dark .chip-btn.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---------- roles (shared list styling) ------------------------------------ */
.role-list { display: grid; gap: .7rem; }
.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;
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.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"; }
.role-empty { margin-top: 1rem; font-size: .92rem; color: var(--text-muted); }
@media (max-width: 640px) {
  .role { grid-template-columns: 1fr; gap: .3rem; }
  .role__go { display: none; }
}