/* ==========================================================================
   Pagina "Chi sono" (/chisono/)
   Valori ripresi da post-2396.css (Elementor) del sito originale.
   Breakpoint: tablet <= 1024px, mobile <= 767px.
   ========================================================================== */

/* --- Titolo ---------------------------------------------------------------
   Nell'originale il primo blocco ha margin-top 100px (altezza header) +
   padding-top 5% della larghezza. Qui l'header si sovrappone alla pagina,
   quindi i 100px diventano parte del padding. */
.cs-title {
  padding: calc(100px + 5%) 0 0;
  text-align: center;
}
.cs-title h1 {
  margin: 0;
  color: var(--c-text);
  line-height: 1;
}

/* --- Intro: foto circolare + presentazione -------------------------------- */
.cs-intro { padding: 0 3%; }
.cs-intro__inner {
  max-width: 991px;
  min-height: 449px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 55fr 45fr;
  grid-template-areas: "media text";
  column-gap: 5%;
  align-items: center;
}
.cs-intro__media { grid-area: media; }
.cs-intro__text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
/* stessa resa della maschera "circle" di Elementor: cerchio centrato,
   diametro = lato corto della foto 4:3.
   max-width ridotto: la foto occupava tutta la colonna (55fr, ~518px). */
.cs-intro__media img {
  width: 100%;
  max-width: var(--portrait);
  height: auto;
  display: block;
  margin-inline: auto;
  clip-path: circle(closest-side at 50% 50%);
}

.cs-intro h2,
.cs-block h3 {
  margin: 0;
  color: var(--c-navy);
  font-size: 34px;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
}
.cs-intro__text p { margin: 0 0 .9em; }

/* --- Blocchi di testo ----------------------------------------------------- */
.cs-block {
  margin-top: 52px;
  padding: 10px;
}
.cs-block__inner {
  max-width: 930px;
  margin-inline: auto;
}
.cs-block h3 { margin-bottom: 20px; }

/* elenchi puntati: il punto è in linea col testo, come nell'originale */
.cs-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cs-list li { margin: 0 0 .9em; }
.cs-list li::before {
  content: "•";
  content: "•" / "";
  margin-right: .3em;
}

/* --- Tablet --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .cs-title { padding: calc(100px + 8%) 0 8%; }

  .cs-intro {
    margin-top: 15%;
    padding: 0 5%;
  }
  .cs-intro__inner {
    display: block;
    min-height: 0;
  }
  .cs-intro__text { padding-right: 10%; }
  .cs-intro__media { margin-top: 10%; }
  /* stessa misura delle altre pagine */
  .cs-intro__media img { max-width: var(--portrait); margin-inline: auto; }
}

/* --- Mobile --------------------------------------------------------------- */
@media (max-width: 767px) {
  .cs-title { padding: calc(100px + 15%) 5% 0; }

  .cs-intro { margin-top: 13%; }
  .cs-intro__text {
    padding-right: 0;
    text-align: center;
  }
  .cs-intro__media { margin-top: 15%; }

  .cs-block h3 { text-align: center; }
}