/* exception for member page unique layout */
.page-blog .region.region-content,
.page-member .region.region-content { margin: 0; }

.page-member .gray-bg {
    background-color: var(--light_gray);
    padding-bottom: 1rem;
    padding-top: 1rem;
    margin-top: 3rem;
    margin-bottom: 0;
}
.page-member .gray-bg .section--container { margin-top: 0; }
.page-member .gray-bg .section--container h3 { border-top: none; }

.page-member .swiper-slide h3.pubs-title {
    font-size: 20px;
    font-weight: 500;
    margin: 2em 0 1rem 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.page-member article.single-color.hecap .swiper-slide h3.pubs-title { color: var(--hecap); }
.page-member article.single-color.cmsp .swiper-slide h3.pubs-title { color: var(--cmsp); }
.page-member article.single-color.math .swiper-slide h3.pubs-title { color: var(--math); }
.page-member article.single-color.sti .swiper-slide h3.pubs-title { color: var(--sti); }
.page-member article.single-color.qls .swiper-slide h3.pubs-title { color: var(--qls); }
.page-member article.single-color.esp .swiper-slide h3.pubs-title { color: var(--esp); }

.page-member .swiper-slide h3.pubs-title span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 2rem;
    height: 2rem;
    font-size: 16px;
    font-weight: 500;
    background-color: #FFF;
    border-radius: 50%;
    border: 1px solid var(--border_gray);
    float: right;
    margin-left: 1rem;
    top: 50%;
    position: relative;
    color: var(--text_color);
}


/* ------------------------------ SWIPER HORIZONTAL SCROLLER ------------------------------ */
/* horizontal tabs */
.swiper-first > .swiper-wrapper > .swiper-slide { 
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none;
    padding: 90px 0 50vh 0;
}
.swiper-first > .swiper-wrapper > .swiper-slide::-webkit-scrollbar { width: 0; }

/* FIXED mobile behavior */
.page-member .region-content .swiper-pagination.sp-first.fixed { 
    position: fixed;
    top: 0;
    left: 0;
    transition-delay: 300ms;
    transform: translateY(116px); 
    transition: all 500ms ease;
}

/* all page content has max width */
.swiper-first > .swiper-wrapper > .swiper-slide > *:not(.gray-bg),
.swiper-first .swiper-slide .gray-bg > * { 
    display: block;
    width: 100%;
    text-align: left;
    max-width: 992px;
    margin-left: auto;
    margin-right: auto; 
    padding-left: 1rem;
    padding-right: 1rem;
}

.swiper-first .swiper-slide .gray-bg > button { 
    width: fit-content;
    margin-left: 0;
    margin-right: 0;
}

/* MAIN FIRST PAGINATION - tabs top of page */
.swiper-pagination.swiper-pagination-bullets.sp-first {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    height: 70px;
    /* position: absolute; INHERITED FROM LIBRARY */
    bottom: unset;
    top: 0;
    padding-left: 1rem;
    overflow-y: hidden;
    overflow-x: scroll;
    scrollbar-width: none;
    background-color: #FFF;
    box-shadow: rgb(0 0 0 / 15%) 0px 15px 25px, rgb(0 0 0 / 5%) 0px 5px 10px;
}
.swiper-pagination.swiper-pagination-bullets.sp-first::-webkit-scrollbar { 
    width: 0; 
    height: 0;
    display: none;
}

/* MAIN PAGINATION LABELS (replace default squares / dots) */
.swiper-pagination.sp-first .swiper-pagination-bullet {
    width: fit-content;
    min-width: 100px;
    height: 100%;
    position: relative;
    margin-right: 1rem !important;
    padding: 1.5rem 1rem .25rem 1em;
    background-color: transparent;
    border-bottom: 6px solid #666;
}
.swiper-pagination.sp-first .swiper-pagination-bullet::after {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #666;
    font-size: 14px;
    font-weight: 300px;
    text-align: center;
}
.swiper-pagination.sp-first .swiper-pagination-bullet:nth-child(1):after { content: 'Dashboard'; }
.swiper-pagination.sp-first .swiper-pagination-bullet:nth-child(2):after { content: 'Biography'; }
.swiper-pagination.sp-first .swiper-pagination-bullet:nth-child(3):after { content: 'Publications'; }
.swiper-pagination.sp-first .swiper-pagination-bullet:nth-child(4):after { content: 'My ICTP Network'; }
.swiper-pagination.sp-first .swiper-pagination-bullet:nth-child(5):after { content: 'Blog'; }
.swiper-pagination.sp-first .swiper-pagination-bullet:nth-child(6):after { content: 'My ICTP Events'; }

/* ACTIVE TAB STYLE */
.swiper-pagination.sp-first .swiper-pagination-bullet.swiper-pagination-bullet-active { border-bottom: 6px solid var(--main_blue); }
.swiper-pagination.sp-first .swiper-pagination-bullet.swiper-pagination-bullet-active::after { color: black; }

article.single-color.hecap .swiper-pagination.sp-first .swiper-pagination-bullet.swiper-pagination-bullet-active { border-bottom: 6px solid var(--hecap); }
article.single-color.cmsp .swiper-pagination.sp-first .swiper-pagination-bullet.swiper-pagination-bullet-active { border-bottom: 6px solid var(--cmsp); }
article.single-color.math .swiper-pagination.sp-first .swiper-pagination-bullet.swiper-pagination-bullet-active { border-bottom: 6px solid var(--math); }
article.single-color.sti .swiper-pagination.sp-first .swiper-pagination-bullet.swiper-pagination-bullet-active { border-bottom: 6px solid var(--sti); }
article.single-color.qls .swiper-pagination.sp-first .swiper-pagination-bullet.swiper-pagination-bullet-active { border-bottom: 6px solid var(--qls); }
article.single-color.esp .swiper-pagination.sp-first .swiper-pagination-bullet.swiper-pagination-bullet-active { border-bottom: 6px solid var(--esp); }


/* SECTION COLORS */
article.single-color.hecap .swiper-first .swiper-slide .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--hecap); }
article.single-color.cmsp .swiper-first .swiper-slide .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--cmsp); }
article.single-color.math .swiper-first .swiper-slide .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--math); }
article.single-color.sti .swiper-first .swiper-slide .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--sti); }
article.single-color.qls .swiper-first .swiper-slide .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--qls); }
article.single-color.esp .swiper-first .swiper-slide .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--esp); }

.page-member article.single-color.hecap button.section--link::after { background-image: url(../../assets/icons/icon_arrow_right_hecap.svg)  }
.page-member article.single-color.cmsp button.section--link::after { background-image: url(../../assets/icons/icon_arrow_right_cmsp.svg)  }
.page-member article.single-color.math button.section--link::after { background-image: url(../../assets/icons/icon_arrow_right_math.svg)  }
.page-member article.single-color.sti button.section--link::after { background-image: url(../../assets/icons/icon_arrow_right_sti.svg)  }
.page-member article.single-color.qls button.section--link::after { background-image: url(../../assets/icons/icon_arrow_right_qls.svg)  }
.page-member article.single-color.esp button.section--link::after { background-image: url(../../assets/icons/icon_arrow_right_esp.svg)  }

/* .page-member article.single-color.hecap .swiper-button-prev::after, .page-member article.single-color.hecap .swiper-button-next::after { color: var(--hecap); }
.page-member article.single-color.cmsp .swiper-button-prev::after, .page-member article.single-color.cmsp .swiper-button-next::after { color: var(--cmsp); }
.page-member article.single-color.math .swiper-button-prev::after, .page-member article.single-color.math .swiper-button-next::after { color: var(--math); }
.page-member article.single-color.sti .swiper-button-prev::after, .page-member article.single-color.sti .swiper-button-next::after { color: var(--sti); }
.page-member article.single-color.qls .swiper-button-prev::after, .page-member article.single-color.qls .swiper-button-next::after { color: var(--qls); }
.page-member article.single-color.esp .swiper-button-prev::after, .page-member article.single-color.esp .swiper-button-next::after { color: var(--esp); } */

.page-member .main-slide-network .swiper-button-prev, 
.page-member .main-slide-network .swiper-button-next { display: none; }

/* ------------------------------ FULL PAGE COLUMNS LAYOUT ------------------------------ */
.page-blog article.node .node__content,
.page-member article.node .node__content {
    width: 100%;
    max-width: unset;
    position: relative;
    margin: 0;
    /* overflow: hidden; */
}

.page-blog article.node .node__content .left-column,
.page-member article.node .node__content .left-column { 
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    background-color: #191A1A;
}
.page-blog article.node .node__content .right-column,
.page-member article.node .node__content .right-column {
    /* width: calc(100% - 2rem); */
    position: relative;
    /* margin: 0 1rem; */
    padding: 0;
}


/* ------------------------------ LEFT COLUMN LAYOUT ------------------------------ */
/* mobile viewport social icons */
.page-blog .bottom-card,
.page-member .bottom-card {
    margin-top: auto;
    margin-bottom: 0;
    padding: 2rem 2rem 1rem 2rem;
}
/* desktop viewport social icons */
.page-blog .outer-card,
.page-member .outer-card { display: none; }


/* ------------------------------ SOCIAL ICONS layouts ------------------------------ */
.page-blog .outer-card .socials,
.page-blog .bottom-card .socials,
.page-member .outer-card .socials,
.page-member .bottom-card .socials {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
/* social element with background icon */
.page-blog .outer-card .socials > *,
.page-blog .bottom-card .socials > *,
.page-member .outer-card .socials > *,
.page-member .bottom-card .socials > * {
    width: 50px;
    height: 50px;
    font-size: 0;
    background-color: #212121;
    border-radius: 50%;
    background-size: 80%;
    background-position: center center;
    background-repeat: no-repeat;
}

.page-blog .bottom-card .socials .field--name-field-facebook,
.page-blog .outer-card .socials .field--name-field-facebook,
.page-member .bottom-card .socials .field--name-field-facebook,
.page-member .outer-card .socials .field--name-field-facebook { background-image: url(../../assets/icons/icon-footer-fb.svg); }

.page-blog .bottom-card .socials .field--name-field-twitter,
.page-blog .outer-card .socials .field--name-field-twitter,
.page-member .bottom-card .socials .field--name-field-twitter,
.page-member .outer-card .socials .field--name-field-twitter { background-image: url(../../assets/icons/icon-footer-tw.svg); }

.page-blog .bottom-card .socials .field--name-field-linkedin,
.page-blog .outer-card .socials .field--name-field-linkedin,
.page-member .bottom-card .socials .field--name-field-linkedin,
.page-member .outer-card .socials .field--name-field-linkedin { background-image: url(../../assets/icons/icon-footer-li.svg); }

.page-blog .bottom-card .socials .field--name-field-instagram,
.page-blog .outer-card .socials .field--name-field-instagram,
.page-member .bottom-card .socials .field--name-field-instagram,
.page-member .outer-card .socials .field--name-field-instagram { background-image: url(../../assets/icons/icon-footer-in.svg); }


/* ------------------------------ MEMBER INFO ACCORDION behavior ------------------------------ */

.left-column .member-card .mobile-member-accordion {
    max-height: 0px;
    overflow: hidden;
    transition: all 500ms ease;
}
.left-column .member-card .mobile-member-accordion.open {
    max-height: 1000px;
    padding-bottom: 1rem;
    overflow: hidden;
    transition: all 500ms ease;
}


@media (min-width: 768px) {
    .page-blog .bottom-card .socials,
    .page-member .bottom-card .socials { justify-content: center; }

    .page-blog .bottom-card .socials > *,
    .page-member .bottom-card .socials > * { margin: 0 1rem; }
}


@media (min-width: 1024px) {
    /* fixed navigation behavior > 1024 */
    /* header changes dimension at breakpoint */
    .page-member .region-content .swiper-pagination.sp-first.fixed { transform: translateY(136px); }
    .page-member .region-content.scrollDown .swiper-pagination.sp-first.fixed { transform: translateY(116px); }

    .page-blog article.node .node__content .right-column,
    .page-member article.node .node__content .right-column { 
        margin: 0;
        width: 100%;
    }
}


@media (min-width: 1200px) {
    /* at full desktop viewport, delete pagination fixed behavior */
    .page-member .region-content .swiper-pagination.sp-first,
    .page-member .region-content .swiper-pagination.sp-first.fixed,
    .page-member .region-content.scrollDown .swiper-pagination.sp-first.fixed { 
        position: absolute; 
        transform: none;
    }

    /* pagination tabs style to match header and viewport dimensions */
    .swiper-pagination.swiper-pagination-bullets.sp-first { 
        justify-content: center;
        height: 60px; 
    }
    /* .swiper-pagination.sp-first .swiper-pagination-bullet { padding: 1.5rem .5rem .25rem .5em; } */
    .swiper-pagination.sp-first .swiper-pagination-bullet::after { font-size: 12px; }

    /* main page content layout */
    .swiper.swiper-first > .swiper-wrapper { max-height: calc(100vh - 80px); }
    .swiper-first > .swiper-wrapper > .swiper-slide { padding: 60px 0 50vh 0; }
    
    /* all content dimension */
    .swiper-first > .swiper-wrapper > .swiper-slide > *:not(.gray-bg),
    .swiper-first .swiper-slide .gray-bg > * { 
        max-width: 720px; 
        
    }


    /* ------------------------------ FULL PAGE COLUMNS LAYOUT ------------------------------ */
    .page-blog article.node .node__content,
    .page-member article.node .node__content { 
        min-height: calc(100vh - 70px); 
        display: flex;
        flex-direction: row;
    }
    .page-blog article.node .node__content .left-column,
    .page-member article.node .node__content .left-column { 
        width: 33.33%;
        height: inherit;
        min-height: calc(100vh - 70px);
        max-width: 530px;
    }
    .page-blog article.node .node__content .right-column,
    .page-member article.node .node__content .right-column { 
        width: calc(100% - 530px);
        min-width: 66.66%;
    }


    /* ------------------------------ SOCIAL ICONS layouts ------------------------------ */
    .page-blog .left-column,
    .page-member .left-column {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    /* -> exchange desktop and mobile */
    .page-blog .bottom-card,
    .page-member .bottom-card { display: none; }

    .page-blog .outer-card,
    .page-member .outer-card {
        display: block;
        width: 100%;
        position: relative;
        padding: .5rem 2rem 1rem 2rem;
    }

    .page-blog .outer-card .socials,
    .page-member .outer-card .socials { 
        padding-top: .75rem;
        position: relative;
        justify-content: flex-start; 
    }

    /* .page-blog .outer-card .socials:not(:empty)::before,
    .page-member .outer-card .socials:not(:empty)::before {
        content: 'PERSONAL PROFILES ON SOCIAL MEDIA';
        font-size: 12px;
        color: #666;
        font-weight: 300;
        position: absolute;
        bottom: 100%;
        padding-bottom: .75rem;
        border-bottom: 1px solid #666;
    } */

    .page-blog .outer-card .socials  > *,
    .page-member .outer-card .socials  > * { margin: 0 1rem 0 0; }

    /* disable accordion behavior in desktop viewport */
    .left-column .member-card .mobile-member-accordion { max-height: unset; }
}


@media (min-width: 1400px) {
    /* adjust navigation tabs */
    .swiper-pagination.swiper-pagination-bullets.sp-first { padding-left: 4rem; }
    .swiper-pagination.sp-first .swiper-pagination-bullet { 
        margin-right: 2rem !important; 
        padding: 0 1rem;
    }
    .swiper-pagination.sp-first .swiper-pagination-bullet::after { font-size: 16px; }
}


@media (min-width: 1700px) {
    /* wider content at big viewport */
    .swiper-first > .swiper-wrapper > .swiper-slide > *:not(.gray-bg),
    .swiper-first .swiper-slide .gray-bg > * { max-width: 1024px; }

    .swiper-first .swiper-slide .publications { max-width: 1024px; }
}

@media (min-width: 1900px) {
    /* wider content at big viewport */
    .swiper-first > .swiper-wrapper > .swiper-slide > *:not(.gray-bg),
    .swiper-first .swiper-slide .gray-bg > * { max-width: 1140px; }

    .swiper-first .swiper-slide .publications { max-width: 1140px; }
}