/* One committee-card system shared by the Student Branch and all communities. */
.committee-roster-standardized {
    --committee-accent: #3cf2ff;
    --committee-accent-rgb: 60, 242, 255;
}

#wie-committee {
    --committee-accent: #ff9aff;
    --committee-accent-rgb: 255, 154, 255;
}

#ras-committee {
    --committee-accent: #ff7a45;
    --committee-accent-rgb: 255, 122, 69;
}

#pes-committee {
    --committee-accent: #31d982;
    --committee-accent-rgb: 49, 217, 130;
}

#embs-committee {
    --committee-accent: #ff735f;
    --committee-accent-rgb: 255, 115, 95;
}

#pho-committee {
    --committee-accent: #d767ff;
    --committee-accent-rgb: 215, 103, 255;
}

#sps-committee {
    --committee-accent: #00e5ff;
    --committee-accent-rgb: 0, 229, 255;
}

#aps-committee {
    --committee-accent: #b58cff;
    --committee-accent-rgb: 181, 140, 255;
}

.excom-source-roster {
    --committee-accent: var(--excom-accent, #3cf2ff);
    --committee-accent-rgb: var(--excom-accent-rgb, 60, 242, 255);
}

.excom-webteam {
    --committee-accent: var(--excom-accent, #3cf2ff);
    --committee-accent-rgb: var(--excom-accent-rgb, 60, 242, 255);
    width: min(1120px, 100%);
    margin: clamp(76px, 10vw, 120px) auto 0;
    padding-top: clamp(54px, 7vw, 76px);
    border-top: 1px solid rgba(var(--committee-accent-rgb), 0.22);
}

.excom-webteam-title {
    margin: 0 auto 18px;
    color: #fff;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.12;
    text-align: center;
}

.excom-webteam .webteam-committee {
    width: 100%;
    margin: 0;
    padding: 30px 0 12px;
    background: transparent;
}

.excom-webteam .committee-title {
    position: relative;
    margin: 0 auto 24px;
    padding: 0;
    color: var(--committee-accent);
    font-size: clamp(1.15rem, 2.5vw, 1.55rem);
    letter-spacing: 0.08em;
    text-align: center;
}

.excom-webteam .committee-title::after {
    content: none !important;
}

.excom-webteam .card-content {
    display: contents;
}

.excom-webteam-fallback {
    width: min(720px, 100%);
    margin: 90px auto 0;
    padding: 34px;
    border: 1px solid rgba(var(--excom-accent-rgb), 0.25);
    border-radius: 18px;
    text-align: center;
}

.excom-webteam-fallback a {
    color: var(--excom-accent);
}

.committee-roster-standardized :is(.committee-grid, .teachers, .top-counselors, .top-advisors) {
    width: min(1120px, 100%);
    max-width: 1120px;
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 24px !important;
    margin: 44px auto 28px !important;
    padding-inline: 0 !important;
    text-align: center;
}

.excom-source-roster > .committee-grid,
.excom-source-roster > .container > .committee-grid {
    margin-top: 0 !important;
}

.committee-roster-standardized .teachers.single {
    width: min(1120px, 100%) !important;
    max-width: 1120px !important;
}

.committee-roster-standardized .top-advisors {
    margin: 0 !important;
}

.committee-roster-standardized :is(.committee-grid, .teachers, .top-counselors, .top-advisors) > .committee-card {
    box-sizing: border-box;
    width: calc((100% - 48px) / 3) !important;
    min-width: 0;
    max-width: 350px !important;
    flex: 0 1 calc((100% - 48px) / 3) !important;
}

/* Explicit hierarchy rows prevent separate leadership levels from wrapping
   together simply because space remains in the preceding row. */
.committee-roster-standardized .committee-grid.committee-tier-layout {
    flex-flow: column nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: clamp(28px, 4vw, 44px) !important;
}

.committee-roster-standardized .committee-tier-row {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: center;
    gap: 24px;
    margin: 0;
    padding: 0;
}

.committee-roster-standardized .committee-tier-row > .committee-card {
    box-sizing: border-box;
    width: calc((100% - 48px) / 3) !important;
    min-width: 0;
    max-width: 350px !important;
    flex: 0 1 calc((100% - 48px) / 3) !important;
}

.committee-roster-standardized .committee-tier-row:is(
    [data-committee-tier="counselor"],
    [data-committee-tier="chair"],
    [data-committee-tier="secretariat"]
) > .committee-card {
    width: min(100%, 350px) !important;
    flex: 0 1 350px !important;
}

/* A tier split across rows sizes every one of its rows off the widest, so a
   4 + 3 advisory panel keeps both lines on the same card width. */
.committee-roster-standardized .committee-tier-row[data-row-basis="4"] > .committee-card {
    width: calc((100% - 72px) / 4) !important;
    max-width: 280px !important;
    flex: 0 1 calc((100% - 72px) / 4) !important;
}

.committee-roster-standardized .committee-card {
    position: relative;
    isolation: isolate;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26px 23px 22px !important;
    overflow: hidden;
    border: 1px solid rgba(var(--committee-accent-rgb), 0.3) !important;
    border-radius: 16px !important;
    color: #eaf5ff;
    background:
        linear-gradient(145deg, rgba(var(--committee-accent-rgb), 0.07), rgba(255, 255, 255, 0.018)),
        rgba(0, 16, 32, 0.84) !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-align: center;
    transition: transform 0.28s cubic-bezier(.22, 1, .36, 1),
        border-color 0.25s ease,
        box-shadow 0.25s ease !important;
}

.committee-roster-standardized .committee-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--committee-accent), transparent);
    opacity: 0.75;
}

@media (hover: hover) and (pointer: fine) {
    .committee-roster-standardized .committee-card:hover {
        transform: translateY(-6px) !important;
        border-color: rgba(var(--committee-accent-rgb), 0.62) !important;
        box-shadow: 0 20px 44px rgba(0, 0, 0, 0.3),
            0 0 24px rgba(var(--committee-accent-rgb), 0.15) !important;
    }
}

.committee-roster-standardized .committee-img,
.committee-roster-standardized .committee-avatar-fallback {
    order: 0;
    box-sizing: border-box;
    width: 116px !important;
    height: 116px !important;
    flex: 0 0 116px;
    margin: 0 auto 18px !important;
    border: 2px solid rgba(var(--committee-accent-rgb), 0.78) !important;
    border-radius: 50% !important;
    background: rgba(var(--committee-accent-rgb), 0.1);
    box-shadow: 0 0 0 5px rgba(var(--committee-accent-rgb), 0.07),
        0 10px 24px rgba(0, 0, 0, 0.28) !important;
}

.committee-roster-standardized .committee-img {
    display: block;
    object-fit: cover !important;
    object-position: center;
}

.committee-roster-standardized .committee-card.uses-avatar-fallback .committee-img {
    object-position: center;
    background: #efefef;
}

.committee-roster-standardized .committee-avatar-fallback {
    display: none;
    place-items: center;
    color: #fff;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.16), transparent 40%),
        linear-gradient(145deg, rgba(var(--committee-accent-rgb), 0.38), rgba(0, 16, 32, 0.95));
}

.committee-roster-standardized .committee-card.has-image-error .committee-img {
    display: none !important;
}

.committee-roster-standardized .committee-card.has-image-error .committee-avatar-fallback {
    display: grid;
}

.committee-roster-standardized .committee-person-name {
    order: 1;
    min-height: 2.55em;
    display: grid;
    place-items: center;
    margin: 0 0 7px !important;
    color: #fff !important;
    font-size: 1.04rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    line-height: 1.27 !important;
}

.committee-roster-standardized .committee-person-role {
    order: 2;
    min-height: 2.6em;
    display: grid;
    place-items: start center;
    margin: 0 0 7px !important;
    color: var(--committee-accent) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    line-height: 1.38 !important;
}

.committee-roster-standardized .committee-person-detail,
.committee-roster-standardized .committee-dept {
    order: 3;
    margin: 1px 0 !important;
    color: rgba(220, 237, 252, 0.72) !important;
    font-size: 0.79rem !important;
    line-height: 1.42 !important;
}

.committee-contact-actions {
    order: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 17px;
}

.committee-contact-button {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(var(--committee-accent-rgb), 0.36);
    border-radius: 50%;
    color: #eaf7ff;
    background: rgba(var(--committee-accent-rgb), 0.08);
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease,
        border-color 0.2s ease, background 0.2s ease;
}

.committee-contact-button:is(:hover, :focus-visible),
.committee-contact-button.is-copied {
    border-color: var(--committee-accent);
    color: #fff;
    background: rgba(var(--committee-accent-rgb), 0.22);
    transform: translateY(-2px);
}

.committee-contact-button:focus-visible {
    outline: 3px solid rgba(var(--committee-accent-rgb), 0.45);
    outline-offset: 3px;
}

.committee-contact-button.is-unavailable {
    opacity: 0.44;
    cursor: not-allowed;
}

.committee-contact-status {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 5000;
    max-width: min(360px, calc(100vw - 36px));
    padding: 12px 16px;
    border: 1px solid rgba(60, 242, 255, 0.35);
    border-radius: 10px;
    color: #fff;
    background: rgba(0, 18, 36, 0.96);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.committee-contact-status.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 900px) {
    .committee-roster-standardized :is(.committee-grid, .teachers, .top-counselors, .top-advisors) > .committee-card {
        width: calc((100% - 20px) / 2) !important;
        max-width: 360px !important;
        flex-basis: calc((100% - 20px) / 2) !important;
    }

    .committee-roster-standardized .committee-tier-row > .committee-card,
    .committee-roster-standardized .committee-tier-row[data-row-basis] > .committee-card {
        width: calc((100% - 24px) / 2) !important;
        max-width: 360px !important;
        flex-basis: calc((100% - 24px) / 2) !important;
    }

    .committee-roster-standardized .committee-tier-row:is(
        [data-committee-tier="counselor"],
        [data-committee-tier="chair"],
        [data-committee-tier="secretariat"]
    ) > .committee-card {
        width: min(100%, 360px) !important;
        flex-basis: 360px !important;
    }
}

@media (max-width: 580px) {
    .committee-roster-standardized :is(.committee-grid, .teachers, .top-counselors, .top-advisors) {
        gap: 18px !important;
    }

    .committee-roster-standardized :is(.committee-grid, .teachers, .top-counselors, .top-advisors) > .committee-card {
        width: min(100%, 390px) !important;
        max-width: 390px !important;
        flex-basis: 100% !important;
    }

    .committee-roster-standardized .committee-tier-row > .committee-card,
    .committee-roster-standardized .committee-tier-row[data-row-basis] > .committee-card,
    .committee-roster-standardized .committee-tier-row:is(
        [data-committee-tier="counselor"],
        [data-committee-tier="chair"],
        [data-committee-tier="secretariat"]
    ) > .committee-card {
        width: min(100%, 390px) !important;
        max-width: 390px !important;
        flex-basis: 100% !important;
    }

    .committee-roster-standardized .committee-card {
        min-height: 330px;
        padding: 23px 20px 20px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .committee-roster-standardized .committee-card,
    .committee-contact-button,
    .committee-contact-status {
        transition: none !important;
    }

    .committee-roster-standardized .committee-card:hover,
    .committee-contact-button:is(:hover, :focus-visible) {
        transform: none !important;
    }
}