/* Harvard-style CSS */

:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f9f9f9;
    --text-primary: #1a1a1a;
    --text-secondary: #333333;
    --text-muted: #666666;
    --harvard-crimson: #A51C30;
    /* The core brand color */
    --accent: #A51C30;
    --border: #dddddd;
    --font-serif: 'Crimson Text', serif;
    --font-sans: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.75;
    font-size: 18px;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5em;
    line-height: 1.2;
}

a {
    color: var(--harvard-crimson);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #000;
    text-decoration: underline;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Header */
header {
    background-color: var(--bg-primary);
    border-bottom: 3px solid var(--harvard-crimson);
    padding: 30px 0;
    position: relative;
    z-index: 100;
}

/* Transparent Header (Landing Page) */
header.transparent-header {
    background-color: transparent;
    border-bottom: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

header.transparent-header .title-section h1,
header.transparent-header .title-section p {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

header.transparent-header nav a {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

header.transparent-header nav a:hover,
header.transparent-header nav a.active {
    color: #fff;
    border-bottom-color: #fff;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo-section img {
    height: 80px;
    width: auto;
}

header.transparent-header .logo-section img {
    /* Since logo is a JPG with white background, we can use screen or multiply depending on video. 
       Assuming video is not white, multiply won't work well on dark video (logo disappears). 
       Screen will make black text disappear.
       Best bet without transparent PNG: Border radius or just leave as is. 
       Let's try a slight brightness bump or just simple styling. */
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.title-section h1 {
    font-size: 32px;
    margin: 0;
    letter-spacing: -0.5px;
}

.title-section p {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text-muted);
    margin: 4px 0 0;
    font-style: italic;
    font-weight: 300;
}

nav {
    display: flex;
    gap: 30px;
    align-items: center;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 30px;
}

nav li {
    position: relative;
}

nav a {
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    display: block;
}

nav a:hover,
nav a.active {
    color: var(--harvard-crimson);
    border-bottom-color: var(--harvard-crimson);
}

/* Dropdown Styles */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: -15px;
    background: #fff;
    border: 1px solid var(--border);
    border-top: 3px solid var(--harvard-crimson);
    min-width: 220px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease-in-out;
    z-index: 1000;
    display: block;
    padding: 10px 0;
    margin-top: 10px;
}

nav li:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    display: block;
}

.dropdown-menu a {
    padding: 10px 20px;
    font-size: 14px;
    text-transform: none;
    color: var(--text-secondary);
    border-bottom: none;
}

.dropdown-menu a:hover {
    background-color: #f9f9f9;
    color: var(--harvard-crimson);
    border-bottom: none;
    padding-left: 25px;
    /* Slide effect */
}

/* Transparent Header Dropdown Fix */
header.transparent-header .dropdown-menu {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

header.transparent-header .dropdown-menu a {
    color: #333;
    /* Dark text on white dropdown even if header is transparent/light-text */
    text-shadow: none;
}

/* Hero Video */
.hero-video {
    padding: 0;
    text-align: center;
    background-color: #000;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
}

#lab-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.video-credit {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    padding: 15px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-sans);
    z-index: 2;
}



/* Sections */
section {
    padding: 60px 0;
    border-bottom: 1px solid var(--border);
}

section:last-child {
    border-bottom: none;
}

.section-header {
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.section-header h2 {
    font-size: 32px;
    color: var(--text-primary);
    margin: 0;
}

.section-number {
    display: none;
    /* Removing number for cleaner look */
}

/* Page Hero (Harvard Style) */
.page-intro {
    background-color: var(--bg-secondary);
    border-top: 5px solid var(--harvard-crimson);
    padding: 60px 0;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border);
}

.page-intro h2 {
    font-size: 42px;
    color: var(--harvard-crimson);
    margin-bottom: 15px;
}

.page-intro p {
    font-size: 20px;
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0;
    font-family: var(--font-serif);
    font-style: italic;
}

/* Card Improvements */
.news-item,
.project-card,
.notice-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-item:hover,
.project-card:hover,
.notice-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

/* News List */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.news-item {
    display: flex;
    gap: 20px;
    align-items: baseline;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.news-item:last-child {
    border-bottom: none;
}

.news-date {
    font-weight: 700;
    color: var(--harvard-crimson);
    font-size: 14px;
    min-width: 100px;
    text-transform: uppercase;
}

.news-content {
    font-family: var(--font-serif);
    font-size: 18px;
    color: var(--text-secondary);
}

/* Notices */
.notice-card {
    background-color: var(--bg-secondary);
    border-left: 5px solid var(--harvard-crimson);
    padding: 30px;
}

.notice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.notice-header h3 {
    margin: 0;
    font-size: 24px;
}

.notice-badge {
    background-color: var(--harvard-crimson);
    color: white;
    padding: 4px 8px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 2px;
}

/* About Grid */
.about-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.about-section h3 {
    font-size: 22px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    margin-bottom: 16px;
    color: var(--harvard-crimson);
}

.about-section p {
    font-size: 16px;
    color: var(--text-secondary);
}

/* Footer */
footer {
    background-color: #222;
    color: #fff;
    padding: 40px 0;
    text-align: center;
    font-size: 14px;
}

footer p {
    opacity: 0.7;
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }

    .header-content {
        flex-direction: column;
        align-items: flex-start;
    }

    nav {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .news-item {
        flex-direction: column;
        gap: 5px;
    }

}


/* Member Grid */
.member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.member-card {
    background: #fff;
    border: 1px solid var(--border);
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.member-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.member-card img {
    width: 65%;
    aspect-ratio: 3/4;
    border-radius: 4px;
    object-fit: cover;
    margin-bottom: 20px;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
    border: 3px solid var(--bg-secondary);
}

.member-card:hover img {
    filter: grayscale(0%);
}

.member-info h3 {
    font-size: 18px;
    margin: 0 0 5px;
    color: var(--text-primary);
}

.member-role {
    font-size: 14px;
    color: var(--harvard-crimson);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

.member-details {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.member-badge {
    display: inline-block;
    padding: 3px 8px;
    background: #f0f0f0;
    font-size: 11px;
    border-radius: 4px;
    margin-top: 10px;
    color: #666;
}

.member-badge.active {
    background-color: #e6fffa;
    color: #00796b;
    border: 1px solid #b2dfdb;
}

/* Project Grid */
.project-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.project-card {
    display: flex;
    background: #fff;
    border: 1px solid var(--border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    /* Adjust flex direction for mobile responsiveness later */
}

.project-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.project-image {
    flex: 0 0 250px;
    background-color: #f9f9f9;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--border);
}

.project-image img {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
    /* Ensures white background blends nicely */
}

.project-content {
    flex: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.project-meta {
    font-size: 14px;
    color: var(--harvard-crimson);
    font-family: var(--font-sans);
    margin-bottom: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.project-description {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.7;
}

@media (max-width: 768px) {
    .project-card {
        flex-direction: column;
    }

    .project-image {
        flex: 0 0 auto;
        height: 200px;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .project-image img {
        height: 100%;
        width: auto;
    }
}

/* Publication List */
.publication-list {
    list-style: none;
    padding: 0;
}

.publication-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.publication-item:last-child {
    border-bottom: none;
}

.publication-content {
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.publication-links {
    margin-top: 8px;
    font-size: 14px;
    font-family: var(--font-sans);
}

.publication-links a {
    margin-right: 15px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
}

/* Common Header for Pages */
.page-intro {
    background-color: var(--bg-secondary);
    padding: 60px 0;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.page-intro h2 {
    font-size: 36px;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.page-intro p {
    font-size: 18px;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
    font-family: var(--font-serif);
    font-style: italic;
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
    transition: transform 0.2s ease;
}

.gallery-item img:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Mobile Navigation */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--harvard-crimson);
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
    /* Above nav */
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    nav {
        display: none;
        /* Hidden by default on mobile */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: white;
        border-bottom: 3px solid var(--harvard-crimson);
        padding: 20px 0;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }

    /* Landing page special case: transparent header nav should also be white bg on mobile */
    header.transparent-header nav {
        background-color: white;
        top: 100%;
        /* Below the header bar */
    }

    header.transparent-header .menu-toggle {
        color: white;
        /* White icon on transparent header */
    }

    nav.active {
        display: block;
    }

    nav ul {
        flex-direction: column;
        gap: 0;
    }

    nav li {
        width: 100%;
        text-align: center;
    }

    nav a {
        display: block;
        padding: 12px 15px;
        border-bottom: 1px solid #eee;
        color: var(--primary-gray) !important;
        text-shadow: none !important;
    }

    /* Toggle-able Submenus */
    .dropdown-menu {
        position: static;
        box-shadow: none;
        border-top: none;
        background-color: #f9f9f9;
        display: none;
        /* Hidden by default */
        padding: 0;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    /* Show dropdown on hover (CSS fallback) OR if parent has 'active' class (JS enhancement needed potentially, but hover works ok for now or we rely on flattened structure) */
    nav li:hover .dropdown-menu,
    nav li:focus-within .dropdown-menu {
        display: block;
    }

    .dropdown-menu li a {
        padding-left: 0;
        background-color: #f4f4f4;
        font-size: 14px;
        color: #555 !important;
    }
}

/* --- AI News Page Enhancements --- */
.section-subtitle {
    font-family: var(--font-serif);
    font-size: 24px;
    color: var(--text-primary);
    margin: 40px 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--harvard-crimson);
    display: inline-block;
}

.section-divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--border), rgba(0, 0, 0, 0));
    margin: 50px 0;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.news-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--harvard-crimson);
}

.news-card-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-bottom: 1px solid #f0f0f0;
}

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

.news-card:hover .news-card-image img {
    transform: scale(1.05);
}

.news-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.news-card-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin: 10px 0;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-read-more {
    margin-top: auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--harvard-crimson);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

.news-read-more:hover {
    text-decoration: underline;
}

.external-icon {
    font-size: 0.8em;
}

.loading-news {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--harvard-crimson);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.auto-fade-in {
    animation: slideInUp 0.6s ease forwards;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* --- Conference Popup Styles --- */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    backdrop-filter: blur(5px);
}

.popup-overlay.show {
    opacity: 1;
    visibility: visible;
}

.popup-content {
    background-color: var(--bg-primary);
    padding: 40px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    border-top: 5px solid var(--harvard-crimson);
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.popup-overlay.show .popup-content {
    transform: translateY(0);
}

.popup-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s ease;
}

.popup-close:hover {
    color: var(--harvard-crimson);
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 15px;
}

.popup-header h3 {
    margin: 0;
    font-size: 24px;
    color: var(--text-primary);
}

.popup-badge {
    background-color: var(--harvard-crimson);
    color: white;
    padding: 4px 10px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 2px;
}

.popup-body p {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.6;
}

.conference-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.conference-list li {
    padding: 12px 15px;
    background-color: var(--bg-secondary);
    border-radius: 4px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 3px solid var(--harvard-crimson);
}

.conference-list li strong {
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--text-primary);
}

.conference-list li span {
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
}

.popup-note {
    font-size: 14px !important;
    text-align: center;
    margin-top: 10px;
}

.popup-note a {
    font-weight: 700;
    text-decoration: underline;
}

@media (max-width: 480px) {
    .popup-content {
        padding: 30px 20px;
    }
    
    .popup-header h3 {
        font-size: 20px;
    }
    
    .conference-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}