/* ============================================================
   GLOBAL LAYOUT (team-layout)
   ============================================================ */
/* Main container for the team page layout */
.team-layout {
    height: 100vh;                      /* Full viewport height */
    overflow-y: auto;                   /* Allow vertical scroll*/
    padding: 1rem 6rem 4rem 6rem;       /* Top, right, bottom, left */
}
/* Adjust layout padding for medium/small screens */
@media (max-width: 992px) {
    .team-layout {
        padding: 1rem 2.5rem 4rem 2.5rem;  /* Reduced horizontal padding */
    }
}
/* ============================================================
   1. TITLE SECTION
   ============================================================ */
/* Title section container*/
.team-title-section {
    width: 100%;                        /* Take full width of the page */
    display: flex;                      /* Use flex for robust centering */
    justify-content: center;            /* Center horizontally */
    align-items: center;                /* Center vertically within the section */
    padding: 1.5rem 3.5rem 0.5rem 3.5rem;   /* Padding around the title */
    margin-bottom: 0;                   /* No bottom spacing */
}
/* Resources title text*/
.team-title {
    font-size: 4rem;                    /* Large text size for visibility */
    font-weight: 700;                   /* Bold text */
    color: #1E1E1E;                     /* Dark gray text color */
    margin: 0 auto 2rem auto;           /* Center horizontally and add bottom space */
    text-align: center;                 /* Center the title */
    display: block;                     /* Ensure full-width block behavior */
}
/* ============================================================
   2. CONTENT SECTION
   ============================================================ */
/* Extra spacing before content */
.team-content-container{
    padding-bottom: 3rem;               /* Bottom spacing for separation */
}
/* Content section wrapper */
.team-content-section{
    display: flex;                      /* Horizontal layout for wide screens */
    justify-content: space-between;     /* Space between title and content */
    align-items: flex-start;            /* Aligns items to the top */
    margin: 2rem auto 3rem auto;        /* Top and bottom spacing, center horizontally */
    flex-wrap: wrap;                    /* Allows wrapping for smaller screens */
}
/* ============================================================
   2.1. GENERAL SECTIONS
   ============================================================ */
/* Main section title */
.team-section-title {
    width: 100%;                        /* Occupies full row */
    font-size: 2.2rem;                  /* Large, clear title size */
    font-weight: 700;                   /* Bold title text */
    color: #111111;                     /* Dark gray text for contrast */
    letter-spacing: -0.02em;            /* Subtle tightening of text spacing */
    display: block;
    margin-bottom: 0.8rem;              /* Space below title */
}
/* Section subtitle (with underline) */
.team-section-subtitle {
    width: 100%;                        /* Full width */
    font-size: 1.5rem;                  /* Medium large size */
    font-weight: 600;                   /* Semi-bold */
    color: #333333;                     /* Medium gray */
    letter-spacing: 0.01em;             /* Subtle spacing */
    margin-top: 1rem;                   /* Space above */
    margin-bottom: 0.8rem;              /* Space below */
    display: block;
    border-bottom: 1px solid #d9d9d9;   /* Divider line */
    font-style: italic;                 /* Differentiated style */
    padding-bottom: 0.2rem;             /* Space above border */
}
/* Content section */
.team-section-content{
    font-size: 1.1rem;                  /* Slightly larger than default text */
    color: #333;                        /* Neutral dark text for readability */
}
/* ============================================================
   2.1.1. TEAM MEMBER COMPONENTS
   ============================================================ */
/* Member name above photo */
.team-member-photo-name {
    font-weight: 600;                   /* Slightly bold for emphasis */
    color: #555555;                     /* Consistent gray tone */
    font-size: 1.2rem;                  /* Slightly larger */
    margin-bottom: 0.6rem;              /* Space below */
    display: block;
    letter-spacing: 0.01rem;            /* Airy spacing */
}
/* Container with photo + text beside it */
.team-member-photo-container {
    display: flex;
    flex-direction: row;                /* Photo left, text right */
    align-items: flex-start;
    gap: 1.2rem;                        /* Space between photo and text */
    margin-bottom: 1rem;
}
/* Profile photo */
.team-photo {
    flex: 0 0 160px;                    /* Fixed width */
    height: 160px;                      /* Square format */
    object-fit: cover;                  /* Crop without distortion */
    border-radius: 10px;                /* Soft rounding */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Light shadow */
    border: 2px solid #f0f0f0;          /* Soft border */
    background-color: white;            /* Neutral background */
    transition: transform 0.25s ease, box-shadow 0.25s ease; /* Hover animation */
}
/* Hover animation for photo */
.team-photo:hover {
    transform: scale(1.02);             /* Slight zoom */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Enhanced shadow */
}
/* Container for text next to the photo */
.team-photo-info-container {
    flex: 1;                            /* Expand text area */
    display: flex;
    flex-direction: column;
}
/* Profession text */
.team-member-profession{
    font-style: italic;                 /* Italic to differentiate profession */
    color: #444;                        /* Slightly lighter gray for subtle contrast */
    font-size: 1rem;
    line-height: 1.4;
}
/* Additional info (university, background, etc.) */
.team-member-info{
    color: #555;                        /* Medium gray for neutral tone */
    font-size: 1rem;                    /* Standard text size */
    white-space: pre-line;              /* Interpret \n as line breaks */
    line-height: 1.4;
}
/* Email link styling */
.team-member-email{
    color: #0056b3;                     /* Blue link */
    font-weight: 500;
    text-decoration: underline;         /* Standard link underline */
    cursor: pointer;
    font-size: 1rem;                    /* Standard text size */
}
/* Email animation */
.team-member-email:hover {
    color: #003d80;                     /* Darker blue */
}
/* Wrapper for members in a section */
.team-member-container {
    margin-bottom: 0.8rem;              /* Space between members */
    display: flex;
    flex-direction: column;
}
/* Member name inside content list */
.team-member-name{
    font-weight: 600;                   /* Slightly bold for emphasis */
    color: #555555;                     /* Same dark gray as title for consistency */
    font-size: 1.2rem;                  /* Slightly larger text for names */
    margin-bottom: 0.6rem;
    letter-spacing: 0.01rem;
}
/* University inside content list */
.team-member-university{
    color: #555;                        /* Medium gray for neutral tone */
    font-size: 1rem;                    /* Standard text size */
    line-height: 1.4;
}
/* ============================================================
   RESPONSIVE — Small Screens (up to 768px)
   ============================================================ */
@media (max-width: 768px) {
    /* Title spacing adjustments */
    .team-title-section {
        padding: 1.5rem 0 0.5rem 0;     /* Padding around the title */
    }
    /* Content layout switches to vertical stack */
    .team-content-section {
        flex-direction: column;         /* Stack title and content vertically */
        gap: 1rem;                      /* Reduce space between stacked elements */
        justify-content: flex-start;
        align-items: stretch;
    }
    /* Smaller titles */
    .team-section-title {
        font-size: 1.6rem;              /* Slightly smaller title for mobile */
        margin-bottom: 0.5rem;          /* Space below title */
    }
    /* Center names above photos */
    .team-member-photo-name{
        text-align: center;
        width: 100%;
        display: block;
    }
    /* Stack photo and text vertically */
    .team-member-photo-container {
        flex-direction: column;         /* stack image and text */
        align-items: stretch;           /* allow the text to use the full width */
        text-align: left;               /* text aligned to the left by default */
        gap: 0.8rem;                    /* spacing between the photo and the text */
    }
    /* Larger photo on mobile + centered */
    .team-photo {
        width: 200px;
        height: 200px;
        margin-bottom: 0.8rem;
        display: block;
        margin-left: auto;
        margin-right: auto;             /* Center photo */
    }
    /* Align info left and full-width */
    .team-photo-info-container {
        align-items: flex-start;        /* align to the left */
        text-align: left;
        padding-left: 0;
        margin-left: 0;
        width: 100%;
    }
}