/* Publications page styles */

.section-timeline-heading{
    background-color: black;
}

.container{
    width: 90vw;
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto;
}

.padding-vertical-xlarge{
    /* tightened spacing so the heading is closer to the fixed nav and
       the cards sit closer beneath the heading */
    padding-top: 90px;
    padding-bottom: 0px;
}

.timeline-main-heading-wrapper{
    color: white;
    text-align: center;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.margin-bottom-medium{
    margin-top: -4vh;
    margin-bottom: 1vh;
}

.section-timeline-heading .padding-vertical-xlarge{
    /* keep projects grid close to the heading */
    padding-bottom: 2vh;
}

h2.intro-heading{
    font-size: 8vh;
    background: -webkit-linear-gradient(to right, gold, #ee0979);
    background: linear-gradient(to right, gold, #ee0979);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    white-space: nowrap;
    overflow-wrap: normal;
    display: inline-block;
}

body{
    background-color: black;
}

.projects-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 0vh;
}

.project-card {
    display: flex;
    align-items: flex-start;
    background: #0f0f10;
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
    border: 1px solid #232325;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
    padding-top: 16px;
    padding-right: 16px;
    padding-left: 16px;
}

.project-card:hover {
    border-color: #feda4a35;
    box-shadow: 0 12px 30px rgba(0,0,0,0.65);
}   

.project-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    margin-right: 16px;
    border-radius: 8px;
}

.project-meta {
    display: flex;
    flex-direction: column;
}

.project-title {
    margin: 0 0 8px 0;
    color: white;
    font-size: 2.8vh;
}

.project-authors {
    margin: 0;
    color: #cfcfcf;
    font-size: 2vh;
}

.project-journal {
    margin-top: 0;
    margin-bottom: 10px;
    color: #cfcfcf;
    font-size: 1.8vh;
}
.project-toggle{
    border: 0;
    background: transparent;
    color: #feda4a;
    padding-top: 16px;
    padding-left: 0px;
    text-align: left;
    font-weight: 700;
    cursor: pointer;
    border-top: 1px solid #222;
    margin-bottom: 0px; /* add gap below the button */
}

.project-full{
    color: #e6e6e6;
    padding: 12px 16px 20px 16px;
    font-size: 1.9vh;
    line-height: 2;
    overflow: hidden;
    max-height: 0; /* start collapsed */
    transition: max-height 320ms ease; /* Smooth transition */
    will-change: max-height;
}

/* When aria-expanded is true we let JS set an inline max-height to the
   exact content height (scrollHeight) so the animation is smooth and fits
   the content exactly. This selector provides a fallback max-height. */
.project-full[aria-expanded="true"]{
    max-height: 800px; /* fallback; JS will set exact inline max-height */
    line-height: 1.5;

}

.project-condense{
    border: 0;
    background: transparent;
    color: #feda4a;
    padding: 12px 16px;
    text-align: left;
    font-weight: 700;
    cursor: pointer;
    border-top: 1px solid #222;
}

.arxiv-button {
    background-color: #000000;
    border: none;
    border-radius: 6px; 
    /* slightly more vertical and horizontal padding for a touch target */
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: auto;      /* let content size determine width */
    margin-bottom: 8px; /* gap between arXiv button and the toggle */
    margin-right: 10px; /* small horizontal gap if buttons appear inline */
}

.arxiv-button:hover {
    background-color: #232323; /* Slightly lighter on hover */
}

.arxiv-button img {
    height: 18px; /* smaller icon height to make the button feel smaller */
    width: auto;
}
.action-buttons{
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap; /* allow wrapping on very narrow screens */
    margin-bottom: 6px;
}

/* APJ button: same visual treatment as arXiv button */
.apj-button {
    background-color: #000000;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: auto;
    margin-bottom: 8px;
    margin-right: 10px;
}
.apj-button:hover{ background-color: #232323; }
.apj-button img{ height: 18px; width: auto; }

/* Mobile: stack publication card image above the text and controls */
@media (max-width: 768px){
    .project-card{
        flex-direction: column;
        align-items: stretch;
        padding-top: 12px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .project-image{
        /* Make the image part narrower on phones so the visual focus is
           more on the text content. Center the image inside the card and
           limit height to avoid very tall images. */
        width: 100% !important;
        max-width: 420px !important;
        height: auto !important;
        max-height: 120px !important;
        object-fit: cover !important;
        margin: 0 auto 12px auto !important;
        border-radius: 8px !important;
    }

    .project-meta{
        padding: 0 4px 12px 4px;
    }

     /* Reduce the heading size on phones so card titles take up less vertical
         space and better match the Publications page visual density. */
     .project-title{ font-size: 2.0vh !important; }

    .project-toggle{ padding-top: 12px; padding-left: 0; }
    /* Make arXiv button match desktop sizing on mobile (no tiny vw-based width) */
    .arxiv-button{
        width: auto !important;
        padding: 10px 14px !important;
        min-width: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
    }

    /* APJ button should behave the same on mobile */
    .apj-button{
        width: auto !important;
        padding: 10px 14px !important;
        min-width: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
    }

    /* Ensure the show-abstract control is block-level and full width so it
       doesn't get squished by floating buttons; match desktop padding and
       border so layout is identical across themes. */
    .project-toggle{
        display: block;
        width: 100%;
        box-sizing: border-box;
        /* increase space between the top divider and text and remove left
           inset so the text aligns flush with card content */
        padding-top: 16px !important;
        padding-left: 0 !important;
        padding-right: 16px !important;
        padding-bottom: 12px !important;
        text-align: left !important;
        /* only keep the top border */
        border: none !important;
        border-top: 1px solid #222 !important;
    }
}

/* Dark-mode parity: ensure buttons align exactly like light-mode and
   make APJ button inverted (white background, black icon) in dark mode. */

body:not(.light-mode) .arxiv-button,
body:not(.light-mode) .apj-button{
    padding: 8px 14px;
    margin-right: 10px;
    margin-bottom: 8px;
    width: auto;
}
body:not(.light-mode) .arxiv-button img,
body:not(.light-mode) .apj-button img{
    height: 18px;
    width: auto;
}
/* In dark mode, invert APJ button colors to white background with a black glyph */
body:not(.light-mode) .apj-button, .arxiv-button{
    background-color: #000000 !important;
    border: 1px solid #353535 !important;
    box-shadow: none !important;
}
body:not(.light-mode) .apj-button:hover, .arxiv-button:hover{ background-color: #242424 !important; }
body:not(.light-mode) .apj-button img{ filter: invert(1) brightness(100%) !important; }