/* ============================================================
   ESTETICA CRISTINA — Chi Sono + Principi
   Immagine + testo, poi tre colonne numerate (I / II / III)
   in Italiana, su fondo ivory-2.
   ============================================================ */

.chisono {
  background-color: var(--bg-ivory);
  padding-block: var(--sp-xxl);
}
.chisono__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--sp-xl);
  align-items: center;
  margin-bottom: var(--sp-xxl);
}
.chisono__media { aspect-ratio: 3 / 4; overflow: hidden; }
.chisono__media img { width: 100%; height: 100%; object-fit: cover; }
.chisono__text p { margin-bottom: var(--sp-sm); max-width: 46ch; }
.chisono__text p:last-child { margin-bottom: 0; }

/* ─── Foto team — annotazioni al passaggio del mouse ─────────────
   Un punto discreto su ogni volto: al passaggio (o tap/focus) una
   linea sottile esce dalla foto e porta il nome. .team-photo non
   ha overflow:hidden (a differenza di .chisono__media, che lo
   richiede per il wipe del clip-reveal) così l'etichetta può
   davvero uscire dai bordi dell'immagine. */
.team-photo { position: relative; }
.team-photo__points { position: absolute; inset: 0; }

.team-photo__point {
  position: absolute;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.team-photo__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(184, 150, 116, 0.3);
  transition: transform var(--t-fast);
}
.team-photo__point.is-active .team-photo__dot,
.team-photo__point:hover .team-photo__dot,
.team-photo__point:focus-visible .team-photo__dot { transform: scale(1.3); }

.team-photo__line {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 1px;
  background: var(--accent);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--ease-out);
}

.team-photo__label {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  white-space: nowrap;
  color: var(--text-dark);
  background: var(--bg-ivory);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius);
  padding: 0.5rem 0.9rem;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out) 0.12s, transform 0.35s var(--ease-out) 0.12s;
}
.team-photo__label strong {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.team-photo__label em {
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dark-muted);
}

.team-photo__point.is-active .team-photo__line,
.team-photo__point:hover .team-photo__line,
.team-photo__point:focus-visible .team-photo__line { transform: rotate(var(--line-angle)) scaleX(1); }
.team-photo__point:not(:hover):not(:focus-visible):not(.is-active) .team-photo__line { transform: rotate(var(--line-angle)) scaleX(0); }

.team-photo__point.is-active .team-photo__label,
.team-photo__point:hover .team-photo__label,
.team-photo__point:focus-visible .team-photo__label { opacity: 1; transform: translateY(0); }

/* Posizioni sul colletto/spalla (mai sul viso) e direzione della
   linea/etichetta per ciascuna delle 4 persone — coordinate in
   percentuale, così restano ancorate a qualunque larghezza. Solo
   direzioni verticali (mai laterali): a sinistra o a destra
   l'etichetta rischiava di uscire dal viewport su schermi stretti
   (Barbara, Lara), verso il basso quella di Cristina finiva sul
   viso di Federica. Le tre persone in alto puntano verso l'alto,
   Federica (in primo piano, in basso) punta verso il basso. */
.team-photo__point--1,
.team-photo__point--2,
.team-photo__point--3 { --line-angle: -90deg; }
.team-photo__point--1 .team-photo__label,
.team-photo__point--2 .team-photo__label,
.team-photo__point--3 .team-photo__label { left: 50%; top: -70px; align-items: center; text-align: center; transform: translate(-50%, 6px); }
.team-photo__point--1.is-active .team-photo__label, .team-photo__point--1:hover .team-photo__label, .team-photo__point--1:focus-visible .team-photo__label,
.team-photo__point--2.is-active .team-photo__label, .team-photo__point--2:hover .team-photo__label, .team-photo__point--2:focus-visible .team-photo__label,
.team-photo__point--3.is-active .team-photo__label, .team-photo__point--3:hover .team-photo__label, .team-photo__point--3:focus-visible .team-photo__label { transform: translate(-50%, 0); }

.team-photo__point--1 { left: 16%; top: 57%; }
.team-photo__point--2 { left: 50%; top: 55%; }
.team-photo__point--3 { left: 84%; top: 58%; }

.team-photo__point--4 { left: 15%; top: 87%; --line-angle: 90deg; }
.team-photo__point--4 .team-photo__label { left: 50%; top: 66px; align-items: center; text-align: center; transform: translate(-50%, -6px); }
.team-photo__point--4.is-active .team-photo__label,
.team-photo__point--4:hover .team-photo__label,
.team-photo__point--4:focus-visible .team-photo__label { transform: translate(-50%, 0); }

@media (max-width: 640px) {
  .team-photo__line { width: 34px; }
  .team-photo__label { padding: 0.4rem 0.7rem; }
  .team-photo__label strong { font-size: 0.68rem; }
  .team-photo__label em { font-size: 0.58rem; }
  .team-photo__point--1 .team-photo__label,
  .team-photo__point--2 .team-photo__label,
  .team-photo__point--3 .team-photo__label { top: -54px; }
  .team-photo__point--4 .team-photo__label { top: 44px; }
}

.principi {
  background-color: var(--bg-ivory-2);
  border-top: 1px solid var(--hairline-dark);
  border-bottom: 1px solid var(--hairline-dark);
  margin-inline: calc(var(--pad-x) * -1);
  padding: var(--sp-xl) var(--pad-x);
}
.principi__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
  max-width: var(--max-w);
  margin-inline: auto;
}
.principi__item .index-number { font-size: 1.1rem; }
.principi__title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
}
.principi__desc { font-size: var(--text-sm); max-width: 34ch; }

@media (max-width: 860px) {
  .chisono__grid { grid-template-columns: 1fr; gap: var(--sp-md); }
  .principi__grid { grid-template-columns: 1fr; gap: var(--sp-lg); }
}