@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Montserrat:wght@400;600;700&display=swap');

:root {
    --primary-color: #2c3e50; /* A deep, professional blue-gray */
    --secondary-color: #3498db; /* A calm, trustworthy blue */
    --accent-color: #1abc9c; /* A modern teal for accents */
    --text-color: #333;
    --light-gray: #f4f4f4;
    --white: #ffffff;
    --header-height: 80px;
    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Lato', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    margin: 0;
    padding: 0;
    font-family: 'Cera Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Updated font stack */
    background-color: #FFFFFF; /* Default white background */
    color: #333333;
    line-height: 1.6;
    font-size: 16px; /* Base font size */
    box-sizing: border-box; /* Ensure html also uses border-box */
}

body { 
    padding-top: var(--header-height); /* Crucial for fixed header */
    /* Ensure body also has box-sizing: border-box if not covered by * selector strongly enough */
    box-sizing: border-box; 
}

#page-container {
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

.container {
    width: 90%;
    max-width: 1100px; /* Standard max-width, can be overridden */
    margin: 0 auto;
    padding: 0 15px;
}

h1, h2, h3 {
    font-family: 'Cera Pro', sans-serif; /* Ensure headings also use Cera Pro */
    font-weight: 600;
    margin-bottom: 0.75em;
}

h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.25em; }
h4 {
    font-size: 1.1em; /* Approx 17-18px */
    font-weight: bold;
    color: #000000;
    margin-bottom: 8px;
}

a {
    color: #D95A44; /* Orangey-red link color from screenshot */
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

ul {
    list-style: none;
}

/* Header Styles */
#main-header {
    /* padding: 25px 0; */ /* REMOVED - rely on flex alignment in child */
    background-color: #D2C8BA; /* Initially Brown */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; 
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; 
    height: var(--header-height); /* Explicitly set height */
    box-sizing: border-box; /* Keep for now, though less critical without padding */
    display: block; /* Be explicit about display type */
}

#main-header.header-scrolled {
    background-color: rgba(255, 255, 255); /* Becomes white on scroll */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
}

#main-header .container {
    max-width: 1200px; /* Wider container for header */
}

#main-header .header-flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%; /* Make flex container fill header height */
}

.logo-text {
    font-size: 1.3em;
    font-weight: bold;
    /* color: #000000; */ /* OLD - was for white/transparent bg */
    color: #000000; /* Black text for brown bg */
    text-decoration: none;
    letter-spacing: 1px;
    position: relative; /* Needed for the ::after pseudo-element */
    display: inline-block; /* Needed for consistent positioning */
    padding-bottom: 3px; /* Space for underline */
}

#main-header.header-scrolled .logo-text {
    color: #000000; /* Remains black on white scrolled header */
}

/* Add animated underline to logo text */
.logo-text::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px; /* Slightly thicker underline for logo */
    bottom: 0;
    left: 50%; /* Start from center */
    transform: translateX(-50%); /* Center the underline */
    background-color: #000000; /* Black underline for brown bg */
    transition: width 0.3s ease-in-out;
}

#main-header.header-scrolled .logo-text::after {
    background-color: #000000; /* Remains black on white scrolled header */
}

.logo-text:hover::after {
    width: 100%;
}

#top-menu-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

#top-menu-nav ul li {
    margin-left: 30px;
}

#top-menu-nav ul li a {
    text-decoration: none;
    /* color: #333333; */ /* OLD - for white/transparent bg */
    color: #000000; /* Black text for brown bg */
    font-size: 0.8em; 
    font-weight: bold; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
    padding: 5px 0;
    position: relative; /* Needed for the ::after pseudo-element */
    display: inline-block; 
}

#main-header.header-scrolled #top-menu-nav ul li a {
    color: #333333; /* Standard dark gray text for white scrolled header */
}

#top-menu-nav ul li a::after {
    content: '';
    position: absolute;
    width: 0; 
    height: 1px; 
    bottom: 0; 
    left: 50%; /* Start from center */
    transform: translateX(-50%); /* Center the underline */
    /* background-color: #333333; */ /* OLD */
    background-color: #000000; /* Black underline for brown bg */
    transition: width 0.3s ease-in-out; 
}

#main-header.header-scrolled #top-menu-nav ul li a::after {
    background-color: #333333; /* Standard dark gray for white scrolled header */
}

#top-menu-nav ul li.menu-item-has-children > a {
    padding-right: 15px;
    position: relative;
}

#top-menu-nav ul li.menu-item-has-children > a::after {
    content: '\f078'; /* Font Awesome down arrow */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.7em;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Styling for social icons within the nav list */
#top-menu-nav ul li.social-icon-item a {
    font-size: 1.1em; /* Or adjust to match text link perceived size */
    text-transform: none; /* Icons shouldn't be uppercased */
    padding-top: 2px; /* May need slight adjustment for vertical alignment with text */
}

#top-menu-nav ul li.social-icon-item a:hover {
    color: #D95A44; /* Link hover color */
}

#top-menu .social-icon-item a:hover .fa-orcid {
    color: #A6CE39 !important;
}

/* Add hover trigger for nav link underline animation (excluding social icons) */
#top-menu-nav ul li:not(.social-icon-item) a:hover::after {
    width: 100%;
}

/* Hero Section Styles */
.hero-section-hb {
    background-color: #D2C8BA; /* UPDATED HERO BACKGROUND COLOR */
    padding-top: 0px; /* REDUCED top padding */
    padding-bottom: 0; /* Remove bottom padding so content can touch the edge */
    padding-left: 0;
    padding-right: 0;
    display: flex;
    align-items: flex-end; /* Align items to the bottom of the flex container */
    min-height: 55vh; /* REDUCED height to bring content up */
}

.hero-section-hb .container.hero-content-flex {
    display: flex;
    gap: 50px; 
    max-width: 1200px; /* Wider container */
    margin-left: 12vw; /* Nudge slightly to the left */
    margin-right: auto; /* Adjust right margin automatically */
    /* It still inherits padding: 0 15px from .container */
}

.hero-text-content {
    flex: 1.2; /* Give slightly more space to text */
    padding-left: 10px; /* REDUCED padding to move text closer to image */
    padding-bottom: 0; /* Ensuring no extra padding at the bottom */
    align-self: center; /* ADD THIS to vertically center the text */
}

.hero-text-content h1 {
    font-size: 3.24em; /* INCREASED font size by 20% */
    color: #000000;
    font-weight: bold;
    line-height: 1.15;
    margin: 0;
}

.hero-image-content {
    flex: 1;
    text-align: left; /* Image is now on the left */
    padding-bottom: 0; /* Ensuring no extra padding at the bottom */
    align-self: flex-end; /* ADD THIS to keep image at the bottom */
}

.hero-image-content img {
    max-width: 720px; /* INCREASED image size by 20% */
    height: auto;
    display: block;
    margin-right: auto; /* If needed for centering in its flex item */
    margin-bottom: 0; /* Align to bottom if there's any intrinsic margin */
}

/* Bio Intro Section Expanded */
.bio-intro-section-expanded {
    padding: 60px 0;
    background-color: #FFFFFF;
}
.bio-intro-section-expanded .container {
    max-width: 1100px;
}

.bio-intro-flex {
    display: flex;
    gap: 50px;
}

.bio-intro-left {
    flex: 1;
}

.bio-intro-left h2 {
    font-size: 2.1em; /* INCREASED font size */
    line-height: 1.3;
    font-weight: bold;
    color: #000;
    margin: 0;
}

.bio-intro-right {
    flex: 1.5; /* More space for text */
    font-size: 0.95em; /* Approx 15px */
    line-height: 1.7;
    color: #333;
}

.bio-intro-right p {
    margin-bottom: 1.5em;
}
.bio-intro-right p:last-child {
    margin-bottom: 0;
}

/* Profile Highlights Section */
.profile-highlights-section {
    padding: 60px 0;
    /* background-color: #F8F8F8; */ /* Light gray background */
    background-color: #F5F1E8; /* Light beige from image */
}

.highlights-grid {
    /* display: grid; */
    /* grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); */
    /* gap: 40px; */
    display: flex; /* Use flexbox for single column layout */
    flex-direction: column;
    gap: 0; /* Remove gap, borders will separate */
}

.highlight-item {
    /* text-align: left; */
    display: flex;
    align-items: center; /* This will vertically align the icon with the text block */
    padding: 20px 0; /* Vertical padding */
    border-bottom: 1px solid #9E9E9E; /* Horizontal line, adjust color as needed */
}

.highlight-item:last-child {
    border-bottom: none; /* No border for the last item */
}

.highlight-icon {
    /* font-size: 1.8em; */ /* Adjust icon size - OLD */
    font-size: 2.2em; /* INCREASED icon size */
    color: #000000; /* Black icon color */
    margin-right: 20px; /* Space between icon and text */
    /* line-height: 1; */ /* Ensure icon aligns well with text - Can sometimes conflict with vertical-align */
    display: inline-block; /* For consistent transform behavior */
    transform-origin: center center; /* Explicitly set the rotation axis to the center */
    vertical-align: middle; /* Helps stabilize transform origin for inline-block text/icons */
    transform: rotate(0deg); /* Explicit base state for rotation */
    transition: transform 2s ease-in-out; /* Slow transition for hover effects */
}

/* New rule for hover spin */
.highlight-item:hover .highlight-icon {
    transform: rotate(360deg); /* Spin on hover */
}

@keyframes spin360 {
    from {
        transform: rotate(0deg);
    }
    to {
        /* transform: rotate(720deg); */ /* Two full rotations - OLD */
        transform: rotate(360deg); /* One full rotation */
    }
}

.highlight-item.is-visible .highlight-icon {
    animation-name: spin360; 
    /* animation-duration: 1.5s; */ /* SLOWER duration for two spins - OLD */
    animation-duration: 2s; /* MUCH SLOWER duration for one spin */
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1; /* Run animation once */
    /* animation-fill-mode: forwards; */ /* Keeps it at 360deg, visually same as 0deg */
}

/* Remove old image styling */
/* .highlight-item img { ... } */

.highlight-text-content {
    display: flex;
    flex-direction: column;
}

.highlight-item h3 {
    /* margin-bottom: 10px; */
    margin: 0; /* Remove default margins */
    font-size: 1.5em; /* Adjust text size */
    /* color: #2A3A5B; */ /* Dark blue text color - will be on the link now */
    font-weight: 600; /* Match site's h3 weight */
    font-family: 'Cera Pro', sans-serif; /* Match site's h3 fallback */
}

.highlight-item h3 a {
    text-decoration: none;
    color: #000000; /* Black heading color */
    position: relative; /* For the pseudo-element underline */
    display: inline-block; /* Ensures the underline is only as wide as the text content */
}

.highlight-item h3 a::after {
    content: '';
    position: absolute;
    width: 0; /* Start with no width */
    height: 2px; /* Underline thickness */
    bottom: -3px; /* Position below the text, adjust as needed */
    left: 0;
    background-color: #000000; /* Black underline color */
    transition: width 0.3s ease-in-out; /* Animation for the underline */
}

.highlight-item h3 a:hover::after {
    width: 100%; /* Expand underline to full width on hover */
}

.highlight-description {
    font-family: 'Cera Pro', sans-serif; /* Use Cera Pro */
    font-style: italic;
    font-size: 0.9em; /* Slightly smaller */
    color: #555555; /* Lighter gray color */
    margin-top: 5px; /* Space above the description */
    line-height: 1.4;
}

/* Remove old paragraph styling */
/* .highlight-item p { ... } */

/* Selected Publications Section */
.selected-publications-section {
    padding: 60px 0;
    background-color: #FFFFFF; /* Or choose another background */
}

.selected-publications-section h2 {
    text-align: left; /* Or center if preferred */
    margin-bottom: 40px;
    font-size: 2em; /* Consistent with other section titles */
}

.publications-carousel-wrapper {
    display: flex;
    align-items: center;
    position: relative; /* For absolute positioning of arrows if needed, or just for structure */
    margin-bottom: 30px;
}

.carousel-arrow {
    background: none;
    border: none;
    font-size: 2em;
    color: #333;
    cursor: pointer;
    padding: 10px;
    z-index: 10;
}

.carousel-arrow:hover {
    color: #000;
}

.prev-arrow {
    margin-right: 15px;
}

.next-arrow {
    margin-left: 15px;
}

.publications-carousel-viewport {
    flex-grow: 1;
    overflow: hidden;
}

.publications-carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    /* Width will be set by JS or calculated based on items */
}

.publication-item {
    flex: 0 0 50%; /* Show 2 items at a time */
    box-sizing: border-box;
    padding: 0 20px; /* Spacing between items */
    text-align: left;
}

.publication-item .publication-title {
    font-family: 'Cera Pro', sans-serif;
    font-weight: bold; /* Bolder/bigger text */
    font-size: 1.25em; /* Approx 20px */
    color: #000000;
    margin-bottom: 10px;
    line-height: 1.3;
}

.publication-item .publication-citation {
    font-family: 'Cera Pro', sans-serif;
    font-style: italic; /* Lighter, italic text */
    font-size: 0.9em; /* Approx 14-15px */
    color: #000000; /* Black color */
    line-height: 1.5;
}

.see-all-link-container {
    text-align: right; /* Or center/left as preferred */
    margin-top: 20px;
}

.animated-underline-link {
    text-decoration: none;
    color: #000000; /* Link color */
    position: relative;
    display: inline-block;
    font-size: 1em; /* Adjust as needed */
    font-weight: bold; /* Or normal */
    padding-bottom: 3px; /* Space for underline */
}

.animated-underline-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px; /* Underline thickness */
    bottom: 0; /* Position at the bottom of the padding */
    left: 0;
    background-color: #000000; /* Underline color */
    transition: width 0.3s ease-in-out;
}

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

/* Books Section */
.books-section {
    padding: 60px 0;
    background-color: #FFFFFF;
}

.books-section h2 {
    text-align: left;
    margin-bottom: 40px;
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 80px; /* More gap for books */
    align-items: flex-start;
}

.book-item img {
    display: block;
    margin: 0 auto 25px auto; /* Center book cover */
    max-height: 350px; /* Limit book cover height */
    width: auto;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    background-color: #E0E0E0; /* Placeholder background */
}

.book-item p {
    font-size: 0.9em;
    line-height: 1.6;
    color: #555;
}

/* Videos Section */
.videos-section {
    padding: 60px 0;
    background-color: #F8F8F8;
}

.videos-section h2 {
    text-align: left;
    margin-bottom: 40px;
}

.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.video-item img {
    width: 100%;
    margin-bottom: 15px;
    background-color: #333; /* Dark placeholder for video */
    border: 1px solid #444;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.video-item p {
    font-size: 1em;
    font-weight: bold;
    color: #000;
    margin: 0;
}
.video-item p small {
    font-size: 0.85em;
    font-weight: normal;
    color: #555;
    display: block;
}

/* Latest Articles Section */
.latest-articles-section {
    padding: 60px 0;
    background-color: #FFFFFF;
}

.articles-flex {
    display: flex;
    gap: 60px;
}

.articles-intro-text {
    flex: 1;
}

.articles-intro-text h3 {
    font-size: 1.5em; /* Approx 24px */
    margin-bottom: 15px;
}

.articles-intro-text p {
    font-size: 0.95em;
    line-height: 1.6;
    color: #555;
}

.articles-list {
    flex: 2;
}

.article-preview-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #E0E0E0;
}
.article-preview-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.article-logo-hbr img {
    width: 100px; /* Adjust as needed */
    height: auto;
    background-color: #CCC; /* Placeholder background */
}

.article-preview-content h4 a {
    color: #000;
    text-decoration: none;
    font-size: 1.2em;
}
.article-preview-content h4 a:hover {
    text-decoration: underline;
}

.article-preview-content .article-date {
    display: block;
    font-size: 0.8em;
    color: #777;
    margin: 5px 0 10px 0;
}

.article-preview-content p {
    font-size: 0.9em;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

/* Footer Styles */
#main-footer {
    padding: 40px 0; /* Adjusted padding slightly */
    /* background-color: #D2C8BA; */ /* Match hero section background - OLD */
    background-color: #FFFFFF; /* White background */
    font-size: 0.9em; /* Adjusted base font size for footer */
    /* color: #000000; */ /* Black text for contrast on brown - OLD */
    color: #333333; /* Dark gray text for contrast on white */
    /* border-top: none; */ /* OLD */
    border-top: 1px solid #E0E0E0; /* Add top border for separation */
}
#main-footer .container {
    max-width: 1100px;
}

.footer-flex {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically center align the two columns */
    gap: 40px;
}

.footer-left-content {
    flex: 1; /* Allow it to take available space */
}

.footer-logo-grid {
    /* display: grid; */
    display: flex; /* Changed to flex for a single line */
    /* grid-template-columns: repeat(2, 1fr); */ /* Removed grid columns */
    gap: 15px; /* Gap between logos - still works with flex */
    /* max-width: 160px; */ /* REDUCED max-width to make logos smaller - REMOVED for now */
    align-items: center; /* Vertically align logos if they have different heights */
}

.footer-logo-item img {
    /* max-width: 100%; */ /* Keep, but height will primarily control size */
    max-height: 50px; /* INCREASED max-height by 15% */
    width: auto; /* Let width adjust proportionally to height */
    height: auto;
    display: block;
    background-color: #f0f0f0; /* Placeholder bg for images */
}

/* Add border specifically to logo4.jpg */
.footer-logo-item a img[src="images/logo4.jpg"] {
    border: 1px solid #E0E0E0; /* Thin, faint gray border */
    box-sizing: border-box; /* Ensures border doesn't add to the overall dimensions unexpectedly */
}

.footer-right-content {
    flex: 1; /* Allow it to take available space */
    text-align: right; /* Align content to the right */
}

.footer-social-icons-right {
    margin-bottom: 15px; /* Space between icons and copyright */
}

.footer-social-icons-right a {
    margin: 0 10px;
    font-size: 1.2rem;
    color: #767676; /* Lighter gray for consistency */
    transition: color 0.3s ease;
}

.footer-social-icons-right a:first-child {
    margin-left: 0;
}

.footer-social-icons-right a:hover {
    color: #D95A44; /* Link hover color from site */
}

.footer-social-icons-right a:hover .fa-linkedin-in {
    color: #0B65C2;
}

.footer-social-icons-right a:hover .fa-orcid {
    color: #A6CE39;
}

.footer-social-icons-right a:hover .fa-graduation-cap {
    color: #4285F4;
}

.footer-social-icons-right a:hover .social-icon-img {
    filter: grayscale(0%);
}

.copyright {
    margin: 0;
    font-size: 0.9rem;
    /* color: #000000; */ /* Black copyright text - OLD */
    color: #666; /* Medium gray for copyright on white */
}

/* Scroll Animation Utilities */
.animate-on-scroll {
    opacity: 0;
    /* transform: translateY(20px); */ /* Start 20px down - OLD */
    transform: translateY(40px); /* Start 40px down - MORE NOTICEABLE */
    /* transition: opacity 0.6s ease-out, transform 0.6s ease-out; */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* SLOWER DURATION */
    will-change: opacity, transform; /* Hint to browser for optimization */
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Enhanced Mobile Responsive Styles */

/* Mobile Navigation Toggle Button - Add before existing media queries */
.mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.2em;
    color: #000000;
    cursor: pointer;
    padding: 5px;
}

#main-header.header-scrolled .mobile-nav-toggle {
    color: #333333;
}

/* Full-screen overlay navigation on mobile */
@media (max-width: 768px) {
    .mobile-nav-toggle {
        display: block;
        z-index: 1001; /* Above the overlay */
        position: relative;
    }
    
    #top-menu-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #FFFFFF;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        
        /* Animation properties */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-100%);
        transition: all 0.4s ease-in-out;
    }
    
    #top-menu-nav.nav-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    #top-menu-nav ul {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    #top-menu-nav ul li {
        margin: 0;
        padding: 0;
        text-align: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        width: 80%;
        max-width: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    #top-menu-nav ul li:last-child {
        border-bottom: none;
    }
    
    #top-menu-nav ul li a {
        font-size: 1.8em;
        font-weight: bold;
        color: #333333;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 25px 0; /* Reduced from 40px to 25px for tighter spacing */
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.3s ease;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    
    #top-menu-nav ul li a:hover {
        color: #D95A44;
    }
    
    /* Social icon in mobile menu */
    #top-menu-nav ul li.social-icon-item a {
        font-size: 1.5em;
        margin-top: 20px;
    }
    
    #main-header .header-flex-container {
        justify-content: center;
        align-items: center;
        flex-direction: row;
        position: relative;
    }
    
    .logo-area {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .mobile-nav-toggle {
        position: absolute;
        right: 15px;
    }
    
    .logo-text {
        margin-bottom: 0;
    }
}

/* Responsive adjustments (basic) */
@media (max-width: 980px) {
    .hero-section-hb {
        align-items: center; /* Revert to center for stacked mobile view or adjust as needed */
        min-height: auto; /* Allow height to shrink */
    }

    .hero-section-hb .container.hero-content-flex {
        flex-direction: column-reverse; /* Stack image above text on mobile */
        align-items: center; /* Center items in column */
        text-align: center;
    }

    .hero-text-content {
        padding-right: 0;
        padding-left: 0; /* Remove side padding for mobile */
        margin-bottom: 30px;
    }

    .hero-image-content {
        text-align: center;
        max-width: 400px; 
        margin: 0 auto 20px auto; /* Add some bottom margin to image when stacked */
    }

    .bio-intro-flex {
        flex-direction: column;
    }
    .articles-flex {
        flex-direction: column;
    }

    /* Publications carousel improvements */
    .publications-carousel-wrapper {
        padding: 0 10px; /* Add side padding for mobile */
    }
    
    .publication-item {
        min-width: 280px; /* Reduce minimum width for mobile */
        margin-right: 15px; /* Reduce gap between items */
    }
    
    /* Highlights grid improvements */
    .highlights-grid {
        grid-template-columns: 1fr; /* Single column on tablet */
        gap: 20px;
    }
    
    /* Podcast columns to stack */
    .podcast-columns-container {
        flex-direction: column;
        gap: 30px;
    }

    body {
        padding-top: 80px; /* Approximate height of header to prevent overlap */
    }
}

@media (max-width: 767px) {
    /* Hero section mobile fixes */
    .hero-section-hb {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 0; /* Override 576px media query padding */
    }
    
    .hero-section-hb .container.hero-content-flex {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        width: 100%;
        padding: 0;
        gap: 0; /* Remove gap between image and text on mobile */
    }
    
    .hero-section-hb .hero-image-content {
        max-width: 336px; /* 20% bigger: 280px * 1.2 = 336px */
        width: 336px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
        align-self: flex-end; /* Push image to bottom of flex container */
    }
    
    .hero-section-hb .hero-image-content img {
        width: 100%;
        max-width: 336px;
        display: block;
        margin-bottom: 0;
    }
    
    /* Typography adjustments */
    .hero-text-content {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .hero-text-content h1 {
        font-size: 2.2em; /* Increased size for better prominence */
        line-height: 1.3;
        text-align: center; /* Center align hero text */
    }
    
    .bio-intro-flex {
        gap: 15px; /* Reduce gap on mobile to eliminate purple space */
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .bio-intro-left h2 {
        font-size: 1.4em;
        text-align: center;
        margin-bottom: 8px; /* Further reduced gap */
        line-height: 1.4;
    }
    
    .bio-intro-right {
        font-size: 0.95em;
        line-height: 1.6;
        text-align: center; /* Center align bio text */
    }

    /* Container adjustments */
    .container {
        width: 95%; /* More space on small screens */
        padding: 0 10px;
    }

    /* Publications carousel mobile fixes */
    .publications-carousel-wrapper {
        padding: 0 5px;
    }
    
    /* Center align "Selected Publications" heading */
    .selected-publications-section h2 {
        text-align: center;
    }
    
    .publication-item .publication-title {
        font-size: 1.2em; /* Larger text */
        line-height: 1.4;
    }
    
    .publication-item .publication-citation {
        font-size: 1em; /* Larger text */
    }
    
    /* Center align and style "See all publications" link */
    .see-all-link-container {
        text-align: center;
        margin-top: 15px; /* Reduced from default spacing */
    }
    
    .see-all-publications-link {
        text-decoration: underline;
    }
    
    /* Carousel arrows positioning */
    .carousel-arrow {
        width: 35px;
        height: 35px;
        font-size: 0.9em;
    }

    /* Highlights section improvements */
    .highlight-item {
        padding: 20px 15px;
        text-align: center;
    }
    
    /* Hide highlight icons on mobile */
    .highlight-icon {
        display: none;
    }
    
    .highlight-text-content h3 {
        font-size: 1.1em;
        margin-bottom: 8px;
    }
    
    /* Add underlines to career highlight links on mobile */
    .highlight-text-content h3 a {
        text-decoration: underline;
    }
    
    .highlight-description {
        font-size: 0.9em;
        line-height: 1.5;
    }
    
    /* Publications carousel - show only 1 item on mobile */
    .publication-item {
        flex: 0 0 100%; /* Force single item display on mobile */
        min-width: 100%; /* Take up full screen width */
        margin-right: 0; /* Remove margin between items */
        padding: 0 15px; /* Keep horizontal padding */
        box-sizing: border-box;
    }

    /* Footer improvements */
    .footer-flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 30px 0;
    }
    
    .footer-right-content {
        text-align: center; /* Center copyright text on mobile */
    }
    
    .footer-logo-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
        gap: 15px;
        margin-bottom: 25px; /* Increase space between logos and social icons */
    }
    
    /* Make footer social icons colored by default on mobile */
    .footer-social-icons-right a .social-icon-img {
        filter: grayscale(0%);
    }
    .footer-social-icons-right a .fa-linkedin-in {
        color: #0B65C2;
    }
    .footer-social-icons-right a .fa-orcid {
        color: #A6CE39;
    }
    
    .copyright {
        font-size: 1.1em;
    }

    /* Form improvements for contact page */
    #contact-form .form-row {
        flex-direction: column;
        gap: 0;
    }
    
    #contact-form input[type="text"],
    #contact-form input[type="email"],
    #contact-form textarea {
        font-size: 16px; /* Prevent zoom on iOS */
    }

    /* Hide footer LinkedIn icon on mobile */
    /* This rule is no longer needed and will be removed */

    body {
        padding-top: 80px; /* Match header height */
    }
}

/* Styles for Herminia Ibarra website redesign */

/* Font Face Declarations */
@font-face {
    font-family: 'Cera Pro';
    src: url('../fonts/Cera-Pro-Regular.ttf') format('truetype');
    font-weight: normal; /* 400 */
    font-style: normal;
}

@font-face {
    font-family: 'Cera Pro';
    src: url('../fonts/Cera-Pro-Regular-Italic.ttf') format('truetype');
    font-weight: normal; /* 400 */
    font-style: italic;
}

@font-face {
    font-family: 'Cera Pro';
    src: url('../fonts/Cera-Pro-Bold.ttf') format('truetype');
    font-weight: bold; /* 700 */
    font-style: normal;
}

/* Apply base font to headings, let font-weight differentiate */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cera Pro', sans-serif; /* Ensure headings also use Cera Pro */
    /* font-weight will be handled by their existing bold/normal settings or specific overrides */
}

h2 {
    font-size: 2em;
}

strong, b {
    font-family: 'Cera Pro', sans-serif; /* Ensure explicit use for bold */
    font-weight: bold; /* This should map to Cera-Pro-Bold.ttf */
}

em, i {
    font-family: 'Cera Pro', sans-serif; /* Ensure explicit use for italic */
    font-style: italic; /* This should map to Cera-Pro-Regular-Italic.ttf */
}

img {
    max-width: 100%;
    height: auto;
}

/* Podcast Section */
.podcast-section {
    padding: 60px 0;
    background-color: #F5F1E8; /* Lighter beige for mid-page section */
    color: #000000; /* Default text color for this section */
    position: relative; /* Needed for the pseudo-element and content stacking */
    /* Remove direct background image properties - will be on ::before */
    /* background-image: url('../images/pod.png'); */
    /* background-repeat: no-repeat; */
    /* background-position: 25% bottom; */
    /* background-size: auto 250px; */
}

.podcast-section::before { /* Pseudo-element for the background image */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/pod.png');
    background-repeat: no-repeat;
    background-position: 5% bottom; /* EVEN MORE to the left, aligned to bottom */
    background-size: auto 500px; /* SMALLER: auto width, 500px height */
    opacity: 0.3; /* EVEN MORE transparent (70%) */
    z-index: 0; /* Layer it above parent background, but below container content */
}

.podcast-section .container {
    max-width: 1100px; /* Wider container for two columns */
    /* text-align: center; Removed, column content will be left-aligned */
    position: relative; /* Ensure container content is above the ::before pseudo-element */
    z-index: 1; /* Explicitly stack above the pseudo-element if needed, though -1 on pseudo often suffices */
}

/* Removed .podcast-section-title and its child 'a' styles as they are no longer used.
   The main section title is now .section-heading,
   and individual podcast titles are .podcast-column .podcast-title
*/

.podcast-description {
    font-size: 1em; /* Or 0.95em for slightly smaller */
    line-height: 1.7;
    margin-bottom: 30px;
    color: #000000; /* Ensure black text on the brown background */
    /* margin-left: auto; Removed for left alignment within columns */
    /* margin-right: auto; Removed for left alignment within columns */
}

.podcast-embed-widget {
    margin-top: 30px; /* Space above the widget */
    /* The iframe itself has width 100% and height 200px from embed */
}

/* About Page Specific Styles */
.about-page-main-content { /* This is the <main> element for the about page */
    display: flex;
    align-items: flex-start; /* Align columns to the top */
    /* No padding here, body padding handles header offset */
    /* background-color: red !important; */ /* TEMPORARY FOR DEBUGGING - REMOVED */
}

/* .about-page-wrapper is removed from HTML structure for this approach */
/* If it were kept, it would need to be the flex container instead of main */

.about-image-column {
    width: 33.33vw; 
    height: calc(100vh - var(--header-height)); /* Adjusted to viewport height minus header */
    position: sticky;
    /* top: var(--header-height); */ /* Sticks relative to viewport, below fixed header - OLD */
    top: 0; /* Stick to the top of its offset parent (main), which is already below header */
    box-sizing: border-box; 
    overflow: hidden; 
    flex-shrink: 0; /* Prevent this column from shrinking */
}

.about-image-column img {
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    display: block;
}

.about-text-column {
    width: 66.67vw; 
    /* padding: 40px; */ /* Uniform padding, top space will be created by content flow - OLD */
    padding: 40px 160px; /* Increased horizontal padding */
    box-sizing: border-box;
    height: calc(100vh - var(--header-height)); /* Text column height, scrolls internally */
    overflow-y: auto; /* Enable scrolling ONLY for this column initially */
    flex-grow: 1; 
}

.about-page-title {
    font-size: 3.24em; 
    color: #000000;
    font-weight: bold;
    line-height: 1.15;
    margin-bottom: 1em;
    margin-top: 20px; /* Add some space above the title */
}

.about-text-column p {
    font-size: 1em; 
    line-height: 1.7;
    margin-bottom: 1.5em;
    color: #333;
}

.about-text-column p strong {
    font-weight: bold; 
}

.about-cv-link.highlight-item {
    background-color: transparent; 
    padding: 25px 0 35px 0; /* New padding: 25px top, 35px bottom */
    border-bottom: none; 
}

.about-cv-link.highlight-item .highlight-icon {}

.about-cv-link.highlight-item h3 a {
    font-size: 1.5em; 
    font-weight: normal; /* Make CV link text regular weight */
}

/* Faster animation for Sonia's CV link icon */
.about-cv-link .highlight-icon {
    transition-duration: 0.75s; /* Faster hover spin */
}

.about-cv-link.is-visible .highlight-icon {
    animation-duration: 0.75s; /* Faster scroll-in spin */
}

/* Publications Page Styles */
.publications-page-main-content .page-container {
    padding-top: 40px; /* Space below header */
    padding-bottom: 60px;
}

.publications-page-main-content .page-title { /* This is the H1 inside the wrapper now */
    /* text-align: center; */   /* Centering is now handled by .page-title-wrapper */
    font-size: 2.8em;         /* Large page title */
    /* margin-bottom: 40px; */ /* Moved to .page-title-wrapper implicitly or explicitly if needed */
    /* margin-top: 30px; */    /* Moved to .page-title-wrapper implicitly or explicitly if needed */
    color: #000000;           /* Ensure title text is black */
    /* Add a small specific margin if needed, but wrapper should handle most */
    margin: 0; /* Remove default H1 margins to let wrapper control spacing */
}

.filter-sort-bar {
    background-color: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 40px;
}

.filter-controls {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-item label {
    font-weight: 600;
    font-size: 0.9em;
    color: #333;
    white-space: nowrap;
}

.filter-dropdown,
.search-input {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 0.9em;
    background-color: #fff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.filter-dropdown:focus,
.search-input:focus {
    outline: none;
    border-color: #D2C8BA;
    box-shadow: 0 0 0 2px rgba(210, 200, 186, 0.2);
}

.filter-dropdown {
    min-width: 140px;
    cursor: pointer;
}

.filter-search {
    position: relative;
    flex: 1; /* Take up all remaining space */
    min-width: 200px; /* Minimum width to prevent it from getting too small */
}

.search-input {
    width: 100%;
    padding-right: 35px;
}

.search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}

.publications-content-container {
    /* Container for all publications */
}

.no-results-message {
    text-align: center;
    padding: 60px 20px;
    margin: 40px 0;
}

.no-results-content {
    max-width: 400px;
    margin: 0 auto;
}

.no-results-content i {
    font-size: 3em;
    color: #ccc;
    margin-bottom: 20px;
}

.no-results-content h3 {
    font-size: 1.5em;
    color: #666;
    margin-bottom: 10px;
    font-weight: 600;
}

.no-results-content p {
    color: #888;
    font-size: 0.95em;
    line-height: 1.5;
}

/* START NEW APPROACH: INNER FLEX WRAPPER (LESS AGGRESSIVE) */
.publication-entry {
    margin-bottom: 30px;
    padding: 0; 
    border-bottom: 1px solid #f0f0f0;
}

.publication-entry:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.publication-entry-inner-layout {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 0; 
}

.publication-content {
    flex: 1 1 0%; 
    min-width: 0; 
    padding-right: 20px; 
}

.publication-divider {
    flex: 0 0 1px; 
    background-color: #f0f0f0 !important; /* Keep !important for visibility if needed */
    margin: 0 20px; 
}

.publication-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 94px;
    flex-shrink: 0;
    min-height: 94px; /* Ensure consistent height for alignment */
    align-content: center; /* Center grid items vertically */
}

.publication-entry.other .publication-actions,
.publication-entry.books-chapters .publication-actions {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;  /* INCREASED SIZE */
    height: 40px; /* INCREASED SIZE */
    border: 1px solid #E8E5DF;
    border-radius: 6px;
    background-color: #FFFFFF;
    color: #8B7355;
    text-decoration: none;
    /* font-size will be overridden by img if using img tags */
    transition: all 0.3s ease;
    position: relative; /* For tooltip */
}

.action-btn img {
    width: 22px;  /* Adjusted icon size */
    height: 22px; /* Adjusted icon size */
}

/* Tooltip Styles */
.action-btn {
    position: relative; /* Needed for absolute positioning of the tooltip */
}

.action-btn::after {
    content: attr(data-tooltip); /* Get text from data-tooltip attribute */
    position: absolute;
    bottom: 100%; /* Position above the button */
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px; /* Space between button and tooltip */
    background-color: #D2C8BA; /* New background: Header color */
    color: #000000; /* New text color: Black for contrast */
    padding: 6px 10px; /* Padding inside the tooltip */
    border-radius: 4px; /* Rounded corners */
    font-size: 0.85em; /* Slightly smaller text */
    white-space: nowrap; /* Prevent tooltip text from wrapping */
    z-index: 100; /* Ensure tooltip is on top */
    visibility: hidden; /* Hidden by default */
    opacity: 0;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    pointer-events: none; /* Tooltip itself shouldn't be interactive */
}

.action-btn:hover::after {
    visibility: visible; /* Show on hover */
    opacity: 1;
}

.action-btn:hover {
    background-color: #D2C8BA;
    border-color: #D2C8BA;
    transform: translateY(-2px);
}

.action-btn:active {
    transform: translateY(0);
}

.action-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    position: relative; /* For positioning the pseudo-element */
}

.action-btn.disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -10%;
    width: 120%;
    height: 2px;
    background-color: red;
    transform: rotate(-45deg);
    transform-origin: center;
    z-index: 1; /* Ensure the line is on top of the image */
}

.action-btn:hover {
    background-color: #D2C8BA;
    border-color: #D2C8BA;
    transform: translateY(-2px);
}

.action-btn:active {
    transform: translateY(0);
}

.action-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
/* END NEW APPROACH: INNER FLEX WRAPPER (LESS AGGRESSIVE) */

.publication-entry h4 {
    font-size: 1.2em; /* Publication title size */
    font-weight: bold; /* As requested */
    color: #000000;
    margin-bottom: 8px;
}

/* Title styling - no longer links */

/* Remove or adjust generic p styling within publication-entry if it conflicts */
.publication-entry p { /* This will be overridden by more specific classes below */
    font-size: 0.95em;
    color: #333;
    line-height: 1.6;
    margin: 0;
}

.publication-entry .pub-authors {
    font-size: 0.9em;
    color: #555555; /* Lighter gray */
    line-height: 1.5;
    margin-bottom: 4px; /* Space between authors and details */
    font-weight: normal;
}

.publication-entry .pub-details {
    font-size: 0.9em;
    color: #555555; /* Lighter gray */
    line-height: 1.5;
    font-style: italic; /* Italic for details */
    font-weight: normal;
}

/* New class for the 3rd line of book/chapter entries */
.publication-entry .pub-book-details {
    font-size: 0.9em;
    color: #555555; /* Lighter gray */
    line-height: 1.5;
    margin-bottom: 4px; /* Space between book details and publisher line */
    font-weight: normal;
}

/* Responsive design for filter bar */
@media (max-width: 767px) {
    .filter-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .filter-item {
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
    }
    
    .filter-search {
        max-width: none;
    }

    /* Responsive layout for publications */
    .publication-entry-inner-layout { /* UPDATED TO TARGET INNER LAYOUT */
        flex-direction: column;
        gap: 15px;
        min-height: auto;
        padding: 20px; /* Adjust padding for mobile stacked view */
    }
    
    .publication-content { /* Ensure content takes full width in mobile stacked view */
        flex: 1 1 100%; /* Allow it to take full width */
        width: 100%;
        padding-right: 0; /* No right padding needed when stacked */
    }
    
    .publication-divider { /* Divider becomes horizontal */
        height: 1px;
        width: 100%;
        margin: 15px 0;
        background-color: #f0f0f0 !important; /* Keep for visibility */
        flex-basis: 1px;
    }
    
    /* Remove divider above icons but keep the one below */
    .publication-divider { 
        display: none; /* Hide the divider above icons */
    }
    
    .publication-actions { 
        display: grid; /* Ensure grid is re-established */
        grid-template-columns: repeat(4, auto); /* Change to 1 row of 4 icons */
        grid-template-rows: 1fr; /* Single row */
        gap: 12px; /* Use gap for spacing */
        padding: 15px 0; /* Add balanced vertical padding */
        width: fit-content; /* Shrink container to fit icons */
        margin: 0 auto; /* Center the action container */
        min-height: auto; /* Override desktop min-height */
    }
    
    /* Make action buttons larger on mobile */
    .action-btn {
        width: 50px; /* Larger buttons */
        height: 50px; /* Larger buttons */
    }
    
    .action-btn img {
        width: 28px; /* Larger icons */
        height: 28px; /* Larger icons */
    }
    
    /* Hide star completely on mobile */
    .page-title-animated-icon {
        display: none !important; /* Remove star on mobile */
    }
    
    /* Center align the publications page title on mobile */
    .publications-page-main-content .page-title {
        text-align: center;
    }
    
    /* Lab page mobile fixes */
    /* Center align lab page title and hide star on mobile */
    .lab-page-main-content .page-title {
        text-align: center;
    }
    
    /* Change lab intro from 2-column to vertical layout on mobile */
    .lab-intro-section {
        flex-direction: column; /* Stack image above text */
        align-items: center; /* Center the image */
        gap: 20px; /* Reduce gap between image and text */
    }
    
    .lab-intro-image-column {
        max-width: 280px; /* Smaller image on mobile */
        margin: 0 auto; /* Center the image column itself */
        text-align: center; /* Center content within */
    }
    
    .lab-intro-text-column {
        text-align: center; /* Center align all text */
        width: 100%; /* Full width for text */
    }
    
    .lab-intro-text-column .principal-investigator {
        font-size: 1.3em; /* Slightly larger on mobile */
        margin-bottom: 20px; /* More space below title */
    }
    
    .lab-intro-text-column p {
        text-align: center; /* Center paragraphs */
        margin-bottom: 1.2em;
    }
    
    /* Add underline to learn more link on mobile */
    .learn-more-link {
        text-decoration: underline;
    }
    
    /* Make research assistants 2-column layout on mobile with smaller images */
    .research-assistants-container {
        display: grid !important; /* Force grid display */
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columns instead of flex-wrap */
        gap: 15px; /* Smaller gap */
        max-width: 400px; /* Limit container width */
        margin: 0 auto; /* Center the container */
        justify-content: center; /* Center grid items */
    }
    
    .research-assistant-item {
        width: 100%; /* Full width within grid item */
    }
    
    .research-assistant-item .image-outline-wrapper {
        max-width: 150px; /* Smaller images */
        margin: 0 auto; /* Center each image */
    }
    
    /* Reduce top padding on all main pages for mobile */
    .publications-page-main-content .page-container {
        padding-top: 10px !important; /* Halve from 20px to 10px */
    }
    
    .lab-page-main-content .page-container {
        padding-top: 20px !important; /* Halve from 40px to 20px */
    }
    
    .podcast-page-main-content .page-container {
        padding-top: 10px !important; /* Halve from 20px to 10px */
    }
    
    .contact-page-main-content .page-container {
        padding-top: 10px !important; /* Halve from 20px to 10px */
    }
    
    /* Media page mobile redesign - card-based layout */
    .media-page-main-content .page-container {
        padding-left: 20px !important; /* Add left padding - override desktop minimal padding */
        padding-right: 20px !important; /* Add right padding - override desktop minimal padding */
        padding-top: 10px !important; /* Reduce top padding - halve from 20px to 10px */
    }
    
    .media-gallery-container {
        display: block !important; /* Override grid */
        margin-top: 20px; /* Reduce top margin */
    }
    
    .media-image-item {
        display: block; /* Change from grid item to block */
        margin-bottom: 30px; /* Space between cards */
        border-radius: 12px; /* Rounded corners */
        background: #ffffff; /* White background */
        box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Subtle shadow */
        overflow: hidden; /* Contain rounded corners */
        position: relative; /* For absolute positioning of text overlay */
        cursor: pointer; /* Show it's clickable */
        transition: transform 0.2s ease, box-shadow 0.2s ease; /* Subtle interaction */
    }
    
    .media-image-item:active {
        transform: scale(0.98); /* Slight press effect */
        box-shadow: 0 1px 4px rgba(0,0,0,0.2); /* Reduce shadow on press */
    }
    
    .media-image-item.media-wide-item {
        grid-column: unset; /* Remove grid spanning */
    }
    
    .media-image-item img {
        width: 100%;
        height: 200px; /* Fixed height for consistency */
        object-fit: cover;
        aspect-ratio: unset; /* Remove aspect ratio */
        transform: none !important; /* Disable hover transforms */
        filter: none !important; /* Disable hover filters */
        transition: none; /* Remove transitions */
    }
    
    .media-text-overlay {
        position: absolute; /* Back to absolute for dark overlay */
        bottom: 0; /* Position at bottom */
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 60%, transparent 100%); /* Dark gradient background */
        color: #fff; /* White text for contrast */
        padding: 20px; /* Card padding */
        text-align: left; /* Left align text */
        transform: none !important; /* Remove transforms */
        opacity: 1 !important; /* Always visible */
    }
    
    .media-text-overlay::before,
    .media-text-overlay::after {
        display: none; /* Remove pseudo-elements */
    }
    
    .media-headline {
        color: #fff; /* White headline for contrast */
        font-size: 1.2em; /* Larger mobile font */
        margin-bottom: 8px; /* Space below headline */
        line-height: 1.4; /* Better line height */
        font-weight: bold; /* Bold for better readability */
    }
    
    .media-subtext {
        opacity: 1 !important; /* Always visible */
        color: #e0e0e0; /* Light gray subtext */
        font-size: 0.9em; /* Readable size */
        margin-bottom: 0; /* Remove bottom margin since no button */
        transform: none !important; /* Remove transforms */
        max-height: none !important; /* Remove height constraints */
    }
    
    .media-read-button {
        display: none !important; /* Hide the button completely */
    }
}

/* Lab Page Styles */
.lab-page-main-content .page-container {
    padding-top: 40px; /* Space below header */
    padding-bottom: 60px;
}

.page-title-wrapper {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 20px;
    margin-top: 30px;
}

.page-title-animated-icon {
    font-size: 2.5em;
    color: #000000;
    display: inline-block;
    transform-origin: center center;
    transition: transform 2s ease-in-out;
    vertical-align: middle;
}

.page-title-wrapper:hover .page-title-animated-icon {
    transform: rotate(360deg);
}

.page-title-wrapper.is-visible .page-title-animated-icon {
    animation-name: spin360; 
    animation-duration: 2s; 
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1; 
}

.lab-page-main-content .page-title {
    font-size: 2.8em;
    color: #000000;
}

.section-divider {
    border: 0;
    height: 1px;
    background-color: #f0f0f0; /* Faint line color, same as publication entry border */
    /* margin: 50px 0; */ /* Old rule: 50px top/bottom, 0 left/right */
    margin: 20px 0 50px; /* New rule: 20px top, 0 left/right, 50px bottom */
}

.lab-intro-section {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.lab-intro-image-column {
    flex: 1;
    max-width: 320px;
}

.image-outline-wrapper {
    padding: 8px;
    border: 1px solid #e0e0e0;
    background-color: #FFFFFF;
    display: inline-block;
}

.lab-intro-image-column img {
    display: block;
    width: 100%;
    height: auto;
}

.lab-intro-text-column {
    flex: 2;
}

.lab-intro-text-column .principal-investigator {
    font-size: 1.25em;
    font-weight: bold;
    color: #000000;
    margin-bottom: 15px;
}

.lab-intro-text-column p {
    font-size: 1em;
    line-height: 1.7;
    color: #333;
    margin-bottom: 1.5em;
}

.lab-intro-text-column p:last-child {
    margin-bottom: 0;
}

.learn-more-link {
    font-size: 1em;
    font-weight: bold;
}

/* New styles for Lab Page Team Members section */
.lab-section-title {
    font-size: 2.2em; /* Smaller than H1, but still prominent */
    color: #000000;
    text-align: center;
    margin-top: 0; /* HR divider above has margin-bottom */
    margin-bottom: 40px;
}

.team-members-container {
    display: flex;
    justify-content: center; /* Center the group of items */
    align-items: flex-start; /* Align items to the top if captions have different lengths */
    gap: 40px; /* Increased space between team member items */
    flex-wrap: wrap; /* Allow wrapping on smaller screens if necessary */
    margin-bottom: 0; /* HR divider below has margin-top */
}

.team-member-item {
    flex: 0 1 320px; /* Increased size */
    text-align: center; /* Center the caption text */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center image wrapper and caption */
}

.team-member-item .image-outline-wrapper {
    margin-bottom: 15px; /* Space between image and caption */
    width: 100%; /* Make wrapper take full width of team-member-item for consistent sizing */
    max-width: 300px; /* Increased size */
}

.team-member-item .image-outline-wrapper img {
    aspect-ratio: 1 / 1; /* Make images square */
    object-fit: cover; /* Ensure image covers the square area without distortion */
    width: 100%; /* Ensure img fills the wrapper */
    display: block; /* Add this to remove potential bottom spacing */
}

.team-member-caption {
    font-size: 1em; /* Increased size */
    color: #333;
    line-height: 1.5;
    font-weight: 600; /* Slightly bolder for name/title */
}

/* Modal Styles */
.team-member-image-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-block; /* Or block, depending on desired layout with caption */
    line-height: 0; /* Helps remove extra space around image if button wraps it tightly */
}

/* Ensure image wrapper maintains its style within the button */
.team-member-image-button .image-outline-wrapper {
    /* Inherits most styles, can add specific interaction feedback here if needed */
    transition: transform 0.2s ease-out; /* Subtle scale on hover/focus */
}

.team-member-image-button:hover .image-outline-wrapper,
.team-member-image-button:focus .image-outline-wrapper {
    transform: scale(1.03);
    /* box-shadow: 0 0 10px rgba(0,0,0,0.2); Optional: add shadow on hover */
}

.modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
    z-index: 1040; /* Below modal, above other content */
}

.modal-overlay.active {
    display: block;
}

.team-member-modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 1050; /* Above overlay */
    width: 90%;
    max-width: 600px; /* Max width of the modal */
    max-height: 80vh; /* Max height, for scrollable content */
    overflow-y: auto; /* Allow scrolling for long bios */
}

.team-member-modal.active {
    display: block;
}

.modal-header-with-link {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.team-member-modal h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.8em;
}

.modal-header-with-link h3 {
    margin: 0;
}

.modal-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    text-decoration: none;
    font-size: 16px;
    color: #6c757d;
    transition: all 0.3s ease;
    position: relative;
}

.modal-link-btn:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    color: #495057;
}

.modal-link-btn:hover .fa-linkedin-in {
    color: #0B65C2;
}

.team-member-modal h4 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.1em;
    font-weight: normal;
    color: #555;
}

.team-member-modal p {
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 1em;
}

.modal-close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2em;
    color: #888;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-close-button:hover {
    color: #000;
}

/* Styles for Research Assistants section */
.research-assistants-container {
    display: flex;
    flex-wrap: wrap; /* Allow images to wrap to the next line */
    justify-content: center; /* Center items on the line */
    gap: 20px; /* Space between items */
    margin-bottom: 0; /* HR divider below has margin-top */
}

.research-assistant-item {
    flex: 0 1 220px; /* Approx 30% smaller than 320px, allows for ~4 across on wider screens */
    display: flex; /* To help center the button if needed, though button itself might be block */
    justify-content: center;
}

/* research-assistant-image-button is a more specific button class */
.research-assistant-image-button .image-outline-wrapper {
    /* Reuses .image-outline-wrapper for border */
    /* Size is controlled by max-width here */
    margin-bottom: 0; /* No caption below these */
    width: 100%;
    max-width: 200px; /* Approx 30% smaller than 300px for the image content area */
    position: relative; /* Added for positioning context for the overlay */
}

/* Ensure image within this specific section is also square and fills wrapper */
.research-assistant-image-button .image-outline-wrapper img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    display: block;
}

.image-caption-overlay {
    position: absolute;
    /* bottom: 8px; */ /* Increased further */
    bottom: 12px; 
    /* left: 8px; */   /* Increased further */
    left: 12px;   
    background-color: rgba(255, 255, 255, 0.9);
    color: #333; /* Dark text */
    padding: 2px 4px; /* Reduced padding for a tighter fit */
    font-size: 0.85em; /* Increased */
    border-radius: 2px; /* Slightly rounded corners */
    z-index: 1; /* Ensure it's above the image */
    line-height: 1.1; /* Tighten line height */
    max-width: calc(100% - 10px); /* Prevent overlay from spilling out if text is too long */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* display: inline; /* This would ignore padding and absolute positioning benefits */
    /* box-decoration-break: clone; /* For multi-line inline, not ideal here */
}

/* The .research-assistant-modal class is added to .team-member-modal in HTML */
/* It will inherit all styles from .team-member-modal. */
/* No specific styles needed for .research-assistant-modal unless overrides are required. */

/* Research Assistant Modals */
.research-assistant-modal {
    /* Inherits from .team-member-modal */
}

/* Media Page Specific Styles */
.media-page-main-content .page-container {
    padding-top: 20px;
    padding-bottom: 60px;
    max-width: 99.5%; /* MODIFIED: Almost full width */
    padding-left: 0.25%; /* MODIFIED: Minimal left padding */
    padding-right: 0.25%; /* MODIFIED: Minimal right padding */
}

.media-gallery-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.media-image-item {
    position: relative; 
    overflow: hidden; 
    border-radius: 8px;
}

.media-image-item.media-wide-item {
    grid-column: span 2; /* Spans 2 columns */
}

.media-image-item img {
    width: 100%;
    aspect-ratio: 460 / 413; /* Reduced height by 30%: 590 * 0.7 = 413 */
    object-fit: cover; 
    display: block; 
    transition: transform 0.6s ease-in-out, filter 0.6s ease-in-out;
}

.media-image-item.media-wide-item img {
    aspect-ratio: 940 / 413; /* Wider aspect ratio - same height reduction: 590 * 0.7 = 413 */
}

.media-image-item:hover img {
    transform: scale(1.1);
    filter: blur(10px) brightness(0.7);
}

.media-text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* background-color: rgba(0, 0, 0, 0.15); /* REMOVED */
    color: #FFFFFF; 
    padding: 25px 15px 15px 15px; /* MODIFIED: Reduced bottom padding */
    text-align: center;
    border-bottom-left-radius: 8px; 
    border-bottom-right-radius: 8px; 
    /* REMOVED mask-image property */
    /* REMOVED -webkit-mask-image property */
    transition: transform 0.6s ease-in-out; 
}

.media-text-overlay::before {
    content: '';
    position: absolute;
    bottom: -50px; /* MODIFIED: Extend below the image boundary */
    left: 0;
    right: 0;
    height: 200px; /* MODIFIED: Made taller to cover behind top of headline text */
    backdrop-filter: blur(10px); /* Back to blur now that z-index is correct */
    mask-image: linear-gradient(to top, black 60%, transparent 100%); /* REVERTED: Back to only top fade */
    -webkit-mask-image: linear-gradient(to top, black 60%, transparent 100%); /* REVERTED: Back to only top fade */
    z-index: 1; /* Between image and text */
    border-bottom-left-radius: 8px; 
    border-bottom-right-radius: 8px;
    opacity: 1; /* Visible by default */
    transition: opacity 0.6s ease-in-out;
}

.media-text-overlay::after {
    content: '';
    position: absolute;
    bottom: -50px; /* Extend below the image boundary */
    left: 0;
    right: 0;
    height: 200px; /* Same height as the blur pseudo-element */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%); /* Dark gradient background */
    z-index: 0; /* Behind the blur pseudo-element but above the image */
    border-bottom-left-radius: 8px; 
    border-bottom-right-radius: 8px;
    opacity: 1; /* Visible by default */
    transition: opacity 0.6s ease-in-out;
}

.media-image-item:hover .media-text-overlay::before {
    opacity: 0; /* Hide the localized blur on hover since whole image will be blurred */
}

.media-image-item:hover .media-text-overlay::after {
    opacity: 0; /* Hide the dark background on hover since whole image will be blurred */
}

.media-image-item:hover .media-text-overlay {
    transform: translateY(-45px); /* Move overlay up to make space for button */
}

.media-headline {
    font-size: 1.1em; /* Adjust as needed */
    font-weight: bold;
    margin: 0 0 5px 0; /* No top/LR margin, small bottom margin */
    line-height: 1.3;
    color: #FFFFFF; /* Explicitly set headline text to white */
    position: relative; /* ADDED: For z-index to work */
    z-index: 2; /* ADDED: Ensure headline is above the ::before pseudo-element */
}

.media-subtext {
    font-size: 0.85em; 
    color: #E0E0E0; 
    margin: 0 0 0 0; /* MODIFIED: Initially margin-bottom is 0 */
    line-height: 1.4;
    opacity: 0; /* Initially hidden */
    max-height: 0; /* ADDED: Initially takes no space */
    overflow: hidden; /* ADDED: For max-height animation */
    transform: translateY(20px); /* Initially lower */
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out, margin-bottom 0.6s ease-in-out, max-height 0.6s ease-in-out; /* MODIFIED: Added max-height to transition */
}

.media-read-button {
    display: inline-block; /* Remains, but position:absolute overrides some behavior */
    position: absolute; /* ADDED */
    bottom: 15px; /* ADDED: Final position from bottom of overlay */
    left: 50%; /* ADDED: For horizontal centering */
    padding: 10px 25px;
    background-color: #000000;
    color: #FFFFFF;
    border-radius: 50px; /* Capsule shape */
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    text-align: center;
    opacity: 0; /* Hidden initially */
    transform: translateX(-50%) translateY(30px); /* MODIFIED: Centered and starts further down */
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    cursor: pointer;
    z-index: 3; /* ADDED: Ensure button is above the blur pseudo-element */
}

.media-image-item:hover .media-read-button {
    opacity: 1; /* Fade in */
    transform: translateX(-50%) translateY(35px); /* MODIFIED: End position is 35px lower */
}

.media-read-button:hover {
    background-color: #FFFFFF;
    color: #000000;
}

.media-image-item:hover .media-subtext { /* Styles for subtext on hover */
    opacity: 1; /* Fade in */
    transform: translateY(0); /* Slide to final position */
    margin-bottom: 15px; /* Restore margin-bottom on hover */
    max-height: 5em; /* ADDED: Expand to fit content */
}

/* Podcast Page Specific Styles */
.podcast-page-main-content .page-container {
    padding-top: 20px; /* Adjusted from 40px to reduce space after main title */
    padding-bottom: 60px;
}

.podcast-entry-section {
    margin-bottom: 50px; /* Space below each podcast entry, before the next divider or footer */
    padding: 0 15px; /* Add some horizontal padding if container doesn't provide enough */
}

.podcast-entry-section:last-of-type {
    margin-bottom: 0; /* No bottom margin for the very last podcast entry */
}

.podcast-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically align title and buttons */
    margin-bottom: 15px; /* Space between header and description */
}

.podcast-entry-actions {
    display: flex;
    gap: 10px; /* Space between action buttons */
}

.podcast-entry-title {
    font-size: 2em; /* Increased font size */
    font-weight: bold;
    color: #000000;
    margin-bottom: 0; /* Margin now handled by podcast-entry-header */
    /* text-align: left; Will be left-aligned by flex default */
}

.podcast-entry-description {
    font-size: 1em;
    line-height: 1.7;
    color: #333333;
    margin-bottom: 25px;
    text-align: left;
}

.podcast-entry-embed-widget {
    margin-top: 20px; /* Space above the embed widget */
    /* Ensure iframe scales nicely */
}

.podcast-entry-embed-widget iframe {
    max-width: 100%; /* Ensure iframe is responsive */
    border-radius: 8px; /* Optional: match other rounded corners */
}

/* Contact Page Specific Styles */
.contact-page-main-content .page-container {
    padding-top: 40px; /* Space below header */
    padding-bottom: 60px;
}

.contact-form-container {
    max-width: none; /* Form uses full width of the container */
    margin: 0; /* No margins needed */
    padding: 0; /* No padding needed */
    /* background-color: #f9f9f9; */ /* Optional: light background for the form area */
    /* border-radius: 8px; */ /* Optional: rounded corners for the form area */
}

.contact-form-container p {
    margin-bottom: 25px;
    font-size: 1.05em;
    text-align: left;
}

#contact-form .form-group {
    margin-bottom: 20px;
}

#contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 0.9em;
    color: #333;
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea,
#contact-form select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: 'Cera Pro', sans-serif;
    font-size: 1em;
    line-height: 1.5;
    background-color: #fff;
}

#contact-form input[type="text"]:focus,
#contact-form input[type="email"]:focus,
#contact-form textarea:focus,
#contact-form select:focus {
    border-color: #D2C8BA; /* Highlight color similar to header/theme */
    outline: none;
    box-shadow: 0 0 0 2px rgba(210, 200, 186, 0.3);
}

#contact-form textarea {
    resize: vertical; /* Allow vertical resizing, disable horizontal */
}

/* New styles for single-column contact layout */
.contact-content-section {
    max-width: 900px; /* Increased width for better form spacing */
    margin: 0 auto 40px auto; /* Center and add bottom margin */
}

.contact-content-section p {
    margin-bottom: 30px; /* Space between intro text and form */
    font-size: 1.1em;
    line-height: 1.7;
    text-align: left;
}

/* Adjustments for the existing contact-form-container are now for when it's in contact-text-column, which is no longer the case. */
/* .contact-text-column .contact-form-container { ... } - This rule is no longer needed as form container is separate */

/* New styles for the standalone form section */
.contact-form-section {
    padding-top: 20px; /* ADJUSTED: Reduced space above the form */
    /* The animate-on-scroll class is already on the HTML element */
}

/* Re-apply styles to contact-form-container for when it's standalone */
.contact-form-section .contact-form-container {
    max-width: 100%; /* ADJUSTED: Form container spans full available width */
    margin: 0; /* ADJUSTED: Remove auto horizontal margins */
    padding: 0; /* ADJUSTED: Padding will be handled by parent or form elements directly */
    /* background-color: #f9f9f9; */ /* Optional: light background for the form area */
    /* border-radius: 8px; */ /* Optional: rounded corners for the form area */
}

/* Ensure the <p> tags within the new .contact-text-column are styled (if they lost styling) */
.contact-text-column p {
    margin-bottom: 1em; /* Default paragraph spacing */
    font-size: 1em; /* Adjust as needed */
    line-height: 1.7;
}
.contact-text-column p:last-child {
    margin-bottom: 0;
}

/* New styles for the contact form submit link */
.form-submit-group {
    margin-top: 10px; /* Add a little space above the submit link */
}

.contact-submit-link {
    display: inline-block; /* Similar to animated-underline-link */
    text-decoration: none;
    color: #000000; /* Black text */
    font-family: 'Cera Pro', sans-serif;
    font-size: 1.5em; /* ADJUSTED: To match CV link size */
    font-weight: normal; /* ADJUSTED: To match CV link weight */
    padding-bottom: 3px; /* Space for underline, from animated-underline-link */
    position: relative; /* For ::after pseudo-element, from animated-underline-link */
}

.contact-submit-link i.fas.fa-paper-plane {
    margin-left: 8px; /* Space between text and icon */
    font-size: 0.8em; /* ADJUSTED: Icon size relative to new text size */
}

/* Re-use animated-underline-link ::after styling, ensure it applies */
.contact-submit-link.animated-underline-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px; /* Underline thickness */
    bottom: 0; /* Position at the bottom of the padding */
    left: 0;
    background-color: #000000; /* Underline color */
    transition: width 0.3s ease-in-out;
}

.contact-submit-link.animated-underline-link:hover::after {
    width: 100%;
}

/* Styles for form rows */
#contact-form .form-row {
    display: flex;
    gap: 20px; /* Space between fields in a row */
    margin-bottom: 20px; /* Keep existing bottom margin for rows */
}

#contact-form .form-row .form-group {
    margin-bottom: 0; /* Remove bottom margin from individual groups in a row */
    flex-grow: 1; /* Allow groups to grow if needed, basis will control initial size */
}

#contact-form .form-group-name,
#contact-form .form-group-topic {
    flex-basis: 30%; /* 30% width for Name and Topic */
}

#contact-form .form-group-email,
#contact-form .form-group-subject {
    flex-basis: 70%; /* 70% width for Email and Subject */
}

/* ... potentially other styles ... */ 

/* New styles for two-column podcast layout & general section heading */
/* General section heading style - REMOVED as the heading was deleted */
/*
.section-heading {
    text-align: center;
    font-size: 2.2em;
    margin-bottom: 40px; 
    font-weight: bold;
}

.section-heading a.animated-underline-link {
    color: #000000; 
    font-size: 1em; 
}
*/

.podcast-columns-container {
    display: flex;
    justify-content: space-between;
    gap: 40px; /* Space between columns */
    margin-top: 30px; /* Space below the main "Podcasts" heading */
}

.podcast-column {
    flex: 1; /* Each column takes equal space */
    text-align: left; /* Align text within columns to the left */
    background-color: rgba(255, 255, 255, 0.5); /* Optional: slight background to distinguish columns if needed */
    padding: 20px;
    border-radius: 8px;
}

.podcast-column .podcast-title {
    font-size: 1.5em;
    margin-bottom: 15px;
    font-weight: bold;
    color: #000000; /* Ensure title text is black */
}

.podcast-column .podcast-description {
    font-size: 0.9em;
    line-height: 1.6;
    margin-bottom: 20px;
}

.podcast-column .podcast-embed-widget {
    margin-top: 20px;
}

/* About Page Mobile Responsive Styles */
@media (max-width: 768px) {
    .about-page-main-content {
        flex-direction: column; /* Stack columns vertically */
        align-items: stretch;
    }
    
    .about-image-column {
        width: 100%; /* Full width on mobile */
        height: 300px; /* Fixed height on mobile */
        position: relative; /* No sticky on mobile */
    }
    
    .about-image-column img {
        object-position: center top; /* Show face/top of image instead of center */
    }
    
    .about-text-column {
        width: 100%; /* Full width on mobile */
        height: auto; /* Auto height on mobile */
        overflow-y: visible; /* No scroll constraint on mobile */
        padding: 30px 20px; /* Reduce padding significantly */
        text-align: center; /* Center align all text on mobile */
    }
    
    .about-page-title {
        font-size: 2.2em; /* Smaller title on mobile */
        margin-top: 0; /* Remove top margin */
        margin-bottom: 0.8em;
        text-align: center; /* Center align title */
    }
    
    .about-text-column p {
        font-size: 0.95em; /* Slightly smaller text */
        line-height: 1.6;
        margin-bottom: 1.2em;
        text-align: center; /* Center align paragraphs */
    }
    
    .about-cv-link.highlight-item {
        padding: 20px 0 25px 0; /* Reduce padding */
        justify-content: center; /* Center the flex content horizontally */
        flex-direction: column; /* Stack icon above text on mobile */
        text-align: center; /* Center text within its container */
    }
    
    .about-cv-link.highlight-item .highlight-icon {
        margin-right: 0; /* Remove right margin */
        margin-bottom: 10px; /* Add space below icon */
    }
    
    .about-cv-link.highlight-item h3 a {
        text-decoration: underline; /* Add underline for better mobile UX */
        font-size: 1.3em; /* Slightly larger text for mobile */
    }
}

/* Additional Mobile Breakpoints */

/* Large phones (576px and down) */
@media (max-width: 576px) {
    /* Typography for very small screens */
    .hero-text-content h1 {
        font-size: 1.6em;
        line-height: 1.2;
    }
    
    .bio-intro-left h2 {
        font-size: 1.2em;
    }
    
    /* Ultra-compact container */
    .container {
        width: 98%;
        padding: 0 8px;
    }
    
    /* Publications carousel - minimal width */
    .publication-item {
        min-width: 220px;
        padding: 10px;
    }
    
    /* Footer grid single column */
    .footer-logo-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    /* Podcast columns smaller padding */
    .podcast-column {
        padding: 15px;
    }
    
    /* Smaller padding throughout */
    .bio-intro-section-expanded,
    .profile-highlights-section,
    .selected-publications-section,
    .podcast-section {
        padding: 40px 0;
    }
    
    /* Hero section - maintain no bottom padding to keep image touching bottom */
    .hero-section-hb {
        padding: 40px 0 0 0; /* Top padding but no bottom padding */
    }
}

/* Medium tablets (992px and down) */
@media (max-width: 992px) and (min-width: 769px) {
    .highlights-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .podcast-columns-container {
        gap: 35px;
    }
    
    .publication-item {
        min-width: 320px;
    }
}

@media (min-width: 768px) {
  /* Desktop/tablet: show carousel, hide mobile fallback */
  .media-carousel-container { display: block; }
  .media-mobile-fallback { display: none; }
}

/* ... existing code ... */
.media-read-button:hover {
    background-color: #FFFFFF;
    color: #000000;
}

.media-image-item:hover .media-subtext { /* Styles for subtext on hover */
    opacity: 1; /* Fade in */
    transform: translateY(0); /* Slide to final position */
    margin-bottom: 15px; /* Restore margin-bottom on hover */
    max-height: 5em; /* ADDED: Expand to fit content */
}

/* New Styles for Media Page v2 */
.media-page-v2 .featured-media-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.media-page-v2 .media-gallery-container {
    grid-template-columns: repeat(4, 1fr);
}

.media-page-v2 .media-image-item.media-wide-item {
    grid-column: span 1; /* Override wide item to be a single column */
}

.media-page-v2 .featured-media-container .media-image-item img {
    aspect-ratio: 460 / 320; /* Reduced height by ~30% */
}

/* Podcast Page Specific Styles */
.podcast-page-main-content .page-container {
    padding-top: 20px; /* Adjusted from 40px to reduce space after main title */
    padding-bottom: 60px;
}

/* ... existing code ... */
.media-page-v2 .featured-media-container .media-image-item img {
    aspect-ratio: 460 / 320; /* Reduced height by ~30% */
}

/* New Styles for Media Page v3 (Carousel) */
.media-page-v3 {
    overflow: hidden;
}

.media-carousel-container {
    padding: 20px 0;
    margin-top: 20px;
}

.media-carousel-row-v3 {
    display: flex;
    width: fit-content;
    margin-bottom: 20px;
}

.media-carousel-row-v3:hover {
    animation-play-state: paused;
}

.media-carousel-slide-v3 {
    display: flex;
    gap: 20px;
    padding-right: 20px;
}

.media-carousel-row-v3 .media-image-item {
    flex-shrink: 0;
    width: 300px;
    height: 220px; /* Set a fixed height for all items */
}

.media-carousel-row-v3 .media-item-wide-v3 {
    width: 450px; /* 1.5x the width of regular items */
}

.media-carousel-row-v3 .media-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.scroll-left {
    animation: scroll-left 40s linear infinite;
}

.scroll-right {
    animation: scroll-right 40s linear infinite;
}

@keyframes scroll-left {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes scroll-right {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

/* Podcast Page Specific Styles */
.podcast-page-main-content .page-container {
    padding-top: 20px; /* Adjusted from 40px to reduce space after main title */
    padding-bottom: 60px;
}

.media-page-v3 .media-item-wide-v3 {
    width: 450px;
}

/* About page CV link arrow: drop/replace animation */
.about-cv-link .highlight-icon {
    position: relative;
    width: 1em;
    height: 1em;
    overflow: hidden; /* Hide moving arrows outside the box */
}

/* Hide the original <i> so we can draw arrows with ::before/::after */
.about-cv-link .highlight-icon i {
    opacity: 0;
}

/* Cancel the generic spin on hover/scroll for this specific icon */
.about-cv-link:hover .highlight-icon,
.about-cv-link.is-visible .highlight-icon {
    transform: none !important;
    animation: none !important;
}

/* Build two stacked arrows that cycle on hover */
.about-cv-link .highlight-icon::before,
.about-cv-link .highlight-icon::after {
    content: "\f063"; /* Font Awesome down arrow */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; /* Solid */
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    color: currentColor;
    line-height: 1;
    transition: transform 0.5s ease, opacity 0.5s ease; /* play once and reverse */
}

/* Default positions: one visible, one staged above */
.about-cv-link .highlight-icon::before {
    top: 0; /* centered by translateX only, Y is 0 (visible) */
}

.about-cv-link .highlight-icon::after {
    top: 0;
    transform: translateX(-50%) translateY(-120%); /* above the box */
    opacity: 0;
}

/* On hover, move current arrow down and bring new one from above */
.about-cv-link:hover .highlight-icon::before {
    transform: translateX(-50%) translateY(120%);
    opacity: 0;
}

.about-cv-link:hover .highlight-icon::after {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Media hybrid: mobile fallback vs desktop carousel */
@media (max-width: 767px) {
  /* Hide carousel on mobile */
  .media-carousel-container { display: none; }
  /* Show static fallback on mobile */
  .media-mobile-fallback { display: block; }
  .media-mobile-fallback .media-image-item { margin-bottom: 20px; }
}

@media (min-width: 768px) {
  /* Desktop/tablet: show carousel, hide mobile fallback */
  .media-carousel-container { display: block; }
  .media-mobile-fallback { display: none; }
}

@media (min-width: 768px) {
  /* Align carousel side spacing with static section */
  .media-page-v3 .media-carousel-container {
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden; /* prevent rows from sliding under the gutters */
  }
}

@media (min-width: 768px) {
  /* Fixed, container-based fade with wider feather for softer edge */
  .media-page-v3 .media-carousel-container {
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden;
    background-color: #FFFFFF;
    --carousel-fade-width: 48px; /* was 24px; increase for gentler fade */
    -webkit-mask-image: linear-gradient(
      to right,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,1) var(--carousel-fade-width),
      rgba(0,0,0,1) calc(100% - var(--carousel-fade-width)),
      rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(
      to right,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,1) var(--carousel-fade-width),
      rgba(0,0,0,1) calc(100% - var(--carousel-fade-width)),
      rgba(0,0,0,0) 100%
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .media-page-v3 .media-carousel-row-v3 {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

.publication-actions .action-btn img {
    height: 22px;
    width: auto;
    transition: transform 0.3s ease;
}

.publication-actions .action-btn-wide {
    width: calc(50% - 5px); /* Two buttons wide with gap */
    text-align: center;
    background-color: #f0f0f0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    padding: 10px 0;
    border-radius: 5px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px; /* Match icon button height */
}


.publication-actions .action-btn:hover img {
    transform: scale(1.1);
}

.publication-actions .action-btn-wide:hover {
    background-color: #e0e0e0;
}


/* Specific styles for Books & Chapters */
.publication-entry.books-chapters .publication-content h4 {
    .publication-actions .action-btn {
        margin: 0 5px;
    }

    .publication-entry.other .publication-actions {
        padding-bottom: 0;
    }

    .publication-divider {
        display: block;
        height: 1px;
        margin: 15px 0;
        background-color: #f0f0f0 !important; /* Keep for visibility */
        flex-basis: 1px;
    }
}

.social-icon-img {
    width: 1.2rem; /* Match the size of the font icons */
    height: 1.2rem;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.footer-social-icons-right a:hover .fa-linkedin-in {
    color: #0B65C2;
}

.footer-social-icons-right a:hover .fa-orcid {
    color: #A6CE39;
}

.footer-social-icons-right a:hover .social-icon-img {
    filter: grayscale(0%);
}

.copyright {
    color: #666;
    font-size: 0.9rem;
}