/* =======================================================
   PODSTRONA - ZESPÓŁ
======================================================= */

/* Nagłówek strony */

.team-title{
    text-align:center;
    margin:3rem 0 2rem;
    color:#003399;
}

/* Sekcja jednej osoby */

.person{
    display:flex;
    align-items:flex-start;
    gap: clamp(2rem, 4vw, 6rem);
    margin:3rem 0;
    padding-bottom:2rem;
    border-bottom:1px solid #d9d9d9;
}

/* Zdjęcie */

.person-photo{
    flex:0 0 250px;
}

.person-photo img{
    width:100%;
    height:auto;
    border-radius:15px;
    display:block;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
}

/* Informacje */

.person-info{
    flex:1;
   /* background-color: #1abc43;*/
    padding-left: 2vw;
}

/* Imię i nazwisko */

.person-info h2{
    margin-top:0;
    margin-bottom:.3rem;
    color:#003399;
    font-size:1.8rem;
}

/* Funkcja */

.person-info h3{
    margin-top:0;
    margin-bottom:.8rem;
    color:#f26522;
    font-size:1.2rem;
    font-weight:600;
}

/* Email */

.person-email{
    color:#1abc43;
    font-weight:bold;
    margin-bottom:1.5rem;
}

.person-email a{
    color:#d35400;
    text-decoration:none;
}

.person-email a:hover{
    text-decoration:underline;
}

/* Opis */

.person-info p{
    text-align:justify;
    line-height:1.7;
    margin-bottom:1rem;
}

/* Linki naukowe */

.person-links{
    margin-top:1.5rem;
    font-size:.95rem;
    line-height:1.8;
}

.person-links a{
    color:#0056b3;
    text-decoration:none;
    word-break:break-word;
}

.person-links a:hover{
    text-decoration:underline;
}

.container_zespol {
    width:min(1200px, 92%);
    margin:auto;
}


/* =======================================================
   RESPONSYWNOŚĆ
======================================================= */

@media (max-width:992px){

    .person{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .person-photo{
        width:260px;
        flex:none;
    }

    .person-info{
        width:100%;
    }

    .person-info p{
        text-align:left;
    }
}

@media (max-width:768px){

    .team-title{
        font-size:1.8rem;
    }

    .person{
        gap:1.5rem;
    }

    .person-photo{
        width:220px;
    }

    .person-info h2{
        font-size:1.5rem;
    }

    .person-info h3{
        font-size:1.1rem;
    }

}

@media (max-width:576px){
    .person{
        margin:2rem 0;
    }

    .person-photo{
        width:180px;
    }

    .person-info h2{
        font-size:1.3rem;
    }

    .person-info h3{
        font-size:1rem;
    }

    .person-info p{
        font-size:.95rem;
        line-height:1.6;
    }

    .person-links{
        font-size:.9rem;
    }

}