/* ==========================================================================
   TUTTINSIEME — persona.css · scheda persona                       [persona]
   Desktop : maquette 2c (inventaire §4) · mobile ≤700px : phone 3 (§7.3),
   mêmes contenus en colonne unique (SPEC-HANDOFF §2f).
   Étend base.css (tokens, .tt-tirage, .tt-chip-persona, .tt-label) — n'y
   redéfinit rien.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Lien retour « ← Tornate all'albero »
   -------------------------------------------------------------------------- */
.tt-persona__ritorno { padding: 22px 64px 0; }
.tt-persona__ritorno a { font-size: 18px; }

/* --------------------------------------------------------------------------
   2. En-tête identité — grid 330/1fr, tirage portrait ou bloc initiales
   -------------------------------------------------------------------------- */
.tt-persona__testata {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 56px;
  align-items: start;
  padding: 28px 64px 52px;
}

/* La rotation du portrait vient du markup (--rot:-1.6deg), la géométrie du
   tirage vient de base.css. Bloc initiales : mêmes cadre et backing que la
   photo attendue, initiales Cormorant dessus. */
.tt-persona__iniziali {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--tt-font-titoli);
  font-weight: 600;
  font-size: 96px;
  letter-spacing: .04em;
  color: var(--tt-iniziali);
}

.tt-persona__titolo-riga {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.tt-persona__nome {
  font-size: 56px;
  line-height: 1.05;
}

.tt-persona__chip-ramo {
  display: inline-flex;
  align-items: center;
  padding: 5px 16px;
  border: 1.5px solid rgba(47,100,134,.55);
  border-radius: 999px;
  color: var(--tt-maiolica);
  font-size: 14.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tt-persona__sottotitolo {
  margin-top: 8px;
  font-size: 21px;
  font-style: italic;
  color: var(--tt-meta);
}

/* Grille 2×2 des champs — les rangées absentes ne réservent aucune case */
.tt-persona__campi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 40px;
  max-width: 720px;
  margin-top: 28px;
}

.tt-persona__campo-valore {
  margin-top: 3px;
  font-size: 19px;
  line-height: 1.5;
}

/* Desktop : valeur sur deux lignes (date puis lieu) ; le séparateur « — »
   ne sert qu'à la version mobile en ligne (§7.3). */
.tt-persona__campo-riga { display: block; }
.tt-persona__campo-sep { display: none; }

/* --------------------------------------------------------------------------
   3. La famiglia vicina — bandeau #EFE3CB, 3 groupes de chips
   -------------------------------------------------------------------------- */
.tt-persona__famiglia {
  margin: 0 64px;
  background: var(--tt-banda);
  border: 1px solid rgba(122,90,52,.28);
  padding: 34px 44px;
}

.tt-persona__famiglia-titolo {
  margin: 0 0 22px;
  font-size: 34px;
}

/* La colonne des figli (1.4fr) est plus large : chips en rangée qui wrappe */
.tt-persona__famiglia-griglia {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 36px;
}

.tt-persona__gruppo-label { margin-bottom: 12px; }

.tt-persona__gruppo-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.tt-persona__gruppo-chips--riga {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

/* --------------------------------------------------------------------------
   4. La sua storia — notice, colonne de lecture 46em
   -------------------------------------------------------------------------- */
.tt-persona__storia { padding: 56px 64px 20px; }

.tt-persona__sezione-titolo {
  margin: 0 0 18px;
  font-size: 36px;
}

.tt-persona__storia-corpo { max-width: 46em; }
.tt-persona__storia-corpo p {
  margin: 0 0 16px;
  font-size: 19.5px;
  line-height: 1.75;
  color: var(--tt-corpo);
}
.tt-persona__storia-corpo p:last-child { margin: 0; }

/* Photos au fil de la notice (retour client V1 : les histoires vivent ici,
   la notice accepte des images markdown). Chaque photo se rend en tirage —
   reprise des patterns .tt-tirage de base.css §10 : cadre papier blanc
   (fond bianco, padding 12/12/13, bords francs), ombre pleine, marges
   verticales généreuses. Deux formes acceptées dans le markdown [content] :
   — image nue ![didascalia](foto.jpg) → <p><img></p> : l'img porte elle-même
     le cadre (l'alt reste pour les lecteurs d'écran — une didascalia VISIBLE
     exige le markup figure/figcaption) ;
   — <figure> avec figcaption (dont .tt-tirage reprises des ex-racconti) :
     le cadre est porté par la figure, la didascalia passe en italique,
     même dessin que .tt-tirage__didascalia. */
.tt-persona__storia-corpo img {
  display: block;
  width: 100%;
  height: auto;
}
.tt-persona__storia-corpo p > img {
  margin: 34px 0;
  padding: 12px 12px 13px;
  background: var(--tt-bianco);
  border-radius: 0;
  box-shadow: var(--tt-ombra-tirage);
}
.tt-persona__storia-corpo figure { margin: 34px 0; }
.tt-persona__storia-corpo figure:not(.tt-tirage) {
  padding: 12px 12px 13px;
  background: var(--tt-bianco);
  box-shadow: var(--tt-ombra-tirage);
}
.tt-persona__storia-corpo figcaption,
.tt-persona__storia-corpo .tt-tirage__didascalia {
  margin-top: 11px;
  font-style: italic;
  font-size: 16px;
  line-height: 1.45;
  text-align: center;
  color: var(--tt-didascalia);
}

/* --------------------------------------------------------------------------
   5. Le fotografie — 3 tirages 4/3 + compteur
   -------------------------------------------------------------------------- */
.tt-persona__foto { padding: 44px 64px 16px; }

.tt-persona__foto-riga {
  display: flex;
  flex-wrap: wrap; /* le compteur FR, plus long, peut passer dessous */
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  margin-bottom: 26px;
}
.tt-persona__foto-riga .tt-persona__sezione-titolo { margin: 0; }

.tt-persona__foto-contatore {
  font-size: 18px;
  white-space: nowrap;
}
/* Compteur sans cible (pas de page « toutes les photos ») : texte inerte */
.tt-persona__foto-contatore--inerte { color: var(--tt-meta); }

.tt-persona__foto-griglia {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}

/* Petits tirages (équivalent .tt-tirage--sm, la macro tirage() ne prend pas
   de classe) + rotations −0,8°/+0,7°/−0,5° de la maquette, cycliques */
.tt-persona__foto-griglia .tt-tirage {
  padding: 10px 10px 11px;
  box-shadow: var(--tt-ombra-tirage-sm);
}
.tt-persona__foto-griglia .tt-tirage__didascalia {
  margin-top: 9px;
  font-size: 15.5px;
}
.tt-persona__foto-griglia .tt-tirage:nth-child(3n + 1) { --rot: -.8deg; }
.tt-persona__foto-griglia .tt-tirage:nth-child(3n + 2) { --rot: .7deg; }
.tt-persona__foto-griglia .tt-tirage:nth-child(3n) { --rot: -.5deg; }

/* La section « Nei racconti » (ex-§6) a été SUPPRIMÉE (retour client V1).
   La dernière section présente — quelle qu'elle soit, les fotografie peuvent
   manquer — ferme la page avant le footer. */
.tt-persona > section:last-child { padding-bottom: 56px; }

/* ==========================================================================
   6. Mobile ≤700px — phone 3 (inventaire §7.3), colonne unique
   ========================================================================== */
@media (max-width: 700px) {
  .tt-persona__ritorno { padding: 16px 18px 0; }
  .tt-persona__ritorno a { font-size: 17px; }

  /* En-tête empilé : tirage 230 centré, identité centrée */
  .tt-persona__testata {
    display: block;
    padding: 0 0 4px;
  }
  .tt-persona__ritratto {
    width: 230px;
    margin: 18px auto 0;
  }
  .tt-persona__ritratto .tt-tirage {
    padding: 10px 10px 11px;
    box-shadow: var(--tt-ombra-tirage-sm);
  }
  .tt-persona__ritratto .tt-tirage__didascalia {
    margin-top: 8px;
    font-size: 15px;
  }
  .tt-persona__iniziali { font-size: 68px; }

  /* Ordre du phone 3 : nom, sous-titre, chip de branche — la rangée titre
     est dissoute (display:contents) pour intercaler le sous-titre */
  .tt-persona__identita {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 18px 4px;
  }
  .tt-persona__titolo-riga { display: contents; }
  .tt-persona__nome { order: 1; font-size: 36px; }
  .tt-persona__sottotitolo { order: 2; margin-top: 6px; font-size: 18px; }
  .tt-persona__chip-ramo { order: 3; margin-top: 10px; padding: 4px 14px; font-size: 13.5px; }

  /* Champs en colonne, valeur en ligne « date — lieu » */
  .tt-persona__campi {
    order: 4;
    display: flex;
    flex-direction: column;
    gap: 13px;
    align-self: stretch;
    max-width: none;
    margin-top: 18px;
    padding: 0 4px;
    text-align: left;
  }
  .tt-persona__campo-label { font-size: 12.5px; letter-spacing: .15em; }
  .tt-persona__campo-valore { margin-top: 2px; font-size: 18px; }
  .tt-persona__campo-riga,
  .tt-persona__campo-sep { display: inline; }

  /* Titres de sections → labels petites caps (phone 3) */
  .tt-persona__famiglia-titolo,
  .tt-persona__sezione-titolo {
    margin: 0 0 10px;
    font-family: var(--tt-font-corpo);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .15em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--tt-maiolica);
  }

  /* Famiglia vicina : plus de bandeau, groupes fondus en une seule nappe de
     chips (labels gardés pour les lecteurs d'écran), chips compactes sans
     avatar ni années, flèche → (le ↗ des maquettes est remplacé, contrat) */
  .tt-persona__famiglia {
    margin: 0;
    padding: 16px 22px 0;
    background: none;
    border: none;
  }
  .tt-persona__famiglia-griglia {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .tt-persona__gruppo,
  .tt-persona__gruppo-chips { display: contents; }
  .tt-persona__gruppo-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .tt-persona__famiglia .tt-chip-persona { padding: 9px 16px; }
  .tt-persona__famiglia .tt-chip-persona__avatar,
  .tt-persona__famiglia .tt-chip-persona__anni { display: none; }
  .tt-persona__famiglia .tt-chip-persona__nome { font-size: 16px; }
  .tt-persona__famiglia a.tt-chip-persona::after { content: "→"; margin-left: 7px; }

  .tt-persona__storia { padding: 20px 22px 0; }
  .tt-persona__storia-corpo p {
    margin: 0 0 14px;
    font-size: 18px;
    line-height: 1.7;
  }

  /* Photos de la notice en petit format (valeurs des tirages --sm) */
  .tt-persona__storia-corpo p > img,
  .tt-persona__storia-corpo figure:not(.tt-tirage) {
    padding: 10px 10px 11px;
    box-shadow: var(--tt-ombra-tirage-sm);
  }
  .tt-persona__storia-corpo p > img,
  .tt-persona__storia-corpo figure { margin: 26px 0; }
  .tt-persona__storia-corpo figcaption,
  .tt-persona__storia-corpo .tt-tirage__didascalia {
    margin-top: 9px;
    font-size: 15px;
  }

  .tt-persona__foto { padding: 24px 22px 0; }
  .tt-persona__foto-riga { display: block; margin-bottom: 14px; }
  .tt-persona__foto-riga .tt-persona__sezione-titolo { margin: 0 0 8px; }
  .tt-persona__foto-contatore { font-size: 18px; white-space: normal; }
  .tt-persona__foto-griglia {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  /* La dernière section ferme la page (les racconti n'existent plus) */
  .tt-persona > section:last-child { padding-bottom: 40px; }
}