/* La galleria dei template: riusa i colori e i bordi del sito, cambia solo
   l'impaginazione. Niente sistema di stile nuovo per una pagina sola. */
.galleria { padding-block: 56px 90px; }
.galleria-testa { max-width: 720px; margin-bottom: 56px; }
.galleria-testa h1 { font-size: clamp(42px, 6vw, 76px); line-height: 1.02; margin-block: 18px 20px; }

.galleria-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; }

.tessera {
  display: flex; flex-direction: column;
  border: var(--bordo); border-radius: 20px; background: var(--carta);
  box-shadow: var(--ombra); overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.tessera:hover { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--inchio); }
.tessera-attesa { opacity: .62; }
.tessera-attesa:hover { transform: none; box-shadow: var(--ombra); }

/* L'anteprima e disegnata coi tre colori veri del template: si capisce al
   volo che aria tira, senza dover caricare una fotografia. */
.tessera-anteprima { height: 150px; border-bottom: var(--bordo); display: flex; }
.tessera-anteprima span { flex: 1; }
.tessera-anteprima span:first-child { flex: 2.4; }

.tessera-corpo { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tessera-alto { display: flex; align-items: baseline; gap: 10px; }
.tessera-numero { font-family: var(--display); font-size: 13px; color: var(--grigio); }
.tessera-corpo h2 { font-size: 27px; }
.tessera-mestiere {
  align-self: flex-start;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  padding: 6px 12px; border: var(--bordo); border-radius: 999px; background: var(--acido);
}
.tessera-categoria { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--grigio); }
.tessera-corpo p { font-size: 14px; color: var(--grigio); flex: 1; }
.tessera-vai { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-top: 6px; }

@media (max-width: 680px) { .galleria-griglia { grid-template-columns: 1fr; } }