/*
 * File: styles/styles.css
 * Description: Stylesheet for the Research Projects Index
 */

/* --- Basic Reset and Typography --- */
body {
    font-family            : 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin                 : 0;
    padding                : 0;
    background             : linear-gradient(rgba(232, 240, 247, 0.85), rgba(232, 240, 247, 0.85)),
                             url('../images/title_picture.png');
    background-size        : cover;
    background-position    : center;
    background-attachment  : fixed;
    background-repeat      : no-repeat;
    color                  : #333;
    line-height            : 1.6;
}

/* --- Animations --- */
@keyframes fadeInUp {
    from {
        opacity            : 0;
        transform          : translateY(30px);
    }
    to {
        opacity            : 1;
        transform          : translateY(0);
    }
}

/* --- Header Styling (Modified for Affiliation Block) --- */
.header {
    background             : linear-gradient(135deg, rgba(0, 86, 179, 0.85) 0%, rgba(0, 123, 255, 0.8) 50%, rgba(0, 153, 255, 0.75) 100%),
                             url('../images/title_picture.png');
    background-size        : cover;
    background-position    : center;
    background-repeat      : no-repeat;
    color                  : white;
    padding                : 20px;
    box-shadow             : 0 8px 24px rgba(0, 91, 179, 0.25);
    margin                 : 0 0 40px 0;
    border-radius          : 0;
    position               : relative;
    overflow               : hidden;
}

.header::before {
    content                : '';
    position               : absolute;
    top                    : 0;
    left                   : 0;
    right                  : 0;
    bottom                 : 0;
    background             : radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                             radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events         : none;
}

.header::after {
    content                : '';
    position               : absolute;
    bottom                 : 0;
    left                   : 0;
    right                  : 0;
    height                 : 3px;
    background             : linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

/* Main row with title and info card */
.header-main-row {
    display                : flex;
    justify-content        : space-between;
    align-items            : flex-start;
    gap                    : 20px;
    margin-bottom          : 0;
    position               : relative;
    z-index                : 1;
}

/* Header Navigation - Subtle Underline Style */
.header-nav {
    display                : flex;
    gap                    : 25px;
    align-items            : center;
    padding-top            : 8px;
    margin-right           : 40px;
}

.nav-link {
    color                  : rgba(255, 255, 255, 0.9);
    text-decoration        : none;
    padding                : 8px 4px;
    font-weight            : 500;
    font-size              : 0.95em;
    transition             : all 0.3s ease;
    white-space            : nowrap;
    position               : relative;
}

.nav-link::after {
    content                : '';
    position               : absolute;
    bottom                 : 0;
    left                   : 0;
    width                  : 0;
    height                 : 2px;
    background-color       : white;
    transition             : width 0.3s ease;
}

.nav-link:hover {
    color                  : white;
}

.nav-link:hover::after {
    width                  : 100%;
}

.nav-link.active {
    color                  : white;
    font-weight            : 600;
}

.nav-link.active::after {
    width                  : 100%;
    height                 : 3px;
}

.title-section {
    flex                   : 1;
    text-align             : left;
    padding                : 15px 0 0 45px;
    animation              : slideInLeft 0.8s ease-out;
}

@keyframes slideInLeft {
    from {
        opacity            : 0;
        transform          : translateX(-30px);
    }
    to {
        opacity            : 1;
        transform          : translateX(0);
    }
}

.header h1 {
    margin                 : 0;
    font-size              : 2em;
    letter-spacing         : 0.5px;
    text-shadow            : 3px 3px 6px rgba(0, 0, 0, 0.4),
                             1px 1px 2px rgba(0, 0, 0, 0.3),
                             0 0 15px rgba(255, 255, 255, 0.2);
    margin-bottom          : 20px;
}

.subtitle {
    margin                 : 0;
    font-size              : 1.3em;
    font-weight            : 400;
    letter-spacing         : 0.5px;
    opacity                : 0.95;
    text-shadow            : 1px 1px 2px rgba(0, 0, 0, 0.15);
}

.dna-icon {
    font-size              : 1.3em;
    display                : inline-block;
    vertical-align         : middle;
}

/* Info card with horizontal layout */
.info-card-horizontal {
    background-color       : rgba(248, 252, 255, 0.98);
    color                  : #333;
    padding                : 15px 15px 15px 25px;
    border-radius          : 12px;
    display                : flex;
    gap                    : 10px;
    min-width              : 350px;
    box-shadow             : 0 4px 20px rgba(0, 0, 0, 0.15);
    position               : relative;
    z-index                : 1;
    transition             : transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card-horizontal:hover {
    transform              : translateY(-3px);
    box-shadow             : 0 8px 30px rgba(0, 0, 0, 0.2);
}

.card-left-content {
    position               : relative;
    padding-right          : 15px;
}

.card-name {
    font-size              : 1.3em;
    font-weight            : 600;
    margin-bottom          : 5px;
    color                  : #333;
}

.model3d-link {
    position               : absolute;
    top                    : 9px;
    right                  : 25px;
    display                : inline-flex;
    align-items            : center;
    height                 : 1.04em;
}

.model3d-icon {
    height                 : 1.04em;
    width                  : auto;
    transition             : transform 0.3s ease;
}

.model3d-icon:hover {
    transform              : scale(1.1);
}

.card-link {
    color                  : #007bff;
    text-decoration        : none;
    font-size              : 0.9em;
    display                : flex;
    align-items            : center;
    gap                    : 8px;
    transition             : color 0.2s;
}

.card-link:hover {
    color                  : #0056b3;
    text-decoration        : underline;
}

.icon {
    height                 : 16px;
    width                  : 16px;
    object-fit             : contain;
}

.email-icon {
    font-size              : 1.1em;
}

.card-logo {
    height                 : 40px;
    object-fit             : contain;
    transition             : transform 0.2s;
}

.card-logo:hover {
    transform              : scale(1.05);
}

.card-left-content {
    flex                   : 1;
    display                : flex;
    flex-direction         : column;
    gap                    : 10px;
}

.card-right-logos {
    display                : flex;
    flex-direction         : column;
    gap                    : 15px;
    align-items            : center;
    justify-content        : center;
    padding                : 15px;
    margin-left            : 0;
    border-left            : 1px solid #e0e0e0;
    background-color       : white;
    border-radius          : 8px;
}

/* --- Page Navigation (Publications Button) --- */
.page-navigation {
    text-align             : center;
    margin                 : 0 auto 40px;
    padding                : 0 20px;
}

.pub-link-button {
    display                : inline-block;
    background             : linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color                  : white;
    text-decoration        : none;
    padding                : 15px 40px;
    border-radius          : 10px;
    font-size              : 1.1em;
    font-weight            : 600;
    box-shadow             : 0 4px 15px rgba(0, 123, 255, 0.3);
    transition             : transform 0.2s ease, box-shadow 0.2s ease;
}

.pub-link-button:hover {
    transform              : translateY(-2px);
    box-shadow             : 0 6px 20px rgba(0, 123, 255, 0.4);
}

/* --- Card Container (Grid Layout) --- */
.projects-container {
    display                : grid;
    /* Responsive grid: min 350px wide cards, maximum 4 columns */
    grid-template-columns  : repeat(auto-fit, minmax(350px, 1fr));
    gap                    : 25px;
    margin                 : 0 20px;
    padding                : 0 30px 50px;
    /* Limit maximum number of columns to 4 for wide screens */
    max-width              : 1800px;
    margin-left            : auto;
    margin-right           : auto;
}

/* --- Individual Card Styling --- */
.project-card {
    background-color       : white;
    border-radius          : 12px;
    overflow               : hidden;
    box-shadow             : 0 4px 15px rgba(0, 0, 0, 0.1);
    transition             : transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration        : none;
    color                  : inherit;
    display                : flex;
    flex-direction         : column;
    cursor                 : pointer;
    /* Ensures the card itself will stretch to the height of the tallest card in the row */
    height                 : 100%;
    /* Fade-in animation */
    animation              : fadeInUp 0.6s ease-out backwards;
    position               : relative;
}

/* Card Clickable Area */
.card-clickable-area {
    text-decoration        : none;
    color                  : inherit;
    display                : flex;
    flex-direction         : column;
    flex-grow              : 1;
}

/* Publication Badge and Popup */
.publication-badge-wrapper {
    position               : absolute;
    bottom                 : 8px;
    right                  : 8px;
    z-index                : 100;
}

.publication-badge {
    display                : block;
    background-color       : rgba(0, 123, 255, 0.08);
    color                  : #333;
    padding                : 6px 12px;
    border-radius          : 20px;
    font-size              : 0.85em;
    font-weight            : 600;
    transition             : transform 0.2s ease, color 0.2s ease, background-color 0.2s ease;
    cursor                 : help;
}

.publication-badge:hover {
    transform              : scale(1.05);
    color                  : #0056b3;
    background-color       : rgba(0, 123, 255, 0.15);
}

.publication-popup {
    display                : none;
    position               : absolute;
    bottom                 : 35px;
    right                  : 0;
    background-color       : white;
    border-radius          : 8px;
    box-shadow             : 0 4px 20px rgba(0, 0, 0, 0.25);
    padding                : 15px;
    padding-bottom         : 20px;
    min-width              : 300px;
    max-width              : 400px;
    z-index                : 1000;
}

.publication-badge-wrapper:hover .publication-popup,
.publication-popup:hover {
    display                : block;
}

.popup-header {
    font-weight            : 600;
    color                  : #0056b3;
    margin-bottom          : 10px;
    font-size              : 0.95em;
    border-bottom          : 2px solid #e8e8e8;
    padding-bottom         : 8px;
}

.popup-list {
    list-style             : none;
    padding                : 0;
    margin                 : 0;
}

.popup-list li {
    margin-bottom          : 10px;
    font-size              : 0.85em;
    line-height            : 1.4;
}

.popup-list li:last-child {
    margin-bottom          : 0;
}

.popup-list a {
    color                  : #333;
    text-decoration        : none;
    transition             : color 0.2s ease;
}

.popup-list a:hover {
    color                  : #0056b3;
    text-decoration        : underline;
}

.popup-list a.doi-link {
    color                  : #0056b3;
    text-decoration        : underline;
}

.popup-list a.doi-link:hover {
    color                  : #003d82;
}

/* Staggered animation delays for cards */
.project-card:nth-child(1) { animation-delay : 0.1s; }
.project-card:nth-child(2) { animation-delay : 0.2s; }
.project-card:nth-child(3) { animation-delay : 0.3s; }
.project-card:nth-child(4) { animation-delay : 0.4s; }
.project-card:nth-child(5) { animation-delay : 0.5s; }
.project-card:nth-child(6) { animation-delay : 0.6s; }
.project-card:nth-child(7) { animation-delay : 0.7s; }
.project-card:nth-child(8) { animation-delay : 0.8s; }
.project-card:nth-child(9) { animation-delay : 0.9s; }

/* Hover effect for interactivity */
.project-card:hover {
    transform              : translateY(-5px);
    box-shadow             : 0 10px 20px rgba(0, 0, 0, 0.15);
}

.card-image {
    height                 : 250px; /* FIXED HEIGHT FOR PICTURE PART */
    overflow               : hidden;
    border-top-left-radius : 12px;
    border-top-right-radius: 12px;
}

.card-image img {
    width                  : 100%;
    height                 : 100%;
    object-fit             : cover;
    display                : block;
    transition             : transform 0.5s ease;
}

.card-clickable-area:hover .card-image img {
    transform              : scale(1.05); /* Slight zoom on hover */
}

.card-content {
    padding                : 20px;
    /* Use flexbox for internal alignment */
    display                : flex;
    flex-direction         : column;
    flex-grow              : 1;
}

/* Card metadata section */
.card-meta {
    display                : flex;
    justify-content        : space-between;
    align-items            : center;
    margin-bottom          : 12px;
}

.status-badge {
    padding                : 4px 10px;
    border-radius          : 12px;
    font-size              : 0.75em;
    font-weight            : 600;
    text-transform         : uppercase;
    letter-spacing         : 0.5px;
}

.status-active {
    background-color       : #d4edda;
    color                  : #155724;
}

.status-completed {
    background-color       : #cce5ff;
    color                  : #004085;
}

.project-date {
    font-size              : 0.85em;
    color                  : #666;
    font-weight            : 500;
}

.card-content h3 {
    /* FIXED HEIGHT: Ensures up to 3 lines of title text are visible, aligning the horizontal line */
    height                 : 5em;
    overflow               : hidden; /* Important to prevent tall titles from pushing content */
    margin-top             : 0;
    color                  : #007bff;
    font-size              : 1.4em;
    /* Using border-bottom for the horizontal line */
    border-bottom          : 2px solid #e0e0e0;
    padding-bottom         : 10px;
    margin-bottom          : 15px;
}

.short-description {
    /* FIXED HEIGHT: Setting a fixed height for the short description to align the main text */
    height                 : 1.3em; /* Single line height for the short description */
    font-style             : italic;
    color                  : #555;
    margin-bottom          : 15px;
}

/* Tags section */
.card-tags {
    display                : flex;
    gap                    : 8px;
    flex-wrap              : wrap;
    margin-bottom          : 12px;
    min-height             : 3.5em; /* Fixed height to accommodate up to 2 lines of tags */
    align-content          : flex-start;
}

.tag {
    background-color       : #f0f0f0;
    color                  : #555;
    padding                : 4px 10px;
    border-radius          : 6px;
    font-size              : 0.8em;
    font-weight            : 500;
}

/* Style for the long description to absorb remaining space */
.card-content p:last-child {
    /* Forces this paragraph to take up all remaining vertical space in the card-content */
    flex-grow              : 1;
    margin-bottom          : 0;
}

/* --- Footer Styling --- */
.site-footer {
    background             : linear-gradient(135deg, rgba(0, 86, 179, 0.9) 0%, rgba(0, 123, 255, 0.85) 100%);
    color                  : white;
    padding                : 15px 20px;
    margin-top             : 60px;
    box-shadow             : 0 -4px 20px rgba(0, 0, 0, 0.15);
    border-top             : 3px solid rgba(255, 255, 255, 0.2);
}

.footer-content {
    max-width              : 1200px;
    margin                 : 0 auto;
}

.footer-main {
    display                : flex;
    justify-content        : space-around;
    align-items            : flex-start;
    gap                    : 40px;
    margin-bottom          : 30px;
    padding-bottom         : 25px;
    border-bottom          : 1px solid rgba(255, 255, 255, 0.2);
}

.footer-section {
    flex                   : 1;
    text-align             : center;
}

.footer-section h4 {
    margin                 : 0 0 10px 0;
    font-size              : 1.3em;
    font-weight            : 600;
    color                  : white;
    text-shadow            : 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.footer-tagline {
    margin                 : 5px 0;
    font-size              : 0.95em;
    opacity                : 0.9;
    font-style             : italic;
}

.footer-links {
    display                : flex;
    flex-direction         : column;
    gap                    : 12px;
    align-items            : center;
}

.footer-link {
    color                  : white;
    text-decoration        : none;
    font-size              : 0.95em;
    display                : inline-flex;
    align-items            : center;
    gap                    : 8px;
    padding                : 8px 16px;
    background-color       : rgba(255, 255, 255, 0.1);
    border-radius          : 6px;
    transition             : all 0.3s ease;
    backdrop-filter        : blur(10px);
}

.footer-link:hover {
    background-color       : rgba(255, 255, 255, 0.25);
    transform              : translateY(-2px);
    box-shadow             : 0 4px 12px rgba(0, 0, 0, 0.2);
}

.footer-icon {
    height                 : 16px;
    width                  : 16px;
    object-fit             : contain;
}

.footer-compact {
    display                : flex;
    justify-content        : center;
    align-items            : center;
    gap                    : 12px;
    flex-wrap              : wrap;
    font-size              : 0.9em;
    padding                : 5px 10px;
}

.footer-compact span {
    display                : inline-flex;
    align-items            : center;
    gap                    : 5px;
}

.separator {
    color                  : rgba(255, 255, 255, 0.5);
    font-weight            : 300;
}

.footer-link-inline {
    color                  : white;
    text-decoration        : none;
    display                : inline-flex;
    align-items            : center;
    gap                    : 5px;
    transition             : opacity 0.2s ease;
    opacity                : 0.95;
}

.footer-link-inline:hover {
    opacity                : 1;
    text-decoration        : underline;
}

.footer-icon-inline {
    height                 : 14px;
    width                  : 14px;
    object-fit             : contain;
    vertical-align         : middle;
}

.last-updated-inline {
    opacity                : 0.85;
    font-size              : 0.95em;
}

.update-icon {
    font-size              : 1em;
    display                : inline-block;
}


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .header-main-row {
        flex-direction     : column;
        text-align         : center;
        gap                : 20px;
    }
    
    .title-section {
        text-align         : center;
    }
    
    .header-nav {
        width              : 100%;
        justify-content    : center;
    }
    
    .info-card-horizontal {
        flex-direction     : column;
    }
    
    .card-right-logos {
        flex-direction     : row;
        border-left        : none;
        border-top         : 1px solid #e0e0e0;
        padding-left       : 0;
        padding-top        : 15px;
    }
    
    .header h1 {
        font-size          : 2em;
    }
}

/* --- Additional Responsive Adjustments --- */
@media (max-width: 600px) {
    .card-name {
        font-size          : 1.2em;
    }
    
    .card-logo {
        height             : 35px;
    }
    
    /* Fix mobile card margins */
    .projects-container {
        grid-template-columns : 1fr;
        margin             : 0 20px;
        padding            : 0 10px 50px;
    }
}

@media (max-width: 768px) {
    .footer-main {
        flex-direction     : column;
        gap                : 25px;
    }
    
    .footer-section {
        text-align         : center;
    }
}

/* --- Publications Page Styles --- */
.publications-page-container {
    max-width              : 1200px;
    margin                 : 0 auto;
    padding                : 0 40px 60px;
}

.nav-link-back {
    margin-bottom          : 30px;
}

.nav-link-bottom {
    margin-top             : 40px;
    margin-bottom          : 20px;
}

.back-link {
    display                : inline-flex;
    align-items            : center;
    color                  : #007bff;
    text-decoration        : none;
    font-size              : 1em;
    font-weight            : 500;
    padding                : 10px 20px;
    border-radius          : 8px;
    background-color       : rgba(0, 123, 255, 0.08);
    transition             : background-color 0.2s ease, transform 0.2s ease;
}

.back-link:hover {
    background-color       : rgba(0, 123, 255, 0.15);
    transform              : translateX(-3px);
}

.publications-intro {
    background-color       : rgba(255, 255, 255, 0.9);
    padding                : 20px 30px;
    border-radius          : 10px;
    margin-bottom          : 40px;
    border-left            : 4px solid #007bff;
    box-shadow             : 0 2px 10px rgba(0, 0, 0, 0.08);
}

.publications-intro p {
    margin                 : 0;
    font-size              : 1.05em;
    line-height            : 1.6;
    color                  : #555;
}

.year-section {
    margin-bottom          : 50px;
}

.year-header {
    font-size              : 2em;
    color                  : #007bff;
    border-bottom          : 3px solid #007bff;
    padding-bottom         : 10px;
    margin-bottom          : 25px;
    font-weight            : 600;
}

.publication-item {
    background-color       : white;
    padding                : 25px;
    margin-bottom          : 20px;
    border-radius          : 10px;
    box-shadow             : 0 2px 12px rgba(0, 0, 0, 0.08);
    transition             : transform 0.2s ease, box-shadow 0.2s ease;
}

.publication-item:hover {
    transform              : translateY(-2px);
    box-shadow             : 0 4px 16px rgba(0, 0, 0, 0.12);
}

.pub-authors {
    font-weight            : 600;
    color                  : #333;
    margin-bottom          : 8px;
    font-size              : 1em;
}

.pub-title {
    font-size              : 1.15em;
    color                  : #0056b3;
    margin-bottom          : 8px;
    font-weight            : 500;
    line-height            : 1.4;
}

.pub-journal {
    color                  : #666;
    margin-bottom          : 12px;
    font-size              : 0.95em;
}

.pub-links {
    display                : flex;
    flex-wrap              : wrap;
    gap                    : 10px;
    align-items            : center;
}

.pub-doi {
    color                  : #007bff;
    text-decoration        : none;
    font-size              : 0.9em;
    font-weight            : 500;
    transition             : color 0.2s ease;
}

.pub-doi:hover {
    color                  : #0056b3;
    text-decoration        : underline;
}

.pub-tag {
    background-color       : rgba(0, 123, 255, 0.1);
    color                  : #0056b3;
    padding                : 4px 12px;
    border-radius          : 15px;
    font-size              : 0.8em;
    font-weight            : 500;
}

/* Responsive adjustments for publications page */
@media (max-width: 768px) {
    .publications-page-container {
        padding            : 0 20px 40px;
    }
    
    .year-header {
        font-size          : 1.6em;
    }
    
    .publication-item {
        padding            : 20px;
    }
    
    .pub-title {
        font-size          : 1.05em;
    }
}