/*==================== TEAM DETAIL PAGE STYLES ======================*/
:root{
    --team-bio-bg: light-dark(#151514, #f4f4f4);
}

/*-------------------- ICONS --------------------*/
/* style.css sets `color` on every element, which breaks `currentColor` inside SVG */
svg, svg * {color: inherit;}

/*-------------------- PAGE BANNER --------------------*/
:where(.page-team-detail) .page-banner {
    display: flex;
    align-items: center;
    overflow: hidden;
}

/*-------------------- PROFILE --------------------*/
/* Figma overlaps the portrait onto the bio panel: the panel top sits about
   62% down the photo, so the lower third of the portrait covers it. */
:where(.page-team-detail) .profile-row {position: relative;z-index: 2;}
:where(.page-team-detail) .profile-photo {width: 100%;max-width: 458px;height: 534px;object-fit: cover;object-position: center top;}
:where(.page-team-detail) .profile-side {padding-top: 60px;}
:where(.page-team-detail) .profile-linkedin {
    min-width: 60px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white-same);
    color: var(--color-black-same);
    transition: 0.3s ease;
}
:where(.page-team-detail) .profile-linkedin:hover {background-color: var(--color-golden);color: var(--color-white-same);}
:where(.page-team-detail) .profile-email {transition: 0.3s ease;}
:where(.page-team-detail) .profile-email:hover {color: var(--color-golden) !important;}

/*-------------------- BIO --------------------*/
:where(.page-team-detail) .profile-bio {
    position: relative;
    z-index: 1;
    margin-top: -202px;
    padding: 262px 64px 64px 64px;
    background-color: var(--team-bio-bg);
}

/*-------------------- MEDIA QUERY --------------------*/
@media screen and (max-width: 1200px) {
    :where(.page-team-detail) .profile-photo {height: 460px;}
    :where(.page-team-detail) .profile-bio {margin-top: -170px;padding: 220px 40px 48px 40px;}
}
@media screen and (max-width: 991px) {
    /* stacked below this width, so the overlap is dropped */
    :where(.page-team-detail) .profile-photo {height: 420px;}
    :where(.page-team-detail) .profile-side {padding-top: 0;}
    :where(.page-team-detail) .profile-bio {margin-top: 0;padding: 40px 32px;}
}
@media screen and (max-width: 767px) {
    :where(.page-team-detail) .profile-photo {height: 340px;}
    :where(.page-team-detail) .profile-bio {padding: 24px 20px;}
}