@media screen and (max-width: 600px) {
    .peoplepageentry {
        width: 100% !important;
    }
}

#peoplelistparent {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: row;
    gap: 3vw;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.peoplepageentry {
    width: calc(33% - 1.8vw - 4vh);
    padding: 2vh;
    height: 15vh;
    color: black;
    background-color: white;
    border-radius: 20px;
    display: flex;
}

.peoplepageentry .avatar {
    width: 35%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    border-radius: 10px;
    background-color: lightgray;
    margin-right: 5%;
}

.peoplepageentry > .text {
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.peoplepageentry > .text > .name {
    margin-top: 0;
    font-weight: bold;
    color: var(--color-primary);
}

/* The contact control used to be an <i>, so it could not be focused, could not be
 * activated from the keyboard and had no accessible name — on a page whose entire
 * purpose is "write to your national coordinator". It is a <button> now, carrying
 * Button.css's "ed-plain" opt-out so the site-wide navy pill rule leaves it alone;
 * these declarations are what a <button> needs to look like the icon it replaced.
 *
 * align-self keeps the glyph exactly where the <i> rendered it. As a flex child
 * with the default `stretch`, a button would centre its label over the full card
 * height, which would move the icon from the top corner to the middle.
 *
 * --color-secondary (#1c6bb1) on the card's white is 5.54:1, and --color-primary
 * (#003657) on hover is 12.6:1 — both above the 4.5:1 WCAG AA floor. */
.btn_contact {
    align-self: flex-start;

    appearance: none;
    -webkit-appearance: none;

    margin: 0;
    padding: 0;
    border: 0;
    background: none;

    font: inherit;
    line-height: 1;
    color: var(--color-secondary);

    cursor: pointer;
}

.btn_contact:hover,
.btn_contact:focus-visible {
    color: var(--color-primary);
}

/* Button.css brightens every button on hover with a filter. On an icon that is
 * already a mid blue on white that only fades it, so the colour change above is
 * left to be the whole hover state. */
.btn_contact:hover {
    filter: none;
}

/* ----------------------------------------------------------------------
 * Country filter
 *
 * The directory is a flat wall of cards. It is sorted coordinators first and then
 * by country, but nothing on screen says so, and the country is the third line of
 * a card rather than something a visitor can scan by — so "who do I write to in
 * Latvia" meant reading every card. The chips and the count are built by
 * people.php once it knows which countries are actually represented.
 * ------------------------------------------------------------------- */

#peoplelist-toolbar {
    margin-bottom: 16px;
}

.people-count {
    margin: 0 0 10px;
    color: white; /* 12.6:1 on the --color-primary navy the body paints. */
    font-size: 0.9em;
}

.people-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.people-filter {
    appearance: none;
    -webkit-appearance: none;

    margin: 0;
    padding: 5px 14px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 100px;
    background: transparent;

    font: inherit;
    font-size: 0.85em;
    line-height: normal;
    color: white;

    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* White at 45% over the navy is 3.76:1, which clears the 3:1 WCAG AA floor for a
 * control boundary; the chip's own label is white on navy at 12.6:1. The selected
 * chip inverts to navy on white, also 12.6:1. */
.people-filter:hover {
    background-color: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.7);
    filter: none; /* see .btn_contact:hover above */
}

.people-filter--active,
.people-filter--active:hover {
    background-color: white;
    border-color: white;
    color: var(--color-primary);
    font-weight: 600;
}

/* people.php hides a filtered-out card with the `hidden` attribute so that it
 * leaves the tab order and the accessibility tree, not just the layout. The UA
 * rule that implements it is `[hidden] { display: none }` at specificity (0,1,0),
 * which .peoplepageentry's own `display: flex` — same specificity, author sheet —
 * beats. Without this line the attribute would do nothing visible at all. */
.peoplepageentry[hidden] {
    display: none;
}

/* ----------------------------------------------------------------------
 * Empty and failed states
 *
 * Both used to render as nothing whatsoever under the "People" heading. On a
 * failure the only signal was a notyf toast, which disappears after a few seconds
 * and never appears at all if notyf itself was blocked, so a visitor on a school
 * network could not tell a broken request from a network with no coordinators.
 * ------------------------------------------------------------------- */

.people-notice {
    /* #peoplelistparent is a wrapping flex row of one-third-width cards; this takes
       the whole row rather than sitting in the first column. */
    flex: 1 1 100%;

    padding: 28px 24px;
    border-radius: var(--radius-large);
    background-color: white;
    text-align: center;

    color: var(--color-text); /* #00374b on white: 12.74:1. */
}

.people-notice > i {
    font-size: 1.6em;
    color: var(--color-secondary); /* 5.54:1 on white. */
}

.people-notice-heading {
    margin: 12px 0 6px;
    font-weight: bold;
    color: var(--color-primary); /* 12.6:1 on white. */
}

.people-notice-body {
    margin: 0;
    font-size: 0.92em;
}