/* Beeline Medicines
------------------------------------------- 

Table of contents
    - Single Page
    - Page Loop
    - Media Queries

------------------------------------------- */


/* Team
-------------------------------------------- */

.leadership-homepage {
    margin-bottom: 24px;
}

.team-name {
    font-size: 21px;
    margin-bottom: 8px;
}

.team-title {
    font-style: italic;
    margin-bottom: 8px;
}

.leadership-headshot {
    border-bottom: 4px solid var(--azure);
    margin-bottom: 16px;
    width: 100%;
}

.leadership-headshot img {
    width: 100%;
}

.board-directors-homepage {
    border-left: 3px solid var(--azure);
    margin-bottom: 24px;
    padding: 8px 16px;
}

.leadership-homepage p:last-of-type,
.board-directors-homepage p:last-of-type {
    margin-bottom: 0;
}

/* Individual Team Page
-------------------------------------------- */

.single-team .site-inner {
    margin: 0;
    padding: 0;
    max-width: none;
}

.single-team .content-sidebar-wrap {
    margin-bottom: 80px;
    padding: 0 24px;
}

.single-team-header {
    margin-bottom: 80px;
    padding: 57px 24px;
    position: relative;
}

.single-team-header .wrap {
    margin: 0 auto;
    max-width: 1140px;
    position: relative;
    z-index: 2;
}

.individ-team-member-headshot {
    border-bottom: 4px solid var(--azure);
    margin-bottom: 24px;
}

.individ-team-member-headshot img {
    width: 100%;
}

.team-member-info {
    background-color: var(--white);
    border: .5px solid var(--stratus);
    padding: 24px;
}

.individ-team-member-title {
    color: var(--azure);
    font-family: deuterium-variable, sans-serif;
    font-variation-settings: "wght" 560;
    letter-spacing: 3px;
    text-transform: uppercase;
}

h1.individ-team-member-name {
    margin-bottom: 0;
}

h1.individ-team-member-name:has(+ .individ-team-member-title) {
    margin-bottom: 8px;
}

.team-member-social i {
    align-items: center;
    background-color: var(--abyss);
    color: var(--white);
    border-radius: 16px;
    display: inline-flex;
    font-size: 12px;
    height: 24px;
    justify-content: center;
    margin-right: 8px;
    transition: all 0.2s ease-in-out;
    width: 24px;
}

.team-member-social a {
    font-size: 14px;
    text-decoration: none;
}

.team-member-social a:focus i,
.team-member-social a:hover i {
    background-color: var(--chartreuse);
    color: var(--abyss);
}

.single-team-bio-section {
    margin: 0 auto;
    max-width: 1140px;
}

/* News
-------------------------------------------- */

.news-single-container {
    background-color: var(--white);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
    margin-bottom: 40px;
    padding: 40px;
}

.news-single-container:last-of-type {
    margin-bottom: 0;
}

.news-date {
    background-color: var(--bog);
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
    color: var(--clover);
    display: inline-block;
    font-family: "deuterium-variable", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 24px;
    padding: 12px 24px;
    text-transform: uppercase;
}

.news-single-container h3 {
    font-size: 24px;
}

/* Individual News
-------------------------------------------- */

.single-press-release .site-inner {
    padding: 40px 24px;
}

.single-press-release .site-inner .content-sidebar-wrap {
    margin: 0 auto;
    max-width: 1140px;
}

.press-release-top {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 40px;
}

/* Pipeline
-------------------------------------------- */

.pipeline-headings {
    border-bottom: 1px solid var(--white);
    display: none;
    font-family: "deuterium-variable", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    padding-bottom: 16px;
    text-transform: uppercase;
}

.program {
    border-bottom: 1px solid var(--white);
    color: var(--white);
    font-size: 16px;
}

.program-toggle-title {
    padding: 16px;
}

.program-toggle-title.active,
.program-toggle-description.active {
    color: var(--bog);
    background-color: var(--white);
    border-bottom: 1px solid var(--stratus);
}

.program.adjacent-1 .program-toggle-title.active,
.program.adjacent-1 .program-toggle-description.active,
.program.adjacent-3 .program-toggle-title.active,
.program.adjacent-3 .program-toggle-description.active,
.program.adjacent-5 .program-toggle-title.active,
.program.adjacent-5 .program-toggle-description.active,
.program.adjacent-7 .program-toggle-title.active,
.program.adjacent-7 .program-toggle-description.active {
    background-color: var(--cumulus);
}

.phase-title {
    color: var(--chartreuse);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.program-toggle-title.active .phase-title {
    color: var(--azure);
}

.indication {
    font-style: italic;
    font-weight: 700;
    margin-bottom: 24px;
}

.program-toggle-trigger-wrap {
    text-align: center;
}

.program-toggle-trigger {
    background-color: var(--azure);
    border-radius: 16px;
    color: var(--white);
    font-size: 12px;
    height: 24px;
    padding: 0;
    width: 24px;
}

.program-toggle-trigger:focus,
.program-toggle-trigger:hover {
    background-color: var(--chartreuse);
    color: var(--bog);
    padding: 0;
}

.program-toggle-trigger:after {
    content: none;
}

.program-toggle-trigger.active {
    background-color: var(--bog);
    color: var(--white);
}

.program-toggle-trigger.active:focus,
.program-toggle-trigger.active:hover {
    background-color: var(--azure);
}

.program-toggle-trigger .collapse,
.program-toggle-trigger.active .expand {
    display: none;
}

.program-toggle-trigger.active .collapse {
    display: initial;
}

.program-toggle-description {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 32px;
    transition: all 0.2s ease-in-out;
}

.program-toggle-description.active {
    height: auto;
    opacity: 1;
    padding: 32px;
}

.program-toggle-description-wrap .program-moa {
    margin-bottom: 16px;
}

.zoom-container {
    overflow: hidden;
    cursor: zoom-in;
}

.zoom-container img {
    transition: transform 0.3s ease;
    transform-origin: var(--x, 50%) var(--y, 50%);
}

.zoom-container img.zoomed {
    transform: scale(2.5);
    cursor: zoom-out;
}

/* Media Queries
------------------------------------------- */



@media only screen and (min-width: 961px) {

    .team-shortcode-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: flex-start;
    }

    .leadership-homepage {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 32%;
        width: calc( ( 100% - 32px ) / 3 );
    }

    .board-directors-homepage {
        display: flex;       
        flex-direction: column;
        justify-content: center;
        min-height: 100px;
        width: calc( ( 100% - 32px ) / 3 );
    }
    
    .pipeline-headings {
        align-items: flex-end;
        display: flex;
    }

    .pipeline-heading.program-heading {
        width: calc( 26% + 12px );
    }

    .pipeline-heading.mechanism-heading,
    .pipeline-heading.modality-heading {
        padding: 0 16px;
        width: calc( ( 74% - 12px ) / 2 );
    }

    .pipeline-headings .pipeline-headings-container,
    .pipeline-details-container {
        display: flex;
    }

    .pipeline-headings .pipeline-headings-container {
        width: calc( ( 100% - 24px ) / 2 );
    }

    .pipeline-headings .indication-stage-headings {
        width: calc( ( 100% - 56px ) / 2 );
    }

    .pipeline-headings .indication-stage-headings > .indication-stage-heading {
        position: relative;
        text-align: center;
        width: 100%;
    }

    .pipeline-headings .indication-stage-headings > .indication-stage-heading span {
        background-color: var(--bog);
        padding: 0 24px;
        position: relative;
        z-index: 1;
    }

    .pipeline-headings .indication-stage-headings > .indication-stage-heading:before {
        background-color: var(--white);
        content: '';
        height: 1px;
        left: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
    }

    .pipeline-headings .indication-stage-headings .indication-stage-headings-inner {
        display: flex;
        padding-top: 16px;
        text-align: center;
    }

    .pipeline-headings .indication-stage-headings .indication-stage-headings-inner .pipeline-heading {
        width: calc( 100% / 3 );
    }

    .pipeline-headings .trigger-spacer {
        width: 24px;
    }

    .program-toggle-title {
        display: flex;
    }

    .program-name {
        border-right: 1px solid var(--white);
        width: 26%;
    }

    .mechanism,
    .modality {
        padding: 0 16px;
        width: 37%;
    }

    .program-toggle-title.active .program-name {
        border-right: 1px solid var(--bog);
    }

    .pipeline-details-container,
    .pipeline-phase-container {
        width: calc( ( 100% - 24px ) / 2 );
    }

    .pipeline-phase-wrapper {
        margin-bottom: 32px;
        width: 100%;
    }

    .pipeline-phase-wrapper:last-of-type {
        margin-bottom: 0;
    }

    .phase-title {
        display: none;
    }

    .phase-indicator-wrapper {
        width: 0%;
    }

    .program-in-view .phase-indicator-wrapper {
        animation: pipelineGrow ease-in-out 2s forwards;
    }

    @keyframes pipelineGrow {
        to {
            width: 100%;
        }
    }

    .phase-indcator {
        background-color: var(--chartreuse);
        border-radius: 0 8px 8px 0;
        height: 16px;
    }

    .indication {
        margin-bottom: 0;
        padding: 16px 0 0 24px;
    }

    .program-toggle-trigger-wrap {
        width: 24px;
    }

    .program-toggle-description-wrap {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .program-toggle-description-wrap .program-moa {
        margin-bottom: 0;
        text-align: center;
        width: 70%;
        
    }

    .program-toggle-description-wrap .program-description {
        padding-top: 75px;
        width: 75%;
    }

    .single-team-header .wrap,
    .single-team-bio-section .wrap {
        align-items: flex-start;
        display: flex;
        flex-direction: row;
        gap: 57px;
    }
    
    .single-team-header .wrap:after,
    .single-team-header .wrap:before,
    .single-team-bio-section .wrap:after,
    .single-team-bio-section .wrap:before {
        display: none;
    }

    .individ-team-member-headshot {
        margin-bottom: -114px;
        width: 285px;
    }
    
    .team-member-info {
        height: 171px;
        width: 798px;
    }

    .team-member-board-of-directors .team-member-info {
        width: 1140px;
    }

    .team-member-leadership .team-member-info {
        width: 798px;
    }

    h1.individ-team-member-name {
        font-size: 44px;
    }

    .single-team-header .team-member-info {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .single-team-bio-section .single-team-sidebar {
        width: 285px;
    }

    .team-member-board-of-directors .single-team-bio-section .single-bio {
        width: 100%;
    }

    .team-member-leadership .single-team-bio-section .single-bio {
        width: 798px;
    }

    .news-single-container h3 {
        font-size: 32px;
    }

    .single-press-release .site-inner {
        padding: 80px 24px;
    }

    .sources {
        font-style: italic;
        font-size: 15px;
        font-weight: 500;
    }
    
}

@media only screen and (max-width: 960px) {

    .pipeline {
        border-top: 1px solid var(--white);
    }
    
    .program-toggle-title {
        text-align: center;
    }

    .pipeline-details-container {
        margin-bottom: 24px;
    }

    .program-name {
        font-size: 18px;
        font-weight: 900;
        margin-bottom: 4px;
    }

    .leadership-homepage {
        margin-bottom: 48px;
    }

}



@media only screen and (max-width: 768px) {
    .team-member-info {
     padding: 34px 24px;
    }

    .individ-team-member-headshot {
        margin-bottom: 57px;
    }

    .individ-team-member-headshot img {
        width: 684px;
        height: 623px;
        object-fit: cover;
    }


    .single-team-header {
        padding: 57px 42px;
    }
}

@media only screen and (max-width: 500px) {
    .individ-team-member-headshot img {
        height: 395px;
        object-fit: cover;
    }

    .individ-team-member-headshot {
        margin-bottom: 57px;
    }

    .team-member-info {
        padding: 39px 24px;
        width: 456px;
    }

    .single-team-header {
        padding: 57px 22px;
    }
    
}

@media only screen and (min-width: 500px) {

    .single-press-release .news-date {
        margin-bottom: 0;
    }
}