/* SPECIALISTI */
.specialisti {padding-block: var(--space-10); }
.specialisti__overtitle { font-size: var(--fs-20); line-height: 1.1; margin: 0 0 var(--space-1); }
.specialisti__title { font-size: var(--fs-55); line-height: 1.1; margin: 0 0 var(--space-6); }
.specialisti__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); }
article.specialisti__card { display: flex; flex-direction: column; border-radius: 2rem; box-shadow: 0px 0px 35px #0000001A; }
img.specialisti__image { border-radius: 2rem 2rem 0 0; width: 100%; }
.specialisti__footer { display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; padding: var(--space-3); gap: var(--space-3);}
.specialisti__name, .specialisti__role { font-size: var(--fs-15); line-height: 1.1;}
p.specialisti__name { margin: 0 0 var(--space-1); }
p.specialisti__role { margin: 0; }
button.specialisti__bio-btn { display: flex; align-items: center; border: none; border-radius: 5rem; justify-content: center;  grid-gap: 5px; cursor: pointer; font-size: var(--fs-15); width: 5.5rem; padding-block: 5px; }
.specialist__bio-icon { font-size: 1.2rem !important; animation: oscillate 2s infinite linear; }
@keyframes oscillate { 0% { transform: translateX(0); }  50% { transform: translateX(5px); } 100% { transform: translateX(0); } }

/* BIO */
.bio-popup { display: none; position: fixed; left: 0; width: 100%; background: rgba(132, 152, 164, 0.5); z-index: 10; }
.bio-popup__inner { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box; border-radius: 2rem; display: flex; flex-direction: column; }
.bio-popup__meta{ display: flex; grid-gap: var(--space-4); }
.bio-popup__image { max-width: 12rem; width: 100%; height: 12rem; object-fit: cover; border-radius: 50%; }
h2.bio-popup__name { font-size: var(--fs-50); line-height: 1.1; margin: 0; }
h2.bio-popup__name span { display: block; }
p.bio-popup__text { font-size: var(--fs-25); line-height: 1.4; margin: 0;}
button.bio-popup__close { position: absolute; cursor: pointer; background: transparent; border: none; top: 2rem; right: 3rem; font-size: var(--fs-40); }
button.bio-popup__close:focus { outline: none !important; background: transparent !important; border: none !important; }
button.bio-popup__close:not(:focus-visible) { outline: none; }

@media (max-width: 550px){

    /* SPECIALISTI */ 
    article.specialisti__card { width: 20rem; }
    img.specialisti__image { height: 20rem; }

    /* BIO */ 
    .bio-popup { top: 20vw; height: calc(100% - 20vw); }
    .bio-popup__inner { gap: var(--space-2); padding: var(--space-6); }
    .bio-popup__meta { flex-direction: column; }
    p.bio-popup__text { max-height: 11rem; overflow: auto; }
    .bio-popup__scroll-hint{ position: absolute; right: 2rem; bottom: 2rem; font-size: var(--fs-15); letter-spacing: var(--ls-body); opacity: .7; pointer-events: none; }
}
@media (min-width: 551px) {

    /* BIO */ 
    .bio-popup__inner { gap: var(--space-6); padding: var(--space-8); }
    .bio-popup__meta { align-items: center; }
}
@media (min-width: 551px) and (max-width: 766.9px){
    /* SPECIALISTI */
    img.specialisti__image { height: 12rem; }

    /* BIO */
    .bio-popup { top: 15vw; height: calc(100% - 15vw); }
}
@media (min-width: 551px) and (max-width: 899.9px){

    /* SPECIALISTI */ 
    article.specialisti__card { flex: 0 0 calc((100% - var(--space-6))/ 2);}
}
@media (max-width: 766.9px){
    /* SPECIALISTI */ 
    img.specialisti__image { object-position: center; }

    /* BIO */ 
    .container-bio { max-width: 90%; max-height: 95%; }
}
@media (min-width: 767px) and (max-width: 899.9px){
    /* SPECIALISTI */
    img.specialisti__image { height: 16rem; object-position: 0 -1rem; }

    /* BIO */
    .bio-popup { top: 12vw; height: calc(100% - 12vw); }
}
@media (min-width: 767px) and (max-width: 1099.9px){

    /* BIO */
    .container-bio { max-width: 84vw; }
}
@media (max-width: 899.9px){   

    /* SPECIALISTI */
    img.specialisti__image { object-fit: cover; }
}
@media (min-width: 900px){

    /* SPECIALISTI */ 
    article.specialisti__card { flex: 0 0 calc((100% - (2 * var(--space-6)))/ 3);}
}
@media (min-width: 900px) and (max-width: 1099.9px){

    /* BIO */  
    .bio-popup { top: 10vw; height: calc(100% - 10vw); }
}
@media (min-width: 1100px) and (max-width: 1400px){

    /* BIO */ 
    .popupBio { top: 8vw; height: calc(100% - 8vw); }
    .container-bio { max-width: 80vw; } 
}
@media (min-width: 1401px){

    /* BIO */ 
    .popupBio { top: 6.3vw; height: calc(100% - 6.3vw); }
    .container-bio { max-width: min(70vw, 1200px); } 
}