/* ==========================================================================
   chi c'e' dietro — vedi doc/copy.md, sezione «CHI C'E' DIETRO».

   Tre card con ritratto, nome, ruolo e una riga umana, sull'impianto delle
   card team di incloud.srl portato in palette EDILinCloud.
   Zero JavaScript, zero classi Bootstrap. Mobile-first.
   La regola prefers-reduced-motion e il focus-visible stanno in edil.css.
   ========================================================================== */

/* Fondo --tinta e card BIANCHE: fra i punti forti (scuri) e i prezzi
   (bianchi). Bianca qui, la sezione si incollerebbe a quella dei prezzi e le
   due sembrerebbero una sola pagina lunga. */
.soci {
  background: var(--tinta);
  padding: 64px 0 72px;
}

/* --------------------------------------------------------------------------
   Testata centrata
   -------------------------------------------------------------------------- */
.soci-testata {
  text-align: center;
  margin-bottom: 40px;
}

/* CONTRASTO: come in area-dipendente, l'azzurro pieno sul fondo --tinta sta a
   2,80:1, sotto il 4,5:1 che WCAG AA chiede a un'etichetta di 12,5 px.
   Portato a --blu: 6,38:1. */
.soci-occhiello {
  font-size: 12.5px;
  letter-spacing: .16em;
  color: var(--blu);
  margin-bottom: 14px;
}

.soci-titolo {
  font-family: var(--f-titolo);
  font-weight: 700;
  font-size: clamp(29px, 6.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -.035em;
  color: var(--testo-forte);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Le tre card
   -------------------------------------------------------------------------- */
.soci-griglia {
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

/* La card e' una colonna: intestazione, biografia, e il link in fondo
   incollato al bordo inferiore (margin-top:auto) cosi' i tre link stanno
   sulla stessa riga anche con biografie di lunghezza diversa. */
.socio {
  display: flex;
  flex-direction: column;
  background: var(--bianco);
  border: 1px solid var(--filetto);
  border-radius: var(--r-medio);
  padding: 22px;
  box-shadow: 0 1px 2px rgba(16, 36, 59, .04);
}

.socio-intestazione {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

/* Ritratto verticale e non tondo: le illustrazioni sono a mezzo busto, e in un
   cerchio resterebbe poco piu' della faccia. Il bordo azzurro tenue e' quello
   che tiene insieme l'arancio del fondo del ritratto e il blu della pagina —
   senza, il rettangolo arancio sembra incollato sopra la card. */
.socio-ritratto {
  width: 92px;
  height: 115px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid rgba(46, 155, 230, .22);
  display: block;
}

.socio-nome {
  font-family: var(--f-titolo);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  color: var(--testo-forte);
  margin: 0 0 4px;
}

/* Il ruolo E' l'accento blu della card: l'unico elemento colorato accanto al
   ritratto, che di colore ne porta gia' tanto per conto suo. */
.socio-ruolo {
  font-family: var(--f-etichetta);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--blu);
  margin: 0;
}

.socio-bio {
  font-family: var(--f-testo);
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--testo);
  margin: 0 0 18px;
}

.socio-chiave {
  font-weight: 500;
  color: var(--testo-forte);
}

/* Il link sta in fondo alla card e non nel corpo: e' un rimando, non parte
   della biografia. `margin-top: auto` lo spinge al fondo. */
.socio-linkedin {
  align-self: flex-start;
  margin-top: auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--blu);
  background: rgba(46, 155, 230, .10);
  transition: background-color 180ms ease, color 180ms ease;
}
.socio-linkedin:hover,
.socio-linkedin:focus-visible {
  color: var(--bianco);
  background: var(--blu);
}

.socio-linkedin svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   Chiusura: la frase e il rimando alla casa madre
   -------------------------------------------------------------------------- */
.soci-chiusura {
  text-align: center;
  border-top: 1px solid var(--filetto);
  padding-top: 34px;
}

.soci-frase {
  font-family: var(--f-titolo);
  font-weight: 700;
  font-size: clamp(19px, 3.4vw, 23px);
  line-height: 1.4;
  color: var(--testo-forte);
  max-width: 46ch;
  margin: 0 auto 26px;
}

.soci-casa-madre {
  font-family: var(--f-testo);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--testo-tenue);
  margin: 0 0 12px;
}

.soci-incloud {
  display: inline-block;
  line-height: 0;
}

/* Il logo arriva a 360x104: qui sta a 200 px, e l'altezza la calcola il
   browser dalle proporzioni dichiarate nel tag. */
.soci-incloud img {
  width: 200px;
  height: auto;
}

.soci-incloud:hover img,
.soci-incloud:focus-visible img { opacity: .82; }

/* --------------------------------------------------------------------------
   Da 680 px: due colonne. La terza card resta larga una colonna e non si
   allarga a due: una card doppia in fondo peserebbe piu' delle altre e
   direbbe una gerarchia che fra tre soci non c'e'.
   -------------------------------------------------------------------------- */
@media (min-width: 680px) {
  .soci-griglia { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .soci { padding: 96px 0 104px; }
  .soci-testata { margin-bottom: 52px; }
  .socio { padding: 26px; }
}

/* --------------------------------------------------------------------------
   Da 1000 px: tre colonne, una riga sola.
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  .soci-griglia { grid-template-columns: repeat(3, 1fr); }
}