/* La bacheca lavoro: regole spostate da style.css il 5 ottobre 2026. Si carica solo su
   /lavoro e /lavoro/persone.
   Che cosa ci va e che cosa no: dev/fogli.js. */

/* ══════════════════════════════════════════════════════════════════════════
   BACHECA LAVORO
   ══════════════════════════════════════════════════════════════════════════ */
/* — le due schede: le offerte, le persone —
   Due collegamenti, non due pulsanti: ognuna delle due facce ha un indirizzo suo. Il
   numero accanto serve a quella che non si sta guardando — su una bacheca giovane, una
   scheda senza numero non si clicca, e metà del contenuto non lo trova nessuno. */
.bacheca-schede {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--color-divider);
}

.bacheca-schede a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-neutral-400);
  text-decoration: none;
  /* Il bordo c'è sempre, trasparente quando la scheda non è quella attiva: se comparisse
     solo da attiva, le due schede si sposterebbero di due pixel a ogni cambio. */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.bacheca-schede a:hover { color: var(--color-neutral-200); }

.bacheca-schede a.is-active {
  color: var(--color-accent-300);
  border-bottom-color: var(--color-accent-500);
}

.bacheca-schede-conta {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 10%, transparent);
  color: var(--color-neutral-400);
}

.bacheca-schede a.is-active .bacheca-schede-conta {
  background: color-mix(in srgb, var(--color-accent-500) 22%, transparent);
  color: var(--color-accent-200);
}

/* auto-fit e non un numero fisso di colonne: i menu che compaiono dipendono da quello che
   c'è in bacheca — con due annunci se ne vede uno, con cinquanta se ne vedono sei — e una
   griglia a colonne fisse lascerebbe buchi in mezzo. */
.filtri-campi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.filtri-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.filtri-campo label {
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
}

.filtri-campo .input { min-height: 36px; font-size: 14px; }

.filtri-azioni {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
}

.filtri-azzera { font-size: 13px; color: var(--color-neutral-400); }

.filtri-conta { margin-left: auto; font-size: 13px; color: var(--color-neutral-500); }

.empty-state-azione { margin-top: -8px; text-align: center; font-size: 14px; }

@media (max-width: 560px) {
  /* Il conteggio va a capo da solo invece di schiacciarsi contro il pulsante */
  .filtri-conta { margin-left: 0; width: 100%; }
}

/* Il bordo di un altro colore è l'unica differenza fra le due schede, e basta: dentro una
   scheda sola non si mescolano mai, quindi non serve un'etichetta che ripeta cosa si sta
   guardando. Serve invece quando una persona arriva da un collegamento diretto a una
   scheda e non ha visto le due linguette. */
.annuncio--persona { border-left-color: var(--color-amber); }

.annuncio-titolo {
  margin: 0 0 4px;
  font-size: clamp(18px, 1.1vw + 14px, 23px);
  letter-spacing: -0.02em;
}

.annuncio-azienda {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-neutral-400);
}

.annuncio-sep { opacity: 0.5; }

.annuncio-etichette { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; }

.annuncio-testo {
  margin: 14px 0 0;
  line-height: 1.6;
  color: var(--color-neutral-300);
  max-width: 72ch;
  white-space: pre-line; /* gli a capo scritti da chi manda l'annuncio contano */
}

.annuncio-azioni { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }

/* Il modulo d'invio: chiuso di suo, perché chi arriva qui quasi sempre cerca lavoro
   e non lo offre. Chi lo offre lo trova comunque. */
.annuncio-invio {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 18px clamp(18px, 2.4vw, 26px);
}

.annuncio-invio > summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}

/* — le competenze sulla scheda —
   Sigle, non frasi: si leggono di sbieco, ed è il motivo per cui su una bacheca tecnica
   stanno su una riga loro invece che mescolate alle altre etichette. */
.annuncio-competenze {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 12px 0 0;
}

.annuncio-competenze span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--color-neutral-500);
}

.annuncio-competenze span::before { content: '·'; margin-right: 6px; opacity: 0.6; }

.annuncio-competenze span:first-child::before { content: none; }

.competenze-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px 14px;
}

.campo-spunta {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--color-neutral-300);
  cursor: pointer;
  min-height: 30px;
}

.campo-spunta input {
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent-500);
  cursor: pointer;
}

.campo-spunta { font-size: 14px; }

/* I due moduli — pubblicare un annuncio, mettersi a disposizione — impilati in fondo. */
.annuncio-invii { display: grid; gap: 12px; }

.annuncio-invio--persona > summary { color: var(--color-amber); }