/* Specific Styling for Publication Page */
.publication-page {
    font-family: 'Roboto', sans-serif; /* Change to your preferred font */
    background-color: #eaebea; /* Light gray background, change as needed */
    padding-top:50px !important;    
    
    
    padding-bottom: 0.1px;
    
}






/* --- Publications Section --- */
.publication-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 20px;
    justify-content: center;
    padding: 30px;
    max-width: calc(3 * 322px + 2 * 45px); /* Keeps grid centered and aligned */
    margin: 0 auto 50px !important; /* Added margin-bottom for spacing above footer */
    background-color: #fffff; /* Matches .publication-page background */
}

/* Apply to Publication page */
.publication-page .publication-container {
    margin-top: 150px; /* Top margin for spacing below header */
    margin-bottom: 200px; /* Bottom margin for spacing above footer */
}

.publication-box {
    width: 322px;
    height: 260px;
    background: linear-gradient(90deg, #7FCFE5, #2A7F9D);

    border-radius: 0px;
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
    overflow: visible;
}

.publication-box img {
    width: 100px;
    height: 100px;
    border-radius: 20%;
    border: 10px solid #eaebea;
    position: absolute;
    top: 200px;
    right: -11px;
    object-fit: cover;
    background-color: #FFFFFF;
}

/* Card Text Container */
.publication-text-container {
    flex-grow: 1; /* Allow the text container to fill available space */
    display: block; /* Use block layout to ensure no cutting */
    overflow: hidden; /* Prevent text from spilling */
    height: auto; /* Adjust height based on content */
}

.publication-text-container h4 {
    font-size: 1.0em;
    font-weight: bold;
    color: #c1121f;
    margin-bottom: 8px;
}

.publication-text-container h5 {
    font-size: 0.95em;
    font-weight: bold;
    color: black; /* Changed from white to black for visibility, adjust as needed */
    margin: 40px 0 10px 0; /* Increased top margin to move down, small bottom margin before h6 */
}

.publication-text-container h6 {
    font-size: 0.85em; /* Slightly smaller than h5 */
    font-weight: normal; /* Adjust as preferred */
    color: black; /* Changed from white to black for visibility, adjust as needed */
    margin: 0 0 10px 0; /* No top margin (sticks to h5), bottom margin before date */
}

.publication-text-container p {
    font-size: 0.95em;
    color: black;
    margin: 5px 0;
}

.publication-text-container p:last-of-type {
    margin-top: 35px; /* Adjust the value to your preference */
}

.publication-button-container {
    position: absolute; /* Fix the button container's position */
    bottom: 20px; /* Distance from the bottom of .publication-box */
    left: 20px; /* Distance from the left of .publication-box */
    display: flex;
    justify-content: flex-start;
    padding: 0;
}

.publication-pseudo-button {
    background: linear-gradient(90deg, #4A5FA3, #1B2A60);
    color: white;
    padding: 8px 12px; /* Reduced padding */
    font-size: 0.75em; /* Reduced font size */
    text-align: center;
    border-radius: 5px; /* Adjusted corner radius */
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}

.publication-pseudo-button:hover {
    background: linear-gradient(90deg, #d41c2e, #700c18);
}

/* Force removal of underline for all links and their children inside publication-box */
.publication-box a {
    text-decoration: none !important;
}

.publication-box a h4,
.publication-box a p,
.publication-box a p i,
.publication-box a .publication-pseudo-button {
    text-decoration: none !important;
}

/* Ensure hover state also has no underline */
.publication-box a:hover,
.publication-box a:hover h4,
.publication-box a:hover p,
.publication-box a:hover p i,
.publication-box a:hover .publication-pseudo-button {
    text-decoration: none !important;
}

/* Image Piercing Effect */


/* --- Links Styling --- */
a {
    text-decoration: none;
    color: inherit;
}

/* --- Responsive Design --- */
@media screen and (max-width: 768px) {
    .publication-container {
        grid-template-columns: 1fr; /* Stacks cards on smaller screens */
        gap: 20px;
        padding: 20px;
    }

    .publication-filter-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .publication-filter-container,
    .publication-search-container {
        width: 100%;
        justify-content: flex-start;
    }

    .publication-search-container {
        margin-top: 10px;
    }
}

/* Responsive Design for Tablets */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .publication-container {
        grid-template-columns: repeat(3, 1fr); /* Three in a row */
        gap: 25px;
        padding: 20px;
        margin: 0 auto 200px;
        max-width: 95%;
        box-sizing: border-box;
    }

    .people-box {
        width: 85%; /* Responsive width inside the grid */
        height: 300px; /* Slightly taller for breathing room */
    }
    .box-text-container h4 {
    font-size: 0.8em;
    font-weight: bold;
    color: black;
    margin-bottom: 8px;
    }
    

}