/* Members share the faculty directory visual defaults. */
.prep-member-directory--no-representation-menu .prep-directory__menu--section { display:none; }
.prep-member-directory [hidden] { display:none !important; }

/* 1.9.31: Keep Board / Committee Members Elementor flex items the same size whether their
   accordion headings are open or closed. The existing results_width control only applies
   to the inner results, so it cannot keep the outer widget from shrinking on collapse. */
:is(.elementor-widget-prep_board_members,
    .elementor-widget-prep_committee_members,
    .elementor-widget-prep_finance_members,
    .elementor-widget-prep_governance_members,
    .elementor-widget-prep_curriculum_members,
    .elementor-widget-prep_strategic_planning_members,
    .elementor-widget-prep_staff_development_members) {
    width: var(--prep-board-widget-width, 100%);
    flex: 0 1 var(--prep-board-widget-width, 100%);
    max-width: 100%;
    min-width: 0;
    align-self: stretch;
}
:is(.elementor-widget-prep_board_members,
    .elementor-widget-prep_committee_members,
    .elementor-widget-prep_finance_members,
    .elementor-widget-prep_governance_members,
    .elementor-widget-prep_curriculum_members,
    .elementor-widget-prep_strategic_planning_members,
    .elementor-widget-prep_staff_development_members) > .elementor-widget-container {
    width: 100%;
    min-width: 0;
}

/* 1.9.32: Board/committee contact links are only as wide as their address/number.
   Flex-wrap moves the contact group intact below the name when a card is narrow;
   it must never squeeze an address into a two-line pill. All settings are scoped
   to member directories; the Staff Directory keeps its existing layout. */
/* 1.9.34: Give the name/title their natural, single-line width BEFORE placing
   contacts. Increasing the horizontal gap must never steal width from names.
   If the panel is too narrow for both blocks, flex-wrap moves the intact
   contact group onto a second row, rather than wrapping names/email text.
   The existing Name area width control acts as the minimum reserved width. */
.prep-directory.prep-member-directory .prep-directory__person {
    column-gap: var(--prep-member-name-gap, 12px);
    row-gap: 12px;
}
.prep-directory.prep-member-directory .prep-directory__person > div:first-child {
    flex: 0 0 auto;
    min-width: var(--prep-member-name-basis, 150px);
    max-width: 100%;
}
.prep-directory.prep-member-directory .prep-directory__person h5,
.prep-directory.prep-member-directory .prep-directory__person .prep-directory__title {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}
.prep-directory.prep-member-directory .prep-directory__contact {
    flex: 0 0 max-content;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    margin-inline-start: var(--prep-member-contact-offset, 0px);
    gap: var(--prep-member-buttons-gap, 8px);
    align-items: flex-start;
}
.prep-directory.prep-member-directory .prep-directory__contact > .prep-directory__btn {
    flex: 0 0 auto;
    width: max-content;
    max-width: none;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    justify-content: flex-start;
}
.prep-directory.prep-member-directory .prep-directory__contact > .prep-directory__btn > span {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}
@media (max-width: 600px) {
    /* Mobile has no guaranteed room for a long name + email. Allow titles
       to wrap naturally there, and keep email buttons intact and scrollable. */
    .prep-directory.prep-member-directory .prep-directory__person > div:first-child {
        flex-basis: 100%;
        min-width: 0;
    }
    .prep-directory.prep-member-directory .prep-directory__person h5,
    .prep-directory.prep-member-directory .prep-directory__person .prep-directory__title {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .prep-directory.prep-member-directory .prep-directory__contact {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        margin-inline-start: 0;
        overflow-x: auto;
        overflow-y: hidden;
    }
}

/* 1.9.37: An identical shared contact column for every Board and Committee
   card. The measurement script includes long job titles and allows the panel
   to grow within its Elementor container before any content needs to stack. */
.prep-directory.prep-member-directory .prep-directory__person {
    display: grid;
    grid-template-columns: minmax(0, max(calc(var(--prep-contact-longest-text-width, 0px) + var(--prep-member-name-gap, 12px) + 2px), calc(var(--prep-member-name-basis, 150px) + var(--prep-member-name-gap, 12px)))) minmax(0, 1fr);
    column-gap: 0;
    align-items: center;
}
.prep-directory.prep-member-directory .prep-directory__person > div:first-child {
    min-width: 0;
    width: auto;
}
.prep-directory.prep-member-directory .prep-directory__person .prep-directory__contact {
    justify-self: start;
    align-items: flex-start;
    margin-inline-start: var(--prep-member-contact-offset, 0px);
}
/* If the parent Elementor container cannot accommodate the longest job title
   and longest email, every contact group stacks together, not only one card. */
.prep-directory.prep-member-directory.prep-directory--contacts-below .prep-directory__person > div:first-child,
.prep-directory.prep-member-directory.prep-directory--contacts-below .prep-directory__person .prep-directory__contact {
    grid-column: 1 / -1;
    grid-row: auto;
}
.prep-directory.prep-member-directory.prep-directory--contacts-below .prep-directory__person .prep-directory__contact {
    margin-inline-start: 0;
}
@media (max-width: 600px) {
    .prep-directory.prep-member-directory .prep-directory__person > div:first-child,
    .prep-directory.prep-member-directory .prep-directory__person .prep-directory__contact {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}