.about-me {
  display: flex;              /* attiva Flexbox per affiancare foto e testo */
  flex-wrap: wrap;            /* permette agli elementi di andare a capo se lo spazio non basta */
  font-family: 'Poppins', sans-serif;
  gap: 30px;                  /* distanza orizzontale/verticale tra i due blocchi = 20px */
  max-width: 1100px;          /* larghezza massima del contenitore = 1100px */
  margin: 0 auto;             /* margini: 0 sopra/sotto, auto a sinistra/destra → centrato */
  padding-top: 145px;         /* spazio extra sopra il contenuto => 140px */
  align-items: flex-end;      /* allinea i contenuti in basso */
  flex-direction: row-reverse; /* - flex-direction: row-reverse → immagine a sinistra, testo a destra */
}

.about-title {
  position: relative;
  font-weight: 600;
}

.about-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background-color: darkslategray;
  margin-top: 5px;
  border-radius: 2px;
}


.about-photo {
  flex: 1 1 500px;            /* cresce, si restringe, base 300px */
}

.about-photo img {
  width: 100%;                /* l’immagine occupa il 100% della larghezza del contenitore */
  height: auto;               /* altezza proporzionata automaticamente */
  border-radius: 8px;         /* angoli arrotondati = 8px */
  object-fit: cover;          /* mantiene proporzioni ritagliando se necessario */
}

.about-text {
  flex: 2 1 400px;            /* cresce, si restringe, base 400px */
  color: darkslategray;
  text-align: justify;
}

.about-text p {
  font-size: 14px;            /* dimensione testo = 15px */
  line-height: 19px;          /* altezza riga = 24px per leggibilità */
  margin: 0;
}

.italic {
  font-style: italic; /* rende il testo inclinato */
  opacity: 0.7;
}

/* Sottotitolo: English */
.lang-title-en {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
  margin-top: 25px;
  letter-spacing: 0.5px;
}

/* Sottotitolo: Italiano (corsivo + opacità come il testo) */
.lang-title-it {
  font-size: 15px;
  font-weight: 600;
  font-style: italic;     /* corsivo */
  opacity: 0.7;           /* stessa opacità del paragrafo italiano */
  margin-bottom: 6px;
  margin-top: 25px;
}

.visually-hidden { 
  position: absolute; 
  left: -9999px; 
}

.maurodigital {
  cursor: pointer;
  font-weight: 500;
  color: var(--grey-500);
}

/* RESPONSIVE: TESTO SOPRA, FOTO SOTTO */ 
@media (max-width: 900px) { 
  .about-me { 
    flex-direction: column; 
    align-items: stretch; 
    padding: 145px 10px 20px; /* ← margini laterali su mobile */
  } 
  
  .about-text, 
  .about-img { 
    flex: 1 1 100%; 
  } 
}