/* Our Team Page — s2-customizations plugin */

/*
 * Scoped to the team section so styles don't load on the rest of the site
 */
.team-principals,
.team-staff,
.team-bio-drawer {
    --textsize-3: 1.125rem;   /* ~18px — name heading     */
    --textsize-2: 0.9375rem;  /* ~15px — title / bio text */
}

/*
 * WordPress setup required in the block editor:
 *  - Add CSS class "team-principals" to the co-founders Query Loop block
 *  - Add CSS class "team-staff"      to the staff Query Loop block
 */

.team-principals .wp-block-post-template {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
    list-style: none;
    padding: 0;
    margin-left: 0;
}

.team-principals li.team-member-card {
    flex: 0 0 calc(50% - 0.75rem);
    max-width: 40vw;
}

.team-staff .wp-block-post-template {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin-left: 0;
}

.team-staff li.team-member-card {
    flex: 0 0 calc(50% - 0.75rem);
    max-width: 40vw;
}

.team-staff.is-layout-flow {
    max-width: 1100px !important;
}

@media (min-width: 789px) {
.team-principals li.team-member-card {
    max-width: 30vh;
}

    .team-staff li.team-member-card {
        flex: 0 0 calc(33.333% - 1rem);
        max-width: 30vh;
    }


}


/* — Card wrapper (li.wp-block-post, class added by JS) — */
.team-member-card {
    display: flex;
    flex-direction: column;
    background: var(--theme-palette-color-8);
    overflow: hidden;
    position: relative;         /* anchor for the ::after border overlay */
    cursor: pointer;
    /* Blocksy's is-layout-flow rule adds margin-block-end to li children,
       which inflates the grid row track unevenly (last-child gets 0, others
       get 24px). The grid gap already handles spacing, so zero it out. */
    margin-block-end: 0 !important;
}

/* Border overlay — scoped to the li so the inner group's duplicate class
   doesn't produce a second pseudo-element overlay */
li.team-member-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    pointer-events: none;
    transition: border-color 150ms ease;
    z-index: 1;
}

li.team-member-card.is-active::after {
    border-color: var(--theme-palette-color-2);
}

/* Inner group — stack photo above the name/toggle row.
   Targets both the descendant selector and the direct class the block editor adds. */
.team-member-card .wp-block-group,
.wp-block-group.team-member-card {
    display: flex;
    flex-direction: column;
}

/* Name-title-toggle row: override Blocksy's equal-column defaults */
.team-member-card .name-title-toggle {
    align-items: center;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    padding: 0.5rem !important;
}

/* Name + title column — fills available space */
.team-member-card .name-and-title {
    flex: 1 1 auto !important;
    min-width: 0;
}

/* Toggle column — shrinks to button width only */
.team-member-card .expand-toggle {
    flex: 0 0 auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Headshot */
.team-member-card .team-member-headshot,
.team-member-card .wp-block-post-featured-image {
    margin: 0;
    flex: none;
}

.team-member-card .wp-post-image {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: top center;
}

/* Name */
.team-member-card h2 {
    margin: 0.875rem 0 0.1rem 0;
    padding-left: 0.5rem;
    font-size: var(--textsize-3);
    font-weight: 700;
    color: var(--theme-palette-color-3);
    line-height: 1.2;
}

/* Title / role */
.team-member-card h3.staff-member-title {
    margin: 0 0 0.75rem 0;
    padding-left: 0.5rem;
    font-size: var(--textsize-2);
    font-weight: 400;
    color: var(--theme-palette-color-2);
    line-height: 1.3;
}

/* Expand bio button — sits inside .expand-toggle column */
.team-bio-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    margin: 0 0.5rem;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: var(--theme-palette-color-3);
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.team-bio-toggle:hover,
.team-member-card:hover .team-bio-toggle,
.team-member-card.is-active .team-bio-toggle {
    background: var(--theme-palette-color-2);
    border-color: var(--theme-palette-color-2);
    color: var(--theme-palette-color-7);
}

.team-bio-toggle .material-icons {
    font-size: 1.1rem;
    line-height: 1;
}

/* — Bio drawer (spans full row width; JS inserts it into ul.wp-block-post-template) — */
.team-bio-drawer {
    flex: 0 0 100%;
    max-height: 0;
    overflow: hidden;
    background: var(--theme-palette-color-8);
    border: 2px solid transparent;     /* reserve space — colour applied only when open */
    transition: max-height 0.4s ease, border-color 150ms ease;
}

.team-bio-drawer:not([style*='max-height: 0']) {
    border-color: var(--theme-palette-color-2);
}

.team-bio-drawer-inner {
    position: relative;
    padding: 2rem 3.5rem 2rem 2rem;
}

.team-bio-content {
    font-size: var(--textsize-2);
    line-height: 1.75;
    color: var(--theme-palette-color-3);
    opacity: 0.9;
}

.team-bio-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--theme-palette-color-3);
    cursor: pointer;
    opacity: 0.55;
    padding: 0;
    line-height: 1;
    transition: opacity 150ms ease;
}

.team-bio-close:hover {
    opacity: 1;
}

.team-bio-close .material-icons {
    font-size: 1.25rem;
    display: block;
}

.team-bio-content > p {
    font-size: clamp(0.933rem, 0.85rem + 0.331vw, 1.133rem);
}