/* =========================================
   TEAM PAGE ONLY
   Safe overrides over people.css
========================================= */

/* ===============================
   PAGE CONTAINER
================================ */

main .people-section-container {
    width: 100%;
    margin: auto;
}
/* ===============================
   FIX HEAD CARD CENTERING
================================ */

main .people-section-container
#head-container.faculty {
    display: flex;
    justify-content: center;
}

main .people-section-container
#head-container.faculty .directors {
    margin: 0 auto 2.5rem auto; /* hard center */
}


/* ===============================
   HEAD FOOTER ALIGNMENT FIX
================================ */

/* Make footer row full width */
main .people-section-container
#head-container .directors .footer {
    width: 100%;
}

/* Stretch icons row */
main .people-section-container
#head-container .directors .icons {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Push My Page to right corner */
main .people-section-container
#head-container .directors .about-me-btn {
    margin-left: auto;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 600;
    color: #891515;
    text-decoration: none;
}


/* ===============================
   HEAD (DIRECTOR) – CENTER & SIZE
================================ */



/* Reduce head card size */
main .people-section-container
#head-container.faculty .directors {
    max-width: 720px;        /* smaller than 900px */
    padding: 1rem;           /* reduce height */
    margin-bottom: 2.5rem;
}

/* Reduce head image size */
main .people-section-container
#head-container .directors .photo img {
    width: 120px;
    height: 120px;
    border-radius: 12px;
}

/* Head name smaller */
main .people-section-container
#head-container .directors .details .name {
    font-size: 1.05rem;      /* was 1.2rem */
    font-weight: 700;
}

/* Head role smaller */
main .people-section-container
#head-container .directors .details .role {
    font-size: 0.9rem;
}

/* Head about text smaller */
main .people-section-container
#head-container .directors .details .about {
    font-size: 0.9rem;
    line-height: 1.35;
}

/* Icons smaller */
main .people-section-container
#head-container .icons img {
    width: 22px;
    height: 22px;
}

/* Reduce gap between photo & text */
main .people-section-container
#head-container .directors {
    gap: 1.2rem;
}



/* ===============================
   TEAM MEMBERS GRID
================================ */

/* 3 cards per row */
main .people-section-container 
#team-container.faculty {
    grid-template-columns: repeat(3, 1fr);
    width: 80%;                 /* reduced width */
    margin: 3rem auto;
}
    main .people-section-container 
#team-container .details,
main .people-section-container 
#team-container .details .name,
main .people-section-container 
#team-container .details .role,
main .people-section-container 
#team-container .details .about {
    text-align: left !important;
}


/* Reset inherited grid spans */
main .people-section-container 
#team-container .staff1,
main .people-section-container 
#team-container .staff2,
main .people-section-container 
#team-container .staff3 {
    grid-column: auto;
}
main .people-section-container
#team-container .wrp .details .name {
    font-size: 0.95rem;     /* reduce from default */
    font-weight: 700;
}
/* Team card alignment fix */
main .people-section-container 
#team-container .wrp {
    padding: 1.2rem;
    align-items: flex-start;
}

/* Team LinkedIn icon */
main .people-section-container 
#team-container .icons img {
    width: 24px;
    height: 24px;
}

/* ===============================
   RESPONSIVE
================================ */

@media screen and (max-width: 994px) {
    main .people-section-container 
    #team-container.faculty {
        grid-template-columns: repeat(2, 1fr);
        width: 95%;
    }
}

@media screen and (max-width: 600px) {
    main .people-section-container 
    #team-container.faculty {
        grid-template-columns: 1fr;
    }

    main .people-section-container 
    #head-container .directors {
        width: 95%;
        text-align: center;
    }

    main .people-section-container 
    #head-container .directors .details {
        align-items: center;
    }
}
main .people-section-container #team-container {
    justify-items: center;
}

/* Ensure cards have fixed width */
main .people-section-container #team-container .wrp {
    width: 100%;
    max-width: 340px;
}