@import url('./components/person-card.css');
.page-people { background: #fff; }

.people-page {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
}

.people-header {
    text-align: center;
    margin-bottom: 3rem;
}

.people-heading {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 2rem;
}

.people-departments {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    max-width: 1100px;
    margin: 0 auto;
}

.people-dept-link {
    padding: 0.65rem 1.25rem;
    font-size: 0.95rem;
    background: #f5f5f5;
    color: #000;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.people-dept-link:hover {
    background: #e8e8e8;
}

.people-dept-link.is-active {
    background: #000;
    color: #fff;
}

.people-dept-link-outline {
    background: #fff;
    border: 1px solid #000;
}

.people-dept-link-outline:hover {
    background: #000;
    color: #fff;
}

.people-empty {
    padding: 4rem 1rem;
    text-align: center;
    color: #999;
}

/* Reuse .people-grid + .person-card from spectacle.css — they already work */

@media (max-width: 768px) {
    .people-heading { font-size: 1.75rem; }
    .people-dept-link { font-size: 0.85rem; padding: 0.5rem 1rem; }
}