/* team.css - Styles for the NSS Team/Volunteer List Pages */

.team-list-container {
    /* Uses .container and .page-padding from style.css */
}

.team-list-container h1 {
    text-align: center;
    margin-bottom: 40px;
    color: var(--primary-color);
    font-size: 2.5em;
}

.team-category {
    margin-bottom: 40px; /* Space between team categories */
}

.team-category h2, /* Use h2 for main team categories like Website, Publicity etc. */
.team-category h3 { /* Use h3 for sub-categories like Health Centre, Sopan etc. */
    color: var(--primary-color);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 8px;
    margin-bottom: 20px;
    font-size: 1.8em;
}

.team-category h3 { /* Slightly smaller for sub-teams */
    font-size: 1.6em;
    margin-top: 30px; /* Add space above sub-team headings */
}


.team-members-list {
    list-style: none;
    padding-left: 0;
    margin: 0;

    /* Use CSS Columns for better layout */
    column-count: 3; /* Default number of columns */
    column-gap: 30px; /* Space between columns */
}

.team-members-list li {
    padding: 5px 0;
    font-size: 1.05em;
    line-height: 1.5;
    color: var(--text-color);
    /* Prevent items from breaking across columns */
    break-inside: avoid-column;
    page-break-inside: avoid; /* Legacy support */
    margin-bottom: 5px;
}

/* Responsive adjustments for columns */
@media (max-width: 992px) {
    .team-members-list {
        column-count: 2; /* 2 columns for medium screens */
    }
}

@media (max-width: 576px) {
    .team-members-list {
        column-count: 1; /* 1 column for small screens */
    }
    .team-category h2,
    .team-category h3 {
        font-size: 1.5em; /* Adjust heading size */
    }
    .team-members-list li {
        font-size: 1em;
    }
}