/* General */
.content {
    display: flex;
    flex-direction: column;
    padding: 40px 0;
    gap: 40px;
}

.header,
.section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Overview */
.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.team-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 10px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
}

.team-card:hover,
.team-card:focus {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
}

.team-main {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.team-card-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background-color: var(--color-bg-white);
    border-radius: 10px 10px 0 0;
}

.team-card-footer {
    background-color: #FFCC8F;
    padding: 5px 20px;
    text-align: center;
    border-radius: 0 0 10px 10px;
    width: 100%;
}

.team-portrait {
    width: 100px;
    height: auto;
    border-radius: 50%;
    flex-shrink: 0; /* prevent it from shrinking in tight spaces */
}

.team-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.team-nickname {
    color: var(--color-text-primary);
}

.team-basic {
    display: flex;
    gap: 20px;
}

.modal-body.team-body {
    gap: 20px;
}

.modal-info.team-info {
    align-items: flex-start;
}

.modal-img.team-portrait {
    align-self: flex-start; 
}

.fa-linkedin {
    color: var(--color-text-secondary);
}

/* Responsive Styles */
/* Mobile-only: 320px – 767px */
@media (max-width: 767px) {
    .team-grid {
        grid-template-columns: 1fr;
    }
    .team-basic {
        flex-direction: column;
        align-items: center;
    }
    .team-main {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }
    .modal-body.team-body {
        gap: 20px;
    }
    .modal-info.team-info {
        align-items: center;
    }
    .modal-img.team-portrait {
        align-self: center; 
    }
}

/* Tablet-only: 768px – 1365px */
@media (min-width: 768px) and (max-width: 1365px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-grid > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: 80%;
        justify-self: center;
    }
}

/* Mobile and Tablet: 1365px below */
@media (max-width: 1365px) {
}

/* Desktop: 1366px above */
@media (min-width: 1366px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .team-grid > :last-child:nth-child(odd) {
        grid-column: auto;
        max-width: none;
        justify-self: initial;
    }

    .team-grid > :nth-last-child(1):nth-child(3n+1) {
        grid-column-start: 2;
    }
    .team-grid > :nth-last-child(2):nth-child(3n+1) {
        grid-column-start: 1;
    }
    .team-grid > :nth-last-child(1):nth-child(3n+2) {
        grid-column-start: 2;
    }
}