/* team page styles (extracted from inline <style>, tokenized for theming) */
/* Special Project Students Mobile Styles */
        @media (max-width: 768px) {
            .team-grid {
                grid-template-columns: 1fr !important;
                gap: 1.5rem !important;
            }
            .team-member {
                margin: 0 auto;
                max-width: 320px;
            }
            .member-image {
                height: 180px !important;
            }
            .member-info {
                padding: 1rem !important;
            }
            .member-info h3 {
                font-size: 1.1rem !important;
            }
            .member-info p {
                font-size: 0.9rem !important;
                margin: 0.25rem 0 !important;
            }
        }

        .team-hero {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
            url('https://images.unsplash.com/photo-1532094349884-543bc11b234d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            color: white;
            text-align: center;
            padding: 8rem 2rem;
            margin-bottom: 3rem;
        }

        .member-detail {
            display: flex;
            flex-direction: column;
            background: var(--surface);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 2rem;
        }

        .member-header {
            display: flex;
            flex-direction: column;
            padding: 2rem;
            background: var(--primary-color);
            color: white;
        }

        .member-image-large {
            width: 200px;
            height: 250px;
            border-radius: 4px;
            margin: 0 auto 1.5rem;
            object-fit: cover;
            border: 3px solid white;
        }

        .member-info {
            text-align: center;
        }

        .member-info h2 {
            margin: 0 0 0.5rem 0;
            color: white;
        }

        .member-position {
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
            opacity: 0.9;
        }

        .member-email {
            display: inline-block;
            margin-top: 0.5rem;
            color: white !important; /* Force white color for email */
            text-decoration: none;
            transition: opacity 0.3s;
        }

        .member-email:hover {
            opacity: 0.8;
            text-decoration: underline;
        }

        .member-email i {
            margin-right: 0.5rem;
        }

        /* Academic Profiles */
        .academic-profiles {
            display: flex;
            gap: 1rem;
            margin: 1rem 0;
            flex-wrap: wrap;
        }

        .academic-profiles a {
            color: var(--text-2);
            font-size: 1.5rem;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--surface-2);
            text-decoration: none;
        }

        .academic-profiles a:hover {
            color: var(--heading);
            background-color: var(--border);
            transform: translateY(-2px);
        }

        /* Academicons specific styles */
        .academic-profiles .ai {
            font-size: 1.2rem;
        }

        /* Affiliations */
        .affiliations {
            margin-top: 1rem;
            width: 100%;
        }

        .affiliations h4 {
            margin: 1rem 0 0.5rem 0;
            color: white;
            font-size: 0.95rem;
            font-weight: 500;
        }

        .affiliation-links {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .affiliation-links a {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
            border-radius: 4px;
            font-size: 0.85rem;
            text-decoration: none;
            transition: all 0.2s ease;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .affiliation-links a:hover {
            background-color: rgba(255, 255, 255, 0.2);
            transform: translateY(-1px);
        }

        @media (max-width: 768px) {
            .affiliation-links {
                justify-content: center;
            }

            .affiliation-links a {
                font-size: 0.8rem;
                padding: 0.2rem 0.6rem;
            }
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .academic-profiles {
                gap: 0.75rem;
                justify-content: center; /* Center the icons */
                width: 100%; /* Ensure full width */
                margin: 1rem auto; /* Center the container */
            }

            .academic-profiles a {
                font-size: 1.3rem;
                width: 32px;
                height: 32px;
                margin: 0 0.25rem; /* Add small horizontal margin */
            }

            .member-info {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                width: 100%;
            }

            .member-email {
                margin: 0.5rem 0;
            }
        }

        .member-content {
            padding: 2rem;
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .research-areas {
            background: var(--surface-2);
            padding: 1.5rem;
            border-radius: 6px;
        }

        .research-areas h3 {
            margin-top: 0;
            color: var(--heading);
            border-bottom: 2px solid var(--secondary-color);
            display: inline-block;
            padding-bottom: 0.25rem;
            margin-bottom: 1rem;
        }

        .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }

        .tag {
            background: var(--secondary-color);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
        }

        .alumni-section {
            margin-top: 4rem;
            padding-top: 2rem;
            border-top: 1px solid var(--border);
        }

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

        .alumni-card {
            background: var(--surface);
            border-radius: 6px;
            padding: 1.5rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease;
        }

        .alumni-card:hover {
            transform: translateY(-5px);
        }

        .alumni-card h3 {
            margin: 0 0 0.5rem 0;
            color: var(--heading);
        }

        .alumni-position {
            color: var(--text-light);
            font-size: 0.9rem;
            margin-bottom: 0.75rem;
        }

        @media (min-width: 768px) {
            .member-header {
                flex-direction: row;
                align-items: center;
                text-align: left;
                gap: 2rem;
            }

            .member-image-large {
                margin: 0;
                width: 180px;
                height: 225px;
            }

            .member-info {
                text-align: left;
            }
        }

        /* Footer two-column layout */
        .footer-links-container {
            display: flex;
            gap: 2rem;
        }

        .footer-links-column {
            margin: 0;
            padding: 0 0 0 1.5rem;
            list-style: disc;
        }

        @media (max-width: 768px) {
            .footer-links-container {
                flex-direction: column;
                gap: 0;
            }
        }

        @media (max-width: 768px) {
            .screenshot-gallery {
                grid-template-columns: 1fr;
                max-width: 100%;
            }
        }

        @media (max-width: 768px) {
            .screenshot-gallery {
                grid-template-columns: 1fr;
                max-width: 100%;
            }
        }

        .sp-collapsible {
            width: 100%;
        }

        .sp-collapsible > summary {
            list-style: none;
        }

        .sp-collapsible > summary::-webkit-details-marker {
            display: none;
        }

        .sp-collapsible > summary.member-header {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            user-select: none;
        }

        .sp-collapsible > summary.member-header h2 {
            margin: 0;
        }

        .sp-collapsible > summary.member-header i {
            transition: transform 0.2s ease;
        }

        .sp-collapsible[open] > summary.member-header i {
            transform: rotate(180deg);
        }

.alumni-year {
            margin-bottom: 1.5rem;
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
        }
        .alumni-year-toggle {
            background-color: var(--surface-2);
            color: var(--heading);
            padding: 1rem 1.5rem;
            margin: 0;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background-color 0.3s;
        }
        .alumni-year-toggle:hover {
            background-color: var(--border);
        }
        .alumni-year-toggle i {
            transition: transform 0.3s;
        }
        .alumni-year.active .alumni-year-toggle i {
            transform: rotate(180deg);
        }
        .alumni-year-content {
            padding: 1.5rem;
            background-color: var(--surface);
        }

/* ---- SP student cards (team.html, emitted by team_lib.php) ---- */
.sp-card {
    background: var(--surface);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.sp-card__img {
    height: 220px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
}
.sp-card__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sp-card__body { padding: 1.5rem; }
.sp-card__body h3 { margin: 0 0 0.5rem 0; color: var(--heading); }
.sp-card__role { margin: 0 0 0.5rem 0; color: var(--text-2); }
.sp-card__sup { margin: 0; color: var(--text); font-size: 0.9rem; }

@media (max-width: 768px) {
    .sp-card { margin: 0 auto; max-width: 320px; }
    .sp-card__img { height: 180px; }
    .sp-card__body { padding: 1rem; }
    .sp-card__body h3 { font-size: 1.1rem; }
    .sp-card__role,
    .sp-card__sup { font-size: 0.9rem; margin: 0.25rem 0; }
}

/* ---- Alumni photos (team.html, emitted by team_lib.php) ---- */
.alumni-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 1rem;
    border: 3px solid var(--border);
}
.alumni-image img { width: 100%; height: 100%; object-fit: cover; }
.alumni-image--placeholder {
    background-color: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.alumni-image--placeholder i { font-size: 60px; color: var(--text-light); }