/* Block: team-grid */
.team-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: calc(36 * var(--tgc-u));
    max-width: var(--tgc-container);
    margin: calc(40 * var(--tgc-u)) auto 0;
    padding: 0 var(--tgc-gutter) calc(40 * var(--tgc-u));
    list-style: none;
}

.team-grid__item {
    flex: 0 1 calc(294 * var(--tgc-u));
    min-width: 0;
}

/* Every other portrait drops down to break the line up. */
.team-grid__item:nth-child(even) {
    margin-top: calc(42 * var(--tgc-u));
}

.team-card {
    margin: 0;
    position: relative;
}

.team-card__photo {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--tgc-radius);
    overflow: hidden;
    background-color: var(--tgc-violet-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.team-card__initials {
    font-family: var(--tgc-font-display);
    font-size: calc(34 * var(--tgc-ut));
    font-weight: 500;
    color: var(--tgc-violet);
    letter-spacing: 0.04em;
}

/*
 * Figma (node 145:1264): a 278 x 60 white pill at radius 40, sitting inside
 * the 298 x 401 card with 9 to spare beneath it — not an 8px box overhanging
 * the bottom edge — and with no shadow.
 */
.team-card__label {
    position: absolute;
    left: calc(10 * var(--tgc-u));
    right: calc(10 * var(--tgc-u));
    bottom: calc(9 * var(--tgc-u));
    display: flex;
    flex-direction: column;
    gap: calc(3 * var(--tgc-u));
    padding: calc(12 * var(--tgc-u)) calc(14 * var(--tgc-u)) calc(9 * var(--tgc-u));
    border-radius: calc(40 * var(--tgc-u));
    background-color: var(--theme-white);
    text-align: center;
}

.team-card__name {
    font-size: calc(16 * var(--tgc-ut));
    font-weight: 600;
    line-height: calc(18 * var(--tgc-ut));
    color: var(--tgc-ink);
}

.team-card__role {
    font-size: calc(16 * var(--tgc-ut));
    font-weight: 500;
    line-height: calc(18 * var(--tgc-ut));
    color: var(--tgc-ink-muted);
}

/*
 * Opens the profile popup for the mouse. It covers the card rather than
 * wrapping it, so the <figure> keeps its <figcaption> as a direct child; the
 * card lifts slightly to show it is live, and lifts the same way while its
 * "view bio" button is hovered or focused.
 */
.team-card__trigger {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: calc(10 * var(--tgc-u));
}

.team-card:has(.team-card__trigger) {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.team-card:has(.team-card__trigger:hover),
.team-grid__item:has(.team-grid__bio-button:hover) .team-card,
.team-grid__item:has(.team-grid__bio-button:focus-visible) .team-card {
    transform: translateY(calc(-6 * var(--tgc-u)));
}

/*
 * "View bio" (Figma node 472:2437): the arrow button, centred 12 under the
 * card, with a Medium label on 18px sides rather than the header's SemiBold
 * on 20.
 */
.team-grid__actions {
    display: flex;
    justify-content: center;
    margin-top: calc(12 * var(--tgc-u));
}

.team-grid__bio-button {
    --ab-pad-x: calc(18 * var(--tgc-u));
}

.team-grid__bio-button .arrow-button__label {
    font-weight: 500;
}

/* The pill grows by the ring on hover; giving that width back keeps the
   button centred instead of sliding left. */
.team-grid__bio-button:hover,
.team-grid__bio-button:focus-visible {
    margin-right: calc(-1 * (var(--ab-ring) + var(--ab-inset)));
}

@media (prefers-reduced-motion: reduce) {
    .team-card:has(.team-card__trigger) {
        transition: none;
    }

    .team-card:has(.team-card__trigger:hover),
    .team-grid__item:has(.team-grid__bio-button:hover) .team-card,
    .team-grid__item:has(.team-grid__bio-button:focus-visible) .team-card {
        transform: none;
    }
}

/*
 * Guarded cards (see includes/guard.php): the name and portrait are painted
 * into canvas at runtime, so both slots have to hold their space beforehand
 * and inherit the type the painter reads back off them.
 */
/* The guarded portrait: a frame for the tile layers scripts/tgc-guard.js
   paints, each placed in percentages of it. */
.team-card__canvas {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.team-card__canvas > canvas {
    position: absolute;
    display: block;
}

/*
 * A painted canvas is still an image to the browser, so right-click and
 * long-press offer "Save image as" / "Copy image" on it. Letting the pointer
 * pass through lands those on the frame behind instead, which has no image of
 * its own: the page's normal menu opens, just without the save options. The
 * card's click target is the trigger button over it, so nothing else changes.
 * The popup's canvases get the same in styles/blocks/team-bio.css.
 */
.team-card__canvas,
.team-card__name--canvas {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.team-card__name--canvas {
    display: block;
    height: calc(18 * var(--tgc-u));
    /* The painter sizes the canvas to the text, and a block box does not
       answer to the label's text-align — so it centres itself. */
    margin-inline: auto;
}

.team-card--guarded:not(.is-painted) .team-card__name--canvas {
    /* Nothing to show yet; keep the caption from jumping. */
    min-width: calc(120 * var(--tgc-u));
}

.team-card__photo--empty {
    background-color: var(--tgc-violet-soft);
}

@media (max-width: 968px) {
    .team-grid {
        flex-wrap: wrap;
        gap: 24px 16px;
        padding: 0 20px 40px;
    }

    .team-grid__item {
        flex: 0 1 calc(50% - 8px);
    }

    .team-grid__item:nth-child(even) {
        margin-top: 0;
    }
}