.staffCards {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 1rem;
    margin: 1rem;
    justify-content: space-evenly;
}

/* Card sizing: grows, wraps, and keeps a reasonable minimum */
.staffCard {
    flex: 1 0 20%;
    border: 1px solid var(--cc-medGrey);
    border-radius: .5rem;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    gap: .75rem;
    background: #fff;
    max-width: 25%;
}

/* Top row: photo + main identity */
.staffCardLeft {
    display: block;
    width: 7rem;
    height: 100%;
}

.staffCardMain {
    min-width: 0;
}

/* allows text truncation */
.staffCardPosition {
    font-weight: 700;
}

.staffCardName {
    opacity: .9;
}

/* Meta links */
.staffCardRight {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    width: 60%;
}

.staffCardEmail,
.staffCardPhone {
    word-break: break-all;
}

/* Notes */
.staffCardNotes {
    opacity: .9;
}

/* Staff list grid */
.staffList {
    --cols: 1;
    display: grid;
    gap: 1rem;
    margin-left: 2em;
}

    .staffList.cols-1 {
        --cols: 1;
    }

    .staffList.cols-2 {
        --cols: 2;
    }

    .staffList.cols-3 {
        --cols: 3;
    }

    .staffList.cols-4 {
        --cols: 4;
    }

    .staffList.cols-5 {
        --cols: 5;
    }

    .staffList.cols-6 {
        --cols: 6;
    }

.staffRow {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(10rem, 1fr);
    gap: .75em;
    align-items: center;
}

    .staffRow.is-header {
        font-weight: 700;
    }

.staffPosition {
    font-weight: 600;
}

.staffImage {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--cc-lightGrey);
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

    .staffImage img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .staffImage.is-missing {
        border: 2px solid #ccc;
        background: #f7f7f7;
        color: #666;
        font-style: italic;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.staffHeader {
    font-weight: bold;
    text-align: left;
}

.staffEmail {
    word-break: break-all;
}

/*
    /////
    NEW DYNAMIC STAFF DIRECTORY TABLE
    /////
*/

.staffDirTableWrap {
    container-type: inline-size;
    display: block;
    box-sizing: border-box;
    --flip-pad: 12ch;
}

.staffDirTable {
    display: grid;
    grid-template-columns: var(--grid-cols);
    box-sizing: border-box;
    overflow-x: hidden;
}

.staffDirHeaderRow,
.staffDirDataRow {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: start;
}

.staffDirHeaderRow {
    font-size: 1.25rem;
    background: var(--cc-lightGrey);
}

.staffDirHeaderCell,
.staffDirDataCell {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    padding: .5rem .25rem .2rem .5rem;
    border-bottom: 1px solid #ccc;
    text-align: left;
    line-height: 1.3;
    word-break: break-word;
    white-space: normal;
    overflow-wrap: anywhere;
    overflow: visible;
    height: 100%;
}

.staffDirHeaderCell {
    font-weight: 700;
}

.staffDirDataRow:nth-child(odd) .staffDirDataCell {
    background: #fafafa;
}

/* Group headings */
.staffDirGroupHeader {
    grid-column: 1 / -1;
    margin-top: 1rem;
}

    .staffDirGroupHeader:first-child {
        margin-top: 0;
    }

.staffDirGroupTitle {
    grid-column: 1 / -1;
    padding: .75rem .5rem .4rem .5rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cc-darkBlue, #003b8d);
    border-bottom: 2px solid var(--cc-medGrey, #ccc);
    background: #fff;
}

/* Rich content inside cells */
.staffDirDataCell a,
.staffDirSmallValue a {
    word-break: break-word;
    overflow-wrap: anywhere;
}

.staffDirDataCell img,
.staffDirSmallValue img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Give image cells a predictable visual size when used */
.staffDirDataCell img {
    max-height: 8rem;
    object-fit: cover;
}

/* Small / stacked version */
.staffDirSmallTable {
    display: none;
    margin: 1em 0;
}

.staffDirSmallGroup {
    margin-bottom: 1.25rem;
}

.staffDirGroupTitleSmall {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 1rem 0 .5rem 0;
    padding-bottom: .25rem;
    border-bottom: 2px solid var(--cc-medGrey, #ccc);
    color: var(--cc-darkBlue, #003b8d);
}

    .staffDirGroupTitleSmall:first-child {
        margin-top: 0;
    }

.staffDirSmallRow {
    border-top: 1px solid #eee;
    padding: .5rem 0;
}

.staffDirSmallList {
    margin: 0;
    padding: 0;
}

.staffDirSmallCell,
.staffDirSmallItem {
    display: grid;
    grid-template-columns: 14ch 1fr;
    gap: .4rem .75rem;
    padding: .25rem .75rem;
    align-items: start;
}

.staffDirSmallLabel {
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.staffDirSmallValue {
    margin: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/*
    /////
    RESPONSIVE - EXISTING STAFF LIST
    /////
*/

/* Extra large desktops */
@media (max-width: 1400px) {
    .staffList.cols-6 .staffRow.is-header {
        display: none;
    }

    .staffList.cols-6 .staffRow {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        grid-auto-columns: unset;
        gap: .35rem;
        padding: .75rem;
        border: 1px solid #ddd;
        border-radius: .5rem;
    }
}

/* Large desktops */
@media (max-width: 1200px) {
    .staffList.cols-5 .staffRow.is-header {
        display: none;
    }

    .staffList.cols-5 .staffRow {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        grid-auto-columns: unset;
        gap: .35rem;
        padding: .75rem;
        border: 1px solid #ddd;
        border-radius: .5rem;
    }
}

/* Small desktops / large tablets */
@media (max-width: 992px) {
    .staffList.cols-4 .staffRow.is-header {
        display: none;
    }

    .staffList.cols-4 .staffRow {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        grid-auto-columns: unset;
        gap: .35rem;
        padding: .75rem;
        border: 1px solid #ddd;
        border-radius: .5rem;
    }
}

/* Tablets */
@media (max-width: 768px) {
    .staffList.cols-3 .staffRow.is-header {
        display: none;
    }

    .staffList.cols-3 .staffRow {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        grid-auto-columns: unset;
        gap: .35rem;
        padding: .75rem;
        border: 1px solid #ddd;
        border-radius: .5rem;
    }
}

/* Large phones */
@media (max-width: 576px) {
    .staffList.cols-2 .staffRow.is-header {
        display: none;
    }

    .staffList.cols-2 .staffRow {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        grid-auto-columns: unset;
        gap: .35rem;
        padding: .75rem;
        border: 1px solid #ddd;
        border-radius: .5rem;
    }
}

/* Small phones */
/* optional styling */

/* Very small devices */
/* optional styling */

/*
    /////
    RESPONSIVE - NEW DYNAMIC TABLE
    /////
*/

@supports (container-type: inline-size) {
    @container (max-width: calc(var(--min-sum, 9999ch) + var(--flip-pad, 0ch))) {
        .staffDirTable {
            display: none;
        }

        .staffDirSmallTable {
            display: block;
        }
    }

    @container (max-width: 1500px) {
        .staffDirTable:has(.staffDirHeaderCell:nth-child(n+12)) {
            display: none;
        }

            .staffDirTable:has(.staffDirHeaderCell:nth-child(n+12)) ~ .staffDirSmallTable {
                display: block;
            }
    }

    @container (max-width: 1420px) {
        .staffDirTable:has(.staffDirHeaderCell:nth-child(n+11)):not(:has(.staffDirHeaderCell:nth-child(n+12))) {
            display: none;
        }

            .staffDirTable:has(.staffDirHeaderCell:nth-child(n+11)):not(:has(.staffDirHeaderCell:nth-child(n+12))) ~ .staffDirSmallTable {
                display: block;
            }
    }

    @container (max-width: 1300px) {
        .staffDirTable:has(.staffDirHeaderCell:nth-child(n+10)):not(:has(.staffDirHeaderCell:nth-child(n+11))) {
            display: none;
        }

            .staffDirTable:has(.staffDirHeaderCell:nth-child(n+10)):not(:has(.staffDirHeaderCell:nth-child(n+11))) ~ .staffDirSmallTable {
                display: block;
            }
    }

    @container (max-width: 1150px) {
        .staffDirTable:has(.staffDirHeaderCell:nth-child(n+8)):not(:has(.staffDirHeaderCell:nth-child(n+10))) {
            display: none;
        }

            .staffDirTable:has(.staffDirHeaderCell:nth-child(n+8)):not(:has(.staffDirHeaderCell:nth-child(n+10))) ~ .staffDirSmallTable {
                display: block;
            }
    }

    @container (max-width: 980px) {
        .staffDirTable:has(.staffDirHeaderCell:nth-child(n+6)):not(:has(.staffDirHeaderCell:nth-child(n+8))) {
            display: none;
        }

            .staffDirTable:has(.staffDirHeaderCell:nth-child(n+6)):not(:has(.staffDirHeaderCell:nth-child(n+8))) ~ .staffDirSmallTable {
                display: block;
            }
    }

    @container (max-width: 860px) {
        .staffDirTable:has(.staffDirHeaderCell:nth-child(n+4)):not(:has(.staffDirHeaderCell:nth-child(n+6))) {
            display: none;
        }

            .staffDirTable:has(.staffDirHeaderCell:nth-child(n+4)):not(:has(.staffDirHeaderCell:nth-child(n+6))) ~ .staffDirSmallTable {
                display: block;
            }
    }

    @container (max-width: 720px) {
        .staffDirTable:has(.staffDirHeaderCell:nth-child(n+2)):not(:has(.staffDirHeaderCell:nth-child(n+4))) {
            display: none;
        }

            .staffDirTable:has(.staffDirHeaderCell:nth-child(n+2)):not(:has(.staffDirHeaderCell:nth-child(n+4))) ~ .staffDirSmallTable {
                display: block;
            }
    }
}

@supports not (container-type: inline-size) {
    @media (max-width: 900px) {
        .staffDirTable {
            display: none;
        }

        .staffDirSmallTable {
            display: block;
        }
    }
}

@supports (container-type: inline-size) {
    @container (max-width: 520px) {
        .staffDirSmallCell,
        .staffDirSmallItem {
            grid-template-columns: 1fr;
            grid-template-areas: "label" "value";
            row-gap: .15rem;
            padding: .35rem .75rem;
        }

        .staffDirSmallLabel {
            grid-area: label;
            font-size: .95rem;
            line-height: 1.2;
            margin: 0 0 .1rem 0;
            color: #444;
            white-space: normal;
        }

        .staffDirSmallValue {
            grid-area: value;
            font-size: 1rem;
            line-height: 1.35;
            white-space: normal;
            word-break: break-word;
            overflow-wrap: anywhere;
            text-align: left;
        }
    }
}