@charset "UTF-8";
/* layer_teams — teamleden-grid.
   De leden renderen als losse <article class="team-card"> direct in #main-content
   (elk lid is een eigen content-laag). Met :has() scopen we de grid tot precies
   die pagina's, zonder andere routes te raken. Tokens uit style.css. */

#main-content:has(> .team-card) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    max-width: 1080px;
    margin: 3.5rem auto;
    padding: 0 1.5rem;
}

.team-card {
    background: var(--color-bg-elev, #fff);
    border: 1px solid var(--color-border, #e7e2d8);
    border-radius: var(--radius-md, 10px);
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(41, 39, 35, .06));
    padding: 1.75rem 1.25rem;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease;
}

.team-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md, 0 18px 40px -18px rgba(41, 39, 35, .30));
}

.team-card__avatar {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: hsl(var(--avatar-hue, 30) 30% 56%);
    color: #fff;
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.85rem;
    line-height: 1;
    letter-spacing: .02em;
}

.team-card__name {
    font-family: var(--font-display, Georgia, serif);
    color: var(--color-fg, #29271f);
    font-size: 1.2rem;
    margin: 0 0 .35rem;
}

.team-card__function {
    color: var(--color-fg-muted, #8a8475);
    font-size: .92rem;
    margin: 0;
}