/* ==========================================================================
   TUTTINSIEME — chi-siamo.css · écran 2e (desktop) + 2f phone 5 (mobile)
   Propriétaire : [chi-siamo]. Étend base.css (tt-tirage, tt-cta, tt-label).
   Géométrie : docs/INVENTAIRE-MAQUETTES.md §6 et §7.5.
   Grid en template-areas : le portrait passe SOUS le bloc titre en mobile
   (ordre maquette : intestazione → ritratto → lettre) sans dupliquer le DOM.
   ========================================================================== */

.tt-chisiamo {
  display: grid;
  grid-template-columns: 380px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "ritratto intestazione"
    "ritratto corpo";
  column-gap: 64px;
  align-items: start;
  max-width: 1140px;
  margin: 0 auto;
  padding: 64px;
}

.tt-chisiamo__intestazione { grid-area: intestazione; }
.tt-chisiamo__ritratto     { grid-area: ritratto; }
.tt-chisiamo__corpo        { grid-area: corpo; }

/* --------------------------------------------------------------------------
   Portrait — tirage 3/4 tourné −1,8° (base.css) ; placeholder initiale
   Cormorant sur le backing tant que la photo réelle de Giuseppe manque.
   -------------------------------------------------------------------------- */
.tt-chisiamo__iniziali {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: var(--tt-font-titoli);
  font-weight: 600;
  font-size: 120px;
  line-height: 1;
  color: var(--tt-iniziali);
}

/* --------------------------------------------------------------------------
   Colonne droite — surtitre, H1 52 px, lettre, signature, contact
   -------------------------------------------------------------------------- */
.tt-chisiamo__occhiello {
  font-size: 15px;
  letter-spacing: .18em;
}

.tt-chisiamo__titolo {
  margin: 14px 0 24px;
  font-size: 52px;
  line-height: 1.08;
}

.tt-chisiamo__lettera p {
  margin: 0 0 16px;
  font-size: 19.5px;
  line-height: 1.75;
  color: var(--tt-corpo-racconto);
}
.tt-chisiamo__lettera p:last-child { margin-bottom: 26px; }

/* Version condensée mobile : masquée en desktop (exclusion mutuelle,
   même mécanique que les deux textes du footer) */
.tt-chisiamo__lettera--mobile { display: none; }

.tt-chisiamo__firma {
  margin-bottom: 34px;
  font-family: var(--tt-font-titoli);
  font-style: italic;
  font-weight: 500; /* l'italique 400 n'est pas chargée : 500 = graisse la plus proche */
  font-size: 28px;
  color: var(--tt-inchiostro);
}

.tt-chisiamo__contatto {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.tt-chisiamo__cta { font-size: 20px; }

.tt-chisiamo__email {
  font-size: 18px;
  color: var(--tt-didascalia);
}

/* --------------------------------------------------------------------------
   Mobile ≤ 700px — phone 5 : colonne unique centrée en tête, tirage 230 px,
   lettre condensée, CTA pleine largeur, email centré dessous.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .tt-chisiamo {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "intestazione"
      "ritratto"
      "corpo";
    column-gap: 0;
    max-width: none;
    padding: 0;
  }

  .tt-chisiamo__intestazione {
    padding: 24px 20px 0;
    text-align: center;
  }

  .tt-chisiamo__occhiello {
    font-size: 13.5px;
    letter-spacing: .16em;
  }

  .tt-chisiamo__titolo {
    margin: 12px 0 0;
    font-size: 34px;
    line-height: 1.15;
  }

  /* H1 sur une seule ligne : le saut desktop disparaît */
  .tt-chisiamo__acapo { display: none; }

  /* Tirage réduit et centré — métriques « sm » du design system */
  .tt-chisiamo__ritratto {
    width: 230px;
    margin: 20px auto 0;
    padding: 10px 10px 11px;
    box-shadow: var(--tt-ombra-tirage-sm);
  }
  .tt-chisiamo__ritratto .tt-tirage__didascalia {
    margin-top: 8px;
    font-size: 15px;
  }
  .tt-chisiamo__iniziali { font-size: 76px; }

  .tt-chisiamo__corpo { padding: 20px 22px 6px; }

  .tt-chisiamo__lettera--desktop { display: none; }
  .tt-chisiamo__lettera--mobile { display: block; }

  .tt-chisiamo__lettera p {
    margin: 0 0 14px;
    font-size: 18px;
    line-height: 1.7;
  }
  .tt-chisiamo__lettera p:last-child { margin-bottom: 16px; }

  .tt-chisiamo__firma {
    margin-bottom: 18px;
    font-size: 24px;
  }

  .tt-chisiamo__contatto { display: block; }

  .tt-chisiamo__cta {
    display: flex;
    width: 100%;
    font-size: 19px;
  }

  .tt-chisiamo__email {
    display: block;
    margin-top: 10px;
    text-align: center;
    font-size: 16.5px;
  }
}