/* ===================================
   DESIGN SYSTEM - Variables
   =================================== */
@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@400;700&family=Jost:wght@500;700;800&family=Raleway:wght@100&family=IBM+Plex+Serif&display=swap');

:root {
    /* Colors - University Blue Theme */
    --color-primary: #0d47a1;
    --color-primary-dark: #002171;
    --color-primary-light: #5472d3;
    --color-accent: #1565c0;
    --color-accent-light: #1976d2;

    /* Neutrals */
    --color-white: #ffffff;
    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f5;

    /* Utilities */
    --text-justify: justify;
}

.text-justify {
    text-align: justify;
    text-justify: inter-word;
}

:root {
    /* Colors - University Blue Theme */
    --color-gray-200: #eeeeee;
    --color-gray-300: #e0e0e0;
    --color-gray-400: #bdbdbd;
    --color-gray-500: #9e9e9e;
    --color-gray-600: #757575;
    --color-gray-700: #616161;
    --color-gray-800: #424242;
    --color-gray-900: #212121;

    /* Text Colors */
    --text-primary: #1a1a2e;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --text-link: var(--color-primary);

    /* Background Colors */
    --bg-page: #f8fafc;
    --bg-card: var(--color-white);
    --bg-header: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Typography */
    --font-family: 'Adelle W01 Regular', 'Bitter', serif;
    --font-heading: 'Futura LT W01 Heavy', 'Jost', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    /* Spacing */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Container */
    --container-max: 1400px;
    --container-padding: var(--spacing-6);
}

/* ===================================
   RESET & BASE
   =================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-page);
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-light);
}

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

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

select,
input {
    font-family: inherit;
    font-size: var(--font-size-base);
}

/* ===================================
   LAYOUT
   =================================== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* ===================================
   TOP NAVIGATION
   =================================== */
.top-nav {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    padding: var(--spacing-1) 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
}

.top-nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.mobile-menu-toggle {
    display: block;
    font-size: 1.25rem;
    color: #00356b;
    padding: var(--spacing-2);
    cursor: pointer;
    border: none;
    background: transparent;
}

.top-nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-white);
    padding: var(--spacing-4);
    box-shadow: var(--shadow-md);
    z-index: 1000;
    border-top: 1px solid var(--color-gray-200);
}

.top-nav-links.active {
    display: flex;
}

.lang-switcher {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-left: auto;
}

.lang-btn {
    width: 2.25rem;
    height: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-gray-300);
    background: var(--color-white);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #00356b;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

.lang-btn:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.lang-btn.active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(13, 71, 161, 0.22);
}

#header-sort-toggle {
    background: var(--color-white);
    color: #00356b;
    border-color: var(--color-gray-300);
}

#header-sort-toggle.active {
    background: #9eb0cc;
    color: #00356b;
    border-color: #8fa4c6;
    box-shadow: var(--shadow-sm);
}

@media (min-width: 992px) {
    .mobile-menu-toggle {
        display: none;
    }

    .top-nav-links {
        display: flex;
        flex-direction: row;
        position: static;
        width: auto;
        box-shadow: none;
        padding: 0;
        border-top: none;
        background-color: transparent;
        justify-content: flex-start;
        /* Left aligned on desktop typically for this type of bar */
        gap: var(--spacing-6);
    }

    .lang-switcher {
        margin-left: var(--spacing-6);
    }
}

.top-nav-links a {
    color: #00356b;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    padding: var(--spacing-1) 0;
    position: relative;
    transition: color var(--transition-fast);
}

.top-nav-links a:hover {
    color: var(--color-primary);
}

.top-nav-links a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width 0.3s;
    position: absolute;
    bottom: 0;
    left: 0;
}

.top-nav-links a:hover::after {
    width: 100%;
}

/* ===================================
   HERO HEADER - SPECTACULAR DESIGN
   =================================== */
.hero {
    background-color: #00356b;
    color: var(--color-white);
    padding: var(--spacing-10) 0;
    /* Reduced from spacing-20 */
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Floating Particles/Orbs */
.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.hero-particle {
    position: absolute;
    border-radius: 50%;
    animation: float 20s infinite linear;
}



@keyframes float {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(30px, -50px) rotate(120deg);
    }

    66% {
        transform: translate(-20px, 20px) rotate(240deg);
    }

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

.hero .container {
    position: relative;
    z-index: 10;
}

.hero h1 {
    font-size: 4.5rem;
    font-weight: 800;
    margin-bottom: var(--spacing-6);
    letter-spacing: -0.04em;
    line-height: 1.1;
    background: linear-gradient(to right, #ffffff, #ffffff);
    -webkit-background-clip: text;
    background-clip: text;
    color: #ffffff;
    /*text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);*/
    animation: fadeInUp 1s ease-out forwards;
}

.hero .intro {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
    font-weight: 300;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    animation: fadeInUp 1s ease-out 0.2s forwards;
    opacity: 0;
}

.hero .intro-secondary {
    font-size: 1.1rem;
    margin-top: var(--spacing-3);
    max-width: 860px;
    color: rgba(255, 255, 255, 0.8);
    animation-delay: 0.3s;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* NEW Header Layout Styles */
.hero-content-wrapper {
    position: relative;
    z-index: 10;
}

.hero-visual {
    display: none;
    /* Hidden on mobile by default */
}

.hero canvas {
    display: block;
    width: 100%;
    height: 100%;
}

@media (min-width: 992px) {
    .hero {
        text-align: left;
        /* Left align on desktop */
        padding: 0;
        /* REMOVED padding so tree touches edges */
        height: 350px;
        /* Fixed height for consistent look */
        display: flex;
        align-items: center;
    }

    .hero .container {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .hero-content-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100%;
    }

    .hero-text {
        width: 58%;
        /* Increased from 45% */
        padding-right: var(--spacing-8);
        padding-bottom: 1.5rem;
        /* Only text has bottom padding if needed, though flex centers it */
    }

    .hero-visual {
        display: block;
        width: 40%;
        /* Adjusted to fit remaining space roughly */
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
    }

    .hero h1 {
        font-size: 3.5rem;
        /* Slightly smaller on split view to fit */
    }

    .hero .intro {
        margin: 0;
        /* Reset auto margin */
        font-size: 1.25rem;
    }

    /* Ensure canvas fills the visual container */
    #ptree-canvas {
        width: 100%;
        height: 100%;
    }
}

/* ===================================
   FILTERS SECTION
   =================================== */
.filters-section {
    background: var(--color-white);
    padding: var(--spacing-8) 0;
    border-bottom: 1px solid var(--color-gray-200);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.filters-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.2fr 1.8fr auto;
    gap: var(--spacing-3);
    align-items: end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.filter-group label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #00356b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-group select {
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-page);
    color: var(--text-primary);
    line-height: 1.5;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    padding-right: 30px;
    font-size: var(--font-size-sm);
    width: 100%;
}

.filter-group select:hover {
    border-color: var(--color-gray-400);
}

.filter-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.1);
}

.search-wrapper {
    position: relative;
}

.publication-search-group {
    min-width: 0;
}

.search-icon {
    position: absolute;
    left: var(--spacing-4);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--color-gray-500);
    pointer-events: none;
}

.search-wrapper input {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    padding-left: 40px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    font-size: var(--font-size-sm);
}

.search-wrapper input:hover {
    border-color: var(--color-gray-400);
}

.search-wrapper input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.1);
}

.search-wrapper input::placeholder {
    color: var(--color-gray-500);
}

.publication-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 320px;
    overflow-y: auto;
    z-index: 180;
    display: none;
}

.publication-suggestions.visible {
    display: block;
}

.publication-suggestion-item {
    display: block;
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    border: none;
    border-bottom: 1px solid var(--color-gray-200);
    background: var(--color-white);
    text-align: left;
    font-size: var(--font-size-sm);
    line-height: 1.35;
    color: var(--text-primary);
    white-space: normal;
    text-decoration: none;
    cursor: pointer;
}

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

.publication-suggestion-item:hover,
.publication-suggestion-item:focus {
    background: var(--color-gray-100);
    outline: none;
}

.clear-filters-btn {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    background-color: var(--bg-page);
    color: var(--text-primary);
    line-height: 1.5;
    font-size: var(--font-size-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.clear-filters-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.clear-filters-btn:hover {
    border-color: var(--color-gray-400);
    background-color: var(--color-gray-50);
}

.clear-filters-btn:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.1);
}

.clear-filters-btn:disabled {
    background-color: var(--color-gray-100);
    color: var(--color-gray-500);
    cursor: not-allowed;
}

/* ===================================
   ALPHABET NAVIGATION
   =================================== */
.alphabet-nav {
    background: var(--color-white);
    padding: var(--spacing-4) 0;
    border-bottom: 1px solid var(--color-gray-200);
}

.alphabet-letters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-1);
}

.alphabet-letters button {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.alphabet-letters button:hover:not(:disabled) {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.alphabet-letters button.active {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.alphabet-letters button:disabled {
    color: var(--color-gray-400);
    cursor: default;
}

/* ===================================
   ACTIVE GROUP NAME
   =================================== */
.active-group-section {
    background: var(--color-white);
    padding: var(--spacing-4) 0;
    border-bottom: 1px solid var(--color-gray-200);
    display: none;
}

.active-group-section.visible {
    display: block;
}

.active-group-name {
    font-family: var(--font-heading);
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
}

/* ===================================
   FACULTY SECTION
   =================================== */
.faculty-section {
    padding: var(--spacing-10) 0 var(--spacing-16);
}

.results-info {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: var(--spacing-6);
}

.results-info span {
    font-weight: 600;
    color: var(--text-primary);
}

/* ===================================
   FACULTY GRID
   =================================== */
.faculty-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-6);
}

/* Letter Group Headers */
.letter-group {
    grid-column: 1 / -1;
    padding-top: var(--spacing-8);
}

.letter-group:first-child {
    padding-top: 0;
}

.letter-heading {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
    padding-bottom: var(--spacing-3);
    border-bottom: 3px solid var(--color-primary);
    margin-bottom: var(--spacing-6);
}

/* Faculty Card */
.faculty-card {
    background: var(--bg-card);
    border-radius: 0;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    cursor: pointer;
}

.faculty-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.faculty-card-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.faculty-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.faculty-card:hover .faculty-photo img {
    transform: scale(1.05);
}

.faculty-photo {
    aspect-ratio: 1;
    overflow: hidden;
    background-color: var(--color-gray-200);
    position: relative;
}

.faculty-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.faculty-photo .placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-gray-200) 0%, var(--color-gray-300) 100%);
}

.faculty-photo .placeholder svg {
    width: 40%;
    height: 40%;
    color: var(--color-gray-400);
}

.faculty-info {
    padding: var(--spacing-4);
}

.faculty-name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-1);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}



.faculty-position {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ===================================
   NO RESULTS
   =================================== */
.no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-16) 0;
    color: var(--text-muted);
}

.no-results svg {
    width: 80px;
    height: 80px;
    margin-bottom: var(--spacing-4);
    opacity: 0.5;
}

.no-results p {
    font-size: var(--font-size-lg);
}

/* ===================================
   PROFILE MODAL - ACADEMIC STYLE
   =================================== */
.profile-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    /* Flex when open */
    justify-content: center;
    align-items: flex-start;
    /* Align to top to allow scroll */
    padding: 0;
    /* Full screen, no padding */
    overflow-y: auto;
    opacity: 0;
    transition: opacity var(--transition-base);
    background: var(--color-white);
    /* White background for full screen */
}

.profile-page-nav {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
}

.profile-page-back {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4) 0;
    font-weight: 600;
}

.profile-page-back:hover {
    color: var(--color-primary-dark);
}

.profile-page-container {
    animation: none;
    min-height: auto;
}

.profile-modal.open {
    display: block;
    /* Changed from flex to block to allow normal flow */
    opacity: 1;
}

.profile-backdrop {
    position: fixed;
    inset: 0;
    /*   background: rgba(10, 25, 47, 0.85);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px); */
    z-index: -1;
    animation: fadeIn 0.3s ease-out;
}

.profile-container {
    background: var(--color-white);
    width: 100%;
    max-width: 100%;
    /* Full Width */
    min-height: 100vh;
    /* Full Height */
    margin: 0;
    border-radius: 0;
    /* No corners */
    box-shadow: none;
    /* No shadow needed */
    position: relative;
    overflow: visible;
    animation: slideUp 0.4s ease-out;
}

/* New Profile Layout */

.profile-header-full {
    width: 100%;
    background-color: #00356b;
    padding: 0;
    /* Remove padding to allow image to touch edges */
    color: var(--color-white);
    position: relative;
    /* No overlay as requested */
}

.profile-header-content {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    margin: 0 auto;
    display: flex;
    gap: 0;
    /* Gap handled by padding in info */
    align-items: stretch;
    /* Full height */
    min-height: 400px;
}

.profile-header-photo {
    width: 400px;
    height: 400px;
    /* Enforce square */
    flex-shrink: 0;
    background: var(--color-white);
    /* No box shadow or border radius */
}

.profile-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-200);
    color: var(--color-gray-400);
}

.profile-header-info {
    flex: 1;
    padding-top: 50px;
    /* Requested padding */
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
    padding-bottom: var(--spacing-8);
}

.profile-name {
    font-family: 'Adelle W01 Regular', 'Bitter', serif;
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-white);
    /* White text for header */
    margin-bottom: var(--spacing-6);
    line-height: 1.1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    /* Subtle shadow for readability without overlay */
}

.profile-role {
    font-family: 'Futura LT W01 Heavy', 'Jost', sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--spacing-16);
    font-weight: 700;
}

.profile-affiliations {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.profile-affiliations .affiliation-item {
    font-family: 'Futura LT W01 Heavy', 'Jost', sans-serif;
    font-size: 1rem;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    /* Requirement: not bold (or less bold), trying 500 or 400 if available, but Futura LT W01 Heavy might be inherently bold. User said "Futura LT W01 nagybetűs, de nem kivastagított". If the font family is "Heavy", it is bold. Maybe I should use a different specific font or weight if possible, or just reset weight. */
    /* Adjusting to less bold */
    font-weight: 400;

    /* Remove chip styles */
    background: none;
    padding: 0;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    display: block;
    margin-bottom: 0;
}

.profile-affiliations .affiliation-item a {
    color: var(--color-white);
    text-decoration: none;
    transition: opacity var(--transition-fast);
    /* Remove chip styles from link */
    background: none;
    padding: 0;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    display: inline;
}

.profile-affiliations .affiliation-item a:hover {
    opacity: 0.8;
    background: none;
    transform: none;
    border-color: transparent;
}

.profile-body-grid {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    /* 360px sidebar + 40px gap = 400px total, matching the header image width */
    grid-template-columns: 360px 1fr;
    gap: var(--spacing-10);
    padding: var(--spacing-10) var(--spacing-8);
}

.profile-sidebar-simple {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

/* New Profile Layout - Info Bar */
.profile-info-bar-wrapper {
    background-color: #fafafa;
    border-bottom: 1px solid var(--color-gray-200);
    width: 100%;
}

.profile-info-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-8);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--spacing-8);
}

.info-column h3 {
    font-family: 'Futura LT W01 Heavy', 'Jost', sans-serif;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin-bottom: var(--spacing-4);
    font-weight: 700;
}

.info-column .contact-row {
    margin-bottom: var(--spacing-2);
}

.cv-download-divider {
    height: 1px;
    background-color: var(--color-gray-200);
    margin-top: var(--spacing-12);
    margin-bottom: var(--spacing-3);
}

.cv-pdf-button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 0;
    border: none;
    background: transparent;
    color: #0d47a1;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color var(--transition-fast), opacity var(--transition-fast);
    text-align: left;
}

.cv-pdf-button i {
    color: #0d47a1;
    font-size: 1.05rem;
}

.cv-pdf-button:hover {
    color: var(--color-primary-dark);
    opacity: 0.9;
}

.cv-pdf-button:disabled {
    color: var(--color-gray-400);
    cursor: not-allowed;
    opacity: 0.7;
}

.cv-pdf-button:disabled i {
    color: var(--color-gray-400);
}

.profile-body-grid-new {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--spacing-10) var(--spacing-8);
}

/* Profile Sections - Label-Content Grid */
.profile-section {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-8);
    padding-bottom: var(--spacing-8);
    border-bottom: 1px solid var(--color-gray-200);
}

.profile-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.profile-section h3 {
    margin-bottom: 0;
    font-size: 1.125rem;
    color: #00356b;
    /* Ensure it aligns well */
    line-height: 1.6;
}

.profile-section-content {
    font-size: 1rem;
    color: var(--text-primary);
}

/* Close Button */
/* Close Button - Enhanced Prominence */
.profile-close {
    position: fixed;
    /* Fixed to viewport */
    top: var(--spacing-6);
    right: var(--spacing-6);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    /* Prominent Blue */
    color: var(--color-white);
    border-radius: var(--radius-full);
    border: 2px solid var(--color-white);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    z-index: 1100;
    /* Above everything */
    transition: all var(--transition-base);
}

.profile-close:hover {
    background: var(--color-primary-dark);
    transform: scale(1.1) rotate(90deg);
    box-shadow: var(--shadow-xl);
}

.profile-close svg {
    width: 28px;
    height: 28px;
    color: currentColor;
    stroke-width: 2.5;
}

.profile-lang-switcher {
    position: fixed;
    top: var(--spacing-6);
    right: calc(var(--spacing-6) + 72px);
    z-index: 1100;
}

.profile-lang-switcher .lang-btn {
    box-shadow: 0 6px 16px rgba(0, 33, 113, 0.25);
}

/* Faculty Name Arrow Animation */
.faculty-name .arrow {
    color: var(--color-primary);
    flex-shrink: 0;
    transition: transform var(--transition-base);
}

.faculty-card:hover .faculty-name .arrow {
    transform: translateX(4px) rotate(45deg);
    /* Points right (clockwise rotation) */
}

.profile-contact-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.contact-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.contact-row svg {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.contact-row .ai {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.contact-row a {
    color: var(--text-primary);
    font-weight: 500;
}

.contact-row a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.profile-website-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    width: 100%;
    padding: var(--spacing-3);
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.profile-website-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.academic-links h3 {
    font-family: 'Futura LT W01 Heavy', 'Jost', sans-serif;
    font-size: 0.75rem;
    /* Small & Heavy */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-3);
    font-weight: 800;
}

.academic-link {
    font-family: 'Adelle W01 Regular', 'Bitter', serif;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-gray-200);
    transition: color var(--transition-fast);
}

.academic-link svg {
    width: 16px;
    /* Smaller icons */
    height: 16px;
}

.academic-link:last-child {
    border-bottom: none;
}

.academic-link:hover {
    color: var(--color-primary);
}



/* Content Sections */
.profile-section {
    margin-bottom: var(--spacing-8);
}

.profile-section h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-2);
    /*border-bottom: 2px solid var(--color-gray-100);*/
    display: inline-block;
}

.profile-section-content {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    line-height: 1.8;
}

.profile-section-content p {
    margin-bottom: var(--spacing-4);
}

.profile-section-content ul {
    list-style: none;
    padding-left: 0;
}

.profile-section-content ul li {
    position: relative;
    padding-left: var(--spacing-5);
    margin-bottom: var(--spacing-2);
}

.profile-section-content ul li::before {
    content: "•";
    color: var(--color-primary);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Animations */
@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Publication Chips - Colorful with Gradients */
.publication-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.pub-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-base);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: none;
}

.pub-chip:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.pub-chip svg {
    width: 18px;
    height: 18px;
}

/* Google Scholar - Blue-Purple Gradient */
.pub-chip.google-scholar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #6B73FF 100%);
    color: var(--color-white);
}

.pub-chip.google-scholar:hover {
    background: linear-gradient(135deg, #7c8ff0 0%, #8a5fb3 50%, #8087FF 100%);
    color: var(--color-white);
}

/* ORCID - Green */
.pub-chip.orcid {
    background: linear-gradient(135deg, #a5d610 0%, #6cc24a 50%, #7cb928 100%);
    color: #1a4000;
}

.pub-chip.orcid:hover {
    background: linear-gradient(135deg, #b8e625 0%, #7dd35a 50%, #8dca39 100%);
    color: #1a4000;
}

/* MTMT - Orange/Red (from logo colors) */
.pub-chip.mtmt {
    background: linear-gradient(135deg, #ff6b35 0%, #e63946 50%, #ff8c42 100%);
    color: var(--color-white);
}

.pub-chip.mtmt:hover {
    background: linear-gradient(135deg, #ff7f4d 0%, #e94f5c 50%, #ff9d56 100%);
    color: var(--color-white);
}

/* Profile Sections - Glassmorphism Cards */
/* Profile Sections - Old styles removed */

.profile-section:last-child {
    border-bottom: none;
    margin-bottom: var(--spacing-10);
}

/* Old h3 style removed */

/* Section Content - Fix Text Color */
.profile-section-content {
    font-family: 'Adelle W01 Regular', 'Bitter', serif;
    font-size: 1.125rem;
    /* Larger readable body text */
    color: var(--color-gray-800);
    line-height: 1.7;
    font-weight: 400;
}

.profile-section-content a {
    color: var(--text-link);
    /* Standard link color */
    text-decoration: underline;
    text-underline-offset: 3px;
}

.profile-section-content a:hover {
    color: var(--color-primary-dark);
}

.profile-section-content ul li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    /* Blue bullets */
}

/* Scrollbar Styling for Profile Modal */
.profile-modal::-webkit-scrollbar {
    width: 8px;
}

.profile-modal::-webkit-scrollbar-track {
    background: var(--color-gray-100);
}

.profile-modal::-webkit-scrollbar-thumb {
    background: var(--color-gray-400);
    border-radius: var(--radius-full);
}

.profile-modal::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-500);
}

/* ===================================
   LOADING STATE
   =================================== */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-page);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    transition: opacity var(--transition-base);
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-gray-300);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: spin 1s linear infinite;
    margin-bottom: var(--spacing-4);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-overlay p {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */
@media (max-width: 1200px) {
    .faculty-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .filters-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-4);
    }

    .filter-group.search-group,
    .filter-group.publication-search-group,
    .filter-group.clear-group {
        grid-column: 1 / -1;
    }
}

@media (max-width: 992px) {
    .faculty-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .filters-grid {
        grid-template-columns: 1fr 1fr;
    }

    .filter-group.search-group,
    .filter-group.publication-search-group,
    .filter-group.clear-group {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    :root {
        --container-padding: var(--spacing-4);
    }

    .hero {
        padding: var(--spacing-12) 0;
    }

    .hero h1 {
        font-size: 2rem;
        margin-bottom: var(--spacing-4);
    }

    .hero .intro {
        font-size: var(--font-size-base);
        padding: 0 var(--spacing-4);
    }

    /* Reduce particle intensity on mobile for performance */
    .hero-particles {
        opacity: 0.5;
    }

    .faculty-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-4);
    }

    .filters-grid {
        grid-template-columns: 1fr;
    }

    /* Profile Modal Mobile */
    .profile-modal {
        padding: 0;
        align-items: flex-start;
    }

    .profile-container {
        border-radius: 0;
        min-height: 100vh;
        width: 100%;
    }

    .profile-grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .profile-sidebar {
        padding: var(--spacing-6);
        border-right: none;
        border-bottom: 1px solid var(--color-gray-200);
        gap: var(--spacing-6);
    }

    .profile-photo-container {
        width: 180px;
        margin: 0 auto;
    }

    .profile-close {
        top: var(--spacing-2);
        right: var(--spacing-2);
        background: var(--color-white);
        box-shadow: var(--shadow-sm);
        width: 44px;
        height: 44px;
    }

    .profile-main {
        padding: var(--spacing-6);
    }

    .profile-name {
        font-size: 2rem;
    }

    .profile-section {
        margin: 0 var(--spacing-4) var(--spacing-4);
        padding: var(--spacing-4) var(--spacing-5);
    }

    .publication-chips {
        justify-content: center;
    }

    .alphabet-letters button {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-xs);
    }

    .active-group-name {
        font-size: var(--font-size-xl);
        letter-spacing: 0.06em;
    }
}

@media (max-width: 480px) {
    .faculty-grid {
        grid-template-columns: 1fr;
    }

    .faculty-card-link {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-3);
    }

    .faculty-photo {
        width: 100px;
        flex: 0 0 100px;
        aspect-ratio: 1;
    }

    .faculty-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: var(--spacing-3) var(--spacing-4);
    }

    .profile-photo {
        width: 160px;
        height: 160px;
    }

    .profile-name {
        font-size: var(--font-size-xl);
    }
}

/* ===================================
   SCROLLBAR STYLING
   =================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--color-gray-400);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-500);
}

/* ===================================
   MOBILE OPTIMIZATIONS
   =================================== */
@media (max-width: 900px) {

    /* 1. Disable Sticky Filters */
    .filters-section {
        position: static;
        padding: var(--spacing-4) 0;
    }

    .filters-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }

    .filter-group select,
    .search-wrapper input,
    .clear-filters-btn {
        font-size: 16px;
        /* Prevent iOS zoom */
    }

    /* Profile View Adjustments */
    .profile-header-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
        min-height: auto;
    }

    .profile-header-photo {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        max-width: 400px;
    }

    .profile-header-info {
        padding: var(--spacing-6);
    }

    .profile-body-grid {
        grid-template-columns: 1fr;
        padding: var(--spacing-4);
        display: flex;
        flex-direction: column;
    }

    .profile-sidebar-simple {
        order: -1;
        /* Ensure sidebar (contacts) is above content */
        margin-bottom: var(--spacing-6);
        border-bottom: 1px solid var(--color-gray-200);
        padding-bottom: var(--spacing-6);
    }

    .profile-content-main {
        /* Wider text block */
        padding: 0;
    }

    /* Fix Close Button Visibility on Mobile */
    .profile-close {
        background: var(--color-white);
        color: var(--color-primary);
        /* Dark icon on white bg */
        box-shadow: var(--shadow-md);
        top: var(--spacing-4);
        right: var(--spacing-4);
    }

    .profile-lang-switcher {
        top: var(--spacing-4);
        right: calc(var(--spacing-4) + 72px);
    }

    .profile-close:hover {
        background: var(--color-gray-100);
        color: var(--color-primary-dark);
    }

    /* Widen profile sections on mobile */
    .profile-section {
        margin: 0 0 var(--spacing-6) 0;
        padding-bottom: var(--spacing-6);
    }

    /* Mobile Text Alignment - Left Align */
    .text-justify,
    .profile-section-content.text-justify {
        text-align: left !important;
    }

    /* Mobile News Padding */
    .profile-news-section .container {
        padding: 0 var(--spacing-4) !important;
    }

    /* New Profile Layout Mobile */
    .profile-info-bar {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
        padding: var(--spacing-6) var(--spacing-4);
    }

    .profile-section {
        grid-template-columns: 1fr;
        gap: var(--spacing-2);
    }

    .profile-section h3 {
        margin-bottom: var(--spacing-2);
        font-size: 1rem;
    }
}

@media (max-width: 520px) {
    .profile-lang-switcher {
        right: auto;
        left: var(--spacing-4);
    }
}

/* ===================================
   NEWS SECTION
   =================================== */
.profile-news-section {
    background: var(--color-gray-50);
    padding: var(--spacing-12) 0;
    border-top: 1px solid var(--color-gray-200);
}

.profile-news-section h3 {
    margin-bottom: var(--spacing-8);
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    font-weight: 700;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-6);
}

.news-card {
    background: var(--color-white);
    border-radius: 0;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    height: 100%;
    border: 1px solid var(--color-gray-200);
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-primary-light);
}

.news-image {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--color-gray-200);
    position: relative;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

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

.news-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
    font-size: 2rem;
}

.news-content {
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.news-domain {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-2);
    font-weight: 600;
}

.news-title {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.4;
    font-family: var(--font-heading);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card:hover .news-title {
    color: var(--color-primary);
}

@media (max-width: 900px) {

    /* Profile View Adjustments */
    .profile-header-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
        min-height: auto;
    }

    .profile-header-photo {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        max-width: 400px;
    }

    .profile-header-info {
        padding: var(--spacing-6);
    }

    .profile-body-grid {
        grid-template-columns: 1fr;
        padding: var(--spacing-4);
        display: flex;
        flex-direction: column;
    }

    .profile-sidebar-simple {
        order: -1;
        /* Ensure sidebar (contacts) is above content */
        margin-bottom: var(--spacing-6);
        border-bottom: 1px solid var(--color-gray-200);
        padding-bottom: var(--spacing-6);
    }

    .profile-content-main {
        /* Wider text block */
        padding: 0;
    }

    /* Fix Close Button Visibility on Mobile */
    .profile-close {
        background: var(--color-white);
        color: var(--color-primary);
        /* Dark icon on white bg */
        box-shadow: var(--shadow-md);
        top: var(--spacing-4);
        right: var(--spacing-4);
    }

    .profile-close:hover {
        background: var(--color-gray-100);
        color: var(--color-primary-dark);
    }

    /* Widen profile sections on mobile */
    .profile-section {
        margin: 0 0 var(--spacing-6) 0;
        padding-bottom: var(--spacing-6);
    }

    /* Mobile Text Alignment - Left Align */
    .text-justify,
    .profile-section-content.text-justify {
        text-align: left !important;
    }

    /* Mobile News Padding */
    .profile-news-section .container {
        padding: 0 var(--spacing-4) !important;
    }

    /* New Profile Layout Mobile */
    .profile-info-bar {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
        padding: var(--spacing-6) var(--spacing-4);
    }

    .profile-section {
        grid-template-columns: 1fr;
        gap: var(--spacing-2);
    }

    .profile-section h3 {
        margin-bottom: var(--spacing-2);
        font-size: 1rem;
    }
}

/* ===================================
   NEWS SECTION
   =================================== */
.profile-news-section {
    background: var(--color-gray-50);
    padding: var(--spacing-12) 0;
    border-top: 1px solid var(--color-gray-200);
}

.profile-news-section h3 {
    margin-bottom: var(--spacing-8);
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    font-weight: 700;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-6);
}

.news-card {
    background: var(--color-white);
    border-radius: 0;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    height: 100%;
    border: 1px solid var(--color-gray-200);
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-primary-light);
}

.news-image {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--color-gray-200);
    position: relative;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

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

.news-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
    font-size: 2rem;
}

.news-content {
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.news-domain {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-2);
    font-weight: 600;
}

.news-title {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.4;
    font-family: var(--font-heading);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card:hover .news-title {
    color: var(--color-primary);
}

@media (max-width: 900px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
}

/* Year List Grid Layout */
.year-list-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    column-gap: var(--spacing-6);
    row-gap: var(--spacing-2);
    align-items: baseline;
}

.year-item-year {
    font-weight: 700;
    color: black;
    white-space: nowrap;
    text-align: right;
}

.year-item-content {
    color: var(--text-primary);
}

/* Align regular text with year-list content column */
.profile-section-content.no-year-list {
    padding-left: calc(120px + var(--spacing-6));
}

@media (max-width: 600px) {
    .year-list-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-1);
    }

    .year-item-year {
        text-align: left;
        margin-top: var(--spacing-3);
    }

    .year-item-year:first-child {
        margin-top: 0;
    }

    /* Reset indentation on mobile */
    .profile-section-content.no-year-list {
        padding-left: 0;
    }
}

/* ===================================
   FOOTER
   =================================== */
.site-footer {
    background-color: #1c3864;
    color: var(--color-white);
    padding: var(--spacing-10) 0 var(--spacing-4);
    font-size: var(--font-size-sm);
    position: relative;
    z-index: 10;
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-8);
}

@media (min-width: 992px) {
    .footer-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        /* Stretch to ensure borders are equal height */
        text-align: left;
        gap: 0;
    }

    .footer-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--spacing-6);
        border-right: 1px solid rgba(255, 255, 255, 0.3);
        padding-right: var(--spacing-8);
        padding-left: 0;
        align-items: flex-end;
        text-align: right;
    }

    .footer-center {
        flex: 0 0 340px;
        /* Adequate width for the central logo */
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 var(--spacing-6);
    }

    .footer-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--spacing-6);
        border-left: 1px solid rgba(255, 255, 255, 0.3);
        padding-left: var(--spacing-8);
        align-items: flex-start;
        text-align: left;
    }

    /* Flip icon and text for right alignment in left column */
    .footer-left .footer-icon-title {
        flex-direction: row-reverse;
    }
}

/* Footer Blocks */
.footer-block h3,
.social-title {
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    /* Slightly bolder than 100 for better readability */
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: var(--spacing-2);
}

.footer-icon-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-1);
}

.footer-icon-title i {
    color: #fceda3;
    /* Gold/Yellowish color */
    font-size: 1.5rem;
    width: 24px;
    text-align: center;
}

.footer-block p,
.footer-block a,
.footer-bottom p {
    font-family: 'IBM Plex Serif', serif;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.5;
    color: var(--color-white);
}

.footer-block a {
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.footer-block a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* Specific adjustment for headers */
.footer-block h3 {
    display: inline-block;
}

/* Logo Sizes */
.footer-logo-main {
    max-height: 160px;
    width: auto;
    display: block;
    transition: transform var(--transition-base);
}

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

.footer-logo-sub {
    height: 70px;
    width: auto;
    display: block;
    margin-bottom: var(--spacing-2);
}

.logo-block {
    margin-bottom: var(--spacing-2);
}

/* Social Section */
.social-title {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--spacing-3);
    font-weight: 600;
}

.social-links {
    display: flex;
    gap: var(--spacing-3);
}

.social-links a {
    color: var(--color-white);
    font-size: 1.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.social-links a:hover {
    background-color: var(--color-white);
    color: #1c3864;
    transform: translateY(-3px);
    text-decoration: none;
}

/* Footer Bottom */
.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.6);
}

/* Back to Top - Optional implementation if needed */
.back-to-top {
    position: absolute;
    right: var(--spacing-4);
    bottom: var(--spacing-4);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.back-to-top:hover {
    color: var(--color-white);
}

/* Mobile Tweaks */
@media (max-width: 991px) {

    .footer-left,
    .footer-center,
    .footer-right {
        text-align: center;
        align-items: center;
    }

    .footer-left {
        border-right: none;
        padding-right: 0;
        order: 2;
        /* Put contact info below logo on mobile? Or keep standard order? Standard is fine. */
        order: 1;
    }

    .footer-center {
        order: 0;
        /* Logo first on mobile? Usually nice. Let's keep DOM order: Left, Center, Right. Left=1, Center=2, Right=3. */
        order: 2;
        margin-top: var(--spacing-6);
        margin-bottom: var(--spacing-6);
    }

    .footer-right {
        order: 3;
        border-left: none;
        padding-left: 0;
    }

    .footer-icon-title {
        justify-content: center;
        flex-direction: row !important;
        /* Reset row-reverse */
    }

    .footer-logo-main {
        max-height: 120px;
    }
}