/* La pagina degli spazi cliente.
 *
 * Eredita i token di `workroom.css` — stessa carta minerale, stesso verde, stessa
 * tipografia — e aggiunge soltanto ciò che la workroom non ha: una griglia di
 * schede e il dialogo di apertura di uno spazio. La workroom blocca lo scroll del
 * body per tenere insieme conversazione e dossier; qui l'elenco deve scorrere,
 * quindi `body.home` disfa quel vincolo invece di duplicare il layout.
 */

body.home {
  display: block;
  height: auto;
  min-height: 100%;
  overflow: auto;
  background: var(--bg);
}

body.home .appbar {
  /* Altezza propria, non `--chrome-height`: quella variabile ora vale zero
     perche' la workroom non ha piu' una fascia in alto, e la home invece ce
     l'ha ancora — e' l'unica pagina in cui una barra dice qualcosa di tutta
     la pagina invece che di una colonna. */
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: 4.5rem;
}

.home__main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.home__intro {
  max-width: 62ch;
  margin-bottom: 2rem;
}

.home__intro h2 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.home__intro p {
  margin: 0;
  color: var(--ink-muted);
}

.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.client-grid > li {
  /* Senza, la scheda non riempie la cella della griglia e due clienti con
     schede di lunghezza diversa producono card di altezze diverse, con i piedi
     disallineati. La riga deve leggersi come una riga. */
  display: grid;
  /* I comandi si sovrappongono all'angolo della scheda, che è un link: dentro
     non potevano stare — un bottone annidato in un `<a>` è markup non valido e
     un click su di esso navigherebbe comunque. */
  position: relative;
}

/* Fermi finché non servono. Compaiono al passaggio del mouse e ogni volta che
   la tastiera entra nella scheda: chi naviga con Tab li deve poter vedere,
   non solo raggiungere. */
.client-card__actions {
  position: absolute;
  inset-block-start: 0.7rem;
  inset-inline-end: 0.75rem;
  display: flex;
  gap: 0.3rem;
  opacity: 0;
  transition: opacity 160ms var(--ease-out);
}

.client-cell:hover .client-card__actions,
.client-cell:focus-within .client-card__actions {
  opacity: 1;
}

.client-card__action {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface);
  color: var(--ink-muted);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}

.client-card__action:hover:not(:disabled),
.client-card__action:focus-visible {
  border-color: var(--line-strong);
  color: var(--ink);
}

.client-card__action:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Il puntatore fine è l'unico contesto in cui «al passaggio del mouse» vuol
   dire qualcosa: su un touch screen i comandi resterebbero invisibili per
   sempre. */
@media (hover: none) {
  .client-card__actions { opacity: 1; }
}

.client-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.15rem 1.25rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--paper-shadow);
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.client-card:hover,
.client-card:focus-visible {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

/* La sagoma d'attesa: la forma di una scheda, senza dire niente.
   Alta quanto una scheda vera con settore e piede, così l'elenco che arriva
   non fa saltare la pagina. */
.client-card--ghost {
  min-height: 9.5rem;
  border-style: dashed;
  background: var(--surface);
  box-shadow: none;
  opacity: 0.55;
}

@media (prefers-reduced-motion: no-preference) {
  .client-card--ghost {
    animation: ghost-breath 1.4s ease-in-out infinite;
  }
}

@keyframes ghost-breath {
  50% { opacity: 0.3; }
}

.client-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.25;
}

.client-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.82rem;
}

.client-card__tag {
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm);
  background: var(--accent-wash);
  color: var(--accent-strong);
}

.client-card__notes {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 0.86rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.client-card__footer {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 0.78rem;
}

@media (max-width: 620px) {
  .home__main {
    padding: 1.5rem 1rem 3rem;
  }

  .client-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-card {
    transition: none;
  }

  .client-card:hover,
  .client-card:focus-visible {
    transform: none;
  }
}