/* Person card — STANDARD condiviso (.claude/references/person-card-standard.md).
   Foto 4:5 (testa in alto, mai volto tagliato) + nome/ruolo in overlay sul fondo
   foto con dissolvenza breve + fascia scura sotto. Pannello scuro (--brand-ink)
   anche su sito a tema chiaro -> look identico ovunque.
   Applicato al deliverable website succol (pagina Team). */
.person-grid { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 1.5rem;
  grid-template-columns: minmax(0,1fr); align-items: stretch; }
@media (min-width: 40rem) { .person-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 64rem) { .person-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 75rem) { .person-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.person-card { position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 0; text-align: left; border-radius: 1.25rem;
  border: .0625rem solid color-mix(in srgb, var(--brand-on-dark) 18%, transparent);
  background: var(--brand-ink); box-shadow: 0 1.5rem 3rem -1.5rem rgba(0,0,0,.55); }
.person-photo-wrap { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 5; overflow: hidden; margin: 0; }
.person-photo-wrap picture, .person-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; display: block; }
.person-photo-wrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  pointer-events: none; z-index: 1; background: linear-gradient(180deg, transparent 0%, var(--brand-ink) 90%); }
.person-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.2rem 1.4rem 1rem; }
.person-caption h3 { margin: 0 0 .55rem; color: var(--brand-on-dark); text-shadow: 0 .0625rem .75rem rgba(0,0,0,.8); }
.person-role { display: inline-block; margin: 0;
  font-family: ui-monospace, 'Cascadia Code', SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-ink) 60%, transparent);
  border: .0625rem solid color-mix(in srgb, var(--brand-accent) 45%, transparent);
  border-radius: 999px; padding: .25rem .7rem; }
.person-body { padding: 1rem 1.4rem 1.5rem; background: var(--brand-ink); flex: 1 0 auto; }
.person-bio { margin: 0; font-size: .9375rem; line-height: 1.5;
  color: color-mix(in srgb, var(--brand-on-dark) 78%, transparent); }

/* Card team leggermente più piccole su mobile (richiesta operatore
   2026-07-09) — scoped sotto i 40rem, dove sono impilate a colonna
   singola; tablet/desktop restano invariati. */
@media (max-width: 39.99rem) {
  .person-grid { gap: 1.1rem; }
  /* Card ristretta e centrata (non full-width): scala anche la foto,
     non solo i margini interni (richiesta operatore 2026-07-09). */
  .person-card { max-width: 87%; margin-inline: auto; }
  .person-caption { padding: 1rem 1.1rem .85rem; }
  .person-role { padding: .2rem .6rem; }
  .person-body { padding: .85rem 1.1rem 1.2rem; }
}

/* Pulsanti Mail + LinkedIn: pastiglie-icona affiancate in alto a destra della
   card (richiesta operatore 2026-07-09: mail accanto al pulsantino LinkedIn). */
.person-linkedin, .person-mail { position: absolute; top: .8rem; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; padding: 0; border-radius: 999px;
  text-decoration: none; color: var(--brand-on-dark);
  border: .0625rem solid color-mix(in srgb, var(--brand-on-dark) 32%, transparent);
  background: color-mix(in srgb, var(--brand-ink) 55%, transparent);
  backdrop-filter: blur(.35rem); -webkit-backdrop-filter: blur(.35rem);
  transition: background .2s ease, color .2s ease, border-color .2s ease; }
.person-mail { right: 3.4rem; }
.person-linkedin { right: .8rem; }
.person-linkedin svg, .person-mail svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.person-linkedin span, .person-mail span { position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.person-linkedin:hover, .person-linkedin:focus-visible,
.person-mail:hover, .person-mail:focus-visible { background: var(--brand-accent); color: #fff; border-color: var(--brand-accent); }