/* ==========================================================================
   Bird Conservation Nepal — people
   --------------------------------------------------------------------------
   The Executive Council, Advisory Board, Patrons and Staff listings.

   Deliberately not a grid of portrait cards: all 79 records in tbl_team_member
   have an empty photo, and empty detail, email and social fields besides. Only
   the name, the designation and the display order carry anything. A card grid
   would render 79 blank avatars, so this is set as a roster — the names are
   the content.

   Plain CSS, no build step.
   ========================================================================== */

.roster {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 clamp(2rem, 4vw, 3.5rem);
    border-top: 2px solid var(--ink);
}

@media (min-width: 720px) {
    .roster { grid-template-columns: 1fr 1fr; }

    /* A two-column list still reads down each column, so the top border is
       drawn per item rather than once across the grid. */
    .roster { border-top: none; }
    .person { border-top: 1px solid var(--rule); }
    .person:nth-child(1), .person:nth-child(2) { border-top: 2px solid var(--ink); }
}

.person {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--rule);
}

.person__no {
    flex: 0 0 auto;
    min-width: 1.9rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.person__body { min-width: 0; }

.person__name {
    font-family: var(--display);
    font-size: 1.125rem;
    font-weight: var(--display-weight);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
    display: block;
}

.person__role {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}

/* Rows with no designation stored simply omit it rather than leaving a gap. */
.person__role:empty { display: none; }