/* ----------------------------STAFF-------------------------------*/



/* --- Nuovi Stili Aggiunti --- */



/* .page-header è ora in main.css */



/* Sezione Intro */

.staff-intro-section {

    height: 80vh;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 5%;

    background-size: cover;

    background-position: center;

    background-image: url('../../img/staff/staff-mobile.jpg');



}



.glass-box {

    background-color: rgba(38, 93, 135, 0.5);

    backdrop-filter: blur(10px);

    padding: 2rem;

    border-radius: 20px;

    max-width: 900px;

    border: 1px solid rgba(255, 255, 255, 0.2);

}



.glass-box h2 {

    color: #fff;

    font-size: 2rem;

    margin-bottom: 1rem;

}



.glass-box p {

    color: #f0f0f0;

    font-size: 1.1rem;

    line-height: 1.7;

}



/* Sezioni Membri Staff */

@keyframes morph {

    0% { border-radius: 69% 31% 57% 43% / 59% 52% 48% 41%; }

    50% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }

    100% { border-radius: 69% 31% 57% 43% / 59% 52% 48% 41%; }

}



.testo h3 {

    font-size: 2.2rem;

    color: #265D87;

    margin-bottom: 0.5rem;

}



.testo h4 {

    font-size: 1.2rem;

    color: #5a5a5a;

    margin-bottom: 1.5rem;

    font-weight: 400;

}



.btn-leggi-profilo {

    display: inline-block;

    margin-top: 2rem;

    padding: 0.8rem 2rem;

    background-color: #265D87;

    color: #fff;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 500;

    transition: background-color 0.3s ease, transform 0.3s ease;

}



.btn-leggi-profilo:hover {

    background-color: #2B8EA4;

    transform: translateY(-3px);

    text-decoration: none;

}



/* p e li ora usano lo stile globale da main.css */



.testo .orario {

    font-style: italic;

    color: #888;

}



.immagine {

    position: relative;

    width: 80%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    animation: morph 10s ease-in-out infinite alternate;

    margin: 0 auto; /* Centra l'immagine su mobile */

}



.immagine img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* Border-radius unici (aggiornati i selettori) */

.section:nth-of-type(2) .immagine-forma { border-radius: 55% 45% 73% 27% / 48% 62% 38% 52%; }

.section:nth-of-type(3) .immagine-forma { border-radius: 24% 76% 49% 51% / 67% 46% 54% 33%; }

.section:nth-of-type(4) .immagine-forma { border-radius: 69% 31% 61% 39% / 55% 46% 54% 45%; }

.section:nth-of-type(5) .immagine-forma { border-radius: 39% 61% 37% 63% / 63% 49% 51% 37%; }

.section:nth-of-type(6) .immagine-forma { border-radius: 55% 45% 73% 27% / 48% 62% 38% 52%; }

.section:nth-of-type(7) .immagine-forma { border-radius: 24% 76% 49% 51% / 67% 46% 54% 33%; }

.section:nth-of-type(8) .immagine-forma { border-radius: 69% 31% 61% 39% / 55% 46% 54% 45%; }

.section:nth-of-type(9) .immagine-forma { border-radius: 39% 61% 37% 63% / 63% 49% 51% 37%; }





/* Stili per Desktop */

@media (min-width: 600px) {

    /* .page-header h1 è ora in main.css */



    .staff-intro-section {

        background-image: url('../../img/staff/staff.jpg');

        background-attachment: fixed;

        background-position: center -150px; /* Sposta l'immagine di sfondo di 150px verso l'alto (mostrando una porzione più bassa) */

    }



    .content {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 4vw;

        align-items: center;

    }



    .immagine {

        width: 100%; /* Ripristina larghezza piena per desktop */

    }



    .section.section-reverse .testo {

        order: 2;

    }



    .section.section-reverse .immagine {

        order: 1;

    }

}





/* Sezione Full Text */

.section.full-text {

  position: relative;

}



.full-text .testo {

  width: 100%;

}



.full-text .titolo {

  text-align: center;

}



.full-text .text-columns {

  display: flex;

  flex-direction: column;

  gap: 2rem;

}



/* Forme decorative di sfondo */

.full-text::before,

.full-text::after,

.full-text .testo::before,

.full-text .testo::after {

  content: "";

  position: absolute;

  z-index: 0;

  animation: morph 12s ease-in-out infinite alternate;

  opacity: 0.1;

}



.full-text::before {

  width: 80vw;

  height: 80vw;

  background-color: #265d87;

  top: 10%;

  left: -100px;

  border-radius: 69% 31% 57% 43% / 59% 52% 48% 41%;

  animation-direction: alternate-reverse;

}



.full-text::after {

  width: 90vw;

  height: 90vw;

  background-color: #2B8EA4;

  bottom: 5%;

  right: -150px;

  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

}



.full-text .testo::before {

  width: 60vw;

  height: 60vw;

  background-color: #265d87;

  bottom: 25%;

  left: -80px;

  border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%;

  animation-delay: -2s;

}



.full-text .testo::after {

  width: 50vw;

  height: 50vw;

  background-color: #2B8EA4;

  top: 25%;

  right: -50px;

  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;

  animation-delay: -5s;

  animation-direction: alternate-reverse;

}



/* Sezione Full Text Reverse */

.section.full-text-reverse {

  position: relative;

}



.full-text-reverse .testo {

  width: 100%;

}



.full-text-reverse .titolo {

  text-align: right;

}



.full-text-reverse .text-columns {

  display: flex;

  flex-direction: column;

  gap: 2rem;

}



/* Forme decorative di sfondo invertite */

.full-text-reverse::before,

.full-text-reverse::after,

.full-text-reverse .testo::before,

.full-text-reverse .testo::after {

  content: "";

  position: absolute;

  z-index: 0;

  animation: morph 12s ease-in-out infinite alternate;

  opacity: 0.1;

}



.full-text-reverse::before {

  width: 60vw;

  height: 60vw;

  background-color: #265d87;

  top: 10%;

  right: -100px;

  border-radius: 31% 69% 43% 57% / 52% 59% 41% 48%;

  animation-direction: alternate-reverse;

}



.full-text-reverse::after {

  width: 70vw;

  height: 70vw;

  background-color: #2B8EA4;

  bottom: 5%;

  left: -150px;

  border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;

}



.full-text-reverse .testo::before {

  width: 40vw;

  height: 40vw;

  background-color: #265d87;

  bottom: 25%;

  right: -80px;

  border-radius: 30% 70% 70% 30% / 40% 60% 40% 60%;

  animation-delay: -2s;

}



.full-text-reverse .testo::after {

  width: 30vw;

  height: 30vw;

  background-color: #2B8EA4;

  top: 25%;

  left: -50px;

  border-radius: 30% 70% 70% 30% / 30% 60% 40% 70%;

  animation-delay: -5s;

  animation-direction: alternate-reverse;

}







/* Stili per Desktop */

@media (min-width: 600px) {

  .full-text .text-columns {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4vw;

  }

  .full-text::before {

    width: 50vw;

    height: 50vw;

  }

  .full-text::after {

    width: 60vw;

    height: 60vw;

  }

  .full-text .testo::before {

    width: 30vw;

    height: 30vw;

  }

  .full-text .testo::after {

    width: 20vw;

    height: 20vw;

  }

  .full-text .immagine-forma {

    position: absolute;

    top: 0;

    right: 16%;

    width: 23vw;

    z-index: 1;

  }

  .full-text-reverse .text-columns {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4vw;

  }

  .full-text-reverse::before {

    width: 50vw;

    height: 50vw;

  }

  .full-text-reverse::after {

    width: 60vw;

    height: 60vw;

  }

  .full-text-reverse .testo::before {

    width: 30vw;

    height: 30vw;

  }

  .full-text-reverse .testo::after {

    width: 20vw;

    height: 20vw;

  }

  .full-text-reverse .immagine-forma {

    position: absolute;

    top: 0;

    left: 16%;

    width: 23vw;

    z-index: 1;

  }

  .full-text-reverse h3,

.full-text-reverse h4 {

  text-align: right;

}

}