html {
  scroll-padding-top: 70px; /* altezza della tua navbar */
}

body {
  margin: 0;
  padding: 0;
  background-color: #90C8CB;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}
    .content {
      /*min-height: 100vh;*/
      padding: 20px 20px 20px 20px;
      background-color: #90C8CB;
    }

    .hbox {
      max-width: 230px;
    }
    .titolo {
      font-size: 1.4rem;
      color: #004AAD;
    }

/*mobile first*/
  

    .img-profilo {
    border-radius: 50%;
    align-self: center; /* centra l'immagine su mobile */
    }

    .img-logo {
    width: 400px;
    height: auto;
    }

    .logo{
    width: 50px;
    height: auto;
    margin: 0%;
    }

    .overlay-dark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5); /* semitrasparente scuro */
  z-index: 1;
}

/* Stato chiuso */
.image-col {
  width: 100%;
}

.card.cosa-img{
   border-radius: 2rem;   /* arrotonda i bordi */
   overflow: hidden;  
}


  .card-description {
    display: none;
  }

  .card.expandable {
    border-radius: 10px;        /* regola a piacere */
    overflow: hidden;          /* IMPORTANT: permette all'immagine di essere ritagliata ai bordi */
    background: transparent;   /* se vuoi background diverso, adattalo */
  }

  .expandable.expanded {
    display: flex;
    flex-direction: column; /* immagine sopra, testo sotto */
  }

  .expandable.expanded .image-col {
    width: 100%; /* immagine full width */
  }

  .expandable.expanded .card-description {
    display: block;  /* ora si mostra */
    width: 100%;
    padding: 1rem;
    background: white;
  }




.image-col {
  position: relative;
}

/* Freccia sull'immagine */
.expand-icon {
  position: absolute;
  top: 5px;
  left: 10px;
  color: #495057;
  padding: 4px 6px;
  font-size: 2rem;
  line-height: 1;
  transition: transform 0.3s ease;
  pointer-events: none; /* non blocca il click sulla card */
}

/* Quando la card è espansa → freccia ruotata */
.expandable.expanded .expand-icon {
  transform: rotate(-45deg);
}

.introduzione{
  /* color: white ; */
  padding-bottom: 50px  ;
  text-align: center ;
  }

  .img-protetta {
  position: relative;
  display: inline-block;
}

.img-protetta img {
  display: block;
  width: 100%;
}

.img-protetta .overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: transparent;
}


  @media (min-width: 992px) {
        .content {
          min-width: none;
        }
        
        .img-profilo {
            border-radius: 50%;
            /* align-self: flex-start; riallinea immagine a sinistra */
            max-height: 400px; /* limita l'altezza dell'immagine */
        }
        .img-logo {
            width: 600px;
            height: auto;
        }
        .logo{
            width: 50px;
            height: auto;
        }
        .hbox
        {
           max-width:fit-content; /* rimuove il limite di larghezza */
        }
        .titolo{
          font-size: 2rem;
         }
        
         
        .expandable.expanded {
          display: flex;
          flex-direction: row;
           }
           /* sovrascrive l'allineamento della .row (tu hai align-items-center in HTML) */
        .expandable.expanded .row {
            align-items: stretch !important; /* fa sì che i figli abbiano la stessa altezza */
            margin: 0; /* evita margini residuali della row dentro la card */
          }

         /* Stato aperto */
        .expandable.expanded .image-col {
          width: 33.333%; /* 1/3 */
          display: block;
        }

        /* L'immagine riempie la colonna e mantiene le proporzioni;
        object-fit cover per riempire l'area senza deformare */
      .expandable.expanded .image-col img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

        .expandable.expanded .card-description {
          flex: 1 1 66.666%;
          max-width: 66.666%;
          height: 100%;              /* stessa altezza dell'immagine */
          overflow-y: auto;          /* scroll se il testo è troppo lungo */
          padding: 1rem;
          background: #fff;
          box-sizing: border-box;

          display: flex;             /* flex container */
          flex-direction: column;    /* verticale */
          justify-content: center;   /* centra verticalmente se il contenuto è più basso */
      }
        .introduzione{
          font-size: 1.2rem;
        }
      
}