/* ============================================================
   CASHEENO — careers listing and role detail
   Page shell, forms, flash and sidebar cards live in cs-ui.css.
   ============================================================ */

/* ============================================================
   CAREERS — listing, role detail and application
   (the form, flash and sidebar rules above are shared with contact)
   ============================================================ */

/* ---------- why-here cards ---------- */
.cs-perks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1rem;
}
.cs-perk { padding: 1.55rem 1.5rem 1.7rem; display: grid; gap: .65rem; align-content: start; }
.cs-perk p { font-size: .93rem; color: var(--cs-fg-muted); }

/* ---------- role listing ---------- */
.cs-roles + .cs-roles { margin-top: clamp(2rem, 4vw, 3rem); }

.cs-roles__dept {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cs-fg-dim);
}
.cs-roles__count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 .4rem;
  border-radius: 100px;
  font-family: var(--cs-mono);
  font-size: .68rem;
  letter-spacing: 0;
  color: var(--cs-brand-text);
  background: rgba(192, 38, 211, .14);
  border: 1px solid rgba(192, 38, 211, .3);
}

.cs-roles__list {
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-r-lg);
  overflow: hidden;
  background: var(--cs-surface);
}
.cs-role + .cs-role { border-top: 1px solid var(--cs-line); }

.cs-role__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1.15rem 1.35rem;
  transition: background-color .22s var(--cs-ease);
}
.cs-role__link:hover { background: rgba(255, 255, 255, .035); }

.cs-role__main { display: grid; gap: .3rem; min-width: 0; }
.cs-role__title {
  font-size: 1.06rem;
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--cs-fg);
}
.cs-role__summary {
  font-size: .88rem;
  line-height: 1.5;
  color: var(--cs-fg-muted);
  max-width: 62ch;
}
.cs-role__meta { display: flex; flex-wrap: wrap; gap: .35rem; }
.cs-chip--exp {
  color: var(--cs-brand-text);
  border-color: rgba(192, 38, 211, .35);
  background: rgba(192, 38, 211, .1);
}
.cs-role__go {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  color: var(--cs-fg-muted);
  border: 1px solid var(--cs-line);
  transition: transform .22s var(--cs-ease), color .22s var(--cs-ease),
              border-color .22s var(--cs-ease), background-color .22s var(--cs-ease);
}
.cs-role__go svg { width: 14px; height: 14px; }
.cs-role__link:hover .cs-role__go {
  color: #fff;
  transform: translateX(3px);
  border-color: rgba(192, 38, 211, .5);
  background: rgba(192, 38, 211, .2);
}
@media (max-width: 760px) {
  .cs-role__link { grid-template-columns: minmax(0, 1fr) auto; }
  .cs-role__meta { grid-column: 1 / -1; }
}


/* ---------- role detail ---------- */

.cs-role__heading { max-width: 22ch; }
.cs-role__facts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.4rem; }

.cs-role__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3rem);
}
@media (max-width: 900px) {
  .cs-role__grid { grid-template-columns: minmax(0, 1fr); }
}
.cs-role__side { display: grid; gap: 1rem; position: sticky; top: calc(var(--cs-nav-h) + 24px); }
@media (max-width: 900px) {
  .cs-role__side { position: static; }
}

/* ---------- CV upload ---------- */
.cs-upload { display: grid; gap: .6rem; justify-items: start; }
.cs-upload__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  width: 100%;
}
.cs-upload__row > * { flex: 1 1 auto; justify-content: center; }
.cs-upload__label { cursor: pointer; }
.cs-upload__send[disabled] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
.cs-upload__send[disabled]:hover { transform: none; }
.cs-upload__error {
  margin: 0;
  font-size: .8rem;
  line-height: 1.45;
  color: #F47280;
}
.cs-upload__error:empty { display: none; }
.cs-upload__label svg { width: 1em; height: 1em; }
/* Visually hidden but still focusable, so the label stays keyboard-reachable. */
.cs-upload__input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}
.cs-upload__input:focus-visible + .cs-upload__file { outline: 2px solid var(--cs-brand); }
.cs-upload__file {
  margin: 0;
  font-family: var(--cs-mono);
  font-size: .76rem;
  color: var(--cs-fg-dim);
  word-break: break-all;
}
.cs-upload__file:empty { display: none; }

.cs-role__form { margin-top: clamp(2.5rem, 5vw, 4rem); }
.cs-role__formhead { margin-bottom: 1.4rem; }
.cs-role__formhead p { margin: .35rem 0 0; font-size: .92rem; color: var(--cs-fg-muted); }