/* ============================================================
   PERLA NERA — pages/lavora.css
   Posizioni aperte, tre passi, form candidatura.
   Gli stili del form arrivano da pages/prenota.css.
   ============================================================ */

/* ---------- Posizioni ---------- */
.roles .indexed { margin-bottom: 2.5rem; }
.roles__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
@media (max-width: 720px) { .roles__grid { grid-template-columns: 1fr; } }

.roles__item {
  background: var(--nero);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: grid; gap: 0.8rem; align-content: start;
}
.roles__item h2 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
.roles__item p { font-size: 0.92rem; }

.roles__values {
  margin-top: 2.5rem;
  max-width: 68ch;
}
.roles__values p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.5; color: var(--perla);
}

/* ---------- Tre passi ---------- */
.steps { border-top: 1px solid var(--linea); }
.steps .indexed { margin-bottom: 2.5rem; }
.steps__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
}
@media (max-width: 720px) { .steps__list { grid-template-columns: 1fr; } }

.steps__item {
  display: grid; gap: 0.7rem; align-content: start;
  border-top: 1px solid var(--linea);
  padding-top: 1.4rem;
}
.steps__num {
  font-size: 0.7rem; letter-spacing: 0.24em; color: var(--grigio-muto);
}
.steps__item h3 {
  font-family: var(--font-display); font-weight: 300;
  font-size: 1.5rem; color: var(--perla);
}
.steps__item p { font-size: 0.92rem; }

/* ---------- Upload foto ---------- */
.field input[type="file"] {
  border-bottom: 1px dashed var(--linea);
  padding: 1em 0;
  font-size: 0.85rem; color: var(--argento);
}
.field input[type="file"]::file-selector-button {
  margin-right: 1rem;
  padding: 0.55em 1.2em;
  background: transparent;
  border: 1px solid var(--linea); border-radius: var(--radius);
  color: var(--argento);
  font-family: var(--font-ui); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.field input[type="file"]::file-selector-button:hover {
  color: var(--perla); border-color: var(--argento);
}