/*
    ============================================
    CC STAFF DIRECTORY
    New widget-only styles
    ============================================
*/

/*
    ----------------------------
    Shared wrapper / headings
    ----------------------------
*/

.staffDirectory {
    box-sizing: border-box;
}

    .staffDirectory h2,
    .staffDirectory h3 {
        margin-bottom: 1rem;
    }

    /*
    ----------------------------
    Dynamic grouped table view
    ----------------------------
*/

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

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

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

    .staffDirectory .staffDirHeaderRow {
        background: var(--cc-lightGrey, #f1f1f1);
    }

    .staffDirectory .staffDirHeaderCell,
    .staffDirectory .staffDirCell {
        box-sizing: border-box;
        min-width: 0;
        min-height: 0;
        padding: 0.5rem 0.5rem 0.35rem 0.5rem;
        border-bottom: 1px solid #ccc;
        text-align: left;
        line-height: 1.35;
        word-break: break-word;
        white-space: normal;
        overflow-wrap: anywhere;
        overflow: visible;
        height: 100%;
    }

    .staffDirectory .staffDirHeaderCell {
        font-size: 1.1rem;
        font-weight: 700;
    }

    .staffDirectory .staffDirRow:nth-of-type(odd) .staffDirCell {
        background: #fafafa;
    }

    /*
    Group headings
*/

    .staffDirectory .staffDirGroupHeader {
        grid-column: 1 / -1;
        margin-top: 1rem;
    }

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

    .staffDirectory .staffDirGroupTitle {
        grid-column: 1 / -1;
        padding: 0.75rem 0.5rem 0.4rem 0.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
*/

    .staffDirectory .staffDirCell a,
    .staffDirectory .staffDirSmallValue a,
    .staffDirectory .staffCard a {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /*
    Staff image styling
*/

    .staffDirectory .staffImage {
        border-radius: 4px;
        overflow: hidden;
        width: 100%;
        height: 100%;
    }

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

        .staffDirectory .staffImage.is-missing {
            border: 2px solid #ccc;
            background: #f7f7f7;
            color: #666;
            font-style: italic;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 7rem;
            text-align: center;
            padding: 0.5rem;
            box-sizing: border-box;
        }

    /*
    Staff image inside table / stacked view
*/

    .staffDirectory .staffDirCell .staffImage,
    .staffDirectory .staffDirSmallValue .staffImage {
        width: 9rem;
        height: 9rem;
        min-width: 9rem;
        min-height: 9rem;
    }

    .staffDirectory .staffDirCell:has(.staffImage),
    .staffDirectory .staffDirSmallValue:has(.staffImage) {
        display: flex;
        align-items: center;
    }

    .staffDirectory .staffDirCell .staffImage.is-missing,
    .staffDirectory .staffDirSmallValue .staffImage.is-missing {
        min-height: 4.5rem;
    }

    /*
    ----------------------------
    Small / stacked table view
    ----------------------------
*/

    .staffDirectory .staffDirSmallTable {
        display: none;
        margin: 1rem 0;
    }

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

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

    .staffDirectory .staffDirSmallRow {
        border-top: 1px solid #bbb;
        padding: 0.9rem 0;
    }

        .staffDirectory .staffDirSmallRow:first-child {
            border-top: none;
        }

    .staffDirectory .staffDirSmallItem {
        display: grid;
        grid-template-columns: 14ch 1fr;
        gap: 0.4rem 0.75rem;
        padding: 0.25rem 0.75rem;
        align-items: start;
    }

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

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

    /*
    ----------------------------
    Card view
    ----------------------------
*/

    .staffDirectory .staffCards {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
        margin: 1rem 0;
        justify-content: start;
        align-items: start;
    }

    .staffDirectory .staffCard {
        border: 1px solid var(--cc-medGrey, #ccc);
        border-radius: 0.5rem;
        padding: 1rem;
        display: grid;
        grid-template-columns: 7rem 1fr;
        gap: 0.75rem;
        background: #fff;
        box-sizing: border-box;
        align-items: start;
        min-width: 0;
    }

    .staffDirectory .staffCardLeft {
        display: block;
        width: 7rem;
        min-width: 7rem;
        height: 7rem;
        min-height: 7rem;
    }

        .staffDirectory .staffCardLeft .staffImage {
            width: 7rem;
            height: 7rem;
            min-width: 7rem;
            min-height: 7rem;
        }

            .staffDirectory .staffCardLeft .staffImage.is-missing {
                width: 7rem;
                height: 7rem;
                min-width: 7rem;
                min-height: 7rem;
            }

    .staffDirectory .staffCardRight {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        min-width: 0;
    }

    .staffDirectory .staffCardPosition {
        font-weight: 600;
        margin: 0 0 0.2rem 0;
    }

    .staffDirectory .staffCardName {
        margin: 0 0 0.5rem 0;
        opacity: 0.95;
    }

    .staffDirectory .staffCardEmail,
    .staffDirectory .staffCardPhone {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .staffDirectory .staffCardNotes {
        margin-top: 0.35rem;
        opacity: 0.95;
    }

/*
    ----------------------------
    Responsive table switching
    ----------------------------
*/

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

        .staffDirectory .staffDirSmallTable {
            display: block;
        }
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

            .staffDirectory .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) {
        .staffDirectory .staffDirTable {
            display: none;
        }

        .staffDirectory .staffDirSmallTable {
            display: block;
        }
    }
}

@supports (container-type: inline-size) {
    @container (max-width: 520px) {
        .staffDirectory .staffDirSmallItem {
            grid-template-columns: 1fr;
            grid-template-areas:
                "label"
                "value";
            row-gap: 0.15rem;
            padding: 0.35rem 0.75rem;
        }

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

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

/*
    ----------------------------
    Card view responsiveness
    ----------------------------
*/

@media (max-width: 700px) {
    .staffDirectory .staffCards {
        grid-template-columns: 1fr;
    }

    .staffDirectory .staffCard {
        grid-template-columns: 1fr;
    }

    .staffDirectory .staffCardLeft {
        width: 100%;
        min-width: 0;
        max-width: 14rem;
        height: auto;
    }

        .staffDirectory .staffCardLeft .staffImage,
        .staffDirectory .staffCardLeft .staffImage.is-missing {
            width: 100%;
            max-width: 14rem;
            height: auto;
            aspect-ratio: 1 / 1;
            min-width: 0;
            min-height: 0;
        }
}
@media (max-width: 2000px) {
    .staffDirectory .staffCards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1600px) {
    .staffDirectory .staffCards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1300px) {
    .staffDirectory .staffCards {
        grid-template-columns: 1fr;
    }
}